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

BIN
landing_page/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 299 KiB

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>

313
landing_page/style.css Normal file
View File

@@ -0,0 +1,313 @@
:root {
--primary-red: #E31E24;
--dark-grey: #1a1a1a;
--grey-text: #666;
--light-grey: #f4f4f4;
--white: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--dark-grey);
background-color: var(--white);
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
/* Hero Section */
.hero {
padding: 80px 0;
text-align: center;
background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?q=80&w=2000') center/cover;
}
.main-logo {
width: 180px;
margin-bottom: 25px;
}
h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 15px;
line-height: 1.1;
}
.sub-headline {
font-size: 1.1rem;
max-width: 650px;
margin: 0 auto 35px;
color: #444;
}
/* Universal Button Styles */
.cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.hero .cta-buttons {
justify-content: center;
}
.btn {
padding: 14px 28px;
text-decoration: none;
font-weight: 700;
border-radius: 6px;
transition: all 0.3s ease;
display: inline-block;
font-size: 0.95rem;
}
.btn-red { background: var(--primary-red); color: white; }
.btn-red:hover { background: #c1171c; transform: translateY(-2px); }
.btn-dark { background: var(--dark-grey); color: white; }
.btn-dark:hover { background: #333; transform: translateY(-2px); }
.btn-dark-outline {
background: var(--dark-grey);
color: white;
}
.btn-dark-outline:hover {
background: var(--primary-red);
}
/* Services Section */
.services {
padding: 70px 0;
background: var(--light-grey);
}
.service-card {
background: white;
padding: 40px;
border-radius: 12px;
border-top: 6px solid var(--primary-red);
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.service-card h2 { margin-bottom: 10px; font-size: 1.4rem; }
.icons { font-size: 2.5rem; margin: 15px 0; }
/* Contact & Maps Section */
.contact-info { padding: 80px 0; }
.map-box h2 {
font-size: 1.4rem;
margin-bottom: 15px;
font-weight: 700;
}
.contact-details {
margin-top: 60px;
}
.contact-details h3 {
font-size: 1.8rem;
font-weight: 900;
margin-bottom: 25px;
}
.contact-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.contact-item {
flex: 1;
min-width: 320px;
display: flex;
align-items: center;
background: var(--light-grey);
padding: 25px;
border-radius: 12px;
border-left: 6px solid var(--primary-red);
}
.contact-item .icon {
font-size: 2.2rem;
margin-right: 20px;
}
.label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 900;
color: var(--grey-text);
margin-bottom: 5px;
}
/* Hide translatable elements until the script runs */
.lang {
opacity: 0;
transition: opacity 0.2s ease-in;
}
/* This class will be added by JS once the language is set */
.lang-loaded {
opacity: 1;
}
.lang-switcher {
position: absolute;
top: 20px;
right: 20px;
display: flex;
gap: 10px;
z-index: 1001;
}
.lang-btn {
background: rgba(0,0,0,0.5);
border: 1px solid #fff;
color: white;
padding: 5px 10px;
cursor: pointer;
font-weight: bold;
border-radius: 4px;
transition: 0.3s;
}
.lang-btn.active {
background: var(--primary-red);
border-color: var(--primary-red);
}
.lang-btn:hover {
background: var(--primary-red);
}
/* Footer */
footer {
text-align: center;
padding: 30px;
background: var(--dark-grey);
color: #999;
font-size: 0.85rem;
}
/* Responsive Design */
@media (max-width: 850px) {
.grid { grid-template-columns: 1fr; }
.contact-row { flex-direction: column; }
.contact-item { width: 100%; }
h1 { font-size: 2.2rem; }
.hero .cta-buttons { flex-direction: column; align-items: center; }
.btn { width: 100%; text-align: center; }
}
/* MODAL STYLES */
/* Styling the phone buttons inside the modal */
.modal-phone-grid {
display: flex;
flex-direction: column;
gap: 15px;
margin: 25px 0;
}
.modal-phone-grid .btn {
width: 100%;
text-align: center;
font-size: 1.1rem;
padding: 15px;
}
/* A clean button that looks like a link for the "Close" action */
.btn-link {
background: none;
border: none;
color: #888;
font-weight: 700;
cursor: pointer;
text-decoration: underline;
margin-top: 10px;
}
.btn-link:hover {
color: var(--primary-red);
}
/* Ensure the modal overlay covers the screen professionally */
.modal-overlay {
display: none; /* Changed to flex by JavaScript when opened */
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
/* These two only work when display is flex */
align-items: center;
justify-content: center;
}
/* The 'X' in the corner of the modal */
.close-icon {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
font-weight: bold;
color: #888;
cursor: pointer;
line-height: 1;
transition: color 0.2s ease;
}
.close-icon:hover {
color: var(--primary-red); /* Highlights red when you hover to close */
}
/* The container for the content inside the white box */
.modal-body {
padding: 10px 0;
text-align: center;
}
/* If the text is sitting directly on the dark overlay */
.modal-body h2 {
font-size: 1.8rem;
font-weight: 900;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff; /* Brighter white for the title */
letter-spacing: 1px;
}
.modal-body p {
font-size: 1.1rem;
color: #e0e0e0; /* Brighter light grey for the description */
margin-bottom: 25px;
font-weight: 400;
}
/* Optional: Add a slight glow to the title to make it pop */
.modal-body h2 {
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}