Fix broken web user journeys across exploration pages

web/app.js

@@ -241,6 +241,20 @@ const quantityInput = $('#commerceQuantity');
 const quantityMinus = $('[data-quantity-minus]');
 const quantityPlus = $('[data-quantity-plus]');
 const systemCardsContainer = $('[data-system-cards]');
+const legacySearchInput = $('#search-input');
+const legacySearchButton = $('#search-button');
+const legacyFinancialGoal = $('#financialGoal');
+const legacyAddButton = $('#addButton');
+const legacyAdviceList = $('#adviceList');
+const legacySendButton = $('#send-button');
+const legacyAmountInput = $('#amount');
+const legacyMessage = $('#message');
+const legacyMessage2 = $('#message2');
+const legacyUsersStat = document.querySelector('p#users');
+const legacyCarsStat = document.querySelector('p#cars');
+const legacyThemesStat = document.querySelector('p#themes');
+const nbaScoresTableBody = $('#scores-table tbody');
+const nbaMatchupsList = $('#matchups-list');
 let currentLanguage = 'en';
 
 function applyLanguage(lang) {
@@ -618,6 +632,70 @@ const renderCommerceSection = () => {
   }
 };
 
+const initializeExploreJourney = () => {
+  if (legacySearchButton && legacySearchInput) {
+    legacySearchButton.addEventListener('click', () => {
+      const query = legacySearchInput.value.trim();
+      if (!query) return;
+      const encodedQuery = encodeURIComponent(query);
+      window.open(`https://www.youtube.com/results?search_query=${encodedQuery}`, '_blank', 'noopener');
+    });
+  }
+
+  if (legacyAddButton && legacyFinancialGoal && legacyAdviceList) {
+    legacyAddButton.addEventListener('click', () => {
+      const value = legacyFinancialGoal.value.trim();
+      if (!value) return;
+      const item = document.createElement('li');
+      item.textContent = value;
+      legacyAdviceList.appendChild(item);
+      legacyFinancialGoal.value = '';
+    });
+  }
+};
+
+const initializeCarsJourney = () => {
+  if (legacyUsersStat) legacyUsersStat.textContent = '128';
+  if (legacyCarsStat) legacyCarsStat.textContent = '42';
+  if (legacyThemesStat) legacyThemesStat.textContent = '16';
+
+  if (legacySendButton && legacyAmountInput && legacyMessage && legacyMessage2) {
+    legacySendButton.addEventListener('click', () => {
+      const amount = Number(legacyAmountInput.value);
+      if (!Number.isFinite(amount) || amount <= 0) {
+        legacyMessage.textContent = 'Please enter a valid amount.';
+        legacyMessage2.textContent = '';
+        return;
+      }
+      legacyMessage.textContent = `Request prepared for amount: ${formatCurrency(amount)}.`;
+      legacyMessage2.textContent = 'A support advisor will contact you shortly.';
+    });
+  }
+};
+
+const initializeNbaJourney = () => {
+  if (nbaScoresTableBody && !nbaScoresTableBody.children.length) {
+    const games = [
+      ['7:30 PM', 'NYK vs MIA', '102 - 98', 'Recap'],
+      ['9:00 PM', 'LAL vs GSW', '118 - 121', 'Recap']
+    ];
+    nbaScoresTableBody.innerHTML = games
+      .map(
+        ([time, matchup, score, highlights]) =>
+          `<tr><td>${time}</td><td>${matchup}</td><td>${score}</td><td>${highlights}</td></tr>`
+      )
+      .join('');
+  }
+
+  if (nbaMatchupsList && !nbaMatchupsList.children.length) {
+    ['BOS vs PHI', 'MIL vs CLE', 'DEN vs PHX'].forEach((matchup) => {
+      const item = document.createElement('li');
+      item.textContent = matchup;
+      nbaMatchupsList.appendChild(item);
+    });
+  }
+};
+
 whiteoutModeButtons.forEach((button) => {
   button.addEventListener('click', () => updateWhiteoutMode(button.dataset.whiteoutMode));
 });
