mirror of
https://github.com/Dvorinka/masterdrinks.git
synced 2026-06-04 02:32:58 +00:00
Tomas Dvorak
351 lines
22 KiB
HTML
351 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="cs">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MasterDrinks | Kontakt</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<script data-goatcounter="https://tdvorak.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--primary: #ffffff;
|
||
--secondary: #f5f5f5;
|
||
--accent: #c9a95f;
|
||
--accent-dark: #b89142;
|
||
--text: #1a1a2e;
|
||
--text-dark: #444444;
|
||
--muted: #898989;
|
||
--transition: all 0.3s ease;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Montserrat', sans-serif;
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
color: var(--text);
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
|
||
|
||
/* Header */
|
||
header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background: rgba(255,255,255,1); backdrop-filter: blur(10px); box-shadow: 0px 10px 0px var(--accent); transition: var(--transition); }
|
||
.header-content { display: flex; justify-content: space-between; align-items: center; padding: 20px; }
|
||
.logo { display: flex; align-items: center; }
|
||
.logo-img { width: 85px; }
|
||
nav ul { display: flex; list-style: none; }
|
||
nav ul li { margin-left: 30px; }
|
||
nav ul li a { text-decoration: none; color: var(--text); font-weight: 500; font-size: 16px; position: relative; transition: var(--transition); }
|
||
nav ul li a:hover { color: var(--accent); }
|
||
nav ul li a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent); transition: var(--transition); }
|
||
nav ul li a:hover::after { width: 100%; }
|
||
.hamburger { display: none; cursor: pointer; font-size: 24px; color: var(--accent); }
|
||
|
||
/* Hero */
|
||
.hero { min-height: 52vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding-top: 100px; }
|
||
.hero::before { content: ''; position: absolute; inset: 0; background: url('./background_main.png') center/cover no-repeat; filter: brightness(.6); animation: zoomBackground 20s infinite alternate; }
|
||
.hero-content { position: relative; z-index: 1; text-align: center; max-width: 900px; padding: 0 20px; margin: 0 auto; }
|
||
.hero-title { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; margin-bottom: 16px; background: linear-gradient(135deg, #faad53, #e0c78b); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fadeInUp 1s ease; }
|
||
.hero-subtitle { font-size: 20px; color: #dedede; animation: fadeInUp 1s ease .15s both; }
|
||
|
||
.btn { display: inline-block; padding: 12px 24px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: var(--primary); font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 4px; box-shadow: 0 10px 20px rgba(0,0,0,.1); transition: var(--transition); border: none; position: relative; overflow: hidden; cursor: pointer; }
|
||
.btn:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(0,0,0,.15); }
|
||
|
||
/* Contact */
|
||
.contact { padding: 50px 0 70px; background: linear-gradient(to bottom, rgba(255,255,255,.85), var(--primary)); position: relative; }
|
||
.contact-title { font-size: 34px; margin-bottom: 22px; text-align: center; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); }
|
||
.contact-title::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 70%; height: 2px; background: var(--accent); }
|
||
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; max-width: 1200px; margin: 24px auto 0; }
|
||
.card { grid-column: span 6; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(245,245,245,.95)); backdrop-filter: blur(8px); border-radius: 10px; overflow: hidden; border: 1px solid rgba(201,169,95,.15); box-shadow: 0 14px 28px rgba(0,0,0,.08); transition: var(--transition); position: relative; padding: 22px; }
|
||
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.12); border-color: rgba(201,169,95,.35); }
|
||
.card h3 { color: var(--accent); margin-bottom: 12px; font-size: 20px; }
|
||
.info-list { list-style: none; display: grid; gap: 12px; }
|
||
.info-list li { display: flex; align-items: center; color: var(--text-dark); font-size: 15px; }
|
||
.info-list i { color: var(--accent); margin-right: 10px; font-size: 18px; }
|
||
.hours { display: grid; gap: 8px; font-size: 14px; color: var(--text-dark); }
|
||
|
||
/* Contact form */
|
||
.form { display: grid; gap: 12px; }
|
||
.input, .textarea { width: 100%; padding: 14px; border: 1px solid rgba(201,169,95,.2); border-radius: 6px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(245,245,245,.9)); color: var(--text); font-size: 14px; box-shadow: 0 8px 16px rgba(0,0,0,.06); transition: var(--transition); font-family: 'Montserrat'; }
|
||
.textarea { min-height: 140px; resize: vertical; }
|
||
.input:focus, .textarea:focus { outline: none; border-color: rgba(201,169,95,.45); }
|
||
|
||
/* Map */
|
||
.map { padding: 0 0 80px; }
|
||
.map .map-embed { width: 100%; max-width: 1200px; margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 28px rgba(0,0,0,.08); border: 1px solid rgba(201,169,95,.15); }
|
||
|
||
/* Newsletter */
|
||
.newsletter { padding: 80px 0; background: linear-gradient(to bottom, rgba(255,255,255,.8), var(--primary)); position: relative; }
|
||
.newsletter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(201,169,95,.05), transparent 70%); }
|
||
.newsletter-container { max-width: 600px; margin: 0 auto; text-align: center; position: relative; }
|
||
.newsletter-title { font-size: 32px; margin-bottom: 20px; }
|
||
.newsletter-desc { font-size: 16px; color: var(--text-dark); margin-bottom: 30px; line-height: 1.6; }
|
||
.newsletter-form { display: flex; gap: 10px; max-width: 500px; margin: 0 auto; }
|
||
.newsletter-input { flex: 1; padding: 15px; border: none; border-radius: 4px; background: rgba(255,255,255,.1); color: var(--text); font-size: 16px; box-shadow: 0 5px 15px rgba(0,0,0,.1); border: 1px solid rgba(255,255,255,.1); transition: var(--transition); font-family: 'Montserrat'; }
|
||
.newsletter-btn { padding: 15px 25px; background: var(--accent); color: var(--primary); font-size: 16px; font-weight: 600; border: none; border-radius: 4px; cursor: pointer; transition: var(--transition); font-family: 'Montserrat'; }
|
||
.newsletter-btn:hover { background: var(--accent-dark); transform: translateY(-3px); }
|
||
|
||
/* Footer */
|
||
footer { background: var(--primary); padding: 60px 0 30px; position: relative; overflow: hidden; }
|
||
footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--accent), transparent); }
|
||
.footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||
.footer-logo { display: flex; align-items: center; margin-bottom: 20px; }
|
||
.footer-title { font-size: 20px; margin-bottom: 20px; color: var(--accent); position: relative; padding-bottom: 10px; }
|
||
.footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--accent); }
|
||
.footer-links { list-style: none; }
|
||
.footer-links li { margin-bottom: 10px; }
|
||
.footer-links a { color: var(--text-dark); text-decoration: none; font-size: 14px; transition: var(--transition); display: inline-block; }
|
||
.footer-links a:hover { color: var(--accent); transform: translateX(5px); }
|
||
.footer-contact p { display: flex; align-items: center; color: var(--text-dark); margin-bottom: 15px; font-size: 14px; }
|
||
.footer-contact i { color: var(--accent); margin-right: 10px; font-size: 16px; }
|
||
.social-links { display: flex; gap: 15px; margin-top: 20px; }
|
||
.social-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,.05); border-radius: 50%; color: var(--accent); font-size: 18px; transition: var(--transition); text-decoration: none; }
|
||
.social-icon:hover { background: var(--accent); color: var(--primary); transform: translateY(-5px); }
|
||
.footer-bottom { text-align: center; padding-top: 40px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.05); font-size: 14px; color: var(--text-dark); }
|
||
|
||
/* Modal */
|
||
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(5px); }
|
||
.age-verification { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(245,245,245,.95)); border-radius: 10px; padding: 40px; max-width: 500px; width: 90%; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,.4); border: 1px solid rgba(201,169,95,.2); animation: modalFadeIn .5s ease; }
|
||
.age-icon { font-size: 60px; color: var(--accent); margin-bottom: 20px; }
|
||
.age-title { font-size: 28px; margin-bottom: 15px; }
|
||
.age-text { font-size: 16px; color: var(--text-dark); margin-bottom: 30px; line-height: 1.6; }
|
||
.age-buttons { display: flex; gap: 20px; justify-content: center; }
|
||
.age-btn { padding: 12px 25px; border: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition); }
|
||
.age-yes { background: var(--accent); color: var(--primary); }
|
||
.age-no { background: rgba(255,255,255,.1); color: var(--text); }
|
||
|
||
/* Animations & Responsive */
|
||
@keyframes zoomBackground { 0%{ transform: scale(1);} 100%{ transform: scale(1.1);} }
|
||
@keyframes fadeInUp { from{ opacity:0; transform: translateY(20px);} to{ opacity:1; transform: translateY(0);} }
|
||
@keyframes modalFadeIn { from{ opacity:0; transform: translateY(-30px);} to{ opacity:1; transform: translateY(0);} }
|
||
@keyframes modalFadeOut { from{ opacity:1; transform: translateY(0);} to{ opacity:0; transform: translateY(-30px);} }
|
||
|
||
@media (max-width: 1200px){ .card { grid-column: span 6; } }
|
||
@media (max-width: 900px){ .contact-grid { grid-template-columns: repeat(6, 1fr);} .card{ grid-column: span 6;} }
|
||
@media (max-width: 768px){
|
||
.header-content{ padding: 15px; }
|
||
nav ul { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: rgba(255,255,255,.95); padding: 20px; box-shadow: 0 10px 20px rgba(0,0,0,.2); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: var(--transition); }
|
||
nav ul.show{ transform: translateY(0); opacity: 1; visibility: visible; display: flex; }
|
||
nav ul li { margin: 10px 0; }
|
||
.hamburger{ display: block; }
|
||
.hero-title{ font-size: 38px; }
|
||
.hero-subtitle{ font-size: 17px; }
|
||
}
|
||
@media (max-width: 480px){ .hero-title{ font-size: 32px; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Age Verification Modal -->
|
||
<div class="modal-overlay" id="ageModal">
|
||
<div class="age-verification">
|
||
<div class="age-icon">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
</div>
|
||
<h2 class="age-title">Ověření věku</h2>
|
||
<p class="age-text">Vítejte na MasterDrinks. Pro vstup na tuto stránku musíte být plnoletí podle zákonů vaší země. Kliknutím na "Ano" potvrzujete, že je vám alespoň 18 let.</p>
|
||
<div class="age-buttons">
|
||
<button class="age-btn age-yes" id="ageYes">Ano, je mi 18+</button>
|
||
<button class="age-btn age-no" id="ageNo">Ne, je mi méně než 18</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<header>
|
||
<div class="container">
|
||
<div class="header-content">
|
||
<div class="logo">
|
||
<a href="index.html"><img src="https://www.masterdrinks.cz/files/img/main/logo_dark.png" class="logo-img" alt="Logo MasterDrinks"></a>
|
||
</div>
|
||
<nav>
|
||
<ul id="navMenu">
|
||
<li><a href="index.html" class="active">Domů</a></li>
|
||
<li><a href="katalog-zbozi.html">Katalog zboží</a></li>
|
||
<li><a href="kontakt.html">Kontakt</a></li>
|
||
<li><a href="o-nas.html">O nás</a></li>
|
||
</ul>
|
||
<div class="hamburger" id="hamburger">
|
||
<i class="fas fa-bars"></i>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">Kontaktujte nás</h1>
|
||
<p class="hero-subtitle">Máte dotaz k našim produktům nebo službám? Ozvěte se nám – rádi poradíme.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact -->
|
||
<section class="contact" id="contact">
|
||
<div class="container">
|
||
<h2 class="contact-title">Kontakt & Otevírací doba</h2>
|
||
<div class="contact-grid">
|
||
<!-- Left: Info -->
|
||
<article class="card">
|
||
<h3>Kontaktní údaje</h3>
|
||
<ul class="info-list">
|
||
<li><i class="fas fa-user"></i> David Moravec</li>
|
||
<li><i class="fas fa-map-marker-alt"></i> Sídlo: Sokolovská 758, 686 01 Uherské Hradiště</li>
|
||
<li><i class="fas fa-store"></i> Kamenný obchod: Sokolovská 570, Mařatice, 686 01 Uherské Hradiště</li>
|
||
<li><i class="fas fa-phone"></i> <a href="tel:+420602702129" style="color:inherit; text-decoration:none;">+420 602 702 129</a></li>
|
||
<li><i class="fas fa-envelope"></i> <a href="mailto:masterdrinks@seznam.cz" style="color:inherit; text-decoration:none;">masterdrinks@seznam.cz</a></li>
|
||
<li><i class="fas fa-building"></i> MasterDrinks, s.r.o. | IČO: 28326369 | DIČ: CZ28326369</li>
|
||
</ul>
|
||
<div class="social-links">
|
||
<a href="#" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||
<a href="#" class="social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||
<a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
|
||
<a href="#" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
|
||
</div>
|
||
<div style="margin-top:16px;">
|
||
<h3 style="margin-bottom:8px;">Otevírací doba</h3>
|
||
<div class="hours">
|
||
<div>Po – Pá: 10:00 – 20:00</div>
|
||
<div>So: 12:00 – 18:00</div>
|
||
<div>Ne: Zavřeno</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Right: Form -->
|
||
<article class="card">
|
||
<h3>Napište nám</h3>
|
||
<form class="form" id="contactForm">
|
||
<input class="input" type="text" id="name" name="name" placeholder="Vaše jméno" required>
|
||
<input class="input" type="email" id="email" name="email" placeholder="Váš email" required>
|
||
<input class="input" type="text" id="subject" name="subject" placeholder="Předmět" required>
|
||
<textarea class="textarea" id="message" name="message" placeholder="Vaše zpráva" required></textarea>
|
||
<button type="submit" class="btn">Odeslat zprávu</button>
|
||
</form>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Map -->
|
||
<section class="map" aria-label="Mapa">
|
||
<div class="container">
|
||
<div class="map-embed">
|
||
<iframe src="https://www.google.com/maps?q=Sokolovsk%C3%A1%20570%2C%20Ma%C5%99atice%2C%20686%2001%20Uhersk%C3%A9%20Hradi%C5%A1t%C4%9B&output=embed" width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Newsletter -->
|
||
<section class="newsletter">
|
||
<div class="container">
|
||
<div class="newsletter-container">
|
||
<h2 class="newsletter-title">Zůstaňte informováni</h2>
|
||
<p class="newsletter-desc">Přihlaste se k odběru našeho newsletteru, abyste dostávali exkluzivní nabídky, novinky o příchodu nových produktů a odborné doporučení.</p>
|
||
<form class="newsletter-form">
|
||
<input type="email" class="newsletter-input" placeholder="Váš email" required>
|
||
<button type="submit" class="newsletter-btn">Přihlásit</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-container">
|
||
<div class="footer-info">
|
||
<div class="footer-logo">
|
||
<a href="index.html"><img src="https://www.masterdrinks.cz/files/img/main/logo_dark.png" class="logo-img" alt="Logo MasterDrinks"></a>
|
||
</div>
|
||
<p>Premium distributor alkoholu nabízející maloobchodní a velkoobchodní služby s výjimečnou kolekcí kvalitních destilátů.</p>
|
||
<div class="social-links">
|
||
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
|
||
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-links-section">
|
||
<h3 class="footer-title">Rychlé odkazy</h3>
|
||
<ul class="footer-links">
|
||
<li><a href="index.html">Domů</a></li>
|
||
<li><a href="katalog-zbozi.html">Katalog zboží</a></li>
|
||
<li><a href="o-nas.html">O nás</a></li>
|
||
<li><a href="kontakt.html">Kontakt</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-links-section">
|
||
<h3 class="footer-title">Produkty</h3>
|
||
<ul class="footer-links">
|
||
<li><a href="katalog-zbozi.html#whisky">Whisky</a></li>
|
||
<li><a href="katalog-zbozi.html#vodky">Vodky</a></li>
|
||
<li><a href="katalog-zbozi.html#rumy">Rumy</a></li>
|
||
<li><a href="katalog-zbozi.html#tequily">Tequily</a></li>
|
||
<li><a href="katalog-zbozi.html#likery">Likéry</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-contact">
|
||
<h3 class="footer-title">Kontaktujte nás</h3>
|
||
<p><i class="fas fa-map-marker-alt"></i> Sokolovská 758, 686 01 Uherské Hradiště</p>
|
||
<p><i class="fas fa-phone"></i> +420 602 702 129</p>
|
||
<p><i class="fas fa-envelope"></i> masterdrinks@seznam.cz</p>
|
||
<p><i class="fas fa-clock"></i> Po-Pá: 10:00 - 20:00, So: 12:00 - 18:00</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>MasterDrinks, s.r.o. IČO: 28326369 | DIČ: CZ28326369. Všechna práva vyhrazena. Pijte zodpovědně.</p>
|
||
<a style="color: #1a1a1a; text-decoration: none; font-weight: bold;" href="tdvorak.dev" target="_blank">© 2025 TDvorak.dev</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const ageModal = document.getElementById('ageModal');
|
||
const ageYesBtn = document.getElementById('ageYes');
|
||
const ageNoBtn = document.getElementById('ageNo');
|
||
const hamburger = document.getElementById('hamburger');
|
||
const navMenu = document.getElementById('navMenu');
|
||
const contactForm = document.getElementById('contactForm');
|
||
|
||
// Age verification state
|
||
const isAgeVerified = localStorage.getItem('ageVerified');
|
||
if (isAgeVerified) {
|
||
ageModal.style.display = 'none';
|
||
}
|
||
|
||
ageYesBtn.addEventListener('click', function() {
|
||
localStorage.setItem('ageVerified', 'true');
|
||
ageModal.style.animation = 'modalFadeOut 0.5s ease forwards';
|
||
setTimeout(() => { ageModal.style.display = 'none'; }, 500);
|
||
});
|
||
|
||
ageNoBtn.addEventListener('click', function() {
|
||
window.onbeforeunload = function(event) { return null; };
|
||
window.location.href = 'about:blank';
|
||
});
|
||
|
||
// Mobile menu toggle
|
||
hamburger.addEventListener('click', function() {
|
||
navMenu.classList.toggle('show');
|
||
});
|
||
|
||
// Contact form
|
||
contactForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Děkujeme za zprávu! Ozveme se co nejdříve.');
|
||
contactForm.reset();
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|