sslinkyy · sslinkyy · Jun 12, 2024 · Jun 12, 2024 · Jun 12, 2024 · Jun 12, 2024
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "imob-racing-website"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+/.firebase
+/.firebaserc
+/firebase-debug.log
+/firebase-debug.*.log
diff --git a/drivers.html b/drivers.html
@@ -3,32 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Meet the dedicated drivers of iMOB Racing.">
-    <title>Drivers - iMOB Racing</title>
+    <title>Drivers</title>
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap">
 </head>
 <body>
-    <nav class="navbar">
-        <div class="navbar-container">
-            <span class="navbar-toggle" id="js-navbar-toggle">
-                <i class="fas fa-bars"></i>
-            </span>
-            <a href="index.html" class="logo">iMOB Racing</a>
-            <ul class="main-nav" id="js-menu">
-                <li><a href="index.html" class="nav-links">Home</a></li>
-                <li><a href="drivers.html" class="nav-links">Drivers</a></li>
-                <li><a href="cars.html" class="nav-links">Cars</a></li>
-                <li><a href="mission.html" class="nav-links">Our Mission</a></li>
-                <li><a href="index.html#contact" class="nav-links">Contact</a></li>
-            </ul>
-        </div>
-    </nav>
+    <header class="header">
+        <h1>Meet Our Drivers</h1>
+    </header>
 
-    <section id="drivers" class="team-section" data-aos="fade-up">
-        <h2>Meet the Drivers</h2>
+    <section class="team-section">
         <div class="team-grid">
             <div class="team-card">
                 <img src="https://imobracingonline.com/images/member1.jpg" alt="Anthony Yorba">
@@ -52,20 +35,5 @@ <h3>Daniel Bertholf</h3>
             </div>
         </div>
     </section>
-
-    <footer class="footer">
-        <div class="social-media">
-            <a href="https://www.facebook.com/iMobRacing" target="_blank"><i class="fab fa-facebook"></i></a>
-            <a href="https://twitter.com/iMobRacing" target="_blank"><i class="fab fa-twitter"></i></a>
-            <a href="https://instagram.com/iMobRacing" target="_blank"><i class="fab fa-instagram"></i></a>
-            <a href="https://youtube.com/iMobRacing" target="_blank"><i class="fab fa-youtube"></i></a>
-        </div>
-        <p>&copy; 2024 iMOB Racing. All rights reserved.</p>
-        <p>Contact: info@imobracingonline.com | Phone: (530) 420-5850</p>
-    </footer>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" async></script>
-    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
-    <script src="scripts.js"></script>
 </body>
 </html>
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -20,6 +20,8 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap">
 </head>
 <body>
+    <div id="fb-root"></div>
+<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0" nonce="YOUR_NONCE"></script>
     <div class="loading-spinner" id="loading-spinner">
         <div class="spinner"></div>
     </div>
@@ -44,7 +46,7 @@ <h1 class="header-title">Welcome to iMOB Racing</h1>
 
     <nav class="navbar">
         <div class="navbar-container">
-            <span class="navbar-toggle" id="js-navbar-toggle">
+            <span class="navbar-toggle" id="js-navbar-toggle" aria-label="Toggle navigation">
                 <i class="fas fa-bars"></i>
             </span>
             <a href="index.html" class="logo">iMOB Racing</a>
@@ -127,18 +129,28 @@ <h3>Daniel Bertholf</h3>
     </section>
 
     <section id="integration" class="integration-section">
-        <h2>Social Media & Polls</h2>
-        <div class="integration-container">
-            <div class="facebook-integration">
-                <div class="fb-page" data-href="https://www.facebook.com/imobracing" data-tabs="timeline, events" data-width="400" data-height="500" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false">
-                    <blockquote cite="https://www.facebook.com/imobracing" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/imobracing">IMOB Racing</a></blockquote>
-                </div>
-            </div>
-            <div class="poll-integration">
-                <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfZqtnqgL2im8K7Ih6hCjqLrEZ-frZzTMMlJLbMCMg4u8MxaA/viewform?usp=sf_link" width="400" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+    <h2>Social Media & Polls</h2>
+    <div class="integration-container">
+        <div class="facebook-integration">
+            <div class="fb-page" 
+                 data-href="https://www.facebook.com/imobracing" 
+                 data-tabs="timeline, events" 
+                 data-width="400" 
+                 data-height="500" 
+                 data-small-header="true" 
+                 data-adapt-container-width="true" 
+                 data-hide-cover="false" 
+                 data-show-facepile="false">
+                <blockquote cite="https://www.facebook.com/imobracing" class="fb-xfbml-parse-ignore">
+                    <a href="https://www.facebook.com/imobracing">IMOB Racing</a>
+                </blockquote>
             </div>
         </div>
-    </section>
+        <div class="poll-integration">
+            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfZqtnqgL2im8K7Ih6hCjqLrEZ-frZzTMMlJLbMCMg4u8MxaA/viewform?usp=sf_link" width="400" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+    </div>
+</section>
 
     <section id="ai" class="ai-section parallax" data-aos="fade-up">
         <h2>AI Integration</h2>
@@ -150,10 +162,11 @@ <h2>AI Integration</h2>
         </div>
     </section>
 
-    <section id="events" class="events-section parallax" data-aos="fade-up">
-        <h2>Upcoming Events</h2>
-        <div class="events-container">
-            <ul class="events-list">
+  <section id="events" class="events-section parallax" data-aos="fade-up">
+    <h2>Upcoming Events</h2>
+    <div class="events-container">
+        <div class="events-list">
+            <ul>
                 <li>
                     <h3>TT Event 3</h3>
                     <p>Date: June 22, 2024</p>
@@ -165,11 +178,13 @@ <h3>TT Event 4</h3>
                     <p>Location: Thunderhill, Willows, Ca</p>
                 </li>
             </ul>
-            <div class="calendar-container">
+        </div>
+        <div class="calendar-container">
                 <iframe id="google-calendar" src="" width="100%" height="300" frameborder="0" scrolling="no"></iframe>
             </div>
-        </div>
-    </section>
+    </div>
+</section>
+
 
     <section id="media" class="media-section" data-aos="fade-up">
         <h2>Media Gallery</h2>
@@ -237,23 +252,19 @@ <h3>How can I participate in events?</h3>
 
     <footer class="footer">
         <div class="social-media">
-            <a href="https://www.facebook.com/iMobRacing" target="_blank"><i class="fab fa-facebook"></i></a>
-            <a href="https://twitter.com/iMobRacing" target="_blank"><i class="fab fa-twitter"></i></a>
-            <a href="https://instagram.com/iMobRacing" target="_blank"><i class="fab fa-instagram"></i></a>
-            <a href="https://youtube.com/iMobRacing" target="_blank"><i class="fab fa-youtube"></i></a>
+            <a href="https://www.facebook.com/iMobRacing" target="_blank" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+            <a href="https://twitter.com/iMobRacing" target="_blank" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+            <a href="https://instagram.com/iMobRacing" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+            <a href="https://youtube.com/iMobRacing" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
         </div>
         <p>&copy; 2024 iMOB Racing. All rights reserved.</p>
         <p>Contact: info@imobracingonline.com | Phone: (530) 420-5850</p>
     </footer>
 
-    <!-- Facebook SDK -->
-    <div id="fb-root"></div>
-    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0"></script>
-
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" async></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" async></script>
     <script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
     <script src="config.js"></script>
-    <script src="scripts.js"></script>
+    <script src="scripts.js" defer></script>
 </body>
 </html>
diff --git a/login.html b/login.html
@@ -9,56 +9,80 @@
     <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
     <script src="config.js"></script>
     <script>
+        // Initialize Firebase
         firebase.initializeApp(CONFIG.FIREBASE_CONFIG);
     </script>
 </head>
 <body>
     <h1>Login</h1>
-    <input type="email" id="email" placeholder="Email">
-    <input type="password" id="password" placeholder="Password">
-    <button id="loginButton">Login</button>
-    <button id="registerButton">Register</button>
-    <button id="googleLoginButton">Login with Google</button>
+    <form id="login-form">
+        <input type="email" id="email" placeholder="Email" required>
+        <input type="password" id="password" placeholder="Password" required>
+        <button type="submit" id="loginButton">Login</button>
+        <button type="button" id="registerButton">Register</button>
+        <button type="button" id="googleLoginButton">Login with Google</button>
+    </form>
 
     <script>
-        document.getElementById('loginButton').addEventListener('click', login);
-        document.getElementById('registerButton').addEventListener('click', register);
-        document.getElementById('googleLoginButton').addEventListener('click', loginWithGoogle);
+        // Firebase authentication
+        const auth = firebase.auth();
 
+        // Login function
         function login() {
-            var email = document.getElementById('email').value;
-            var password = document.getElementById('password').value;
-            firebase.auth().signInWithEmailAndPassword(email, password)
-                .then((userCredential) => {
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            auth.signInWithEmailAndPassword(email, password)
+                .then(userCredential => {
                     window.location.href = 'profile.html';
                 })
-                .catch((error) => {
+                .catch(error => {
                     console.error('Error logging in: ', error);
+                    alert('Error logging in: ' + error.message);
                 });
         }
 
+        // Register function
         function register() {
-            var email = document.getElementById('email').value;
-            var password = document.getElementById('password').value;
-            firebase.auth().createUserWithEmailAndPassword(email, password)
-                .then((userCredential) => {
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            auth.createUserWithEmailAndPassword(email, password)
+                .then(userCredential => {
                     window.location.href = 'profile.html';
                 })
-                .catch((error) => {
+                .catch(error => {
                     console.error('Error registering: ', error);
+                    alert('Error registering: ' + error.message);
                 });
         }
 
+        // Google login function
         function loginWithGoogle() {
-            var provider = new firebase.auth.GoogleAuthProvider();
-            firebase.auth().signInWithPopup(provider)
-                .then((result) => {
+            const provider = new firebase.auth.GoogleAuthProvider();
+            auth.signInWithPopup(provider)
+                .then(result => {
                     window.location.href = 'profile.html';
                 })
-                .catch((error) => {
+                .catch(error => {
                     console.error('Error logging in with Google: ', error);
+                    alert('Error logging in with Google: ' + error.message);
                 });
         }
+
+        // Event listeners
+        document.getElementById('loginButton').addEventListener('click', (e) => {
+            e.preventDefault();
+            login();
+        });
+
+        document.getElementById('registerButton').addEventListener('click', (e) => {
+            e.preventDefault();
+            register();
+        });
+
+        document.getElementById('googleLoginButton').addEventListener('click', (e) => {
+            e.preventDefault();
+            loginWithGoogle();
+        });
     </script>
 </body>
 </html>
diff --git a/scripts.js b/scripts.js
@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // Fetch YouTube videos
     function fetchYouTubeVideos() {
-        $.get(`https://www.googleapis.com/youtube/v3/search?key=${API_KEY}&channelId=${CHANNEL_ID}&part=snippet,id&order=date&maxResults=${MAX_RESULTS}`, function(data) {
+        return $.get(`https://www.googleapis.com/youtube/v3/search?key=${API_KEY}&channelId=${CHANNEL_ID}&part=snippet,id&order=date&maxResults=${MAX_RESULTS}`, function(data) {
             let videoItems = '';
             data.items.forEach(item => {
                 if (item.id.kind === "youtube#video") {
@@ -69,6 +69,8 @@ document.addEventListener('DOMContentLoaded', () => {
             });
             $('.media-carousel').html(videoItems);
             initializeCarousel();
+        }).fail(function(error) {
+            console.error('Error fetching YouTube videos:', error);
         });
     }
 
@@ -141,16 +143,17 @@ document.addEventListener('DOMContentLoaded', () => {
         (d.head || d.body).appendChild(s);
     })();
 
+    const GOOGLE_CALENDAR_ID = CONFIG.GOOGLE_CALENDAR_ID;
+
     // Load Google Calendar
-    const googleCalendarSrc = `https://calendar.google.com/calendar/embed?src=${CONFIG.GOOGLE_CALENDAR_ID}&ctz=America%2FLos_Angeles`;
+     const googleCalendarSrc = `https://calendar.google.com/calendar/embed?src=${config.GOOGLE_CALENDAR_ID}&ctz=America%2FLos_Angeles`;
     document.getElementById('google-calendar').src = googleCalendarSrc;
 
     // Initialize AOS
     AOS.init();
 
     // Initialize the media carousel
-    fetchYouTubeVideos();
-    initializeCarousel();
+    fetchYouTubeVideos().then(initializeCarousel);
 
     // Initialize Spotlight carousel
     initializeSpotlightCarousel();

diff --git a/styles.css b/styles.css
@@ -233,7 +233,7 @@ h1, h2, h3, h4, h5, h6 {
 
 .events-container {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: space-between;
     gap: 2em;
 }