Update index.html

index.html

@@ -171,58 +171,25 @@
         #loading-placeholder { display: none; }
         #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; justify-content: center; align-items: center; width: 100%; }
         
-        /* --- START: MODIFIED LOADING ANIMATION --- */
-        @keyframes simple-pulse {
-            0%, 100% { box-shadow: 0 0 20px rgba(74, 108, 250, 0.2); border-color: var(--accent-primary-glow); }
-            50% { box-shadow: 0 0 35px rgba(74, 108, 250, 0.4); border-color: var(--accent-primary); }
-        }
-
-        @keyframes loading-progress {
-            0% { background-position: 100% 0; }
-            100% { background-position: -100% 0; }
-        }
-
-        .generator-container {
-            position: relative;
-            width: 400px;
-            max-width: 100%;
-            height: 300px;
-            border: 2px solid var(--accent-primary-glow);
-            border-radius: 20px;
-            overflow: hidden;
-            background-color: #161b22;
-            color: #f0f6fc;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            animation: simple-pulse 2.5s infinite ease-in-out;
-            transition: all 0.3s ease;
-        }
-        
-        /* Hide complex layers as they are not part of the simple animation */
-        .noise-layer, .sketch-layer, .building-layer, .pixel-grid, .particles {
-            display: none;
-        }
-
-        .text-overlay {
-            position: relative;
-            font-size: 22px;
-            font-weight: 600;
-            text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
-            font-family: var(--app-font);
-        }
-
-        .progress-bar {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 5px;
-            background: linear-gradient(90deg, var(--accent-primary) 25%, var(--accent-secondary) 50%, var(--accent-primary) 75%);
-            background-size: 200% 100%;
-            animation: loading-progress 1.5s linear infinite;
-        }
-        /* --- END: MODIFIED LOADING ANIMATION --- */
+        /* --- START: ORIGINAL COMPLEX LOADING ANIMATION (RESTORED) --- */
+        .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; }
+        @keyframes pulse { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); } 100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } }
+        .noise-layer, .sketch-layer, .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+        .noise-layer { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; }
+        @keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } }
+        .sketch-layer { filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0; animation: reveal-sketch 7s infinite ease-in-out; }
+        @keyframes reveal-sketch { 0% { opacity: 0; filter: grayscale(1) contrast(1.5) blur(3px); } 20% { opacity: 1; filter: grayscale(1) contrast(1.2) blur(1px); } 60% { opacity: 0.5; filter: grayscale(0.5) contrast(1) blur(0px); } 100% { opacity: 0; } }
+        .building-layer { filter: blur(15px) saturate(0.5) brightness(0.7); opacity: 0; animation: denoise-color 7s infinite ease-in-out; }
+        @keyframes denoise-color { 0% { opacity: 0; filter: blur(15px) saturate(0.5) brightness(0.7); } 40% { opacity: 0.6; filter: blur(5px) saturate(1) brightness(1); } 100% { opacity: 1; filter: blur(0px) saturate(1.5) brightness(1.1); } }
+        .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px); opacity: 1; animation: dissolve-grid 7s infinite ease-in-out; }
+        @keyframes dissolve-grid { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } }
+        .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%), radial-gradient(circle at 30% 70%, rgba(187, 134, 252, 0.2) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(250, 204, 21, 0.2) 0%, transparent 50%); animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1); }
+        @keyframes flow-particles { 0% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(10px, -15px) scale(1.05); opacity: 0.8; } 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } }
+        .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8), 0 0 30px rgba(187, 134, 252, 0.5); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); }
+        @keyframes glow-text { 0% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); } 50% { opacity: 1; text-shadow: 0 0 30px rgba(56, 189, 248, 1), 0 0 40px rgba(187, 134, 252, 0.7); } 100% { opacity: 0.7; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); } }
+        .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); animation: progress 7s infinite linear; }
+        @keyframes progress { 0% { width: 0%; } 100% { width: 100%; } }
+        /* --- END: ORIGINAL COMPLEX LOADING ANIMATION (RESTORED) --- */
 
         #result-grid { display: none; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; justify-items: center; }
         #result-container.has-content #result-grid { display: grid; }