diff --git a/src/snek/static/sandbox.css b/src/snek/static/sandbox.css new file mode 100644 index 0000000..1419fe4 --- /dev/null +++ b/src/snek/static/sandbox.css @@ -0,0 +1,28 @@ +/* each star */ + .star { + position: absolute; + width: 2px; + height: 2px; + background: #fff; + border-radius: 50%; + opacity: 0; + /* flicker animation */ + animation: twinkle ease-in-out infinite; + } + + @keyframes twinkle { + 0%, 100% { opacity: 0; } + 50% { opacity: 1; } + } + + /* optional page content */ + .content { + position: relative; + z-index: 1; + color: #eee; + font-family: sans-serif; + text-align: center; + top: 40%; + transform: translateY(-40%); + } + diff --git a/src/snek/templates/app.html b/src/snek/templates/app.html index 596b5d1..ceef196 100644 --- a/src/snek/templates/app.html +++ b/src/snek/templates/app.html @@ -19,6 +19,7 @@ <script src="/user-list.js"></script> <script src="/message-list.js" type="module"></script> <script src="/chat-input.js" type="module"></script> + <link rel="stylesheet" href="/sandbox.css"> <link rel="stylesheet" href="/user-list.css"> <link rel="stylesheet" href="/base.css"> @@ -78,5 +79,6 @@ let installPrompt = null ; </script> + {% include "sandbox.html" %} </body> </html> diff --git a/src/snek/templates/sandbox.html b/src/snek/templates/sandbox.html new file mode 100644 index 0000000..6fd9b3f --- /dev/null +++ b/src/snek/templates/sandbox.html @@ -0,0 +1,31 @@ + + <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>