https://lektormilky.cz/shop

1<!DOCTYPE html>
2<html lang="cs">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6  <title>Obchod</title>
7  <link rel="icon" href="https://lektormilky.cz/images/webfavicon.png" type="image/png" />
8  <meta name="csrf-token" content="aZyd7USHr1Pt4v38zB5XVH9SSsdDihD7v6Unl6cm">
9
10  
11  <link rel="preload" as="style" href="https://lektormilky.cz/build/assets/navbar-BACJVzhn.css" /><link rel="preload" as="style" href="https://lektormilky.cz/build/assets/welcome-XghL5OQt.css" /><link rel="preload" as="style" href="https://lektormilky.cz/build/assets/cartpopup-OmoOh6Ar.css" /><link rel="modulepreload" as="script" href="https://lektormilky.cz/build/assets/navbar-DMnptnoF.js" /><link rel="modulepreload" as="script" href="https://lektormilky.cz/build/assets/lucide-icons-BbFicJj0.js" /><link rel="modulepreload" as="script" href="https://lektormilky.cz/build/assets/lucide-C63VmYQq.js" /><link rel="modulepreload" as="script" href="https://lektormilky.cz/build/assets/welcome-CEYWNA9A.js" /><link rel="modulepreload" as="script" href="https://lektormilky.cz/build/assets/cartpopup-Dm1N1Zv5.js" /><link rel="stylesheet" href="https://lektormilky.cz/build/assets/navbar-BACJVzhn.css" /><link rel="stylesheet" href="https://lektormilky.cz/build/assets/welcome-XghL5OQt.css" /><link rel="stylesheet" href="https://lektormilky.cz/build/assets/cartpopup-OmoOh6Ar.css" />

11<script type="module" src="https://lektormilky.cz/build/assets/navbar-DMnptnoF.js"></script>

11<script type="module" src="https://lektormilky.cz/build/assets/welcome-CEYWNA9A.js"></script>

11<script type="module" src="https://lektormilky.cz/build/assets/cartpopup-Dm1N1Zv5.js"></script>

11
12  
13  
14  
15      <link rel="preload" as="style" href="https://lektormilky.cz/build/assets/shop-C1Vq6BAB.css" /><link rel="modulepreload" as="script" href="https://lektormilky.cz/build/assets/shop-BzhESjPc.js" /><link rel="stylesheet" href="https://lektormilky.cz/build/assets/shop-C1Vq6BAB.css" />

15<script type="module" src="https://lektormilky.cz/build/assets/shop-BzhESjPc.js"></script>

