Spaces:

r0cketboy
/

anycoder-5e99e41e

Running

App Files Files Community

r0cketboy commited on Dec 8, 2025

Commit

21ea3d5

verified ·

1 Parent(s): 979c38e

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +308 -228

index.html CHANGED Viewed

@@ -1,248 +1,328 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ASCII Wave Animation</title>
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            background-color: #000;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            font-family: 'JetBrains Mono', monospace;
-            overflow: hidden;
-        }
-        header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            padding: 1rem;
-            text-align: center;
-            z-index: 100;
-        }
-        header a {
-            color: #333;
-            text-decoration: none;
-            font-size: 0.8rem;
-            letter-spacing: 2px;
-            transition: color 0.3s ease;
-        }
-        header a:hover {
-            color: #666;
-        }
-        #ascii-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 0;
-            line-height: 1.2;
-        }
-        .ascii-row {
-            display: flex;
-            gap: 0;
-        }
-        .ascii-char {
-            width: clamp(8px, 2vw, 16px);
-            height: clamp(12px, 2.5vw, 20px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: clamp(8px, 2vw, 16px);
-            color: #0f0;
-            transition: transform 0.1s ease-out;
-        }
-        @media (max-width: 768px) {
-            .ascii-char {
-                width: 6px;
-                height: 10px;
-                font-size: 6px;
-            }
-        }
-        @media (max-width: 480px) {
-            .ascii-char {
-                width: 5px;
-                height: 8px;
-                font-size: 5px;
-            }
-        }
-    </style>
 </head>
 <body>
-    <header>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
-    </header>
-    <div id="ascii-container"></div>
-    <script>
-        const container = document.getElementById('ascii-container');
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%&*!?<>[]{}|/\\~^';
-        let cols, rows;
-        let grid = [];
-        let time = 0;
-        function calculateGridSize() {
-            const charWidth = Math.max(8, Math.min(16, window.innerWidth * 0.02));
-            const charHeight = Math.max(12, Math.min(20, window.innerWidth * 0.025));
-            cols = Math.floor(window.innerWidth / charWidth);
-            rows = Math.floor(window.innerHeight / charHeight);
-            // Ensure minimum grid size
-            cols = Math.max(40, Math.min(cols, 120));
-            rows = Math.max(20, Math.min(rows, 60));
-        }
-        function getRandomChar() {
-            return characters[Math.floor(Math.random() * characters.length)];
-        }
-        function createGrid() {
-            container.innerHTML = '';
-            grid = [];
-            for (let y = 0; y < rows; y++) {
-                const row = document.createElement('div');
-                row.className = 'ascii-row';
-                const rowData = [];
-                for (let x = 0; x < cols; x++) {
-                    const charSpan = document.createElement('span');
-                    charSpan.className = 'ascii-char';
-                    charSpan.textContent = getRandomChar();
-                    row.appendChild(charSpan);
-                    rowData.push({
-                        element: charSpan,
-                        baseChar: getRandomChar(),
-                        changeTimer: Math.random() * 100
-                    });
-                }
-                container.appendChild(row);
-                grid.push(rowData);
-            }
         }
-        function hslToRgb(h, s, l) {
-            let r, g, b;
-            if (s === 0) {
-                r = g = b = l;
-            } else {
-                const hue2rgb = (p, q, t) => {
-                    if (t < 0) t += 1;
-                    if (t > 1) t -= 1;
-                    if (t < 1/6) return p + (q - p) * 6 * t;
-                    if (t < 1/2) return q;
-                    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
-                    return p;
-                };
-                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-                const p = 2 * l - q;
-                r = hue2rgb(p, q, h + 1/3);
-                g = hue2rgb(p, q, h);
-                b = hue2rgb(p, q, h - 1/3);
-            }
-            return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
         }
-        function animate() {
-            time += 0.03;
-            for (let y = 0; y < rows; y++) {
-                for (let x = 0; x < cols; x++) {
-                    const cell = grid[y][x];
-                    // Multiple wave patterns combined
-                    const wave1 = Math.sin(x * 0.1 + time) * 0.5;
-                    const wave2 = Math.sin(y * 0.08 + time * 1.3) * 0.3;
-                    const wave3 = Math.sin((x + y) * 0.05 + time * 0.7) * 0.4;
-                    const wave4 = Math.cos(x * 0.15 - time * 0.5) * Math.sin(y * 0.12 + time * 0.8) * 0.3;
-                    // Radial wave from center
-                    const centerX = cols / 2;
-                    const centerY = rows / 2;
-                    const distFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
-                    const radialWave = Math.sin(distFromCenter * 0.15 - time * 2) * 0.4;
-                    const combinedWave = wave1 + wave2 + wave3 + wave4 + radialWave;
-                    // Calculate brightness based on wave
-                    const brightness = 0.3 + (combinedWave + 1) * 0.35;
-                    // Calculate hue shift for color variation
-                    const hue = (120 + combinedWave * 60 + time * 10) % 360;
-                    const saturation = 0.8 + combinedWave * 0.2;
-                    const lightness = Math.max(0.1, Math.min(0.7, brightness));
-                    const [r, g, b] = hslToRgb(hue / 360, saturation, lightness);
-                    // Apply transformations
-                    const scale = 0.8 + (combinedWave + 1) * 0.3;
-                    const translateY = combinedWave * 5;
-                    cell.element.style.color = `rgb(${r}, ${g}, ${b})`;
-                    cell.element.style.transform = `translateY(${translateY}px) scale(${scale})`;
-                    cell.element.style.opacity = Math.max(0.2, brightness);
-                    // Randomly change characters
-                    cell.changeTimer += 0.1;
-                    if (cell.changeTimer > 50 + Math.random() * 100) {
-                        cell.element.textContent = getRandomChar();
-                        cell.changeTimer = 0;
-                    }
-                    // More frequent changes at wave peaks
-                    if (combinedWave > 0.8 && Math.random() < 0.1) {
-                        cell.element.textContent = getRandomChar();
-                    }
-                }
             }
-            requestAnimationFrame(animate);
-        }
-        function init() {
-            calculateGridSize();
-            createGrid();
-            animate();
         }
-        // Handle window resize
-        let resizeTimeout;
-        window.addEventListener('resize', () => {
-            clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                calculateGridSize();
-                createGrid();
-            }, 250);
-        });
-        // Initialize
-        init();
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ASCII Wave Animation</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      background-color: #000;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-family: 'JetBrains Mono', monospace;
+      overflow: hidden;
+    }
+    header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      padding: 1rem;
+      text-align: center;
+      z-index: 100;
+    }
+    header a {
+      color: #444;
+      text-decoration: none;
+      font-size: 0.8rem;
+      letter-spacing: 2px;
+      transition: color 0.3s ease;
+    }
+    header a:hover {
+      color: #888;
+    }
+    #ascii-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 0;
+      line-height: 1.2;
+      cursor: none;
+    }
+    .ascii-row {
+      display: flex;
+      gap: 0;
+    }
+    .ascii-char {
+      width: clamp(8px, 2vw, 16px);
+      height: clamp(12px, 2.5vw, 20px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: clamp(8px, 2vw, 16px);
+      color: #fff;
+      transition: transform 0.15s ease-out, text-shadow 0.15s ease-out;
+    }
+    @media (max-width: 768px) {
+      .ascii-char {
+        width: 6px;
+        height: 10px;
+        font-size: 6px;
+      }
+    }
+    @media (max-width: 480px) {
+      .ascii-char {
+        width: 5px;
+        height: 8px;
+        font-size: 5px;
+      }
+    }
+  </style>
 </head>
 <body>
+  <header>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+  </header>
+  <div id="ascii-container"></div>
+  <script>
+    const container = document.getElementById('ascii-container');
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%&*!?<>[]{}|/\\~^';
+    let cols, rows;
+    let grid = [];
+    let time = 0;
+    let mouseX = -1000;
+    let mouseY = -1000;
+    let targetMouseX = -1000;
+    let targetMouseY = -1000;
+    let isMouseInside = false;
+    function calculateGridSize() {
+      const charWidth = Math.max(8, Math.min(16, window.innerWidth * 0.02));
+      const charHeight = Math.max(12, Math.min(20, window.innerWidth * 0.025));
+      cols = Math.floor(window.innerWidth / charWidth);
+      rows = Math.floor(window.innerHeight / charHeight);
+      // Ensure minimum grid size
+      cols = Math.max(40, Math.min(cols, 120));
+      rows = Math.max(20, Math.min(rows, 60));
+    }
+    function getRandomChar() {
+      return characters[Math.floor(Math.random() * characters.length)];
+    }
+    function createGrid() {
+      container.innerHTML = '';
+      grid = [];
+      for (let y = 0; y < rows; y++) {
+        const row = document.createElement('div');
+        row.className = 'ascii-row';
+        const rowData = [];
+        for (let x = 0; x < cols; x++) {
+          const charSpan = document.createElement('span');
+          charSpan.className = 'ascii-char';
+          charSpan.textContent = getRandomChar();
+          row.appendChild(charSpan);
+          rowData.push({
+            element: charSpan,
+            baseChar: getRandomChar(),
+            changeTimer: Math.random() * 100,
+            x: 0,
+            y: 0
+          });
         }
+        container.appendChild(row);
+        grid.push(rowData);
+      }
+      // Calculate positions after grid is created
+      updateCellPositions();
+    }
+    function updateCellPositions() {
+      for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+          const cell = grid[y][x];
+          const rect = cell.element.getBoundingClientRect();
+          cell.x = rect.left + rect.width / 2;
+          cell.y = rect.top + rect.height / 2;
         }
+      }
+    }
+    function animate() {
+      time += 0.03;
+      // Smooth mouse following
+      mouseX += (targetMouseX - mouseX) * 0.15;
+      mouseY += (targetMouseY - mouseY) * 0.15;
+      for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+          const cell = grid[y][x];
+          // Multiple wave patterns combined
+          const wave1 = Math.sin(x * 0.1 + time) * 0.5;
+          const wave2 = Math.sin(y * 0.08 + time * 1.3) * 0.3;
+          const wave3 = Math.sin((x + y) * 0.05 + time * 0.7) * 0.4;
+          const wave4 = Math.cos(x * 0.15 - time * 0.5) * Math.sin(y * 0.12 + time * 0.8) * 0.3;
+          // Radial wave from center
+          const centerX = cols / 2;
+          const centerY = rows / 2;
+          const distFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+          const radialWave = Math.sin(distFromCenter * 0.15 - time * 2) * 0.4;
+          let combinedWave = wave1 + wave2 + wave3 + wave4 + radialWave;
+          // Mouse interaction
+          let mouseInfluence = 0;
+          let pushX = 0;
+          let pushY = 0;
+          if (isMouseInside) {
+            const dx = cell.x - mouseX;
+            const dy = cell.y - mouseY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const maxDistance = 150;
+            if (distance < maxDistance) {
+              const strength = 1 - (distance / maxDistance);
+              mouseInfluence = strength * strength;
+              // Push characters away from mouse
+              const angle = Math.atan2(dy, dx);
+              const pushStrength = mouseInfluence * 20;
+              pushX = Math.cos(angle) * pushStrength;
+              pushY = Math.sin(angle) * pushStrength;
+              // Add ripple effect around mouse
+              combinedWave += Math.sin(distance * 0.1 - time * 4) * mouseInfluence * 0.8;
             }
+          }
+          // Calculate brightness based on wave and mouse
+          const baseBrightness = 0.2 + (combinedWave + 1) * 0.3;
+          const brightness = Math.min(1, baseBrightness + mouseInfluence * 0.8);
+          // Apply transformations
+          const baseScale = 0.7 + (combinedWave + 1) * 0.25;
+          const scale = baseScale + mouseInfluence * 0.5;
+          const translateY = combinedWave * 5 + pushY;
+          const translateX = pushX;
+          // White color with varying opacity
+          const alpha = Math.max(0.15, Math.min(1, brightness));
+          cell.element.style.color = `rgba(255, 255, 255, ${alpha})`;
+          cell.element.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
+          // Add glow effect near mouse
+          if (mouseInfluence > 0.3) {
+            const glowIntensity = mouseInfluence * 15;
+            cell.element.style.textShadow = `0 0 ${glowIntensity}px rgba(255, 255, 255, ${mouseInfluence})`;
+          } else {
+            cell.element.style.textShadow = 'none';
+          }
+          // Randomly change characters
+          cell.changeTimer += 0.1 + mouseInfluence * 0.5;
+          if (cell.changeTimer > 50 + Math.random() * 100) {
+            cell.element.textContent = getRandomChar();
+            cell.changeTimer = 0;
+          }
+          // More frequent changes at wave peaks and near mouse
+          if ((combinedWave > 0.8 || mouseInfluence > 0.5) && Math.random() < 0.15) {
+            cell.element.textContent = getRandomChar();
+          }
         }
