nickdante8/topstore-server
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Postgresql yml and landing page

Browse Source
This commit is contained in:
Jack Nick
2026-04-16 00:17:03 +03:00
parent bd55228db4
commit c80f7db74c
9 changed files with 1718 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
landing_page/index.html Normal file
View File

@@ -0,0 +1,290 @@
<!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()">&times;</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>
&copy; <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>