15</head>
16
17
18<body class="">
19
20  
21      
22    <div id="cartOverlay" class="cart-overlay" hidden></div>
23
24    <!-- ===============================
25     CART POPUP (Session-driven)
26     =============================== -->
27<div id="cartPopup" class="cart-popup" role="dialog" aria-modal="true" aria-labelledby="cartTitle">
28  <!-- Optional drag handle for touch devices -->
29  <div class="cart-drag-handle"></div>
30
31  <!-- === HEADER === -->
32  <div class="cart-header">
33    <h3 id="cartTitle">Váš košík</h3>
34    <button type="button" class="close-btn" id="closeCartBtn" title="Zavřít">
35      <i data-lucide="x"></i>
36    </button>
37  </div>
38
39  <!-- === ITEMS === -->
40  <div id="cartItems" class="cart-items">
41    <div class="cart-items-list" data-context="popup">
42      <div class="cart-item empty">Váš košík je prázdný.</div>
43  </div>
44
45  </div>
46
47  <!-- === FOOTER === -->
48  <div class="cart-footer">
49    <div class="total">
50      Celkem:
51      <strong>
52        <span id="cartTotal">0.00</span> Kč
53      </strong>
54    </div>
55
56    <div class="cart-actions">
57      <a href="https://lektormilky.cz/shop" class="btn shop">
58        <i data-lucide="store"></i>
59        <span>Obchod</span>
60      </a>
61
62      <a href="https://lektormilky.cz/cart" class="btn cart">
63        <i data-lucide="shopping-cart"></i>
64        <span>Košík</span>
65      </a>
66    </div>
67  </div>
68</div>
69
70<dialog id="confirmRemoveDialog">
71  <div class="modal-head">Odstranit položku</div>
72  <div class="modal-body">
73    Opravdu chcete odstranit tento produkt z košíku?
74  </div>
75  <div class="modal-foot">
76    <button type="button" class="btn line">Zrušit</button>
77    <button type="button" class="btn prim">Odstranit</button>
78  </div>
79</dialog>
80
81<!-- === OVERLAY (global) === -->
82<div id="cartOverlay" class="cart-overlay" hidden></div>
83  
84  
85  <div id="snap-container" class="snap-container">
86    <section id="shop" class="shop-page">
87  <header class="shop-header">
88    <h1>Milky Obchod</h1>
89    <p>Vyberte si z naší nabídky kurzů, knih a dalších produktů.</p>
90  </header>
91
92      <div class="shop-grid">
93              <div class="shop-card" data-id="1">
94          <img
95            src="https://lektormilky.cz/products/91HYPKKjXG3xpOvPHHfIrYPJUebZH5b6kxKvyQGF.png"
96            alt="Jelimánův průvodce angličtinou"
97          >
98          <div class="shop-card-body">
99            <h3>Jelimánův průvodce angličtinou</h3>
100            <p class="price">600.00 Kč</p>
101                          <p class="desc">360 stran nabitejch vědomostma vod gramatikz po slovní zásobu, který ti umožněj se dostat...</p>
102                        <button class="add-to-cart-btn" data-id="1">
103              <svg viewBox="0 0 24 24">
104                <circle cx="9" cy="21" r="1" />
105                <circle cx="20" cy="21" r="1" />
106                <path d="M1 1h4l2.68 12.39a2 2 0 0 0 2 1.61H19a2 2 0 0 0 2-1.6l1.38-7.4H6" />
107              </svg>
108              <span>Přidat do košíku</span>
109            </button>
110          </div>
111        </div>
112          </div>
113  </section>
114  </div>
115
116  
117  <style>
118@keyframes gdprSlideUp {
119  0% { transform: translate(-50%, 40px); opacity: 0; }
120  100% { transform: translate(-50%, 0); opacity: 1; }
121}
122
123/* ===============================
124   GDPR Popup
125   =============================== */
126#gdpr-popup {
127  position: fixed;
128  bottom: calc(1rem + env(safe-area-inset-bottom));
129  left: 50%;
130  transform: translateX(-50%);
131  display: none;
132  align-items: center;
133  justify-content: space-between;
134  width: min(680px, 92%);
135  padding: 14px 20px;
136  border-radius: 18px;
137  background: var(--grad);
138  color: #fff;
139  box-shadow: 0 10px 32px rgba(0,0,0,.25);
140  border: 1px solid rgba(255,255,255,.2);
141  font-size: 15px;
142  font-weight: 600;
143  line-height: 1.4;
144  z-index: 99999;
145  animation: gdprSlideUp 0.6s cubic-bezier(0.18, 0.8, 0.3, 1) both;
146  backdrop-filter: blur(8px);
147  gap: 48px; /* ✅ bigger space between left and right */
148}
149
150#gdpr-popup .gdpr-left {
151  display: flex;
152  align-items: center;
153  gap: 8px;
154  flex: 1 1 auto;
155  min-width: 0;
156}
157
158#gdpr-popup .gdpr-right {
159  display: flex;
160  gap: 8px;
161  flex-shrink: 0;
162}
163
164/* Buttons */
165#gdpr-popup button {
166  cursor: pointer;
167  border: none;
168  border-radius: 9999px;
169  font-weight: 800;
170  font-size: 14px;
171  padding: 7px 16px;
172  transition: all 0.2s ease;
173}
174
175#gdpr-accept {
176  background: #fff;
177  color: var(--brand);
178}
179#gdpr-accept:hover {
180  background: #f9fafb;
181  transform: translateY(-1px);
182}
183
184#gdpr-decline {
185  background: transparent;
186  color: #fff;
187  border: 1px solid rgba(255,255,255,.45);
188}
189#gdpr-decline:hover {
190  background: rgba(255,255,255,.15);
191  transform: translateY(-1px);
192}
193
194/* Details button (smaller white pill) */
195#gdpr-popup .details-btn {
196  background: #fff;
197  color: var(--brand);
198  border: none;
199  border-radius: 9999px;
200  font-weight: 800;
201  font-size: 13px;
202  padding: 5px 12px;
203  cursor: pointer;
204  transition: all 0.2s ease;
205  box-shadow: 0 1px 3px rgba(0,0,0,.12);
206  white-space: nowrap;
207}
208#gdpr-popup .details-btn:hover {
209  background: #f3f3f3;
210  transform: translateY(-1px);
211}
212
213/* Responsive layout */
214@media (max-width: 640px) {
215  #gdpr-popup {
216    flex-direction: column;
217    text-align: center;
218    padding: 16px;
219    gap: 14px;
220  }