@@ -678,3 +756,6 @@ document.addEventListener('languagechange', () => {
 updateWhiteoutMode(whiteoutModeButtons[0]?.dataset.whiteoutMode || 'urban');
 renderCommerceSection();
 renderSystems();
+initializeExploreJourney();
+initializeCarsJourney();
+initializeNbaJourney();

web/cars.html

@@ -6,16 +6,16 @@
   <link
     rel="shortcut icon"
     type="image/x-icon"
-    href="favicon.ico"
+    href="../assets/images/favicon.ico"
   />
   <title>Vision Week - Explore the World!</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <header>
       <a href="index.html">
 	<img
-	  src="placeholder_cars5.jpg"
+	  src="../assets/images/placeholder_cars5.jpg"
 	  alt="Pause Image"
 	  style="width: 100%;"
 	/>
@@ -43,7 +43,7 @@ <h1>Electric Car Mechanism Interface</h1>
 	    <aside>
 	      <section id="transaction-animation" style="text-align: center; padding: 20px; position: right;">  <img
 			  class="my-element"
-			  src="placeholder_cars4.jpg"
+			  src="../assets/images/placeholder_cars4.jpg"
 			  alt="myButton image"
 			/>
 		<h2>Ask</h2>
@@ -111,7 +111,7 @@ <h2>🚗 Best Cars</h2>
 	  <li>Model: PURR8</li>
 	</ul>
 	<img
-	  src="placeholder_cars3.jpg"
+	  src="../assets/images/placeholder_cars3.jpg"
 	  alt="Car Info Image"
 	  style="width: 100%"
 	/>
@@ -127,7 +127,7 @@ <h2>Themes</h2>
 	  <li>Interface: XI</li>
 	</ul>
 	<img
-	  src="placeholder_cars2.jpg"
+	  src="../assets/images/placeholder_cars2.jpg"
 	  alt="Themes Image"
 	  style="width: 100%"
 	/>
@@ -183,7 +183,7 @@ <h2>Features</h2>
 	    <li>Easy navigation with intuitive controls.</li>
 	  </ul>
 	  <img
-	    src="placeholder_cars1.jpg"
+	    src="../assets/images/placeholder_cars1.jpg"
 	    alt="Car Customization Interface"
 	    class="image"
 	  />
@@ -204,7 +204,7 @@ <h2>🚀 Latest Updates</h2>
 
 	    <section class="social-sharing">
 	      <h3>Share the Adventure</h3>
-	      <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook""><i class="fab fa-facebook-f"></i> Share on Facebook</a>
+	      <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook"><i class="fab fa-facebook-f"></i> Share on Facebook</a>
 	      <a href="https://twitter.com/techandstream"><i class="fab fa-twitter"></i> Tweet about it</a>
 	    </section>
 	    </div>
@@ -213,7 +213,7 @@ <h3>Share the Adventure</h3>
 
 	    <p>&copy; 2024 Vision Week by Kvnbbg. All Rights Reserved.</p>
 	    </footer>
-    <script src="script.js"></script>
+    <script src="app.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
   </body>

web/explore_home.html

@@ -6,13 +6,18 @@
   <link
     rel="shortcut icon"
     type="image/x-icon"
-    href="favicon.ico"
+    href="../assets/images/favicon.ico"
   />
   <title>Vision Week - Explore the World!</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body> 
-
+  <header class="app-header">
+    <div class="navbar">
+      <a class="button-secondary" href="index.html">← Back to dashboard</a>
+    </div>
+  </header>
+
     <nav style="display: inline;">
       <section class="categories">
       <section class="search-bar" style="display: inline-flex; position: left">
@@ -33,7 +38,7 @@
       </nav>
   <main>
     <div id="app">
-      <img src="placeholder1.jpg" alt="Placeholder Image 1">
+      <img src="../assets/images/placeholder1.jpg" alt="Placeholder Image 1">
       <h2>What can i do for you ?</h2>
       <p>Status: <span id="status">Online</span></p>
       <input type="text" id="financialGoal" placeholder="Waiting your financial goal (e.g., travel, food, call)">
@@ -46,7 +51,7 @@ <h2>What can i do for you ?</h2>
 
   <section class="social-sharing">
     <h3>Share the Adventure</h3>
-    <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook""><i class="fab fa-facebook-f"></i> Share on Facebook</a>
+    <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook"><i class="fab fa-facebook-f"></i> Share on Facebook</a>
     <a href="https://twitter.com/techandstream"><i class="fab fa-twitter"></i> Tweet about it</a>
   </section>
   </div>
@@ -55,6 +60,6 @@ <h3>Share the Adventure</h3>
 
   <p>&copy; 2024 Vision Week by Kvnbbg. All Rights Reserved.</p>
   </footer>
-  <script src="script.js"></script>
+  <script src="app.js"></script>
 </body>
 </html>

web/gym.html

@@ -6,12 +6,17 @@
   <link
     rel="shortcut icon"
     type="image/x-icon"
-    href="favicon.ico"
+    href="../assets/images/favicon.ico"
   />
   <title>Vision Week - Explore the World!</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+  <header class="app-header">
+    <div class="navbar">
+      <a class="button-secondary" href="index.html">← Back to dashboard</a>
+    </div>
+  </header>
   <div class="nba-ball-container">
     <div class="nba-ball"></div>
   </div>
@@ -35,7 +40,7 @@ <h3 class="tip-title">Exercise Regularly</h3>
     <h2>Featured Articles</h2>
     <article class="article">
       <a href="https://www.youtube.com/watch?v=Q5DNjmSzL8o">
-        <img class="article-thumbnail" src="placeholder3.jpg" alt="Article Image">
+        <img class="article-thumbnail" src="../assets/images/placeholder3.jpg" alt="Article Image">
       </a>
       <div class="article-info">
         <h3 class="article-title">The Importance of Mental Health</h3>
@@ -45,7 +50,7 @@ <h3 class="article-title">The Importance of Mental Health</h3>
     </article>
     <article class="article">
       <a href="#">
-        <img class="article-thumbnail" src="placeholder4.jpg" alt="Article Image">
+        <img class="article-thumbnail" src="../assets/images/placeholder4.jpg" alt="Article Image">
       </a>
       <div class="article-info">
         <h3 class="article-title">Exploring the Benefits of Meditation</h3>
@@ -58,7 +63,7 @@ <h3 class="article-title">Exploring the Benefits of Meditation</h3>
 
   <section class="social-sharing">
     <h3>Share the Adventure</h3>
-    <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook""><i class="fab fa-facebook-f"></i> Share on Facebook</a>
+    <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook"><i class="fab fa-facebook-f"></i> Share on Facebook</a>
     <a href="https://twitter.com/techandstream"><i class="fab fa-twitter"></i> Tweet about it</a>
   </section>
   </div>
@@ -67,6 +72,6 @@ <h3>Share the Adventure</h3>
 
   <p>&copy; 2024 Vision Week by Kvnbbg. All Rights Reserved.</p>
   </footer>
-  <script src="script.js"></script>
+  <script src="app.js"></script>
 </body>
 </html>

web/nba.html

@@ -6,19 +6,20 @@
   <link
     rel="shortcut icon"
     type="image/x-icon"
-    href="favicon.ico"
+    href="../assets/images/favicon.ico"
   />
   <title>Vision Week - Explore the World!</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="styles.css">
 </head>
 <body>
   <header>
+    <a class="button-secondary" href="index.html">← Back to dashboard</a>
     <h1>Vision Discovery</h1>
     <h2>NBA Scores & Matchups</h2>
   </header>
 
   <section class="hero">
-    <img src="app.jpg" alt="Thrilling NBA Action">
+    <img src="../assets/images/app.jpg" alt="Thrilling NBA Action">
     <div class="hero-content">
       <h3>Let's Fuel Up and Hit the Gym!</h3>
       <p>Get your daily dose of fun and fitness with your homies! We've got the perfect place for you to burn off that energy and have a blast with your crew.</p>
@@ -68,7 +69,7 @@ <h3>Western Conference</h3>
         <h2>Featured Videos</h2>
         <article class="video-wrapper">
           <a href="https://www.youtube.com/watch?v=cRqEjm_OF1E">
-            <img class="video-thumbnail" src="placeholder_nba2.jpg" alt="Nba Match: Mini Clip">
+            <img class="video-thumbnail" src="../assets/images/placeholder_nba2.jpg" alt="Nba Match: Mini Clip">
           </a>
           <div class="video-info">
             <h3 class="video-title">Nba Match: Mini Clip</h3>
@@ -77,7 +78,7 @@ <h3 class="video-title">Nba Match: Mini Clip</h3>
         </article>
         <article class="video-wrapper">
           <a href="https://www.youtube.com/watch?v=h5pTl8fOM2U">
-            <img class="video-thumbnail" src="placeholder_nba1.jpg" alt="Lebron James: Documentary">
+            <img class="video-thumbnail" src="../assets/images/placeholder_nba1.jpg" alt="Lebron James: Documentary">
           </a>
           <div class="video-info">
             <h3 class="video-title">Lebron James: Documentary</h3>
@@ -93,7 +94,7 @@ <h3 class="video-title">Lebron James: Documentary</h3>
 
   <section class="social-sharing">
     <h3>Share the Adventure</h3>
-    <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook""><i class="fab fa-facebook-f"></i> Share on Facebook</a>
+    <a href="https://www.facebook.com/profile.php?id=61557626589574" target="_blank" class="social-icon facebook"><i class="fab fa-facebook-f"></i> Share on Facebook</a>
     <a href="https://twitter.com/techandstream"><i class="fab fa-twitter"></i> Tweet about it</a>
   </section>
   </div>
@@ -102,6 +103,6 @@ <h3>Share the Adventure</h3>
 
   <p>&copy; 2024 Vision Week by Kvnbbg. All Rights Reserved.</p>
   </footer>
-  <script src="script.js"></script>
+  <script src="app.js"></script>
 </body>
-</html>
+</html>