LIT UI LOOKS SO GOOD

chase-west · Sep 18, 2024 · ce90c58 · ce90c58
1 parent c9aad89
commit ce90c58
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 22 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -26,21 +26,30 @@ body, html {
   overflow: hidden;
 }
 
+/* Text content animation */
+.text-content h1, .text-content p, #explore-btn {
+  opacity: 0;
+  transform: translateY(30px);
+  animation: fadeInUp 1s ease forwards;
+}
+
 .text-content {
   z-index: 2;
-  max-width: 800px;
+  max-width: 1200px;
   padding: 0 20px;
 }
 
 .text-content h1 {
   font-size: 3.5em;
   margin-bottom: 20px;
   color: #4ecca3;
+  transition-delay: 0s;
 }
 
 .text-content p {
   font-size: 1.2em;
   margin-bottom: 30px;
+  transition-delay: 0.3s;
 }
 
 #explore-btn {
@@ -54,14 +63,71 @@ body, html {
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease;
+  transition-delay: 0.6s;
 }
 
+
 #explore-btn:hover {
   background-color: #45b393;
   transform: translateY(-3px);
   box-shadow: 0 4px 15px rgba(78, 204, 163, 0.4);
 }
 
+/* Energy Animation */
+.animation-container {
+  opacity: 0;
+  position: absolute;
+  top: 15%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+  animation: fadeInUp 1s ease forwards;
+  animation-delay: 0.4s;
+}
+
+.energy-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.energy-path {
+  fill: none;
+  stroke: url(#energyGradient);
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 20, 10;
+  animation: flowAnimation 30s linear infinite;
+}
+
+.energy-glow {
+  fill: none;
+  stroke: url(#energyGradient);
+  stroke-width: 15;
+  stroke-linecap: round;
+  filter: blur(8px);
+  opacity: 0.6;
+  animation: flowAnimation 30s linear infinite;
+}
+
+@keyframes flowAnimation {
+  to {
+    stroke-dashoffset: -1000;
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* About Section */
 .about-section {
   padding: 100px 50px;
@@ -116,17 +182,6 @@ body, html {
   transform: scale(1.05);
 }
 
-/* Animation placeholder */
-.animation-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  /* Add your animation styles here */
-}
-
 /* Scroll Animations */
 .fade-in {
   opacity: 0;
@@ -142,30 +197,30 @@ body, html {
 /* Responsive Styles */
 @media (max-width: 768px) {
   .text-content h1 {
-    font-size: 2.5em;
+      font-size: 2.5em;
   }
 
   .text-content p {
-    font-size: 1em;
+      font-size: 1em;
   }
 
   #explore-btn {
-    padding: 12px 24px;
-    font-size: 1em;
+      padding: 12px 24px;
+      font-size: 1em;
   }
 
   .about-section {
-    padding: 50px 20px;
+      padding: 50px 20px;
   }
 
   .about-text {
-    padding-right: 0;
-    margin-bottom: 30px;
+      padding-right: 0;
+      margin-bottom: 30px;
   }
 
   .about-images img {
-    width: 100%;
-    max-width: none;
+      width: 100%;
+      max-width: none;
   }
 }
 

diff --git a/templates/home.html b/templates/home.html
@@ -14,7 +14,17 @@
         <!-- Hero Section -->
         <section class="hero-section">
             <div class="animation-container">
-                <!-- Your energy flow animation will go here -->
+                <svg class="energy-flow" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice">
+                    <defs>
+                        <linearGradient id="energyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                            <stop offset="0%" stop-color="#4ecca3" stop-opacity="0" />
+                            <stop offset="50%" stop-color="#4ecca3" stop-opacity="1" />
+                            <stop offset="100%" stop-color="#4ecca3" stop-opacity="0" />
+                        </linearGradient>
+                    </defs>
+                    <path class="energy-glow" d="M0,500 Q250,450 500,500 T1000,500" />
+                    <path class="energy-path" d="M0,500 Q250,450 500,500 T1000,500" />
+                </svg>
             </div>
             <div class="text-content">
                 <h1>Global Renewable Energy Explorer</h1>
@@ -42,6 +52,26 @@ <h2 class="fade-in">About Global Renewable Energy Explorer</h2>
     </div>
 
     <script>
+        // Energy Animation
+        const energyFlow = document.querySelector('.energy-flow');
+        const energyPath = document.querySelector('.energy-path');
+        const energyGlow = document.querySelector('.energy-glow');
+
+        function updateEnergyFlow() {
+            const height = window.innerHeight;
+            const width = window.innerWidth;
+
+            energyFlow.setAttribute('viewBox', `0 0 ${width} ${height}`);
+
+            const curve = `M0,${height/2} Q${width/4},${height/2-100} ${width/2},${height/2} T${width},${height/2}`;
+            energyPath.setAttribute('d', curve);
+            energyGlow.setAttribute('d', curve);
+        }
+
+        window.addEventListener('resize', updateEnergyFlow);
+        updateEnergyFlow();
+
+        // Explore button functionality
         document.getElementById('explore-btn').addEventListener('click', function() {
             window.location.href = '/explore';
         });