mirror of
https://github.com/Dvorinka/masterdrinks.git
synced 2026-06-03 18:32:55 +00:00
Tomas Dvorak
1839 lines
90 KiB
HTML
1839 lines
90 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 | Katalog zboží</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;
|
||
--success: #0f9d58;
|
||
--danger: #d93025;
|
||
--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: 160px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 130px 0 50px; background: linear-gradient(135deg, #ffffff, #faf7ef); }
|
||
.hero::before { content: none; display: none; }
|
||
.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: 40px; font-weight: 700; margin-bottom: 10px; background: linear-gradient(135deg, #faad53, #e0c78b); -webkit-background-clip: text; background-clip: text; color: transparent; animation: fadeInUp 1s ease; }
|
||
.hero-subtitle { font-size: 16px; color: var(--text-dark); 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); }
|
||
|
||
/* Breadcrumbs */
|
||
.breadcrumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dark); margin-bottom: 6px; opacity: .8; }
|
||
.breadcrumbs a { color: var(--text-dark); text-decoration: none; }
|
||
.breadcrumbs .sep { opacity: .6; }
|
||
|
||
/* Categories chips */
|
||
.categories { background: linear-gradient(180deg, #fff, rgba(255,255,255,.85)); padding: 12px 0 8px; border-top: 1px solid rgba(201,169,95,.15); border-bottom: 1px solid rgba(201,169,95,.15); }
|
||
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
|
||
.chip { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgba(201,169,95,.1); color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px; border: 1px solid rgba(201,169,95,.25); transition: var(--transition); }
|
||
.chip:hover { background: rgba(201,169,95,.2); transform: translateY(-1px); }
|
||
.chip.active { background: var(--accent); color: var(--primary); border-color: var(--accent); }
|
||
|
||
/* Filters header and controls */
|
||
.filters-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||
.search-input { flex: 1; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(201,169,95,.2); background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(245,245,245,.95)); font-size: 14px; box-shadow: 0 8px 16px rgba(0,0,0,.06); }
|
||
.controls-right { display: flex; align-items: center; gap: 10px; }
|
||
.filters-mobile-toggle { display: none; padding: 10px 14px; border-radius: 6px; border: 1px solid rgba(201,169,95,.25); background: rgba(201,169,95,.12); color: var(--accent); font-weight: 700; cursor: pointer; }
|
||
.sort-select { min-width: 200px; }
|
||
|
||
/* Availability chips */
|
||
.chip-group { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.chip-select { display: inline-flex; align-items: center; border: 1px solid rgba(201,169,95,.25); border-radius: 999px; padding: 6px 10px; cursor: pointer; background: rgba(201,169,95,.08); }
|
||
.chip-select span { font-size: 13px; font-weight: 700; color: var(--text); }
|
||
.chip-select input:checked + span { background: var(--accent); color: var(--primary); border-radius: 999px; padding: 4px 8px; }
|
||
|
||
/* Filters panel */
|
||
.filters-panel { margin-top: 14px; }
|
||
|
||
/* Active filters + results */
|
||
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 6px; }
|
||
.filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(201,169,95,.12); border: 1px solid rgba(201,169,95,.25); font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer; }
|
||
.filter-chip .x { font-weight: 900; color: var(--accent); }
|
||
.results-summary { text-align: center; font-size: 13px; color: var(--text-dark); margin: 8px 0 18px; }
|
||
|
||
/* Catalog Filters */
|
||
.catalog-filters { background: linear-gradient(to bottom, rgba(255,255,255,.85), var(--primary)); padding: 28px 0; position: relative; }
|
||
.filters-bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: end; }
|
||
.filter-field { grid-column: span 3; display: flex; flex-direction: column; gap: 8px; position: relative; }
|
||
.filter-label { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
|
||
.select, .range-display, .select select { width: 100%; }
|
||
.select { position: relative; }
|
||
.select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 12px 40px 12px 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); cursor: pointer; }
|
||
.select:after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--accent); pointer-events: none; }
|
||
.select select:focus { outline: none; border-color: rgba(201,169,95,.45); }
|
||
|
||
.range { display: flex; flex-direction: column; gap: 10px; }
|
||
.range input[type="range"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(201,169,95,.35), rgba(201,169,95,.15)); outline: none; transition: var(--transition); margin: 5px 0; }
|
||
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; }
|
||
.range-display { font-size: 13px; color: var(--text-dark); text-align: center; margin-top: 5px; }
|
||
|
||
.filter-actions { display: none; } /* Hide the filter apply button since we'll auto-apply */
|
||
|
||
/* Catalog Grid */
|
||
.catalog { padding: 40px 0 70px; }
|
||
.catalog-title { font-size: 34px; margin-bottom: 22px; text-align: center; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); }
|
||
.catalog-title::after { content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 70%; height: 2px; background: var(--accent); }
|
||
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; }
|
||
.product-card { background: linear-gradient(135deg, rgba(255,255,255,.85), 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; }
|
||
.product-card:hover { transform: translateY(-8px); box-shadow: 0 18px 36px rgba(0,0,0,.12); border-color: rgba(201,169,95,.35); }
|
||
.product-img { width: 100%; height: 220px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(201,169,95,.05), rgba(201,169,95,.0)); }
|
||
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
|
||
.product-card:hover .product-img img { transform: scale(1.05); }
|
||
.product-body { padding: 16px 16px 18px; }
|
||
.product-brand { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .03em; margin-bottom: 4px; }
|
||
.product-name { font-size: 18px; color: var(--accent); font-weight: 700; margin-bottom: 6px; min-height: 44px; }
|
||
.product-meta { font-size: 12px; color: var(--text-dark); margin-bottom: 12px; display: flex; gap: 10px; align-items: center; }
|
||
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
|
||
.badge-in { background: rgba(15,157,88,.12); color: var(--success); border: 1px solid rgba(15,157,88,.25); }
|
||
.badge-out { background: rgba(217,48,37,.1); color: var(--danger); border: 1px solid rgba(217,48,37,.25); }
|
||
.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
||
.price { font-weight: 800; font-size: 18px; color: var(--text); }
|
||
.product-btn { padding: 10px 14px; background: var(--accent); color: var(--primary); border: none; border-radius: 6px; font-weight: 700; font-size: 13px; cursor: pointer; transition: var(--transition); }
|
||
.product-btn:hover { background: var(--accent-dark); transform: translateY(-2px); }
|
||
.card-link { text-decoration: none; color: inherit; display: block; }
|
||
|
||
/* Pagination */
|
||
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
|
||
.page-link { padding: 8px 12px; border-radius: 6px; background: rgba(201,169,95,.12); color: var(--accent); font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid rgba(201,169,95,.25); transition: var(--transition); }
|
||
.page-link:hover { background: rgba(201,169,95,.25); }
|
||
.page-link.active { background: var(--accent); color: var(--primary); border-color: var(--accent); }
|
||
|
||
/* 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'; }
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: var(--primary);
|
||
padding: 60px 0 0;
|
||
position: relative;
|
||
overflow: hidden;
|
||
color: var(--text-dark);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
footer a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
footer a:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.footer-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 40px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px 40px;
|
||
position: relative;
|
||
}
|
||
|
||
.footer-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 20px;
|
||
right: 20px;
|
||
height: 1px;
|
||
background: linear-gradient(to right, transparent, rgba(201,169,95,0.2), transparent);
|
||
}
|
||
|
||
.footer-info {
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.footer-logo {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.footer-logo a {
|
||
display: inline-block;
|
||
}
|
||
|
||
.footer-logo img {
|
||
max-width: 200px;
|
||
height: auto;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.footer-logo img:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.footer-info p {
|
||
margin-bottom: 20px;
|
||
color: rgba(255,255,255,0.7);
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.footer-title {
|
||
font-size: 18px;
|
||
margin-bottom: 25px;
|
||
color: white;
|
||
position: relative;
|
||
padding-bottom: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.footer-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 40px;
|
||
height: 2px;
|
||
background: var(--accent);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.footer-links-section:hover .footer-title::after {
|
||
width: 60px;
|
||
}
|
||
|
||
.footer-links {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.footer-links li {
|
||
margin-bottom: 12px;
|
||
position: relative;
|
||
padding-left: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.footer-links li::before {
|
||
display: none;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: rgba(255,255,255,0.7);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
display: inline-block;
|
||
padding: 4px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.footer-links a::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 0;
|
||
height: 1px;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: var(--accent);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--accent);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.footer-links a:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.footer-contact p {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
color: rgba(255,255,255,0.7);
|
||
margin-bottom: 15px;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.footer-contact p:hover {
|
||
color: white;
|
||
}
|
||
|
||
.footer-contact i {
|
||
color: var(--accent);
|
||
margin-right: 12px;
|
||
font-size: 16px;
|
||
margin-top: 3px;
|
||
flex-shrink: 0;
|
||
width: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.social-links {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.social-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(201,169,95,0.1);
|
||
border-radius: 8px;
|
||
color: var(--accent);
|
||
font-size: 16px;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
border: 1px solid rgba(201,169,95,0.2);
|
||
}
|
||
|
||
.social-icon:hover {
|
||
background: var(--accent);
|
||
color: var(--primary);
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(201,169,95,0.3);
|
||
}
|
||
|
||
/* Category Filter in Footer */
|
||
.category-filter {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.category-buttons {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.category-btn {
|
||
padding: 6px 14px;
|
||
background: rgba(255,255,255,0.05);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
color: rgba(255,255,255,0.8);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-weight: 500;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
|
||
.category-btn:hover {
|
||
background: rgba(201,169,95,0.2);
|
||
color: white;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.category-btn.active {
|
||
background: var(--accent);
|
||
color: var(--primary);
|
||
border-color: var(--accent);
|
||
font-weight: 600;
|
||
box-shadow: 0 4px 12px rgba(201,169,95,0.2);
|
||
}
|
||
|
||
/* Footer Bottom */
|
||
.footer-bottom {
|
||
padding: 30px 0;
|
||
color: rgba(255,255,255,0.6);
|
||
font-size: 13px;
|
||
position: relative;
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.footer-bottom-content {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
.footer-copyright p {
|
||
margin: 0;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.legal-links {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.legal-link {
|
||
color: rgba(255,255,255,0.6);
|
||
transition: color 0.3s ease;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.legal-link:hover {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.divider {
|
||
color: rgba(255,255,255,0.2);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer-credits {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.footer-credits p {
|
||
margin: 0;
|
||
color: rgba(255,255,255,0.6);
|
||
}
|
||
|
||
.dev-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: var(--accent) !important;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.dev-link:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.dev-link svg {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.dev-link:hover svg {
|
||
transform: translateX(2px);
|
||
}
|
||
|
||
.back-to-top {
|
||
position: fixed;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
color: var(--primary);
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(20px);
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
z-index: 99;
|
||
}
|
||
|
||
.back-to-top.visible {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.back-to-top:hover {
|
||
transform: translateY(-3px) scale(1.05);
|
||
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.back-to-top:active {
|
||
transform: translateY(0) scale(0.98);
|
||
}
|
||
|
||
/* Responsive Styles */
|
||
@media (max-width: 992px) {
|
||
.footer-container {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 30px;
|
||
}
|
||
|
||
.footer-bottom-content {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-credits {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
footer {
|
||
padding: 50px 0 0;
|
||
}
|
||
|
||
.footer-container {
|
||
grid-template-columns: 1fr;
|
||
gap: 40px;
|
||
padding-bottom: 30px;
|
||
}
|
||
|
||
.footer-info {
|
||
padding-right: 0;
|
||
}
|
||
|
||
.footer-logo img {
|
||
max-width: 180px;
|
||
}
|
||
|
||
.back-to-top {
|
||
width: 42px;
|
||
height: 42px;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
}
|
||
}
|
||
|
||
/* 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);} }
|
||
|
||
@media (max-width: 1200px){ .catalog-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
|
||
@media (max-width: 900px){
|
||
.filters-bar { grid-template-columns: repeat(2, 1fr);}
|
||
.filter-field{ grid-column: span 1;}
|
||
.catalog-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
|
||
}
|
||
@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; pointer-events: none; transition: var(--transition); }
|
||
nav ul.show{ transform: translateY(0); opacity: 1; pointer-events: auto; }
|
||
nav ul li { margin: 10px 0; }
|
||
.hamburger{ display: block; }
|
||
.hero-title{ font-size: 28px; }
|
||
.hero-subtitle{ font-size: 14px; }
|
||
.filters-bar { grid-template-columns: 1fr; }
|
||
.filter-field { grid-column: span 1; }
|
||
.filters-mobile-toggle{ display: inline-flex; }
|
||
.filters-panel{ display: none; }
|
||
.filters-panel.open{ display: block; }
|
||
.catalog-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
|
||
}
|
||
@media (max-width: 480px){
|
||
.hero-title{ font-size: 24px; }
|
||
.catalog-grid { grid-template-columns: 1fr; gap: 12px; }
|
||
.product-img { height: 180px; }
|
||
.product-body { padding: 12px; }
|
||
.product-name { font-size: 16px; min-height: 38px; }
|
||
.price { font-size: 16px; }
|
||
.product-btn { font-size: 12px; padding: 8px 12px; }
|
||
}
|
||
</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">
|
||
<nav class="breadcrumbs" aria-label="Breadcrumb">
|
||
<a href="index.html">Domů</a>
|
||
<span class="sep">/</span>
|
||
<span>Katalog zboží</span>
|
||
</nav>
|
||
<h1 class="hero-title">Katalog zboží</h1>
|
||
<p class="hero-subtitle">Procházejte naši kompletní nabídku prémiových destilátů. Filtrovat můžete podle značky, země, ceny a obsahu alkoholu.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="categories">
|
||
<div class="container">
|
||
<div class="chips" id="categoryChips">
|
||
<button class="chip active" data-category="">Vše</button>
|
||
<button class="chip" data-category="Bourbony">Bourbony</button>
|
||
<button class="chip" data-category="Brandy">Brandy</button>
|
||
<button class="chip" data-category="Giny">Giny</button>
|
||
<button class="chip" data-category="Koňaky">Koňaky</button>
|
||
<button class="chip" data-category="Likéry">Likéry</button>
|
||
<button class="chip" data-category="Ostatní Lihoviny">Ostatní Lihoviny</button>
|
||
<button class="chip" data-category="Rumy">Rumy</button>
|
||
<button class="chip" data-category="Tequily">Tequily</button>
|
||
<button class="chip" data-category="Vodky">Vodky</button>
|
||
<button class="chip" data-category="Whisky">Whisky</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Filters -->
|
||
<section class="catalog-filters">
|
||
<div class="container">
|
||
<div class="filters-header">
|
||
<input type="search" id="searchInput" class="search-input" placeholder="Hledat produkty (název, značka)...">
|
||
<div class="controls-right">
|
||
<button class="filters-mobile-toggle" id="filtersToggle">Filtry</button>
|
||
<div class="select sort-select">
|
||
<select id="sortSelect">
|
||
<option value="relevance">Seřadit: Relevance</option>
|
||
<option value="price-asc">Cena: od nejnižší</option>
|
||
<option value="price-desc">Cena: od nejvyšší</option>
|
||
<option value="name-asc">Název: A–Z</option>
|
||
<option value="name-desc">Název: Z–A</option>
|
||
<option value="alc-asc">Alkohol: od nejnižší</option>
|
||
<option value="alc-desc">Alkohol: od nejvyšší</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="filters-panel" id="filtersPanel">
|
||
<div class="filters-bar">
|
||
<div class="filter-field">
|
||
<label class="filter-label">Značka</label>
|
||
<div class="select">
|
||
<select id="brand">
|
||
<option value="">Vše</option>
|
||
<option>A. H. Riise</option>
|
||
<option>Absolut</option>
|
||
<option>Abuelo</option>
|
||
<option>Baileys</option>
|
||
<option>Beefeater</option>
|
||
<option>Gordon's</option>
|
||
<option>Hennessy</option>
|
||
<option>Jack Daniel's</option>
|
||
<option>Jägermeister</option>
|
||
<option>Jose Cuervo</option>
|
||
<option>Johnnie Walker</option>
|
||
<option>Martell</option>
|
||
<option>Patrón</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="filter-field">
|
||
<label class="filter-label">Země</label>
|
||
<div class="select">
|
||
<select id="country">
|
||
<option value="">Vše</option>
|
||
<option>Anglie</option>
|
||
<option>Francie</option>
|
||
<option>Irsko</option>
|
||
<option>Karibik</option>
|
||
<option>Mexiko</option>
|
||
<option>Německo</option>
|
||
<option>Panama</option>
|
||
<option>Skotsko</option>
|
||
<option>Švédsko</option>
|
||
<option>USA</option>
|
||
<option>Česká republika</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="filter-field">
|
||
<label for="priceMin" class="filter-label">Cena: <span id="priceDisplay">0 – 5000 Kč</span></label>
|
||
<div class="range">
|
||
<input type="range" id="priceMin" min="0" max="5000" value="0">
|
||
<input type="range" id="priceMax" min="0" max="5000" value="5000">
|
||
</div>
|
||
</div>
|
||
<div class="filter-field">
|
||
<label for="alcMin" class="filter-label">Obsah alkoholu: <span id="alcDisplay">0% – 100%</span></label>
|
||
<div class="range">
|
||
<input type="range" id="alcMin" min="0" max="100" value="0">
|
||
<input type="range" id="alcMax" min="0" max="100" value="100">
|
||
</div>
|
||
</div>
|
||
<div class="filter-field">
|
||
<label class="filter-label">Dostupnost</label>
|
||
<div class="chip-group">
|
||
<label class="chip-select"><input type="checkbox" id="stockIn" hidden><span>Skladem</span></label>
|
||
<label class="chip-select"><input type="checkbox" id="stockOut" hidden><span>Nedostupné</span></label>
|
||
</div>
|
||
</div>
|
||
<div class="filter-actions">
|
||
<button class="btn" id="filterBtn">Zobrazit</button>
|
||
<button class="btn" id="resetBtn" style="background: #e9e5da; color: var(--text);">Reset</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="activeFilters" class="active-filters"></div>
|
||
<div id="resultsSummary" class="results-summary"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Catalog Grid -->
|
||
<section class="catalog">
|
||
<div class="container">
|
||
<h2 class="catalog-title">Všechny produkty</h2>
|
||
<div class="catalog-grid" id="catalogGrid">
|
||
<!-- 12 example products from example.html -->
|
||
<a href="produkt/005333-a-h-riise-rum-black-barrel" class="card-link">
|
||
<article class="product-card" data-brand="A. H. Riise" data-name="Rum Black Barrel" data-category="Rumy" data-country="Karibik" data-stock="in" data-price="679" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/rum-ah-riise-black-barrel.jpg" alt="A. H. Riise Rum Black Barrel">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">A. H. Riise</div>
|
||
<h3 class="product-name">Rum Black Barrel</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 3 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">679 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/004769-a-h-riise-rum-x-o-reserva" class="card-link">
|
||
<article class="product-card" data-brand="A. H. Riise" data-name="Rum X. O. Reserva" data-category="Rumy" data-country="Karibik" data-stock="in" data-price="999" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/rum-ah-riise-xo.jpg" alt="A. H. Riise Rum X. O. Reserva">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">A. H. Riise</div>
|
||
<h3 class="product-name">Rum X. O. Reserva</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 3 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">999 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/004660-a-h-riise-rum-non-plus-utr" class="card-link">
|
||
<article class="product-card" data-brand="A. H. Riise" data-name="Rum Non Plus Utr." data-category="Rumy" data-country="Karibik" data-stock="in" data-price="1999" data-alc="42">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/rum-ah-riise-non-plus-ultra.jpg" alt="A. H. Riise Non Plus Ultra">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">A. H. Riise</div>
|
||
<h3 class="product-name">Rum Non Plus Utr.</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/42%)</span>
|
||
<span class="badge badge-in">Skladem 2 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">1 999 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/006973-a-h-riise-rum-kalendar-24-x" class="card-link">
|
||
<article class="product-card" data-brand="A. H. Riise" data-name="Rum Kalendář 24 x" data-category="Rumy" data-country="Karibik" data-stock="in" data-price="2099" data-alc="0">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/rum-ah-riise-kalendar.jpg" alt="A. H. Riise Rum Kalendář">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">A. H. Riise</div>
|
||
<h3 class="product-name">Rum Kalendář 24 x</h3>
|
||
<div class="product-meta">
|
||
<span>(0,02l/0%)</span>
|
||
<span class="badge badge-in">Skladem 3 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">2 099 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/003445-absolut-vodka" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka" data-category="Vodky" data-country="Švédsko" data-stock="in" data-price="369" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-0-7.jpg" alt="Absolut Vodka 0,7l">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 1 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">369 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/000549-absolut-vodka" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka" data-category="Vodky" data-country="Švédsko" data-stock="in" data-price="370" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut.png" alt="Absolut Vodka 1l">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-in">Skladem 15 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">370 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/004845-absolut-vodka-facet" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka Facet" data-category="Vodky" data-country="Švédsko" data-stock="out" data-price="370" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-facet.jpg" alt="Absolut Vodka Facet">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka Facet</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-out">Nedostupné</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">370 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/001500-absolut-vodka-ruby-red" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka Ruby Red" data-category="Vodky" data-country="Švédsko" data-stock="in" data-price="425" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-ruby-red.png" alt="Absolut Vodka Ruby Red">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka Ruby Red</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 4 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">425 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/001194-absolut-vodka-citron" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka Citron" data-category="Vodky" data-country="Švédsko" data-stock="in" data-price="461" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-citron.png" alt="Absolut Vodka Citron">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka Citron</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-in">Skladem 4 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">461 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/001421-absolut-vodka-kurant" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka Kurant" data-category="Vodky" data-country="Švédsko" data-stock="out" data-price="461" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-kurant.png" alt="Absolut Vodka Kurant">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka Kurant</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-out">Nedostupné</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">461 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/003233-absolut-vodka-mandrin" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka Mandrin" data-category="Vodky" data-country="Švédsko" data-stock="in" data-price="461" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-mandrin.png" alt="Absolut Vodka Mandrin">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka Mandrin</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-in">Skladem 3 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">461 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/001220-absolut-vodka-pears" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka Pears" data-category="Vodky" data-country="Švédsko" data-stock="out" data-price="461" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-pears.png" alt="Absolut Vodka Pears">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka Pears</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-out">Nedostupné</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">461 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/004748-absolut-vodka-elyx-42-3" class="card-link">
|
||
<article class="product-card" data-brand="Absolut" data-name="Vodka Elyx 42.3%" data-category="Vodky" data-country="Švédsko" data-stock="in" data-price="1349" data-alc="42">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/vodka-absolut-elyx.jpg" alt="Absolut Vodka Elyx 42.3%">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Absolut</div>
|
||
<h3 class="product-name">Vodka Elyx 42.3%</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/42%)</span>
|
||
<span class="badge badge-in">Skladem 2 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">1 349 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/004806-abuelo-rum-12y" class="card-link">
|
||
<article class="product-card" data-brand="Abuelo" data-name="Rum 12y" data-category="Rumy" data-country="Panama" data-stock="in" data-price="749" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/rum-abuelo-12y.jpg" alt="Abuelo Rum 12y">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Abuelo</div>
|
||
<h3 class="product-name">Rum 12y</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 2 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">749 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/005141-abuelo-rum-30y" class="card-link">
|
||
<article class="product-card" data-brand="Abuelo" data-name="Rum 30y" data-category="Rumy" data-country="Panama" data-stock="in" data-price="3221" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/rum-abuelo-30y.jpg" alt="Abuelo Rum 30y">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Abuelo</div>
|
||
<h3 class="product-name">Rum 30y</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 2 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">3 221 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/001234-gordon-gin" class="card-link">
|
||
<article class="product-card" data-brand="Gordon's" data-name="Gin" data-category="Giny" data-country="Anglie" data-stock="in" data-price="289" data-alc="37">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/gin-gordons.jpg" alt="Gordon's Gin">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Gordon's</div>
|
||
<h3 class="product-name">Gin</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/37%)</span>
|
||
<span class="badge badge-in">Skladem 8 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">289 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/002345-beefeater-gin" class="card-link">
|
||
<article class="product-card" data-brand="Beefeater" data-name="Gin" data-category="Giny" data-country="Anglie" data-stock="in" data-price="549" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/gin-beefeater.jpg" alt="Beefeater Gin">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Beefeater</div>
|
||
<h3 class="product-name">Gin</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-in">Skladem 5 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">549 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/003456-jack-daniels-whiskey" class="card-link">
|
||
<article class="product-card" data-brand="Jack Daniel's" data-name="Old No. 7" data-category="Whisky" data-country="USA" data-stock="in" data-price="899" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/whiskey-jack-daniels.jpg" alt="Jack Daniel's Old No. 7">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Jack Daniel's</div>
|
||
<h3 class="product-name">Old No. 7</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-in">Skladem 12 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">899 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/004567-johnnie-walker-red" class="card-link">
|
||
<article class="product-card" data-brand="Johnnie Walker" data-name="Red Label" data-category="Whisky" data-country="Skotsko" data-stock="in" data-price="749" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/whiskey-johnnie-walker-red.jpg" alt="Johnnie Walker Red Label">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Johnnie Walker</div>
|
||
<h3 class="product-name">Red Label</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-in">Skladem 18 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">749 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/005678-johnnie-walker-black" class="card-link">
|
||
<article class="product-card" data-brand="Johnnie Walker" data-name="Black Label" data-category="Whisky" data-country="Skotsko" data-stock="in" data-price="1299" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/whiskey-johnnie-walker-black.jpg" alt="Johnnie Walker Black Label">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Johnnie Walker</div>
|
||
<h3 class="product-name">Black Label</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/40%)</span>
|
||
<span class="badge badge-in">Skladem 9 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">1 299 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/006789-jose-cuervo-tequila" class="card-link">
|
||
<article class="product-card" data-brand="Jose Cuervo" data-name="Gold Tequila" data-category="Tequily" data-country="Mexiko" data-stock="in" data-price="499" data-alc="38">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/tequila-jose-cuervo.jpg" alt="Jose Cuervo Gold Tequila">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Jose Cuervo</div>
|
||
<h3 class="product-name">Gold Tequila</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/38%)</span>
|
||
<span class="badge badge-in">Skladem 6 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">499 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/007890-patron-tequila" class="card-link">
|
||
<article class="product-card" data-brand="Patrón" data-name="Silver Tequila" data-category="Tequily" data-country="Mexiko" data-stock="in" data-price="1899" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/tequila-patron.jpg" alt="Patrón Silver Tequila">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Patrón</div>
|
||
<h3 class="product-name">Silver Tequila</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 3 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">1 899 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/008901-martell-cognac" class="card-link">
|
||
<article class="product-card" data-brand="Martell" data-name="VS" data-category="Koňaky" data-country="Francie" data-stock="in" data-price="899" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/cognac-martell-vs.jpg" alt="Martell VS">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Martell</div>
|
||
<h3 class="product-name">VS</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 7 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">899 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/009012-hennessy-cognac" class="card-link">
|
||
<article class="product-card" data-brand="Hennessy" data-name="VS" data-category="Koňaky" data-country="Francie" data-stock="in" data-price="1099" data-alc="40">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/cognac-hennessy-vs.jpg" alt="Hennessy VS">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Hennessy</div>
|
||
<h3 class="product-name">VS</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/40%)</span>
|
||
<span class="badge badge-in">Skladem 5 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">1 099 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/010123-baileys-liqueur" class="card-link">
|
||
<article class="product-card" data-brand="Baileys" data-name="Original" data-category="Likéry" data-country="Irsko" data-stock="in" data-price="399" data-alc="17">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/baileys-original.jpg" alt="Baileys Original">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Baileys</div>
|
||
<h3 class="product-name">Original</h3>
|
||
<div class="product-meta">
|
||
<span>(0,7l/17%)</span>
|
||
<span class="badge badge-in">Skladem 14 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">399 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
<a href="produkt/011234-jagermeister" class="card-link">
|
||
<article class="product-card" data-brand="Jägermeister" data-name="Herbal Liqueur" data-category="Likéry" data-country="Německo" data-stock="in" data-price="449" data-alc="35">
|
||
<div class="product-img">
|
||
<img src="https://www.masterdrinks.cz/files/img/products_02/jagermeister.jpg" alt="Jägermeister Herbal Liqueur">
|
||
</div>
|
||
<div class="product-body">
|
||
<div class="product-brand">Jägermeister</div>
|
||
<h3 class="product-name">Herbal Liqueur</h3>
|
||
<div class="product-meta">
|
||
<span>(1l/35%)</span>
|
||
<span class="badge badge-in">Skladem 20 ks</span>
|
||
</div>
|
||
<div class="product-bottom">
|
||
<div class="price">449 Kč</div>
|
||
<button class="product-btn">Podrobnosti</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</a>
|
||
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<nav class="pagination" aria-label="Pagination">
|
||
<a class="page-link active" href="#">1</a>
|
||
<span>/</span>
|
||
<a class="page-link" href="#">2</a>
|
||
<span>/</span>
|
||
<a class="page-link" href="#">3</a>
|
||
<span>/</span>
|
||
<a class="page-link" href="#">...</a>
|
||
<span>/</span>
|
||
<a class="page-link" href="#">21</a>
|
||
</nav>
|
||
</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>
|
||
// Format price with thousands separator
|
||
function formatPrice(price) {
|
||
return new Intl.NumberFormat('cs-CZ').format(price);
|
||
}
|
||
|
||
// Category Filtering
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const categoryButtons = document.querySelectorAll('.category-btn');
|
||
const productCards = document.querySelectorAll('.product-card');
|
||
const activeFilters = [];
|
||
|
||
// Initialize category buttons
|
||
categoryButtons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const category = this.getAttribute('data-category');
|
||
|
||
// Toggle active state
|
||
if (category === '') {
|
||
// If 'All' is clicked, deactivate all other buttons
|
||
categoryButtons.forEach(btn => btn.classList.remove('active'));
|
||
this.classList.add('active');
|
||
// Clear all filters
|
||
while(activeFilters.length) activeFilters.pop();
|
||
} else {
|
||
// Toggle the clicked button
|
||
this.classList.toggle('active');
|
||
|
||
// Remove 'All' active state if another category is selected
|
||
document.querySelector('.category-btn[data-category=""]').classList.remove('active');
|
||
|
||
// Update active filters
|
||
const index = activeFilters.indexOf(category);
|
||
if (index > -1) {
|
||
activeFilters.splice(index, 1);
|
||
} else {
|
||
activeFilters.push(category);
|
||
}
|
||
|
||
// If no filters are active, activate 'All'
|
||
if (activeFilters.length === 0) {
|
||
document.querySelector('.category-btn[data-category=""]').classList.add('active');
|
||
}
|
||
}
|
||
|
||
// Filter products
|
||
filterProducts();
|
||
});
|
||
});
|
||
|
||
// Filter products based on active categories
|
||
function filterProducts() {
|
||
productCards.forEach(card => {
|
||
const cardCategory = card.getAttribute('data-category').toLowerCase();
|
||
|
||
if (activeFilters.length === 0) {
|
||
// Show all products if no filters are active
|
||
card.style.display = 'block';
|
||
} else {
|
||
// Show only products that match active categories
|
||
if (activeFilters.some(filter => cardCategory.includes(filter.toLowerCase()))) {
|
||
card.style.display = 'block';
|
||
} else {
|
||
card.style.display = 'none';
|
||
}
|
||
}
|
||
});
|
||
|
||
// Update URL hash for deep linking
|
||
updateUrlHash();
|
||
}
|
||
|
||
// Update URL hash with active filters
|
||
function updateUrlHash() {
|
||
if (activeFilters.length > 0) {
|
||
window.location.hash = '#' + activeFilters.join(',');
|
||
} else {
|
||
history.pushState('', document.title, window.location.pathname + window.location.search);
|
||
}
|
||
}
|
||
|
||
// Check URL hash on page load
|
||
function checkUrlHash() {
|
||
const hash = window.location.hash.substring(1);
|
||
if (hash) {
|
||
const categories = hash.split(',');
|
||
categories.forEach(cat => {
|
||
const button = document.querySelector(`.category-btn[data-category="${cat}"]`);
|
||
if (button) {
|
||
button.click(); // Trigger click to activate the filter
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// Initialize URL hash check
|
||
checkUrlHash();
|
||
|
||
// Back to Top Button
|
||
const backToTopButton = document.getElementById('backToTop');
|
||
|
||
window.addEventListener('scroll', function() {
|
||
if (window.pageYOffset > 300) {
|
||
backToTopButton.classList.add('visible');
|
||
} else {
|
||
backToTopButton.classList.remove('visible');
|
||
}
|
||
});
|
||
|
||
backToTopButton.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
// Smooth scrolling for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
const targetId = this.getAttribute('href');
|
||
if (targetId === '#') return;
|
||
|
||
const targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
e.preventDefault();
|
||
window.scrollTo({
|
||
top: targetElement.offsetTop - 100,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Age Verification + Header interactions
|
||
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 filtersToggle = document.getElementById('filtersToggle');
|
||
const filtersPanel = document.getElementById('filtersPanel');
|
||
const sortSelect = document.getElementById('sortSelect');
|
||
const categoryChips = document.getElementById('categoryChips');
|
||
const activeFilters = document.getElementById('activeFilters');
|
||
const resultsSummary = document.getElementById('resultsSummary');
|
||
|
||
// Check age verification first
|
||
if (localStorage.getItem('ageVerified')) {
|
||
ageModal.style.display = 'none';
|
||
}
|
||
|
||
// Age verification event listeners
|
||
if (ageYesBtn) {
|
||
ageYesBtn.addEventListener('click', function() {
|
||
localStorage.setItem('ageVerified', 'true');
|
||
ageModal.style.display = 'none';
|
||
});
|
||
}
|
||
|
||
if (ageNoBtn) {
|
||
ageNoBtn.addEventListener('click', function() {
|
||
window.location.href = 'about:blank';
|
||
});
|
||
}
|
||
|
||
// Mobile menu toggle
|
||
if (hamburger && navMenu) {
|
||
hamburger.addEventListener('click', function() {
|
||
navMenu.classList.toggle('show');
|
||
});
|
||
}
|
||
|
||
// Header scroll effect
|
||
window.addEventListener('scroll', function() {
|
||
const header = document.querySelector('header');
|
||
if (window.scrollY > 100) header.classList.add('sticky'); else header.classList.remove('sticky');
|
||
});
|
||
|
||
const priceMin = document.getElementById('priceMin');
|
||
const priceMax = document.getElementById('priceMax');
|
||
const priceDisplay = document.getElementById('priceDisplay');
|
||
const alcMin = document.getElementById('alcMin');
|
||
const alcMax = document.getElementById('alcMax');
|
||
const alcDisplay = document.getElementById('alcDisplay');
|
||
const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
|
||
function updatePrice(){
|
||
if (+priceMin.value > +priceMax.value) priceMin.value = priceMax.value;
|
||
priceDisplay.textContent = `${Number(priceMin.value).toLocaleString('cs-CZ')} – ${Number(priceMax.value).toLocaleString('cs-CZ')} Kč`;
|
||
}
|
||
function updateAlc(){
|
||
if (+alcMin.value > +alcMax.value) alcMin.value = alcMax.value;
|
||
alcDisplay.textContent = `${alcMin.value}% – ${alcMax.value}%`;
|
||
}
|
||
priceMin.addEventListener('input', updatePrice);
|
||
priceMax.addEventListener('input', updatePrice);
|
||
alcMin.addEventListener('input', updateAlc);
|
||
alcMax.addEventListener('input', updateAlc);
|
||
updatePrice(); updateAlc();
|
||
|
||
const filterBtn = document.getElementById('filterBtn');
|
||
const resetBtn = document.getElementById('resetBtn');
|
||
const grid = document.getElementById('catalogGrid');
|
||
const brandSel = document.getElementById('brand');
|
||
const countrySel = document.getElementById('country');
|
||
const stockIn = document.getElementById('stockIn');
|
||
const stockOut = document.getElementById('stockOut');
|
||
|
||
Array.from(grid.querySelectorAll('.card-link')).forEach((a, i) => a.dataset.index = i);
|
||
const defaultPriceMin = +priceMin.value;
|
||
const defaultPriceMax = +priceMax.value;
|
||
const defaultAlcMin = +alcMin.value;
|
||
const defaultAlcMax = +alcMax.value;
|
||
|
||
function getSelectedCategory(){
|
||
const active = document.querySelector('#categoryChips .chip.active');
|
||
return active ? active.getAttribute('data-category') : '';
|
||
}
|
||
|
||
function buildActiveChips(state){
|
||
if (!activeFilters) return;
|
||
activeFilters.innerHTML = '';
|
||
const addChip = (type, label) => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'filter-chip';
|
||
btn.setAttribute('data-type', type);
|
||
btn.innerHTML = `<span>${label}</span><span class="x">×</span>`;
|
||
activeFilters.appendChild(btn);
|
||
};
|
||
if (state.search) addChip('search', `Hledat: ${state.search}`);
|
||
if (state.category) addChip('category', `Kategorie: ${state.category}`);
|
||
if (state.brand) addChip('brand', `Značka: ${state.brand}`);
|
||
if (state.country) addChip('country', `Země: ${state.country}`);
|
||
if (state.pMin > defaultPriceMin || state.pMax < defaultPriceMax) addChip('price', `Cena: ${state.pMin}–${state.pMax} Kč`);
|
||
if (state.aMin > defaultAlcMin || state.aMax < defaultAlcMax) addChip('alc', `Alkohol: ${state.aMin}–${state.aMax}%`);
|
||
if (state.wantIn && !state.wantOut) addChip('stock-in', 'Dostupnost: Skladem');
|
||
if (state.wantOut && !state.wantIn) addChip('stock-out', 'Dostupnost: Nedostupné');
|
||
}
|
||
|
||
function updateResults(){
|
||
if (!resultsSummary) return;
|
||
const total = grid.querySelectorAll('.card-link').length;
|
||
const visible = Array.from(grid.querySelectorAll('.card-link')).filter(a => a.style.display !== 'none').length;
|
||
resultsSummary.textContent = `${visible} z ${total} produktů`;
|
||
}
|
||
|
||
function applyFilters(){
|
||
const search = (searchInput ? searchInput.value.trim().toLowerCase() : '');
|
||
const brand = brandSel.value.trim();
|
||
const country = countrySel.value.trim();
|
||
const category = getSelectedCategory();
|
||
const pMin = +priceMin.value; const pMax = +priceMax.value;
|
||
const aMin = +alcMin.value; const aMax = +alcMax.value;
|
||
const wantIn = stockIn && stockIn.checked;
|
||
const wantOut = stockOut && stockOut.checked;
|
||
|
||
Array.from(grid.querySelectorAll('.card-link')).forEach(link => {
|
||
const card = link.querySelector('.product-card');
|
||
const cBrand = (card.dataset.brand || '');
|
||
const cName = (card.dataset.name || '').toLowerCase();
|
||
const cCategory = (card.dataset.category || '');
|
||
const cCountry = (card.dataset.country || '');
|
||
const cStock = (card.dataset.stock || '');
|
||
const cPrice = +card.dataset.price;
|
||
const cAlc = +card.dataset.alc;
|
||
|
||
const okSearch = !search || cName.includes(search) || cBrand.toLowerCase().includes(search);
|
||
const okBrand = !brand || cBrand === brand;
|
||
const okCountry = !country || cCountry === country;
|
||
const okCategory = !category || cCategory === category;
|
||
const okPrice = cPrice >= pMin && cPrice <= pMax;
|
||
const okAlc = cAlc >= aMin && cAlc <= aMax;
|
||
let okStock = true;
|
||
if (wantIn && !wantOut) okStock = cStock === 'in';
|
||
if (!wantIn && wantOut) okStock = cStock === 'out';
|
||
|
||
const visible = okSearch && okBrand && okCountry && okCategory && okPrice && okAlc && okStock;
|
||
link.style.display = visible ? '' : 'none';
|
||
});
|
||
|
||
const state = { search, brand, country, category, pMin, pMax, aMin, aMax, wantIn, wantOut };
|
||
buildActiveChips(state);
|
||
updateResults();
|
||
}
|
||
|
||
function applySort(){
|
||
const items = Array.from(grid.querySelectorAll('.card-link'));
|
||
const mode = sortSelect ? sortSelect.value : 'relevance';
|
||
const collator = new Intl.Collator('cs', { sensitivity: 'base', numeric: true });
|
||
items.sort((a, b) => {
|
||
const ca = a.querySelector('.product-card').dataset;
|
||
const cb = b.querySelector('.product-card').dataset;
|
||
switch (mode) {
|
||
case 'price-asc': return (+ca.price) - (+cb.price);
|
||
case 'price-desc': return (+cb.price) - (+ca.price);
|
||
case 'name-asc': return collator.compare(ca.name || '', cb.name || '');
|
||
case 'name-desc': return collator.compare(cb.name || '', ca.name || '');
|
||
case 'alc-asc': return (+ca.alc) - (+cb.alc);
|
||
case 'alc-desc': return (+cb.alc) - (+ca.alc);
|
||
default: return (+a.dataset.index) - (+b.dataset.index);
|
||
}
|
||
});
|
||
items.forEach(el => grid.appendChild(el));
|
||
}
|
||
|
||
function applyAll(e){
|
||
if (e && e.preventDefault) e.preventDefault();
|
||
applyFilters();
|
||
applySort();
|
||
}
|
||
|
||
if (filtersToggle && filtersPanel) {
|
||
filtersToggle.addEventListener('click', function(){ filtersPanel.classList.toggle('open'); });
|
||
}
|
||
if (categoryChips) {
|
||
categoryChips.addEventListener('click', function(e){
|
||
const chip = e.target.closest('.chip');
|
||
if (!chip) return;
|
||
categoryChips.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
|
||
chip.classList.add('active');
|
||
applyAll();
|
||
});
|
||
}
|
||
|
||
// Add footer category filter functionality
|
||
const footerCategoryFilter = document.getElementById('footerCategoryFilter');
|
||
if (footerCategoryFilter) {
|
||
footerCategoryFilter.addEventListener('click', function(e){
|
||
const button = e.target.closest('.category-btn');
|
||
if (!button) return;
|
||
|
||
const category = button.getAttribute('data-category');
|
||
|
||
// Update footer buttons active state
|
||
footerCategoryFilter.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
|
||
button.classList.add('active');
|
||
|
||
// Update main category chips to match
|
||
if (categoryChips) {
|
||
categoryChips.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
|
||
const targetChip = categoryChips.querySelector(`.chip[data-category="${category}"]`);
|
||
if (targetChip) {
|
||
targetChip.classList.add('active');
|
||
} else if (category === '') {
|
||
const allChip = categoryChips.querySelector('.chip[data-category=""]');
|
||
if (allChip) allChip.classList.add('active');
|
||
}
|
||
}
|
||
|
||
// Apply filters
|
||
applyAll();
|
||
|
||
// Scroll to top of catalog
|
||
const catalogSection = document.querySelector('.catalog');
|
||
if (catalogSection) {
|
||
catalogSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
}
|
||
});
|
||
}
|
||
if (searchInput) searchInput.addEventListener('input', applyAll);
|
||
if (sortSelect) sortSelect.addEventListener('change', applyAll);
|
||
brandSel.addEventListener('change', applyAll);
|
||
countrySel.addEventListener('change', applyAll);
|
||
priceMin.addEventListener('input', applyAll);
|
||
priceMax.addEventListener('input', applyAll);
|
||
alcMin.addEventListener('input', applyAll);
|
||
alcMax.addEventListener('input', applyAll);
|
||
if (stockIn) stockIn.addEventListener('change', applyAll);
|
||
if (stockOut) stockOut.addEventListener('change', applyAll);
|
||
|
||
filterBtn.addEventListener('click', applyAll);
|
||
resetBtn.addEventListener('click', function(){
|
||
if (searchInput) searchInput.value = '';
|
||
brandSel.value = '';
|
||
countrySel.value = '';
|
||
priceMin.value = defaultPriceMin; priceMax.value = defaultPriceMax; updatePrice();
|
||
alcMin.value = defaultAlcMin; alcMax.value = defaultAlcMax; updateAlc();
|
||
if (stockIn) stockIn.checked = false;
|
||
if (stockOut) stockOut.checked = false;
|
||
const allChip = document.querySelector('#categoryChips .chip[data-category=""]');
|
||
if (allChip) {
|
||
document.querySelectorAll('#categoryChips .chip').forEach(c => c.classList.remove('active'));
|
||
allChip.classList.add('active');
|
||
}
|
||
// Reset footer category buttons
|
||
const footerCategoryFilter = document.getElementById('footerCategoryFilter');
|
||
if (footerCategoryFilter) {
|
||
footerCategoryFilter.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
|
||
const footerAllBtn = footerCategoryFilter.querySelector('.category-btn[data-category=""]');
|
||
if (footerAllBtn) footerAllBtn.classList.add('active');
|
||
}
|
||
if (sortSelect) sortSelect.value = 'relevance';
|
||
Array.from(grid.querySelectorAll('.card-link')).forEach(a => a.style.display = '');
|
||
applyAll();
|
||
});
|
||
|
||
if (activeFilters) {
|
||
activeFilters.addEventListener('click', function(e){
|
||
const target = e.target.closest('.filter-chip');
|
||
if (!target) return;
|
||
const t = target.getAttribute('data-type');
|
||
if (t === 'search' && searchInput) searchInput.value = '';
|
||
if (t === 'category') {
|
||
const allChip = document.querySelector('#categoryChips .chip[data-category=""]');
|
||
if (allChip) {
|
||
document.querySelectorAll('#categoryChips .chip').forEach(c => c.classList.remove('active'));
|
||
allChip.classList.add('active');
|
||
}
|
||
// Sync footer category buttons
|
||
const footerCategoryFilter = document.getElementById('footerCategoryFilter');
|
||
if (footerCategoryFilter) {
|
||
footerCategoryFilter.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active'));
|
||
const footerAllBtn = footerCategoryFilter.querySelector('.category-btn[data-category=""]');
|
||
if (footerAllBtn) footerAllBtn.classList.add('active');
|
||
}
|
||
}
|
||
if (t === 'brand') brandSel.value = '';
|
||
if (t === 'country') countrySel.value = '';
|
||
if (t === 'price') { priceMin.value = defaultPriceMin; priceMax.value = defaultPriceMax; updatePrice(); }
|
||
if (t === 'alc') { alcMin.value = defaultAlcMin; alcMax.value = defaultAlcMax; updateAlc(); }
|
||
if (t === 'stock-in' && stockIn) stockIn.checked = false;
|
||
if (t === 'stock-out' && stockOut) stockOut.checked = false;
|
||
applyAll();
|
||
});
|
||
}
|
||
|
||
applyAll();
|
||
|
||
// Check URL hash for auto-filtering
|
||
function checkUrlHash() {
|
||
const hash = window.location.hash.substring(1); // Remove the # symbol
|
||
if (hash) {
|
||
// Map hash values to category names
|
||
const categoryMap = {
|
||
'whisky': 'Whisky',
|
||
'vodky': 'Vodky',
|
||
'rumy': 'Rumy',
|
||
'tequily': 'Tequily',
|
||
'giny': 'Giny',
|
||
'likery': 'Likéry',
|
||
'brandy': 'Brandy',
|
||
'cognac': 'Koňaky'
|
||
};
|
||
|
||
const categoryName = categoryMap[hash];
|
||
if (categoryName) {
|
||
// Find and click the footer category button
|
||
const footerBtn = document.querySelector(`#footerCategoryFilter .category-btn[data-category="${hash}"]`);
|
||
if (footerBtn) {
|
||
footerBtn.click();
|
||
} else {
|
||
// Try main category chips
|
||
const chip = document.querySelector(`#categoryChips .chip[data-category="${categoryName}"]`);
|
||
if (chip) {
|
||
chip.click();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Check hash on page load
|
||
checkUrlHash();
|
||
|
||
// Check hash on hash change
|
||
window.addEventListener('hashchange', checkUrlHash);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|