index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="iMOB Racing - Feel the thrill of racing with our premier team. Join us for time attack, 4x4, rally, drifting, and more.">
    <meta name="keywords" content="racing, time attack, 4x4, rally, drifting, off-road, street bikes, dirt bikes, crosskarts, iMOB Racing">
    <meta name="author" content="iMOB Racing">
    <meta property="og:title" content="iMOB Racing Online">
    <meta property="og:description" content="Feel the thrill of racing with our premier team. Join us for time attack, 4x4, rally, drifting, and more.">
    <meta property="og:image" content="https://imobracingonline.com/images/og-image.jpg">
    <meta property="og:url" content="https://imobracingonline.com">
    <meta name="twitter:card" content="summary_large_image">
    <title>iMOB Racing Online</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://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.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">
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>
    <script src="config.js"></script>
    <script>
        // Initialize Firebase
        if (!firebase.apps.length) {
            firebase.initializeApp(CONFIG.FIREBASE_CONFIG);
        } else {
            firebase.app(); // if already initialized, use that one
        }

        // Check authentication state
        firebase.auth().onAuthStateChanged(async function(user) {
            if (user) {
                const userId = user.uid;
                document.getElementById('profile-link').style.display = 'block';
                document.getElementById('profile-link').href = `profile.html?userId=${userId}`;

                // Check if user is an admin
                const userDoc = await firebase.firestore().collection('users').doc(userId).get();
                if (userDoc.exists && userDoc.data().isAdmin) {
                    document.getElementById('admin-link').style.display = 'block';
                }
            } else {
                document.getElementById('profile-link').style.display = 'none';
                document.getElementById('admin-link').style.display = 'none';
            }
        });

        // Logout function
        function logout() {
            firebase.auth().signOut().then(() => {
                window.location.href = 'index.html';
            }).catch((error) => {
                console.error('Error signing out: ', error);
            });
        }

        document.getElementById('logout').addEventListener('click', logout);
    </script>
