feat: add starfield background animation and link sandbox.css to index.html

- Change default theme from dark2 to light1 in gitlog.py - Update server port from 8000 to 8481 - Remove background-color styling from diff line highlights in gitlog.py - Switch index.html body background from #111 to #000 - Add link to /static/sandbox.css stylesheet - Inject JavaScript generating 200 animated star elements with randomized position, size, and flicker timing
2025-05-18 15:48:22 +00:00
parent 3f81cac93e
commit 88530346c5
2 changed files with 37 additions and 6 deletions
@@ -14,7 +14,7 @@
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Segoe UI',sans-serif;
-      background: #111;
+      background: #000;
      color: #eee;
      line-height:1.5;
    }
@@ -187,6 +187,7 @@
      .btn { width: 100%; box-sizing: border-box; text-align:center; }
    }
  </style>
+  <link rel="stylesheet" href="/static/sandbox.css" />
 </head>
 <body>

@@ -284,5 +285,35 @@ snek serve
    <p>&copy; 2025 Snek – Join our global community of developers, testers &amp; AI enthusiasts.</p>
  </footer>

+							<script>
+                            	
+    // number of stars you want
+    const STAR_COUNT = 200;
+    const body = document.body;
+
+    for (let i = 0; i < STAR_COUNT; i++) {
+      const star = document.createElement('div');
+      star.classList.add('star');
+
+      // random position within the viewport
+      star.style.left  = Math.random() * 100 + '%';
+      star.style.top   = Math.random() * 100 + '%';
+
+      // random size (optional)
+      const size = Math.random() * 2 + 1; // between 1px and 3px
+      star.style.width  = size + 'px';
+      star.style.height = size + 'px';
+
+      // random animation timing for natural flicker
+      const duration = Math.random() * 3 + 2;   // 2s–5s
+      const delay    = Math.random() * 5;       // 0s–5s
+      star.style.animationDuration = duration + 's';
+      star.style.animationDelay    = delay + 's';
+
+      body.appendChild(star);
+    }
+							</script>  
+
+	
 </body>
 </html>