diff --git a/Readme b/Readme new file mode 100644 index 0000000..82501f7 --- /dev/null +++ b/Readme @@ -0,0 +1,8 @@ +Firebase +Netlify +Github Pages +google cloud services +squarespace domains +Disqus API +snipcart API +youtube API diff --git a/SecretPage.html b/SecretPage.html new file mode 100644 index 0000000..3a78981 --- /dev/null +++ b/SecretPage.html @@ -0,0 +1,52 @@ + + + + + iMOB Racing Secrets + + + + +
+

Top Secret iMOB Racing Secrets

+ +
+ + + diff --git a/admin.html b/admin.html new file mode 100644 index 0000000..fbd7eab --- /dev/null +++ b/admin.html @@ -0,0 +1,121 @@ + + + + + Admin Panel - IMOB Racing + + + + + + + + +

Admin Panel

+ +
+

Add New Product

+ + + + + + +
+ +
+ +
+ + + + diff --git a/all_profiles.html b/all_profiles.html new file mode 100644 index 0000000..9337d68 --- /dev/null +++ b/all_profiles.html @@ -0,0 +1,62 @@ + + + + + All Profiles + + + + + + + + +

All Profiles

+
+ + + diff --git a/all_profiles.js b/all_profiles.js new file mode 100644 index 0000000..f4aa7f9 --- /dev/null +++ b/all_profiles.js @@ -0,0 +1,39 @@ +document.addEventListener('DOMContentLoaded', function() { + loadAllProfiles(); +}); + +function loadAllProfiles() { + const db = firebase.firestore(); + const profilesContainer = document.getElementById('profiles-container'); + profilesContainer.innerHTML = ''; // Clear any existing content + + db.collection('profiles').get().then(querySnapshot => { + querySnapshot.forEach(doc => { + const profile = doc.data(); + const profileDiv = document.createElement('div'); + profileDiv.className = 'profile-card'; + + const profileImage = document.createElement('img'); + profileImage.src = profile.profileImageUrl || 'default-profile.webp'; + profileImage.alt = profile.username || 'No username'; + profileImage.style.maxWidth = '100px'; + profileImage.style.maxHeight = '100px'; + + const profileUsername = document.createElement('h2'); + profileUsername.textContent = profile.username || 'No username'; + + const profileEmail = document.createElement('p'); + profileEmail.textContent = profile.email || 'No email'; + + profileDiv.appendChild(profileImage); + profileDiv.appendChild(profileUsername); + profileDiv.appendChild(profileEmail); + + profileDiv.addEventListener('click', function() { + window.location.href = `profile.html?uid=${doc.id}`; + }); + + profilesContainer.appendChild(profileDiv); + }); + }).catch(error => console.error('Error loading profiles: ', error)); +} diff --git a/config.js b/config.js index aa6b54c..f9b4218 100644 --- a/config.js +++ b/config.js @@ -1,6 +1,5 @@ -// config.js const CONFIG = { - YOUTUBE_API_KEY: 'AIzaSyDaCJQhs3fz-k7hg-j0NQWj0S1r7ZEvThs', + YOUTUBE_API_KEY: 'AIzaSyABU-pv8sgjMtMx9Dv9ySsi2XGtUEGZhg', YOUTUBE_CHANNEL_ID: 'UCbvXNK-13KBK_yZuZ5YeLZw', FACEBOOK_PAGE_URL: 'https://www.facebook.com/imobracing', GOOGLE_FORM_URL: 'https://docs.google.com/forms/d/e/1FAIpQLSfZqtnqgL2im8K7Ih6hCjqLrEZ-frZzTMMlJLbMCMg4u8MxaA/viewform?usp=sf_link', @@ -8,4 +7,15 @@ const CONFIG = { DISQUS_PAGE_URL: 'https://imobracingonline.com', DISQUS_PAGE_IDENTIFIER: 'imobracing-forums', GOOGLE_CALENDAR_ID: 'imobracing%40gmail.com', + FIREBASE_CONFIG: { + apiKey: "AIzaSyA0U-py8sgjtMkX0vD9ySsi2XGtUUEGZhg", + authDomain: "imob-racing-website.firebaseapp.com", + projectId: "imob-racing-website", + storageBucket: "imob-racing-website.appspot.com", + messagingSenderId: "580908835958", + appId: "1:580908835958:web:a7bb3f6a4b52d8f8c28c1a" + }, + GOOGLE_CLIENT_ID: '580908835958-labitokmi7ivmvm0ha1muth5a45smnni.apps.googleusercontent.com', + SNIPCART_API_KEY: 'NDFkZGNlNDktMjE2YS00MmUyLTk4ZmYtMjY5YWE2OWYwOTI2NjM4NTQxODI3NjYwMTI3MDQ5', + SNIPCART_SECRET_KEY: 'ST_ZWIwYzA1ZDgtNzEwNS00YTc5LTk4YjUtMzQ2YmQyOGUxODhiNjM4NTQ0NDU5MzE2NzIyODc3', }; diff --git a/default-profile.jpg b/default-profile.jpg new file mode 100644 index 0000000..b958834 Binary files /dev/null and b/default-profile.jpg differ diff --git a/default-profile.png b/default-profile.png new file mode 100644 index 0000000..38656c2 Binary files /dev/null and b/default-profile.png differ diff --git a/default-profile.webp b/default-profile.webp new file mode 100644 index 0000000..ef1432c Binary files /dev/null and b/default-profile.webp differ diff --git a/images/1 b/images/1 new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/images/1 @@ -0,0 +1 @@ + diff --git a/images/AI.webp b/images/ai.webp similarity index 100% rename from images/AI.webp rename to images/ai.webp diff --git a/index.html b/index.html index 99d1efb..817d48d 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,47 @@ + + + + +
@@ -33,7 +74,7 @@

Welcome to iMOB Racing

Feel the Thrill of Racing

Learn More - Subscribe + Login

10k followers on Instagram

Featured in Top Gear

@@ -44,16 +85,18 @@

Welcome to iMOB Racing

@@ -84,12 +127,12 @@

About Us

Spotlight

@@ -245,15 +288,38 @@

How can I participate in events?

© 2024 iMOB Racing. All rights reserved.

Contact: info@imobracingonline.com | Phone: (530) 420-5850

- + + +
- + + + + + diff --git a/login.html b/login.html new file mode 100644 index 0000000..8e2960c --- /dev/null +++ b/login.html @@ -0,0 +1,84 @@ + + + + + + Login + + + + + + + + +

Login

+ + + + + +
+ + + + diff --git a/prof_editor.html b/prof_editor.html new file mode 100644 index 0000000..76a6a24 --- /dev/null +++ b/prof_editor.html @@ -0,0 +1,171 @@ + + + + + + Profile Editor + + + + + + + + + + + +

Profile Editor

+ +
+ +
+ +
+ Profile Image Preview
+ +
+ +
+ + +
+ + diff --git a/prof_editor.js b/prof_editor.js new file mode 100644 index 0000000..2baa749 --- /dev/null +++ b/prof_editor.js @@ -0,0 +1,155 @@ + + + + + + Profile Editor + + + + + + + + + + +

Profile Editor

+ +
+ +
+ +
+ +
+ +
+ + +
+ + + diff --git a/profile.html b/profile.html new file mode 100644 index 0000000..ed36e86 --- /dev/null +++ b/profile.html @@ -0,0 +1,180 @@ + + + + + + Public Profile + + + + + + + + + + +

Public Profile

+
+ + + + diff --git a/profile.js b/profile.js new file mode 100644 index 0000000..7df92be --- /dev/null +++ b/profile.js @@ -0,0 +1,89 @@ +document.addEventListener('DOMContentLoaded', function() { + firebase.auth().onAuthStateChanged(function(user) { + if (user) { + document.getElementById('username').value = user.displayName || user.email; + document.getElementById('email').value = user.email; + loadProfile(user.uid); + } else { + window.location.href = 'login.html'; + } + }); +}); + +function loadProfile(uid) { + const db = firebase.firestore(); + const profileRef = db.collection('profiles').doc(uid); + + profileRef.get().then(doc => { + if (doc.exists) { + const profile = doc.data(); + document.getElementById('username').value = profile.username || ''; + CKEDITOR.instances.editor.setData(profile.profileContent || ''); + document.getElementById('profileImagePreview').src = profile.profileImageUrl || 'default-profile.png'; + updateVehiclePreviews(profile.vehicleImages || []); + } else { + console.log('No profile data found'); + } + }).catch(error => console.error('Error loading profile: ', error)); +} + +function saveProfile() { + const user = firebase.auth().currentUser; + if (user) { + const uid = user.uid; + const username = document.getElementById('username').value; + const profileContent = CKEDITOR.instances.editor.getData(); + const profileImage = document.getElementById('profileImage').files[0]; + const vehicleImages = Array.from(document.getElementById('vehicleImages').files); + + const db = firebase.firestore(); + const storage = firebase.storage(); + const profileRef = db.collection('profiles').doc(uid); + + let profileImageUrl = ''; + let vehicleImageUrls = []; + + const profileImagePromise = profileImage ? uploadFile(storage, `profile-images/${uid}/${profileImage.name}`, profileImage) : Promise.resolve(''); + const vehicleImagePromises = vehicleImages.map(file => uploadFile(storage, `vehicle-images/${uid}/${file.name}`, file)); + + profileImagePromise.then(url => { + profileImageUrl = url; + return Promise.all(vehicleImagePromises); + }).then(urls => { + vehicleImageUrls = urls; + return profileRef.set({ + username, + email: user.email, + profileContent, + profileImageUrl, + vehicleImages: vehicleImageUrls + }); + }).then(() => { + alert('Profile saved successfully'); + updatePreview(); + }).catch(error => console.error('Error saving profile: ', error)); + } +} + +function uploadFile(storage, path, file) { + const ref = storage.ref().child(path); + return ref.put(file).then(snapshot => snapshot.ref.getDownloadURL()); +} + +function updateVehiclePreviews(vehicleImages) { + const vehicleContainer = document.getElementById('vehiclePreviews'); + vehicleContainer.innerHTML = ''; + vehicleImages.forEach(url => { + const img = document.createElement('img'); + img.src = url; + img.alt = 'Vehicle Image'; + img.style.maxWidth = '100px'; + img.style.maxHeight = '100px'; + vehicleContainer.appendChild(img); + }); +} + +function updatePreview() { + const profileContent = CKEDITOR.instances.editor.getData(); + document.getElementById('profile-preview').innerHTML = profileContent; +} diff --git a/public_profile.html b/public_profile.html new file mode 100644 index 0000000..16df83a --- /dev/null +++ b/public_profile.html @@ -0,0 +1,62 @@ + + + + + + Public Profile + + + + + + +

Public Profile

+

+

+
+ + diff --git a/scripts.js b/scripts.js index a0744cc..fd075bd 100644 --- a/scripts.js +++ b/scripts.js @@ -1,213 +1,228 @@ -document.addEventListener('DOMContentLoaded', () => { - const loadingSpinner = document.getElementById('loading-spinner'); - window.addEventListener('load', () => { - loadingSpinner.style.display = 'none'; - }); - - const navToggle = document.getElementById('js-navbar-toggle'); - const menu = document.getElementById('js-menu'); - - navToggle.addEventListener('click', () => { - menu.classList.toggle('active'); - }); - - const navLinks = document.querySelectorAll('.navbar a'); - const sections = document.querySelectorAll('section'); - - // Smooth scrolling for navigation links - navLinks.forEach(link => { - link.addEventListener('click', function(e) { - if (this.getAttribute('href').startsWith('#')) { - e.preventDefault(); - const targetId = this.getAttribute('href').substring(1); - const targetSection = document.getElementById(targetId); - - window.scrollTo({ - top: targetSection.offsetTop - document.querySelector('.navbar').offsetHeight, - behavior: 'smooth' - }); - - // Close the menu on mobile after clicking a link - if (menu.classList.contains('active')) { - menu.classList.remove('active'); - } - } - }); - }); - - // Intersection Observer for fading in sections - const observer = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.style.opacity = 1; - } - }); - }, { threshold: 0.1 }); - - sections.forEach(section => { - section.style.opacity = 0; - observer.observe(section); - }); - - // YouTube Data API Key - const API_KEY = CONFIG.YOUTUBE_API_KEY; - const CHANNEL_ID = CONFIG.YOUTUBE_CHANNEL_ID; - const MAX_RESULTS = 10; - - // 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) { - let videoItems = ''; - data.items.forEach(item => { - if (item.id.kind === "youtube#video") { - videoItems += ` - - `; - } - }); - $('.media-carousel').html(videoItems); - initializeCarousel(); - }); - } - - // Initialize Slick carousel - function initializeCarousel() { - $('.media-carousel').slick({ - infinite: true, - slidesToShow: 5, - slidesToScroll: 1, - autoplay: true, - autoplaySpeed: 2000, - arrows: true, - dots: true, - responsive: [ - { - breakpoint: 1024, - settings: { - slidesToShow: 3 - } - }, - { - breakpoint: 768, - settings: { - slidesToShow: 2 - } - }, - { - breakpoint: 480, - settings: { - slidesToShow: 1 - } - } - ] - }); - } - - // Initialize Spotlight carousel - function initializeSpotlightCarousel() { - $('.spotlight-carousel').slick({ - infinite: true, - slidesToShow: 2, - slidesToScroll: 1, - autoplay: true, - autoplaySpeed: 3000, - arrows: true, - dots: true, - responsive: [ - { - breakpoint: 768, - settings: { - slidesToShow: 1 - } - } - ] - }); - } - - // Disqus configuration - const disqus_config = function () { - this.page.url = CONFIG.DISQUS_PAGE_URL; - this.page.identifier = CONFIG.DISQUS_PAGE_IDENTIFIER; - }; - - (function() { - const 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); - })(); - - // Load Google Calendar - 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(); - - // Initialize Spotlight carousel - initializeSpotlightCarousel(); - - // Initialize testimonials carousel - initializeTestimonialsCarousel(); - - // Lazy load images - const lazyImages = document.querySelectorAll('img.lazy'); - const lazyObserver = new IntersectionObserver((entries, observer) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - const img = entry.target; - img.src = img.dataset.src; - img.classList.remove('lazy'); - lazyObserver.unobserve(img); - } - }); - }); - - lazyImages.forEach(img => { - lazyObserver.observe(img); - }); - - const backToTop = document.querySelector('.back-to-top'); - - window.addEventListener('scroll', () => { - if (window.scrollY > 300) { - backToTop.style.display = 'block'; - } else { - backToTop.style.display = 'none'; - } - }); - - backToTop.addEventListener('click', (e) => { - e.preventDefault(); - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); - }); -}); - -function initializeTestimonialsCarousel() { - $('.testimonials-carousel').slick({ - infinite: true, - slidesToShow: 2, - slidesToScroll: 1, - autoplay: true, - autoplaySpeed: 3000, - arrows: false, - dots: true, - responsive: [ - { - breakpoint: 768, - settings: { - slidesToShow: 1 - } - } - ] - }); -} +document.addEventListener('DOMContentLoaded', () => { + const loadingSpinner = document.getElementById('loading-spinner'); + if (loadingSpinner) { + window.addEventListener('load', () => { + loadingSpinner.style.display = 'none'; + }); + } + + const navToggle = document.getElementById('js-navbar-toggle'); + const menu = document.getElementById('js-menu'); + + if (navToggle) { + navToggle.addEventListener('click', () => { + menu.classList.toggle('active'); + }); + } + + const navLinks = document.querySelectorAll('.navbar a'); + const sections = document.querySelectorAll('section'); + + // Smooth scrolling for navigation links + navLinks.forEach(link => { + link.addEventListener('click', function (e) { + if (this.getAttribute('href').startsWith('#')) { + e.preventDefault(); + const targetId = this.getAttribute('href').substring(1); + const targetSection = document.getElementById(targetId); + + window.scrollTo({ + top: targetSection.offsetTop - document.querySelector('.navbar').offsetHeight, + behavior: 'smooth' + }); + + // Close the menu on mobile after clicking a link + if (menu.classList.contains('active')) { + menu.classList.remove('active'); + } + } + }); + }); + + // Intersection Observer for fading in sections + const observer = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = 1; + } + }); + }, { threshold: 0.1 }); + + sections.forEach(section => { + section.style.opacity = 0; + observer.observe(section); + }); + + // YouTube Data API Key + const API_KEY = CONFIG.YOUTUBE_API_KEY; + const CHANNEL_ID = CONFIG.YOUTUBE_CHANNEL_ID; + const MAX_RESULTS = 10; + + // 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) { + let videoItems = ''; + data.items.forEach(item => { + if (item.id.kind === "youtube#video") { + videoItems += ` + + `; + } + }); + $('.media-carousel').html(videoItems); + initializeCarousel(); + }); + } + + // Initialize Slick carousel + function initializeCarousel() { + $('.media-carousel').slick({ + infinite: true, + slidesToShow: 5, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 2000, + arrows: true, + dots: true, + responsive: [ + { + breakpoint: 1024, + settings: { + slidesToShow: 3 + } + }, + { + breakpoint: 768, + settings: { + slidesToShow: 2 + } + }, + { + breakpoint: 480, + settings: { + slidesToShow: 1 + } + } + ] + }); + } + + // Initialize Spotlight carousel + function initializeSpotlightCarousel() { + $('.spotlight-carousel').slick({ + infinite: true, + slidesToShow: 2, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 3000, + arrows: true, + dots: true, + responsive: [ + { + breakpoint: 768, + settings: { + slidesToShow: 1, + centerMode: true, + centerPadding: '20px' + } + } + ] + }); + } + + // Disqus configuration + const disqus_config = function () { + this.page.url = CONFIG.DISQUS_PAGE_URL; + this.page.identifier = CONFIG.DISQUS_PAGE_IDENTIFIER; + }; + + (function () { + const 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); + })(); + + // Load Google Calendar + const googleCalendarSrc = `https://calendar.google.com/calendar/embed?src=${CONFIG.GOOGLE_CALENDAR_ID}&ctz=America%2FLos_Angeles`; + const calendarElement = document.getElementById('google-calendar'); + if (calendarElement) { + calendarElement.src = googleCalendarSrc; + } + + // Initialize AOS + AOS.init(); + + // Initialize the media carousel + fetchYouTubeVideos(); + initializeCarousel(); + + // Initialize Spotlight carousel + initializeSpotlightCarousel(); + + // Initialize testimonials carousel + initializeTestimonialsCarousel(); + + // Lazy load images + const lazyImages = document.querySelectorAll('img.lazy'); + const lazyObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const img = entry.target; + img.src = img.dataset.src; + img.classList.remove('lazy'); + lazyObserver.unobserve(img); + } + }); + }); + + lazyImages.forEach(img => { + lazyObserver.observe(img); + }); + + const backToTop = document.querySelector('.back-to-top'); + + window.addEventListener('scroll', () => { + if (window.scrollY > 300) { + backToTop.style.display = 'block'; + } else { + backToTop.style.display = 'none'; + } + }); + + backToTop.addEventListener('click', (e) => { + e.preventDefault(); + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); + + function initializeTestimonialsCarousel() { + $('.testimonials-carousel').slick({ + infinite: true, + slidesToShow: 2, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 3000, + arrows: false, + dots: true, + responsive: [ + { + breakpoint: 768, + settings: { + slidesToShow: 1 + } + } + ] + }); + } + + // Initialize Snipcart API key + const snipcart = document.getElementById('snipcart'); + if (snipcart) { + snipcart.setAttribute('data-api-key', CONFIG.SNIPCART_API_KEY); + } +}); diff --git a/store.html b/store.html new file mode 100644 index 0000000..a49de6f --- /dev/null +++ b/store.html @@ -0,0 +1,99 @@ + + + + + + Store - IMOB Racing + + + + + + + + +
+

Our Store

+
+ +
+
+ +
+ +

© 2023 iMOB Racing. All rights reserved.

+
+ + + + + + + diff --git a/styles.css b/styles.css index 1c2745c..22b7f90 100644 --- a/styles.css +++ b/styles.css @@ -11,6 +11,108 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; } +/* Navbar Styles */ +.navbar { + background-color: #111; + color: white; + padding: 1em; + position: sticky; + top: 0; + z-index: 3; +} + +.navbar-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar .logo { + font-size: 1.5em; + color: white; + text-decoration: none; +} + +.main-nav { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-around; + width: 100%; +} + +.main-nav .nav-links { + color: white; + text-decoration: none; + padding: 0.5em 1em; +} + +@media (max-width: 768px) { + .navbar-container { + flex-direction: column; + } + + .main-nav { + flex-direction: column; + align-items: center; + } + + .main-nav .nav-links { + width: 100%; + text-align: center; + } +} + +/* Profile Editor Styles */ +.profile-editor-container { + margin: 20px; + padding: 20px; + background-color: #222; + border-radius: 10px; +} + +#editor { + width: 100%; + height: 400px; +} + +.form-group { + margin-top: 20px; +} + +#social-media-urls, #special-items, #vehicles { + width: 100%; + height: 100px; + background-color: #333; + color: white; + border: 1px solid #444; + border-radius: 5px; + padding: 10px; +} + +#profile-preview { + margin-top: 20px; + border: 1px solid #ccc; + padding: 10px; +} + +#profile-preview-social-media, #profile-preview-special-items, #profile-preview-vehicles { + margin-top: 10px; + background-color: #333; + padding: 10px; + border-radius: 5px; + color: #fff; +} + +/* Normalized Image Styles */ +.normalized-image { + max-width: 100%; + height: auto; + display: block; + margin: 10px auto; +} + /* Header Styles */ .header { height: 100vh; @@ -98,75 +200,8 @@ h1, h2, h3, h4, h5, h6 { gap: 0.5em; } -.navbar { - background-color: #111; - color: white; - padding: 1em; - position: sticky; - top: 0; - z-index: 3; -} - -.navbar-container { - display: flex; - justify-content: space-between; - align-items: center; -} - -.navbar-toggle { - display: none; - font-size: 1.5em; - cursor: pointer; -} - -.navbar .logo { - font-size: 1.5em; - color: white; - text-decoration: none; -} - -.main-nav { - list-style: none; - margin: 0; - padding: 0; - display: flex; - justify-content: space-around; - width: 100%; -} - -.main-nav .nav-links { - color: white; - text-decoration: none; - padding: 0.5em 1em; -} - -@media (max-width: 768px) { - .navbar-toggle { - display: block; - } - - .main-nav { - display: none; - flex-direction: column; - width: 100%; - background-color: #111; - position: absolute; - top: 3.5em; /* Adjust based on your navbar height */ - left: 0; - } - - .main-nav .nav-links { - text-align: center; - padding: 1em; - width: 100%; - } - - .main-nav.active { - display: flex; - } -} - -.about-section, .team-section, .events-section, .media-section, .contact-section, .ai-section, .integration-section, .testimonials-section, .faq-section, .spotlight-section, .mission-section, .social-media-section { +/* Section Styles */ +section { padding: 2em; background: #111; transition: opacity 1s ease-in-out; @@ -178,35 +213,29 @@ h1, h2, h3, h4, h5, h6 { background-position: center; } -.about-section { - background-image: url('path/to/about-background.jpg'); -} - -.ai-section { - background-image: url('path/to/ai-background.jpg'); +.about-section, .ai-section, .events-section { + background-image: url('images/background.jpg'); } -.events-section { - background-image: url('path/to/events-background.jpg'); -} - -.spotlight-section { - background: #222; +/* Store Section */ +.store-section { + padding: 2em; + background-color: #111; } -.section-title { +.store-section h3 { text-align: center; - font-size: 2.5em; - margin-bottom: 1em; + font-size: 2em; + margin: 1em 0; } -.team-grid, .media-grid, .cars-grid { +.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1em; } -.team-card, .media-card, .car-card { +.store-item { background: #222; padding: 1em; border-radius: 5px; @@ -215,172 +244,180 @@ h1, h2, h3, h4, h5, h6 { transition: transform 0.3s; } -.team-card:hover, .media-card:hover, .car-card:hover { +.store-item:hover { transform: translateY(-10px); } -.about-content { - display: flex; - align-items: center; - gap: 1em; - margin-bottom: 1em; +.store-item img { + width: 100%; + border-radius: 5px; } -.about-icon { - font-size: 2em; - color: #ff4500; +.store-item h3 { + margin: 0.5em 0; } -.events-container { - display: flex; - flex-wrap: nowrap; - justify-content: space-between; - gap: 2em; +.store-item p { + font-size: 1em; + color: #ccc; } -.events-list { - flex: 2; - list-style: none; - padding: 0; - margin: 0; +.store-item button, .store-item a { + display: block; + margin: 1em auto 0; + padding: 0.5em 1em; + background-color: #ff4500; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s; } -.events-list li { - background: #222; +.store-item button:hover, .store-item a:hover { + background-color: #e43e00; +} + +/* Footer Styles */ +.footer { + background: #111; padding: 1em; - border-radius: 5px; - box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); - margin-bottom: 1em; + text-align: center; + color: #fff; } -.calendar-container { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - max-width: 400px; /* Adjust the max-width to control the size of the calendar */ +.social-media { + margin: 1em 0; } -.calendar-container iframe { - width: 100%; - height: 300px; /* Adjust the height as needed */ +.social-media a { + color: white; + margin: 0 0.5em; + font-size: 1.5em; + transition: color 0.3s; } -.integration-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 2em; +.social-media a:hover { + color: #ff4500; } -.facebook-integration, .poll-integration { - flex: 1; - max-width: 400px; /* Adjust the max-width to match the desired size */ +/* Responsive Image Styles */ +.responsive-image { + max-width: 100%; + height: auto; } -.facebook-integration iframe, .poll-integration iframe { +/* Loading Spinner */ +.loading-spinner { + position: fixed; + top: 0; + left: 0; width: 100%; - height: 500px; /* Set the same height for both elements */ + height: 100%; + background: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; } -@media (max-width: 768px) { - .events-container { - flex-direction: column; - } - - .calendar-container { - width: 100%; - } +.spinner { + border: 8px solid #f3f3f3; + border-top: 8px solid #ff4500; + border-radius: 50%; + width: 60px; + height: 60px; + animation: spin 1s linear infinite; +} - .integration-container { - flex-direction: column; - align-items: center; - } +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} - .facebook-integration, .poll-integration { - max-width: 100%; - } +/* Miscellaneous */ +.back-to-top { + position: fixed; + bottom: 2em; + right: 2em; + background: #ff4500; + color: #fff; + padding: 1em; + border-radius: 50%; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); + display: none; + cursor: pointer; + transition: background-color 0.3s, transform 0.3s; +} - .facebook-integration iframe, .poll-integration iframe { - height: 500px; - } +.back-to-top:hover { + background-color: #e43e00; + transform: scale(1.1); } -.media-carousel { - display: flex; - overflow: hidden; - padding: 1em 0; +@media (max-width: 768px) { + .back-to-top { + bottom: 1em; + right: 1em; + } } -.carousel-item { - flex: 0 0 auto; - width: 250px; - background: #222; +.profile-card { + background-color: #222; border-radius: 5px; + padding: 20px; + margin-bottom: 20px; box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); - transition: transform 0.3s; } -.carousel-item:hover { - transform: scale(1.05); +.profile-card h3 { + margin-top: 0; } -.spotlight-carousel { - display: flex; - overflow: hidden; - padding: 1em 0; - gap: 1em; - justify-content: center; +.profile-card p, .profile-card div { + margin-bottom: 10px; +} +/* Other styles remain unchanged */ + +/* Profile Grid */ +#profiles-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + margin: 20px; } -.spotlight-item { - flex: 0 0 auto; - width: 300px; - background: #333; +.profile-card { + background: #222; + padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); - padding: 1em; + text-align: center; transition: transform 0.3s; } -.spotlight-item:hover { - transform: scale(1.05); +.profile-card:hover { + transform: translateY(-10px); } -.spotlight-item img { +.profile-card img { width: 100%; - border-radius: 10px; + height: 150px; + object-fit: cover; + border-radius: 5px; } -.spotlight-item h3 { - margin: 0.5em 0; +.profile-card h3 { + margin: 10px 0; } -.spotlight-item p { - font-size: 0.9em; +.profile-card p { + font-size: 1em; color: #ccc; } -.contact-section form { - display: flex; - flex-direction: column; -} - -.contact-section label { - margin-top: 1em; -} - -.contact-section input, .contact-section textarea { - padding: 0.5em; - margin-top: 0.5em; - border: none; - border-radius: 5px; - background: #333; - color: #fff; -} - -.contact-section button { - margin-top: 1em; +.profile-card .view-profile-button { + display: block; + margin: 10px auto 0; padding: 0.5em 1em; background-color: #ff4500; color: white; @@ -389,152 +426,116 @@ h1, h2, h3, h4, h5, h6 { transition: background-color 0.3s; } -.contact-section button:hover { +.profile-card .view-profile-button:hover { background-color: #e43e00; } -.mission-section { - background: #111; - padding: 2em; - color: #fff; - text-align: left; -} - -.social-media-section { - background: #111; - padding: 2em; - text-align: center; -} - -.social-media-links a { - color: white; - margin: 0 1em; - font-size: 2em; - transition: color 0.3s; -} - -.social-media-links a:hover { - color: #ff4500; +.thumbnail { + width: 100px; + height: 100px; + object-fit: cover; + border-radius: 5px; + margin: 5px; + cursor: pointer; } -.footer { - background: #111; - padding: 1em; - text-align: center; - color: #fff; +.vehicle-image-container { + display: inline-block; + position: relative; } -.social-media { - margin: 1em 0; +.social-media-url-container { + display: flex; + align-items: center; } -.social-media a { +.delete-vehicle-image, .delete-social-media-url, .delete-image { + position: absolute; + top: 5px; + right: 5px; + background: red; color: white; - margin: 0 0.5em; - font-size: 1.5em; - transition: color 0.3s; -} - -.social-media a:hover { - color: #ff4500; -} - -.testimonials-section { - padding: 2em; - background: #111; - color: #fff; - text-align: center; + border: none; + border-radius: 50%; + cursor: pointer; } -.testimonials-carousel { - display: flex; - justify-content: center; - gap: 2em; +.editable { + border: 1px dashed #ccc; + padding: 5px; + cursor: text; } - -.testimonial-item { - background: #222; - padding: 2em; +/* Admin Dashboard Styles */ +.admin-dashboard { + margin: 20px; + padding: 20px; + background-color: #f5f5f5; border-radius: 10px; - box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); } -.faq-section { - padding: 2em; - background: #111; - color: #fff; - text-align: left; -} - -.faq-item { - margin-bottom: 1em; +.admin-dashboard label { + display: block; + margin-bottom: 5px; } -.faq-item h3 { - font-size: 1.5em; - color: #ff4500; +.admin-dashboard input, +.admin-dashboard textarea { + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; } -.faq-item p { - margin-top: 0.5em; +.admin-dashboard button { + padding: 10px 20px; + background-color: #28a745; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; } -.back-to-top { - position: fixed; - bottom: 2em; - right: 2em; - background: #ff4500; - color: #fff; - padding: 1em; - border-radius: 50%; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); - display: none; - cursor: pointer; - transition: background-color 0.3s, transform 0.3s; +.admin-dashboard button:hover { + background-color: #218838; } -.back-to-top:hover { - background-color: #e43e00; - transform: scale(1.1); +.store-item { + margin: 10px 0; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: white; + display: flex; + align-items: center; + justify-content: space-between; } -@media (max-width: 768px) { - .back-to-top { - bottom: 1em; - right: 1em; - } +.store-item img { + width: 50px; + height: 50px; + object-fit: cover; + border-radius: 5px; } -/* Responsive Image Styles */ -.responsive-image { - max-width: 100%; - height: auto; +.store-item h3 { + margin: 0; + font-size: 1.2em; } -/* Loading Spinner */ -.loading-spinner { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.8); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; +.store-item p { + margin: 5px 0; } -.spinner { - border: 8px solid #f3f3f3; - border-top: 8px solid #ff4500; - border-radius: 50%; - width: 60px; - height: 60px; - animation: spin 1s linear infinite; +.store-item button { + padding: 5px 10px; + background-color: #dc3545; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; } -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } +.store-item button:hover { + background-color: #c82333; } diff --git a/submit_form.php b/submit_form.php deleted file mode 100644 index 3026bd1..0000000 --- a/submit_form.php +++ /dev/null @@ -1,19 +0,0 @@ -