</head>
<body>
    <div class="loading-spinner" id="loading-spinner">
        <div class="spinner"></div>
    </div>

    <header class="header" id="home">
        <div class="video-overlay">
            <iframe id="youtube-iframe" src="https://www.youtube.com/embed/RPGg_y2FHNs?autoplay=1&mute=1&loop=1&playlist=RPGg_y2FHNs" title="Welcome Video" aria-label="Welcome Video"></iframe>
        </div>
        <div class="header-content">
            <div class="header-overlay">
                <h1 class="header-title">Welcome to iMOB Racing</h1>
                <p class="header-subtitle">Feel the Thrill of Racing</p>
                <a href="#about" class="cta-button" aria-label="Learn more about iMOB Racing">Learn More</a>
                <a href="login.html" class="cta-button subscribe-button" aria-label="Login">Login</a>
                <div class="social-proof">
                    <p><i class="fas fa-users"></i> 10k followers on Instagram</p>
                    <p><i class="fas fa-trophy"></i> Featured in Top Gear</p>
                </div>
            </div>
        </div>
    </header>

    <nav class="navbar">
        <div class="navbar-container">
            <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="store.html" class="nav-links">Store</a></li>
                <li><a href="contact.html" class="nav-links">Contact</a></li>
                <li><a href="profile.html" class="nav-links" id="profile-link">Profile</a></li>
                <li><a href="all_profiles.html" class="nav-links">All Profiles</a></li>
                <li><a href="admin.html" class="nav-links" id="admin-link" style="display: none;">Admin</a></li>
                <li><a href="javascript:void(0)" class="nav-links" id="logout">Logout</a></li>
            </ul>
        </div>
    </nav>

    <section id="about" class="about-section parallax" data-aos="fade-up">
        <h2>About Us</h2>
        <div class="about-content">
            <div class="about-icon">
                <i class="fas fa-car"></i>
            </div>
            <p>At iMOB Racing, our ambition is to become the premier team in the racing industry. Comprising dedicated racecar modders and enthusiasts, we specialize in time attack racing while also participating in 4x4, rally, drifting, off-road, street bikes, dirt bikes, and crosskarts. We pride ourselves on being 100% built, not bought, with a commitment to modifying and customizing any vehicle.</p>
        </div>
        <div class="about-content">
            <div class="about-icon">
                <i class="fas fa-users"></i>
            </div>
            <p>Our co-founders, Anthony Yorba and Tony Langston, drive the team with their technical expertise and artistic vision. Leading the charge on the track, our top driver, Chris Statler, epitomizes our racing spirit, while our youngest member, Daniel Bertholf, stands out in the drifting scene.</p>
        </div>
        <div class="about-content">
            <div class="about-icon">
                <i class="fas fa-video"></i>
            </div>
            <p>We are dedicated to expanding our brand through dynamic race footage, informative repair videos, and exclusive behind-the-scenes content. Additionally, we offer engaging giveaways and forums for discussions, event updates, and buy/sell opportunities.</p>
        </div>
    </section>

    <section id="spotlight" class="spotlight-section" data-aos="fade-up">
        <h2>Spotlight</h2>
        <div class="spotlight-carousel">
            <div class="spotlight-item">
                <img src="https://imobracingonline.com/images/spotlight1.jpg" alt="Spotlight 1">
                <h3>Driver of the Month: Anthony Yorba</h3>
                <p>Anthony has been outstanding in his recent performances, leading the team to new heights.</p>
            </div>
            <div class="spotlight-item">
                <img src="https://imobracingonline.com/images/spotlight2.jpg" alt="Spotlight 2">
                <h3>Car of the Month: The Beast</h3>
                <p>Our most powerful and reliable car yet, dominating every track it encounters.</p>
            </div>
        </div>
    </section>

    <section id="team" class="team-section" data-aos="fade-up">
        <h2>Meet the Team</h2>
        <div class="team-grid">
            <div class="team-card">
                <img src="https://imobracingonline.com/images/member1.jpg" alt="Anthony Yorba">
                <h3>Anthony Yorba</h3>
                <p>Co-founder, ASE Certified Technician</p>
                <iframe width="250" height="200" src="https://www.youtube.com/embed/Fosj-_Vt5fI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="team-card">
                <img src="https://imobracingonline.com/images/member2.jpg" alt="Tony Langston">
                <h3>Tony Langston</h3>
                <p>Co-founder, Visual Artist</p>
                <iframe width="250" height="200" src="https://www.youtube.com/embed/ANOTHER_VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="team-card">
                <img src="https://imobracingonline.com/images/member3.jpg" alt="Chris Statler">
                <h3>Chris Statler</h3>
                <p>Top Driver</p>
                <iframe width="250" height="200" src="https://www.youtube.com/embed/ANOTHER_VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="team-card">
                <img src="https://imobracingonline.com/images/member4.jpg" alt="Daniel Bertholf">
                <h3>Daniel Bertholf</h3>
                <p>Resident Drift Car Driver</p>
                <iframe width="250" height="200" src="https://www.youtube.com/embed/ANOTHER_VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </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>
            </div>
        </div>
    </section>

    <section id="ai" class="ai-section parallax" data-aos="fade-up">
        <h2>AI Integration</h2>
        <div class="ai-content">
            <p>Discover how we embrace AI to enhance our racing strategies, improve vehicle performance, and provide better insights. Our AI-driven analytics help us make data-informed decisions and stay ahead of the competition.</p>
            <div class="ai-visualization">
                <img src="images/AI.webp" alt="AI Visualization" class="responsive-image">
            </div>
        </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">
                <li>
                    <h3>TT Event 3</h3>
                    <p>Date: June 22, 2024</p>
                    <p>Location: Thunderhill, Willows, Ca</p>
                </li>
                <li>
                    <h3>TT Event 4</h3>
                    <p>Date: September 20, 2024</p>
                    <p>Location: Thunderhill, Willows, Ca</p>
                </li>
            </ul>
            <div class="calendar-container">
                <iframe id="google-calendar" src="https://calendar.google.com/calendar/embed?src=imobracing%40gmail.com&ctz=America%2FLos_Angeles" width="100%" height="300" frameborder="0" scrolling="no"></iframe>
            </div>
        </div>
    </section>

    <section id="media" class="media-section" data-aos="fade-up">
        <h2>Media Gallery</h2>
        <div class="media-carousel">
            <!-- Media carousel will be populated by JavaScript -->
        </div>
    </section>

    <section id="contact" class="contact-section" data-aos="fade-up">
        <h2>Contact Us</h2>
        <form name="contact" method="POST" data-netlify="true">
            <p>
                <label>Name: <input type="text" id="name" name="name" required></label>
            </p>
            <p>
                <label>Email: <input type="email" id="email" name="email" required></label>
            </p>
            <p>
                <label>Message: <textarea id="message" name="message" required></textarea></label>
            </p>
            <p>
                <button type="submit">Send Message</button>
            </p>
        </form>
        <p>Phone: (530) 420-5850</p>
        <p>Email: info@imobracingonline.com</p>
    </section>

    <section id="forums" class="forums-section" data-aos="fade-up">
        <h2>Forums</h2>
        <div id="disqus_thread"></div>
    </section>

    <section id="testimonials" class="testimonials-section" data-aos="fade-up">
        <h2>What Our Fans Say</h2>
        <div class="testimonials-carousel">
            <div class="testimonial-item">
                <p>"iMOB Racing is the best! Their events are thrilling and the team is so professional."</p>
                <h3>- John Doe</h3>
            </div>
            <div class="testimonial-item">
                <p>"I've been a fan for years. Their dedication and passion for racing are unmatched."</p>
                <h3>- Jane Smith</h3>
            </div>
        </div>
    </section>

    <section id="faq" class="faq-section" data-aos="fade-up">
        <h2>Frequently Asked Questions</h2>
        <div class="faq-item">
            <h3>What is iMOB Racing?</h3>
            <p>iMOB Racing is a team of dedicated racecar modders and enthusiasts who specialize in various forms of racing, including time attack, 4x4, rally, drifting, and more.</p>
        </div>
        <div class="faq-item">
            <h3>How can I join the team?</h3>
            <p>You can join our team by contacting us through our Contact Us section. We are always looking for passionate individuals to join our ranks.</p>
        </div>
        <div class="faq-item">
            <h3>How can I participate in events?</h3>
            <p>You can participate in our events by checking our Events section for upcoming events and registration details.</p>
        </div>
    </section>

    <a href="#home" class="back-to-top" aria-label="Back to top"><i class="fas fa-arrow-up"></i></a>

    <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://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
    <script src="scripts.js"></script>
    <script>
        var config = {
            apiKey: "AIzaSyB4sfEfSXbRq9pFcXnHJQWueJppv0n9Uzw",
            authDomain: "imob-racing-website.firebaseapp.com",
        };
        firebase.initializeApp(config);
    </script>
    <!-- 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>

    <!-- Disqus Embed -->
    <script>
    var disqus_config = function () {
        this.page.url = CONFIG.DISQUS_PAGE_URL;
        this.page.identifier = CONFIG.DISQUS_PAGE_IDENTIFIER;
    };
    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://' + CONFIG.DISQUS_SHORTNAME + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
    </script>

</body>
</html>