290 lines
12 KiB
HTML
290 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title class="lang"
|
|
data-en="TOP STORE | Car Parts & Servicing"
|
|
data-ro="TOP STORE | Piese auto și service">
|
|
TOP STORE | Car Parts & Servicing
|
|
</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<section class="hero">
|
|
<div class="lang-switcher">
|
|
<button onclick="setLanguage('ro')" id="btn-ro" class="lang-btn">RO</button>
|
|
<button onclick="setLanguage('en')" id="btn-en" class="lang-btn">EN</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<img src="assets/logo.png" alt="TOP STORE Logo" class="main-logo">
|
|
<h1 class="lang"
|
|
data-en="YOUR ULTIMATE ONE-STOP<br>AUTOMOTIVE HUB"
|
|
data-ro="HUB-UL TĂU COMPLET PENTRU<br>AUTOMOBILE">
|
|
YOUR ULTIMATE ONE-STOP<br>AUTOMOTIVE HUB
|
|
</h1>
|
|
|
|
<p class="lang sub-headline"
|
|
data-en="To secure a servicing window or inquire about a car component, please call us. Our experts are standing by."
|
|
data-ro="Pentru a rezerva o programare sau pentru a solicita informații despre o componentă auto, vă rugăm să ne sunați. Experții noștri vă stau la dispoziție.">
|
|
To secure a servicing window or inquire about a car component, please call us. Our experts are standing by.
|
|
</p>
|
|
|
|
<div class="cta-buttons">
|
|
<button onclick="openModal()" class="btn btn-red lang"
|
|
data-en="CALL TO ORDER COMPONENTS"
|
|
data-ro="SANAȚI PENTRU A COMANDA COMPONENTE">
|
|
CALL TO ORDER COMPONENTS
|
|
</button>
|
|
<button onclick="openModal()" class="btn btn-dark lang"
|
|
data-en="CALL TO BOOK SERVICING"
|
|
data-ro="SUNAȚI PENTRU A PROGRAMA DESERVIREA MAȘINII">
|
|
CALL TO BOOK SERVICING
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="services">
|
|
<div class="container grid">
|
|
<div class="service-card">
|
|
<h2 class="lang"
|
|
data-en="GENUINE & PERFORMANCE PARTS"
|
|
data-ro="PIESE ORIGINALE ȘI DE PERFORMANȚĂ">
|
|
GENUINE & PERFORMANCE PARTS
|
|
</h2>
|
|
<div class="icons">⚙️ 🔌 🏎️</div>
|
|
<p class="lang"
|
|
data-en="High-quality components for every make and model."
|
|
data-ro="Componente de înaltă calitate pentru fiecare marcă și model.">
|
|
High-quality components for every make and model.
|
|
</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<h2 class="lang"
|
|
data-en="EXPERT REPAIR & SERVICING"
|
|
data-ro="REPARAȚII ȘI SERVICE DE LA EXPERȚI">
|
|
EXPERT REPAIR & SERVICING
|
|
</h2>
|
|
<div class="icons">🔧 💻 🛠️</div>
|
|
<p class="lang"
|
|
data-en="Professional maintenance and diagnostic services."
|
|
data-ro="Servicii profesionale de întreținere și diagnosticare.">
|
|
Professional maintenance and diagnostic services.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact-info">
|
|
<div class="container">
|
|
<div class="grid">
|
|
<div class="map-box">
|
|
<h2 class="lang"
|
|
data-en="Car Parts"
|
|
data-ro="Piese auto">
|
|
Car Parts
|
|
</h2>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3622.4640986134714!2d28.63462057793557!3d47.14254155055245!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40cbd00b84eaf29b%3A0xdb92849f2bb67bf6!2sTop%20Store!5e0!3m2!1sen!2sus!4v1776243809003!5m2!1sen!2sus"
|
|
width="100%" height="250" style="border:0; border-radius: 8px;" allowfullscreen="" loading="lazy">
|
|
</iframe>
|
|
</div>
|
|
<div class="map-box">
|
|
<h2 class="lang"
|
|
data-en="Car Service"
|
|
data-ro="Service auto">
|
|
Car Service
|
|
</h2>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3728.7652298696!2d28.639850982165633!3d47.14033133574228!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40cbd1004f490f65%3A0xe4971bf2049d05ec!2sAuto%20service!5e0!3m2!1sen!2sus!4v1776243851000!5m2!1sen!2sus"
|
|
width="100%" height="250" style="border:0; border-radius: 8px;" allowfullscreen="" loading="lazy">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-details">
|
|
<h3 class="lang"
|
|
data-en="CONTACT US"
|
|
data-ro="CONTACTAŢI-NE">
|
|
CONTACT US
|
|
</h3>
|
|
<div class="contact-row">
|
|
<div class="contact-item">
|
|
<span class="icon">📞</span>
|
|
<div>
|
|
<p class="label lang"
|
|
data-en="CALL FOR BOOKING"
|
|
data-ro="SUNAȚI PENTRU REZERVĂRI">
|
|
CALL FOR BOOKING
|
|
</p>
|
|
<div class="cta-buttons">
|
|
<a href="tel:+373 683 10 310" class="btn btn-dark-outline">+373 683 10 310</a>
|
|
<a href="tel:+373 794 76 060" class="btn btn-dark-outline">+373 794 76 060</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<span class="icon">📧</span>
|
|
<div>
|
|
<p class="label lang"
|
|
class="lang"
|
|
data-en="EMAIL US"
|
|
data-ro="TRIMITEȚI-NE UN E-MAIL">
|
|
EMAIL US
|
|
</p>
|
|
<div class="cta-buttons">
|
|
<a href="mailto:topstoreom@gmail.com" class="btn btn-dark-outline">topstoreom@gmail.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Popup handling -->
|
|
<div id="phonePopup" class="modal-overlay">
|
|
<span class="close-icon" onclick="closeModal()">×</span>
|
|
|
|
<div class="modal-body">
|
|
<h2 class="lang"
|
|
data-en="SELECT PHONE NUMBER"
|
|
data-ro="SELECTAȚI NUMĂRUL DE TELEFON">
|
|
SELECT PHONE NUMBER
|
|
</h2>
|
|
<p class="lang"
|
|
data-en="Our experts are available at both lines:"
|
|
data-ro="Experții noștri sunt disponibili pe ambele linii:">
|
|
Our experts are available at both lines:
|
|
</p>
|
|
|
|
<div class="modal-phone-grid">
|
|
<a href="tel:+373 683 10 310" class="btn btn-dark-outline lang"
|
|
data-en="📞 LINE 1: +373 683 10 310"
|
|
data-ro="📞 LINIA 1: +373 683 10 310">
|
|
📞 LINE 1: +373 683 10 310
|
|
</a>
|
|
<a href="tel:+373 794 76 060" class="btn btn-dark-outline lang"
|
|
class="lang"
|
|
data-en="📞 LINE 2: +373 794 76 060"
|
|
data-ro="📞 LINIA 2: +373 794 76 060">
|
|
📞 LINE 2: +373 794 76 060
|
|
</a>
|
|
</div>
|
|
|
|
<button onclick="closeModal()" class="btn btn-link">CANCEL</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Define your site's default language for first-time visitors
|
|
const DEFAULT_LANG = 'ro';
|
|
|
|
function setLanguage(lang) {
|
|
// Find all elements with the 'lang' class
|
|
const elements = document.querySelectorAll('.lang');
|
|
|
|
elements.forEach(el => {
|
|
// Get the translation from the data attribute
|
|
const translation = el.getAttribute(`data-${lang}`);
|
|
if (translation) {
|
|
el.innerHTML = translation;
|
|
}
|
|
// Make the element visible now that it has the right text
|
|
el.classList.add('lang-loaded');
|
|
});
|
|
|
|
// Update button styles
|
|
document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active'));
|
|
const activeBtn = document.getElementById(`btn-${lang}`);
|
|
if(activeBtn) activeBtn.classList.add('active');
|
|
|
|
// Save preference to local storage
|
|
localStorage.setItem('preferredLang', lang);
|
|
}
|
|
|
|
(function initLang() {
|
|
// Priority 1: Saved preference
|
|
// Priority 2: Browser language (Optional extra)
|
|
// Priority 3: Your DEFAULT_LANG
|
|
const saved = localStorage.getItem('preferredLang');
|
|
const browserLang = navigator.language.split('-')[0]; // returns 'ro' or 'en'
|
|
const supported = ['ro', 'en'];
|
|
const finalDefault = supported.includes(browserLang) ? browserLang : DEFAULT_LANG;
|
|
const userLang = saved || finalDefault;
|
|
|
|
// Use DOMContentLoaded to ensure elements exist before we touch them
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
setLanguage(userLang);
|
|
|
|
// Also handle the year here to keep init organized
|
|
const yearSpan = document.getElementById("current-year");
|
|
if(yearSpan) yearSpan.textContent = new Date().getFullYear();
|
|
});
|
|
})();
|
|
|
|
// Optimized Startup
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// Set Year
|
|
const yearSpan = document.getElementById("current-year");
|
|
if(yearSpan) yearSpan.textContent = new Date().getFullYear();
|
|
|
|
// Immediate Language Check
|
|
const savedLang = localStorage.getItem('preferredLang') || 'en';
|
|
setLanguage(savedLang);
|
|
});
|
|
|
|
// Check for saved language on page load
|
|
window.onload = () => {
|
|
// Set the Year automatically
|
|
const yearSpan = document.getElementById("current-year");
|
|
if(yearSpan) {
|
|
yearSpan.textContent = new Date().getFullYear();
|
|
}
|
|
// Load the saved language or default to 'en'
|
|
const savedLang = localStorage.getItem('preferredLang') || 'en';
|
|
setLanguage(savedLang);
|
|
};
|
|
|
|
// This is even safer if you have multiple places where the year appears
|
|
document.querySelectorAll('.year').forEach(el => {
|
|
el.innerText = new Date().getFullYear();
|
|
});
|
|
|
|
// Modal - popup handling
|
|
// Open popup
|
|
function openModal() {
|
|
document.getElementById('phonePopup').style.display = 'flex';
|
|
}
|
|
|
|
// Close popup
|
|
function closeModal() {
|
|
document.getElementById('phonePopup').style.display = 'none';
|
|
}
|
|
|
|
// Close if user clicks outside the white box
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('phonePopup');
|
|
if (event.target == modal) {
|
|
closeModal();
|
|
}
|
|
}
|
|
</script>
|
|
<footer>
|
|
<p>
|
|
© <span id="current-year"></span>
|
|
<span class="lang"
|
|
data-en="TOP STORE. All Rights Reserved."
|
|
data-ro="TOP STORE. Toate drepturile rezervate.">
|
|
TOP STORE. All Rights Reserved.
|
|
</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |