6060 .genie-lamp {
6161 width : 80px ;
6262 height : 80px ;
63- background : url ('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Genie_lamp_icon.svg/1200px-Genie_lamp_icon.svg.png' ) no-repeat center center / contain; /* Placeholder image */
63+ background : url ('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Genie_lamp_icon.svg/1200px-Genie_lamp_icon.svg.png' ) no-repeat center center / contain;
6464 filter : drop-shadow (0 0 8px rgba (147 , 51 , 234 , 0.7 )); /* Purple shadow */
6565 animation-duration : 8s ; /* Slower float for the lamp */
6666 }
9393 < div class ="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 ">
9494 < div class ="flex items-center justify-between h-16 ">
9595 < div class ="flex-shrink-0 ">
96- < a href ="# " class ="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 "> Genie ✨</ a >
96+ < a href ="home.html " class ="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 "> Genie ✨</ a >
9797 </ div >
98-
9998 < div class ="hidden md:block ">
10099 < div class ="ml-10 flex items-baseline space-x-4 ">
101- < a href ="index.html " class ="text-gray-300 bg-gray-800 px-3 py-2 rounded-md text-sm font-medium "> Mood-buddy</ a >
102- < a href ="chai-time.html " class ="text-gray-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium "> Chai_time</ a >
103- < a href ="#recipe.html " class ="text-gray-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium "> Receipe</ a >
104- < a href ="#expenses.html " class ="text-gray-400 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium "> Expenses</ a >
105- < button id ="logout-btn " class ="ml-4 px-4 py-2 text-sm font-medium text-red-400 hover:bg-red-500 hover:text-white rounded-full transition "> Logout</ button >
106-
100+ < a href ="login.html " class ="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium "> Login</ a >
101+ < a href ="signup.html " class ="text-white bg-pink-600 hover:bg-pink-700 px-3 py-2 rounded-md text-sm font-medium "> Sign Up</ a >
107102 </ div >
108103 </ div >
109-
110104 < div class ="-mr-2 flex md:hidden ">
111- < button id ="hamburger-btn " type ="button " class ="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white ">
105+ < button id ="hamburger-btn " type ="button " class ="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none ">
112106 < span class ="sr-only "> Open main menu</ span >
113- < svg id ="hamburger-open-icon " class ="block h-6 w-6 " xmlns ="http://www.w.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke ="currentColor " aria-hidden ="true ">
114- < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M4 6h16M4 12h16M4 18h16 " />
115- </ svg >
116- < svg id ="hamburger-close-icon " class ="hidden h-6 w-6 " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke ="currentColor " aria-hidden ="true ">
117- < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M6 18L18 6M6 6l12 12 " />
118- </ svg >
107+ < svg id ="hamburger-open-icon " class ="block h-6 w-6 " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke ="currentColor " aria-hidden ="true "> < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M4 6h16M4 12h16M4 18h16 " /> </ svg >
108+ < svg id ="hamburger-close-icon " class ="hidden h-6 w-6 " xmlns ="http://www.w3.org/2000/svg " fill ="none " viewBox ="0 0 24 24 " stroke ="currentColor " aria-hidden ="true "> < path stroke-linecap ="round " stroke-linejoin ="round " stroke-width ="2 " d ="M6 18L18 6M6 6l12 12 " /> </ svg >
119109 </ button >
120110 </ div >
121111 </ div >
122112 </ div >
123-
124113 < div id ="mobile-menu " class ="hidden md:hidden ">
125114 < div class ="px-2 pt-2 pb-3 space-y-1 sm:px-3 ">
126- < a href ="# " class ="text-gray-300 bg-gray-800 block px-3 py-2 rounded-md text-base font-medium "> Home</ a >
127- < a href ="index.html " class ="text-gray-400 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium "> Dashboard</ a >
128- < a href ="# " class ="text-gray-400 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium "> About</ a >
129- < a href ="# " class ="text-gray-400 hover:bg-gamma-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium "> Features</ a >
115+ < a href ="login.html " class ="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium "> Login</ a >
116+ < a href ="signup.html " class ="text-white bg-pink-600 hover:bg-pink-700 block px-3 py-2 rounded-md text-base font-medium "> Sign Up</ a >
130117 </ div >
131118 </ div >
132119 </ nav >
136123 < h1 class ="text-5xl md:text-7xl font-black text-white leading-tight animate-fade-in opacity-0 ">
137124 Welcome to < span class ="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500 "> Genie</ span >
138125 </ h1 >
139-
140126 < p class ="mt-4 text-xl md:text-2xl text-gray-400 animate-fade-in opacity-0 animation-delay-200 ">
141127 Your home's vibe manager. < span class ="font-semibold text-gray-300 "> IYKYK.</ span >
142128 </ p >
143-
144129 < p class ="mt-6 max-w-2xl mx-auto text-lg text-gray-500 animate-fade-in opacity-0 animation-delay-400 ">
145130 Genie is here to sort the whole scene—from figuring out what to cook with your leftovers to reminding you about bills. Your home just got a major glow-up.
146131 </ p >
147-
148132 < div class ="mt-10 animate-fade-in opacity-0 animation-delay-600 ">
149133 < a href ="index.html " class ="inline-block bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold text-lg px-8 py-4 rounded-full shadow-lg transform transition-transform hover:scale-105 glow-button ">
150134 Enter the Vibe
151135 </ a >
152136 </ div >
153137 </ div >
154-
155- < div id ="floating-objects-container " class ="absolute inset-0 ">
156- </ div >
138+ < div id ="floating-objects-container " class ="absolute inset-0 "> </ div >
157139 </ main >
158140
159141 < script >
@@ -162,53 +144,32 @@ <h1 class="text-5xl md:text-7xl font-black text-white leading-tight animate-fade
162144 const mobileMenu = document . getElementById ( 'mobile-menu' ) ;
163145 const openIcon = document . getElementById ( 'hamburger-open-icon' ) ;
164146 const closeIcon = document . getElementById ( 'hamburger-close-icon' ) ;
165-
166147 hamburgerBtn . addEventListener ( 'click' , ( ) => {
167- // Toggle the 'hidden' class on the mobile menu
168148 mobileMenu . classList . toggle ( 'hidden' ) ;
169-
170- // Toggle the icons
171149 openIcon . classList . toggle ( 'hidden' ) ;
172150 closeIcon . classList . toggle ( 'hidden' ) ;
173151 } ) ;
174-
175- // --- Floating Objects Logic ---
176152 const floatingObjectsContainer = document . getElementById ( 'floating-objects-container' ) ;
177-
178153 function createFloatingObject ( type , count ) {
179154 for ( let i = 0 ; i < count ; i ++ ) {
180155 const obj = document . createElement ( 'div' ) ;
181156 obj . classList . add ( 'floating-object' , type ) ;
182-
183- // Random positioning - FIXED
184157 obj . style . left = ( Math . random ( ) * 100 ) + '%' ;
185158 obj . style . top = ( Math . random ( ) * 100 ) + '%' ;
186-
187- // Random size variation (for orbs and dust)
188159 if ( type === 'magic-orb' || type === 'magic-dust' ) {
189- const size = Math . random ( ) * ( type === 'magic-orb' ? 20 : 3 ) + ( type === 'magic-orb' ? 20 : 2 ) ; // Orbs between 20-40px, dust between 2-5px
190- // FIXED
160+ const size = Math . random ( ) * ( type === 'magic-orb' ? 20 : 3 ) + ( type === 'magic-orb' ? 20 : 2 ) ;
191161 obj . style . width = size + 'px' ;
192162 obj . style . height = size + 'px' ;
193163 }
194-
195- // Random animation delay for variety - FIXED
196164 obj . style . setProperty ( '--delay' , ( Math . random ( ) * 5 ) + 's' ) ;
197- obj . style . animationDelay = ( Math . random ( ) * 2 ) + 's' ; // Initial fade-in delay
198-
165+ obj . style . animationDelay = ( Math . random ( ) * 2 ) + 's' ;
199166 floatingObjectsContainer . appendChild ( obj ) ;
200167 }
201168 }
202-
203- // Create one genie lamp
204169 createFloatingObject ( 'genie-lamp' , 1 ) ;
205- // Create several magic orbs
206170 createFloatingObject ( 'magic-orb' , 8 ) ;
207- // Create many magic dust particles
208171 createFloatingObject ( 'magic-dust' , 20 ) ;
209172 } ) ;
210-
211173 </ script >
212- < script type ="module " src ="app-auth.js "> </ script >
213174</ body >
214175</ html >
0 commit comments