221  #gdpr-popup .gdpr-left {
222    justify-content: center;
223    flex-wrap: wrap;
224  }
225  #gdpr-popup .gdpr-right {
226    justify-content: center;
227    flex-wrap: wrap;
228  }
229}
230
231/* ===============================
232   Privacy Modal
233   =============================== */
234#privacy-dialog {
235  position: fixed;
236  inset: 0;
237  display: none;
238  align-items: center;
239  justify-content: center;
240  background: rgba(0, 0, 0, 0.75);
241  backdrop-filter: blur(6px);
242  z-index: 999999 !important;
243  transition: opacity .3s ease;
244  opacity: 0;
245}
246#privacy-dialog.show {
247  display: flex !important;
248  opacity: 1;
249}
250#privacy-dialog-content {
251  background: #fff;
252  border-radius: 16px;
253  max-width: 720px;
254  width: 90%;
255  padding: 24px;
256  box-shadow: 0 10px 30px rgba(0,0,0,.4);
257  position: relative;
258  max-height: 80vh;
259  display: flex;
260  flex-direction: column;
261}
262
263#close-privacy-dialog {
264  position: absolute;
265  top: 10px;
266  right: 14px;
267  font-size: 22px;
268  color: #444;
269  background: none;
270  border: none;
271  cursor: pointer;
272}
273
274/* Modal typography */
275#privacy-dialog-content .subcard {
276  font-size: 15px;
277  line-height: 1.6;
278  color: var(--ink);
279}
280#privacy-dialog-content .subcard h1,
281#privacy-dialog-content .subcard h2 {
282  color: var(--brand);
283  margin-bottom: 0.4rem;
284  font-weight: 900;
285}
286#privacy-dialog-content .subcard p {
287  margin-bottom: 0.8rem;
288}
289#privacy-dialog-content .subcard a {
290  color: var(--brand);
291  font-weight: 700;
292  text-decoration: underline;
293}
294#privacy-dialog-content .subcard a:hover {
295  color: var(--brand-deep);
296}
297
298#privacy-dialog-content .subcard {
299  background: #fff;
300  border-radius: 12px;
301  padding: 18px 22px;
302  color: var(--ink);
303  max-height: 70vh;
304  overflow-y: auto;
305}
306
307#privacy-dialog-content .subcard h1,
308#privacy-dialog-content .subcard h2 {
309  color: var(--brand);
310  margin-top: 1rem;
311  margin-bottom: 0.4rem;
312}
313
314#privacy-dialog-content .subcard ul {
315  margin-left: 1.2rem;
316}
317
318#privacy-dialog-content .subcard p,
319#privacy-dialog-content .subcard li {
320  font-size: 15px;
321  line-height: 1.6;
322}
323/* ===============================
324   Privacy Modal Header
325   =============================== */
326.privacy-header {
327  position: sticky;
328  top: 0;
329  background: #fff;
330  z-index: 5;
331  padding-bottom: 10px;
332  border-bottom: 1px solid var(--line);
333}
334
335.privacy-logo {
336  width: 42px;
337  height: 42px;
338  border-radius: 8px;
339  object-fit: contain;
340  background: #fff;
341}
342
343.privacy-brand {
344  font-size: 1.2rem;
345  font-weight: 800;
346  color: var(--brand);
347}
348/* ===============================
349   Privacy Modal Header
350   =============================== */
351.privacy-header {
352  position: sticky;
353  top: 0;
354  background: #fff;
355  z-index: 10;
356}
357
358
359.privacy-logo {
360  width: 40px;
361  height: 40px;
362  border-radius: 10px;
363  object-fit: contain;
364  background: #fff;
365}
366
367.privacy-brand {
368  font-size: 1.25rem;
369  font-weight: 800;
370  color: var(--brand);
371}
372
373
374</style>
375
376<!-- Popup -->
377<div id="gdpr-popup">
378  <div class="gdpr-left">
379    <div class="gdpr-text">
380      Tento web používá cookies pro zlepšení vašeho zážitku.
381    </div>
382    <button id="open-privacy-dialog" class="details-btn">Zobrazit podrobnosti</button>
383  </div>
384  <div class="gdpr-right">
385    <button id="gdpr-accept">Souhlasím</button>
386    <button id="gdpr-decline">Odmítnout</button>
387  </div>
388</div>
389
390<!-- Modal -->
391<div id="privacy-dialog">
392  <div id="privacy-dialog-content">
393    <button id="close-privacy-dialog">&times;</button>
394
395    <!-- ✅ Brand header -->
396    <div class="privacy-header">
397      <img src="https://lektormilky.cz/favicon.ico" alt="Lektor Milky logo" class="privacy-logo">
398      <span class="privacy-brand">Lektor Milky</span>
399    </div>
400
401    <div class="text-center text-gray-500 py-8">Načítání…</div>
402  </div>
403</div>
404
405
406
407
408  
409  

