added scrolling completely

frontend/assets/bg.svg

@@ -0,0 +1,293 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="350mm"
+   height="250mm"
+   viewBox="0 0 350 250"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   sodipodi:docname="bg.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#000000"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:export-bgcolor="#00000000"
+     inkscape:zoom="0.48315491"
+     inkscape:cx="734.75399"
+     inkscape:cy="595.04724"
+     inkscape:window-width="1672"
+     inkscape:window-height="957"
+     inkscape:window-x="816"
+     inkscape:window-y="1259"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <rect
+       x="1105.2356"
+       y="300.11078"
+       width="161.4389"
+       height="53.812968"
+       id="rect4" />
+    <rect
+       x="203.42924"
+       y="897.13763"
+       width="220.99149"
+       height="62.931351"
+       id="rect3" />
+    <rect
+       x="140.49789"
+       y="166.84126"
+       width="339.53659"
+       height="86.347672"
+       id="rect2" />
+    <rect
+       x="125.8627"
+       y="753.71271"
+       width="357.09882"
+       height="87.811188"
+       id="rect1" />
+    <rect
+       x="125.8627"
+       y="753.71271"
+       width="357.09882"
+       height="87.811188"
+       id="rect1-7" />
+    <rect
+       x="125.8627"
+       y="753.71271"
+       width="357.09882"
+       height="87.811188"
+       id="rect1-2" />
+    <rect
+       x="125.8627"
+       y="753.71271"
+       width="357.09882"
+       height="87.811188"
+       id="rect1-9" />
+    <rect
+       x="125.8627"
+       y="753.71271"
+       width="357.09882"
+       height="87.811188"
+       id="rect1-6" />
+    <rect
+       x="140.49789"
+       y="166.84126"
+       width="339.53659"
+       height="86.347672"
+       id="rect2-0" />
+    <rect
+       x="140.49789"
+       y="166.84126"
+       width="339.53659"
+       height="86.347672"
+       id="rect2-2" />
+    <rect
+       x="140.49789"
+       y="166.84126"
+       width="339.53659"
+       height="86.347672"
+       id="rect2-2-6" />
+    <rect
+       x="1105.2356"
+       y="300.11078"
+       width="161.4389"
+       height="53.812969"
+       id="rect4-4" />
+    <rect
+       x="1105.2356"
+       y="300.11078"
+       width="161.4389"
+       height="53.812969"
+       id="rect4-3" />
+    <rect
+       x="1105.2356"
+       y="300.11078"
+       width="161.4389"
+       height="53.812969"
+       id="rect4-3-2" />
+    <rect
+       x="125.8627"
+       y="753.71271"
+       width="357.09882"
+       height="87.811188"
+       id="rect1-2-4" />
+    <rect
+       x="1105.2356"
+       y="300.11078"
+       width="161.4389"
+       height="53.812969"
+       id="rect4-3-3" />
+    <rect
+       x="1105.2356"
+       y="300.11078"
+       width="161.4389"
+       height="53.812969"
+       id="rect6" />
+    <rect
+       x="140.49789"
+       y="166.84126"
+       width="339.53659"
+       height="86.347672"
+       id="rect2-2-6-7" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26273149,-0.03124901,0.03124901,0.26273149,9.6318685,1.010781)"
+       id="text1"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="125.86328"
+         y="784.2323"
+         id="tspan7">Meow</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26223034,0.03520772,-0.03520772,0.26223034,181.67491,-73.913601)"
+       id="text1-3"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-7);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="125.86328"
+         y="784.2323"
+         id="tspan8">Meow</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.2637851,0.02053679,-0.02053679,0.2637851,9.5700315,-96.792778)"
+       id="text1-1"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="125.86328"
+         y="784.2323"
+         id="tspan9">Meow</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26279038,-0.03074987,0.03074987,0.26279038,54.519132,-87.602003)"
+       id="text1-1-6"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-2-4);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="125.86328"
+         y="784.2323"
+         id="tspan10">Meow</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26273149,-0.03124901,0.03124901,0.26273149,160.00124,-138.94545)"
+       id="text1-6"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-9);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="125.86328"
+         y="784.2323"
+         id="tspan11">Meow</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26430785,-0.01207042,0.01207042,0.26430785,123.83488,0.36913542)"
+       id="text1-8"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-6);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="125.86328"
+         y="784.2323"
+         id="tspan12">Meow</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26458333,0,0,0.26458333,-21.357022,-13.142783)"
+       id="text2"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="140.49805"
+         y="197.36121"
+         id="tspan13">gock &lt;333</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26309895,-0.02798714,0.02798714,0.26309895,43.481131,24.812837)"
+       id="text2-3"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-0);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="140.49805"
+         y="197.36121"
+         id="tspan14">gock &lt;333</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26094671,-0.04371676,0.04371676,0.26094671,222.97079,141.94755)"
+       id="text2-8"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="140.49805"
+         y="197.36121"
+         id="tspan15">gock &lt;333</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26260965,-0.03225692,0.03225692,0.26260965,163.16927,187.98351)"
+       id="text2-8-2"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-2-6);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="140.49805"
+         y="197.36121"
+         id="tspan16">gock &lt;333</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26261141,0.03224256,-0.03224256,0.26261141,-26.436727,169.44502)"
+       id="text2-8-2-4"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-2-6-7);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="140.49805"
+         y="197.36121"
+         id="tspan17">gock &lt;333</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="scale(0.26458333)"
+       id="text3"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect3);display:inline;fill:#ffffff;stroke-width:4.91339" />
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26458333,0,0,0.26458333,20.26179,-16.976094)"
+       id="text4"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="1105.2363"
+         y="330.63074"
+         id="tspan18">Gay :3</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.25941349,0.05204788,-0.05204788,0.25941349,14.622996,-20.113934)"
+       id="text4-8"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-4);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="1105.2363"
+         y="330.63074"
+         id="tspan19">Gay :3</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26458333,0,0,0.26458333,-185.03108,79.899068)"
+       id="text4-1"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-3);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="1105.2363"
+         y="330.63074"
+         id="tspan20">Gay :3</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26300551,-0.02885206,0.02885206,0.26300551,-153.43986,-14.753595)"
+       id="text4-1-6"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-3-2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="1105.2363"
+         y="330.63074"
+         id="tspan21">Gay :3</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.25999838,0.04904269,-0.04904269,0.25999838,-255.80374,45.596021)"
+       id="text4-1-4"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-3-3);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="1105.2363"
+         y="330.63074"
+         id="tspan22">Gay :3</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.25999838,0.04904269,-0.04904269,0.25999838,-255.80374,45.596021)"
+       id="text6"
+       style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect6);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
+         x="1105.2363"
+         y="330.63074"
+         id="tspan23">Gay :3</tspan></text>
+  </g>
+</svg>

frontend/assets/style.css

@@ -14,6 +14,10 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
+
+    background: url("bg.svg") center center/auto repeat, linear-gradient(
+        to bottom, transparent, pink
+    );
 }
 
 .search-grid {

frontend/index.html

@@ -16,5 +16,28 @@
         </div>
         <input name="q" type="text" class="grid-item" class="search" placeholder="Search DuckDuckGo :3 :3 :3" />
     </form>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const marqueeElement = document.body;
+            let position = 0;
+            const speed = 1; // Adjust speed here (lower is slower)
+            
+            function animateMarquee() {
+                position -= speed;
+                
+                // Reset position when the image has scrolled completely
+                if (Math.abs(position) >= marqueeElement.offsetWidth) {
+                    position = 0;
+                }
+                
+                marqueeElement.style.backgroundPosition = `${position}px 0`;
+                requestAnimationFrame(animateMarquee);
+            }
+            
+            // Start the animation
+            animateMarquee();
+        });
+    </script>
 </body>
 </html>