addin dev folder

2025-03-04 02:25:35 +00:00
parent 8d352cc634
commit 982d7340f3
20 changed files with 15813 additions and 0 deletions
--- a/dev/stars/index.html
+++ b/dev/stars/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+
+    <style>
+      body{
+        background-color: #1f1e27;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #myCanvas {
+        position: absolute;
+        top: 0; 
+        left: 0; 
+        z-index: 1;
+      }
+
+      #valuesForm {
+        z-index: 2; 
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 300px;
+        text-align: center;
+      }
+
+      #valuesForm input, #valuesForm button {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 50px;
+        width: 50%;
+        background-color: rgba(0, 0, 0, 0);
+        color: #71627a;
+        text-align: center;
+        outline: #71627a 2px solid;
+        border-radius: 2px;
+        padding: 5px;
+        font-size: 1.5em;
+        overflow: hidden;
+        transition: outline-offset 0.5s;
+        border: none;
+        font-family: monospace;
+      }
+
+      #valuesForm button:focus, #valuesForm button:hover, #valuesForm input:focus, #valuesForm input:hover {
+        transition: outline-offset 0.5s;
+        outline-offset: 10px;
+      }
+
+      #valuesForm h1 {
+        color: #71627a;
+      }
+
+
+    </style>
+  </head>
+  <body>
+
+    <form id="valuesForm">
+      <h1>STARS</h1>
+      <input type="text" id="amtInput" placeholder="Amount">
+      <input type="text" id="maxSizeInput" placeholder="Max Size">
+      <button type="submit">Redraw</button>
+    </form>
+
+    <canvas id="myCanvas"></canvas>
+    
+    
+    <script>
+
+      const form = document.getElementById("valuesForm");
+      form.addEventListener("submit", function(event)
+      {
+        event.preventDefault();
+
+        amount = document.getElementById("amtInput").value;
+        maxSize = document.getElementById("maxSizeInput").value;
+
+        Draw();
+      });
+
+      const c = document.getElementById("myCanvas");
+      const ctx = c.getContext("2d");
+
+      var amount = 2000;
+      var maxSize = 5;
+      var boundsX;
+      var boundsY;
+
+      function Setup()
+      {
+        c.width = window.innerWidth;
+        c.height = window.innerHeight;
+        boundsX = c.width;
+        boundsY = c.height;
+      }
+
+      function Draw()
+      {
+        Setup();
+        for (i=0; i<amount; i++)
+        {
+          size = rand(maxSize);
+          MakeRect(rand(boundsX), rand(boundsY), size, size);
+        }
+      }
+
+      function MakeRect(posX, posY, sizeX, sizeY)
+      {
+        ctx.beginPath();
+        ctx.fillStyle = "#71627a";
+        ctx.fillRect(posX, posY, sizeX, sizeY);
+        ctx.stroke();
+      }
+
+      function rand(max)
+      {
+        return Math.floor(Math.random() * max);
+      }
+
+      function resize()
+      {
+        var canvas = document.getElementById('myCanvas');
+        var canvasRatio = canvas.height / canvas.width;
+        var windowRatio = window.innerHeight / window.innerWidth;
+        var width;
+        var height;
+
+        if (windowRatio < canvasRatio) {
+            height = window.innerHeight;
+            width = height / canvasRatio;
+        } else {
+            width = window.innerWidth;
+            height = width * canvasRatio;
+        }
+
+        canvas.style.width = width + 'px';
+        canvas.style.height = height + 'px';
+
+        Draw();
+      }
+      
+      window.addEventListener('resize', resize, false);
+
+      Draw();
+
+    </script>
+
+  </body>
+</html>