409<script>
410window.addEventListener('load', () => {
411  const popup = document.getElementById('gdpr-popup');
412  const dialog = document.getElementById('privacy-dialog');
413  const dialogContent = document.getElementById('privacy-dialog-content');
414  const openBtn = document.getElementById('open-privacy-dialog');
415  const accept = document.getElementById('gdpr-accept');
416  const decline = document.getElementById('gdpr-decline');
417
418  if (!localStorage.getItem('gdpr-consent')) {
419    popup.style.display = 'flex';
420  }
421
422  openBtn?.addEventListener('click', async () => {
423    dialog.classList.add('show');
424    dialogContent.innerHTML = `
425      <button id="close-privacy-dialog">&times;</button>
426      <div class="text-center text-gray-500 py-8">Načítání…</div>
427    `;
428    dialogContent.querySelector('#close-privacy-dialog')
429                 .addEventListener('click', () => dialog.classList.remove('show'));
430
431    try {
432      const response = await fetch('https://lektormilky.cz/privacy');
433      const text = await response.text();
434      const temp = document.createElement('div');
435      temp.innerHTML = text;
436      const inner = temp.querySelector('.privacy-inner')?.innerHTML || text;
437      dialogContent.innerHTML = `
438        <button id="close-privacy-dialog">&times;</button>
439        <div class="privacy-header">
440            <img src="https://lektormilky.cz/favicon.ico" alt="Lektor Milky logo" class="privacy-logo">
441            <span class="privacy-brand">Lektor Milky</span>
442        </div>
443        <div class="subcard">${inner}</div>
444        `;
445
446      dialogContent.querySelector('#close-privacy-dialog')
447                   .addEventListener('click', () => dialog.classList.remove('show'));
448    } catch (e) {
449      dialogContent.innerHTML = `
450        <button id="close-privacy-dialog">&times;</button>
451        <div class="p-6 text-center text-red-600">Nepodařilo se načíst obsah.</div>
452      `;
453    }
454  });
455
456  accept?.addEventListener('click', () => {
457    localStorage.setItem('gdpr-consent', 'accepted');
458    popup.style.display = 'none';
459  });
460  decline?.addEventListener('click', () => {
461    localStorage.setItem('gdpr-consent', 'declined');
462    popup.style.display = 'none';
463  });
464});
465</script>

465
466</body>
467</html>