+      }
+      requestAnimationFrame(animate);
+    }
+    function init() {
+      calculateGridSize();
+      createGrid();
+      animate();
+    }
+    // Mouse event handlers
+    document.addEventListener('mousemove', (e) => {
+      targetMouseX = e.clientX;
+      targetMouseY = e.clientY;
+      isMouseInside = true;
+    });
+    document.addEventListener('mouseleave', () => {
+      isMouseInside = false;
+      targetMouseX = -1000;
+      targetMouseY = -1000;
+    });
+    document.addEventListener('mouseenter', () => {
+      isMouseInside = true;
+    });
+    // Touch support for mobile
+    document.addEventListener('touchmove', (e) => {
+      if (e.touches.length > 0) {
+        targetMouseX = e.touches[0].clientX;
+        targetMouseY = e.touches[0].clientY;
+        isMouseInside = true;
+      }
+    });
+    document.addEventListener('touchstart', (e) => {
+      if (e.touches.length > 0) {
+        targetMouseX = e.touches[0].clientX;
+        targetMouseY = e.touches[0].clientY;
+        mouseX = targetMouseX;
+        mouseY = targetMouseY;
+        isMouseInside = true;
+      }
+    });
+    document.addEventListener('touchend', () => {
+      isMouseInside = false;
+      targetMouseX = -1000;
+      targetMouseY = -1000;
+    });
+    // Handle window resize
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        calculateGridSize();
+        createGrid();
+      }, 250);
+    });
+    // Update cell positions on scroll (if any)
+    window.addEventListener('scroll', updateCellPositions);
+    // Initialize
+    init();
+  </script>
 </body>
 </html>