Update index.html

index.html

@@ -171,30 +171,66 @@
         #loading-placeholder { display: none; }
         #result-container.loading #loading-placeholder { display: flex; animation: fadeIn 0.5s; justify-content: center; align-items: center; width: 100%; }
         
-        .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; }
+        /* --- 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 --- */
+
         #result-grid { display: none; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; justify-items: center; }
         #result-container.has-content #result-grid { display: grid; }
         #result-grid img { max-width: 100%; max-height: 400px; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-input); cursor: pointer; transition: var(--transition-smooth); box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); }
         #result-grid img:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); z-index: 10; position: relative; }
         
-        /* --- MODIFICATION: Updated error message style for validation --- */
         #error-message {
-            color: var(--danger-color); /* Kept red for error indication */
+            color: var(--danger-color);
             text-align: center;
             margin-top: 1rem;
             display: none;