split files

2025-11-06 08:18:49 -05:00
parent 368ac295a6
commit fc1e73d874
4 changed files with 209 additions and 110 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Dynamic Gradient Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Dynamic Gradient Generator</h1>
+        
+        <div class="controls">
+            <button onclick="refreshImage()">Refresh Image</button>
+            <button onclick="toggleAutoRefresh()" id="autoRefreshBtn">Start Auto-Refresh (30s)</button>
+        </div>
+        
+        <div class="image-container">
+            <img id="gradientImage" src="gradient.jxl" alt="Dynamic Gradient">
+        </div>
+        
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/web/script.js
+++ b/web/script.js
@@ -0,0 +1,43 @@
+let autoRefreshInterval = null;
+
+function refreshImage() {
+    const img = document.getElementById('gradientImage');
+    img.classList.add('loading');
+    
+    const timestamp = new Date().getTime();
+    img.src = 'gradient.jxl?' + timestamp;
+    
+    img.onload = function() {
+        img.classList.remove('loading');
+        updateStatus('Image refreshed at ' + new Date().toLocaleTimeString());
+    };
+    
+    img.onerror = function() {
+        img.classList.remove('loading');
+        updateStatus('Error loading image', 'error');
+    };
+}
+
+
+function toggleAutoRefresh() {
+    const button = document.getElementById('autoRefreshBtn');
+    
+    if (autoRefreshInterval) {
+        clearInterval(autoRefreshInterval);
+        autoRefreshInterval = null;
+        button.textContent = 'Start Auto-Refresh (30s)';
+        button.classList.remove('danger');
+        updateStatus('Auto-refresh stopped');
+    } else {
+        autoRefreshInterval = setInterval(refreshImage, 30000);
+        button.textContent = 'Stop Auto-Refresh';
+        button.classList.add('danger');
+        updateStatus('Auto-refresh started (30s interval)');
+    }
+}
+
+
+// Auto-refresh when page loads
+document.addEventListener('DOMContentLoaded', function() {
+    refreshImage();
+});
--- a/web/style.css
+++ b/web/style.css
@@ -0,0 +1,109 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 20px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    text-align: center;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    background: rgba(255, 255, 255, 0.1);
+    padding: 30px;
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.image-container {
+    margin: 20px 0;
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    transition: opacity 0.3s ease;
+}
+
+img.loading {
+    opacity: 0.7;
+}
+
+.controls {
+    margin: 20px 0;
+}
+
+button {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 16px;
+    margin: 5px;
+    transition: background 0.3s, transform 0.2s;
+}
+
+button:hover {
+    background: #45a049;
+    transform: translateY(-2px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+button.secondary {
+    background: #2196F3;
+}
+
+button.secondary:hover {
+    background: #1976D2;
+}
+
+button.danger {
+    background: #f44336;
+}
+
+button.danger:hover {
+    background: #d32f2f;
+}
+
+.info {
+    margin-top: 20px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 8px;
+    text-align: left;
+}
+
+.info h3 {
+    margin-top: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    padding-bottom: 8px;
+}
+
+.info ul {
+    padding-left: 20px;
+}
+
+.status {
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.2);
+}