https://lektormilky.cz/cart

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>Dokončení objednávky</title>
7  <link rel="icon" href="https://lektormilky.cz/images/webfavicon.png" type="image/png" />
8  <meta name="csrf-token" content="DCSy3sMGnaoDvuOfmHz7ezwFrQ4oC9tUEeQm2Xsp">
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    <meta name="packeta-api-key" content="476765d85f4466e4">
14  

14<script>window.PACKETA_API_KEY = "476765d85f4466e4";</script>

14
15  
16  

16<script defer src="https://widget.packeta.com/v6/www/js/library.js"></script>

16
17
18  
19    <link rel="preload" as="style" href="https://lektormilky.cz/build/assets/cartflow-DQgl_IbQ.css" /><link rel="stylesheet" href="https://lektormilky.cz/build/assets/cartflow-DQgl_IbQ.css" />  </head>
20
21
22<body class="">
23
24  
25  
26  
27  <div id="snap-container" class="snap-container">
28    <div class="cartflow-container">
29
30  
31  <div class="checkout-progress" data-active="1">
32    <div class="progress-step active" data-step="1">Souhrn</div>
33    <div class="progress-line"></div>
34    <div class="progress-step" data-step="2">Doprava & Platba</div>
35    <div class="progress-line"></div>
36    <div class="progress-step" data-step="3">Údaje</div>
37    <div class="progress-line"></div>
38    <div class="progress-step" data-step="4">Odeslání</div>
39  </div>
40
41  <div class="progress-count">
42    <span id="progressCount">Krok 1 ze 4</span>
43  </div>
44
45  
46  <div class="horizontal-container" id="cartflow-horizontal">
47
48    
49    <div class="subcard" id="step-1">
50      <h3>Souhrn objednávky</h3>
51      <h4>Zkontrolujte své položky</h4>
52
53      <div id="cartSummary" data-refresh-url="https://lektormilky.cz/cart/refresh">
54        <div class="cart-items-list" data-context="popup">
55      <div class="cart-item empty">Váš košík je prázdný.</div>
56  </div>
57
58      </div>
59
60      <div class="summary-footer">
61        <div class="summary-total">
62          Celkem: <span id="summaryTotal">0.00</span>
63        </div>
64        <button class="next-btn" data-next="2">Pokračovat</button>
65      </div>
66    </div>
67
68
69    
70    <div class="subcard" id="step-2">
71      <h3>Doprava & Platba</h3>
72      <h4>Vyberte způsob doručení a platby</h4>
73
74      
75      <div class="section-block">
76        <h4>Způsob dopravy</h4>
77
78        <div class="option-grid" id="deliveryOptions">
79
80          
81          <div class="option-card" data-method="packeta">
82            <i data-lucide="package"></i>
83            <div>
84              <h4>Zásilkovna / Packeta</h4>
85              <p>Výdejní místo nebo Z-Box</p>
86            </div>
87          </div>
88          
89          
90        </div>
91
92        
93        <div id="packetaSelector" style="display:none; margin-top:1.2rem;">
94
95            <button
96                type="button"
97                data-packeta
98                id="openPacketa"
99                class="next-btn"
100                style="width:100%; border-radius:12px;">
101                Vybrat výdejní místo Zásilkovny
102            </button>
103
104            <div id="packetaSelected" style="display:none; margin-top:1rem;">
105                <strong>Zvolené výdejní místo:</strong>
106                <div id="packetaName"
107                    style="margin-top:0.3rem; color:var(--brand); font-weight:600;">
108                </div>
109            </div>
110
111            <input type="hidden" id="packetaPointId" name="packeta_id">
112            <input type="hidden" id="packetaPointName" name="packeta_name">
113
114        </div>
115
116
117      </div>
118
119
120      
121      <div class="section-block" style="margin-top:2rem;">
122        <h4>Způsob platby</h4>
123
124        <div class="option-grid" id="paymentOptions">
125
126          
127          <div class="option-card" data-payment="cash">
128            <i data-lucide="wallet"></i>
129            <div>
130              <h4>Hotově při převzetí</h4>
131              <p>Platba na místě</p>
132            </div>
133          </div>
134
135          
136          <div class="option-card" data-payment="cod">
137            <i data-lucide="banknote"></i>
138            <div>
139              <h4>Dobírka</h4>
140              <p>Platíte kurýrovi / Z-Boxu</p>
141            </div>
142          </div>
143
144          
145          <div class="option-card" data-payment="comgate">
146            <i data-lucide="credit-card"></i>
147            <div>
148              <h4>Online platba (ComGate)</h4>
149              <p>Karta, Apple Pay, Google Pay</p>
150            </div>
151          </div>
152
153        </div>
154      </div>
155
156
157      
158      <div class="step-actions">
159        <button class="prev-btn" data-prev="1">Zpět</button>
160        <button class="next-btn" id="toDetailsBtn" data-next="3" disabled>Pokračovat</button>
161      </div>
162    </div>
163
164
165
166    
167    <div class="subcard" id="step-3">
168      <h3>Údaje</h3>
169      <h4>

169Vyplňte své kontaktní informace</h4>
170
171      <form id="checkoutForm" onsubmit="return false;">
172
173        <div class="form-sections">
174          <div class="form-group">
175            <h4>Kontaktní údaje</h4>
176            <label>Jméno</label>
177            <input type="text" id="first_name" required>
178
179            <label>Příjmení</label>
180            <input type="text" id="last_name" required>
181
182            <label>E-mail</label>
183            <input type="email" id="email" required>
184
185            <label>Telefon</label>
186            <input type="tel" id="phone" required>
187          </div>
188
189          <div class="form-group">
190            <h4>Doručovací údaje</h4>
191            <label>Ulice a číslo</label>
192            <input type="text" id="address" required>
193
194            <label>Město</label>
195            <input type="text" id="city" required>
196
197            <label>PSČ</label>
198            <input type="text" id="zip" required>
199          </div>
200        </div>
201
202        <div class="tos-confirm">
203          <input type="checkbox" id="agreeTerms">
204          <label for="agreeTerms">
205            Souhlasím s <a href="https://lektormilky.cz/terms-shop" target="_blank">obchodními podmínkami</a>
206          </label>
207        </div>
208
209      </form>
210
211      <div class="step-actions">
212        <button class="prev-btn" data-prev="2">Zpět</button>
213        <button class="next-btn" id="toFinalBtn" data-next="4" disabled>Pokračovat</button>
214      </div>
215    </div>
216
217
218    
219    <div class="subcard" id="step-4">
220      <h3>Odeslání objednávky</h3>
221      <h4>Zkontrolujte a odešlete</h4>
222
223      <p>Po kliknutí budete přesměrováni na platební bránu (pokud jste zvolili online platbu).</p>
224
225      <div class="step-actions">
226        <button class="prev-btn" data-prev="3">Zpět</button>
227        <button class="next-btn" id="submitOrderBtn" disabled>Odeslat objednávku</button>
228      </div>
229    </div>
230
231  </div>
232</div>
233  </div>
234
235  
236  <style>
237@keyframes gdprSlideUp {
238  0% { transform: translate(-50%, 40px); opacity: 0; }
239  100% { transform: translate(-50%, 0); opacity: 1; }
240}
241
242/* ===============================
243   GDPR Popup
244   =============================== */
245#gdpr-popup {
246  position: fixed;
247  bottom: calc(1rem + env(safe-area-inset-bottom));
248  left: 50%;
249  transform: translateX(-50%);
250  display: none;
251  align-items: center;
252  justify-content: space-between;
253  width: min(680px, 92%);
254  padding: 14px 20px;
255  border-radius: 18px;
256  background: var(--grad);
257  color: #fff;
258  box-shadow: 0 10px 32px rgba(0,0,0,.25);
259  border: 1px solid rgba(255,255,255,.2);
260  font-size: 15px;
261  font-weight: 600;
262  line-height: 1.4;
263  z-index: 99999;
264  animation: gdprSlideUp 0.6s cubic-bezier(0.18, 0.8, 0.3, 1) both;
265  backdrop-filter: blur(8px);
266  gap: 48px; /* ✅ bigger space between left and right */
267}
268
269#gdpr-popup .gdpr-left {
270  display: flex;
271  align-items: center;
272  gap: 8px;
273  flex: 1 1 auto;
274  min-width: 0;
275}
276
277#gdpr-popup .gdpr-right {
278  display: flex;
279  gap: 8px;
280  flex-shrink: 0;
281}
282
283/* Buttons */
284#gdpr-popup button {
285  cursor: pointer;
286  border: none;
287  border-radius: 9999px;
288  font-weight: 800;
289  font-size: 14px;
290  padding: 7px 16px;
291  transition: all 0.2s ease;
292}
293
294#gdpr-accept {
295  background: #fff;
296  color: var(--brand);
297}
298#gdpr-accept:hover {
299  background: #f9fafb;
300  transform: translateY(-1px);
301}
302
303#gdpr-decline {
304  background: transparent;
305  color: #fff;
306  border: 1px solid rgba(255,255,255,.45);
307}
308#gdpr-decline:hover {
309  background: rgba(255,255,255,.15);
310  transform: translateY(-1px);
311}
312
313/* Details button (smaller white pill) */
314#gdpr-popup .details-btn {
315  background: #fff;
316  color: var(--brand);
317  border: none;
318  border-radius: 9999px;
319  font-weight: 800;
320  font-size: 13px;
321  padding: 5px 12px;
322  cursor: pointer;
323  transition: all 0.2s ease;
324  box-shadow: 0 1px 3px rgba(0,0,0,.12);
325  white-space: nowrap;
326}
327#gdpr-popup .details-btn:hover {
328  background: #f3f3f3;
329  transform: translateY(-1px);
330}
331
332/* Responsive layout */
333@media (max-width: 640px) {
334  #gdpr-popup {
335    flex-direction: column;
336    text-align: center;
337    padding: 16px;
338    gap: 14px;
339  }
340  #gdpr-popup .gdpr-left {
341    justify-content: center;
342    flex-wrap: wrap;
343  }

344  #gdpr-popup .gdpr-right {
345    justify-content: center;
346    flex-wrap: wrap;
347  }
348}
349
350/* ===============================
351   Privacy Modal
352   =============================== */
353#privacy-dialog {
354  position: fixed;
355  inset: 0;
356  display: none;
357  align-items: center;
358  justify-content: center;
359  background: rgba(0, 0, 0, 0.75);
360  backdrop-filter: blur(6px);
361  z-index: 999999 !important;
362  transition: opacity .3s ease;
363  opacity: 0;
364}
365#privacy-dialog.show {
366  display: flex !important;
367  opacity: 1;
368}
369#privacy-dialog-content {
370  background: #fff;
371  border-radius: 16px;
372  max-width: 720px;
373  width: 90%;
374  padding: 24px;
375  box-shadow: 0 10px 30px rgba(0,0,0,.4);
376  position: relative;
377  max-height: 80vh;
378  display: flex;
379  flex-direction: column;
380}
381
382#close-privacy-dialog {
383  position: absolute;
384  top: 10px;
385  right: 14px;
386  font-size: 22px;
387  color: #444;
388  background: none;
389  border: none;
390  cursor: pointer;
391}
392
393/* Modal typography */
394#privacy-dialog-content .subcard {
395  font-size: 15px;
396  line-height: 1.6;
397  color: var(--ink);
398}
399#privacy-dialog-content .subcard h1,
400#privacy-dialog-content .subcard h2 {
401  color: var(--brand);
402  margin-bottom: 0.4rem;
403  font-weight: 900;
404}
405#privacy-dialog-content .subcard p {
406  margin-bottom: 0.8rem;
407}
408#privacy-dialog-content .subcard a {
409  color: var(--brand);
410  font-weight: 700;
411  text-decoration: underline;
412}
413#privacy-dialog-content .subcard a:hover {
414  color: var(--brand-deep);
415}
416
417#privacy-dialog-content .subcard {
418  background: #fff;
419  border-radius: 12px;
420  padding: 18px 22px;
421  color: var(--ink);
422  max-height: 70vh;
423  overflow-y: auto;
424}
425
426#privacy-dialog-content .subcard h1,
427#privacy-dialog-content .subcard h2 {
428  color: var(--brand);
429  margin-top: 1rem;
430  margin-bottom: 0.4rem;
431}
432
433#privacy-dialog-content .subcard ul {
434  margin-left: 1.2rem;
435}
436
437#privacy-dialog-content .subcard p,
438#privacy-dialog-content .subcard li {
439  font-size: 15px;
440  line-height: 1.6;
441}
442/* ===============================
443   Privacy Modal Header
444   =============================== */
445.privacy-header {
446  position: sticky;
447  top: 0;
448  background: #fff;
449  z-index: 5;
450  padding-bottom: 10px;
451  border-bottom: 1px solid var(--line);
452}
453
454.privacy-logo {
455  width: 42px;
456  height: 42px;
457  border-radius: 8px;
458  object-fit: contain;
459  background: #fff;
460}
461
462.privacy-brand {
463  font-size: 1.2rem;
464  font-weight: 800;
465  color: var(--brand);
466}
467/* ===============================
468   Privacy Modal Header
469   =============================== */
470.privacy-header {
471  position: sticky;
472  top: 0;
473  background: #fff;
474  z-index: 10;
475}
476
477
478.privacy-logo {
479  width: 40px;
480  height: 40px;
481  border-radius: 10px;
482  object-fit: contain;
483  background: #fff;
484}
485
486.privacy-brand {
487  font-size: 1.25rem;
488  font-weight: 800;
489  color: var(--brand);
490}
491
492
493</style>
494
495<!-- Popup -->
496<div id="gdpr-popup">
497  <div class="gdpr-left">
498    <div class="gdpr-text">
499      Tento web používá cookies pro zlepšení vašeho zážitku.
500    </div>
501    <button id="open-privacy-dialog" class="details-btn">Zobrazit podrobnosti</button>
502  </div>
503  <div class="gdpr-right">
504    <button id="gdpr-accept">Souhlasím</button>
505    <button id="gdpr-decline">Odmítnout</button>
506  </div>
507</div>
508
509<!-- Modal -->
510<div id="privacy-dialog">
511  <div id="privacy-dialog-content">
512    <button id="close-privacy-dialog">&times;</button>
513
514    <!-- ✅ Brand header -->
515    <div class="privacy-header">
516      <img src="https://lektormilky.cz/favicon.ico" alt="Lektor Milky logo" class="privacy-logo">
517      <span class="privacy-brand">Lektor Milky</span>
518    </div>
519
520    <div class="text-center text-gray-500 py-8">Načítání…</div>
521  </div>
522</div>
523
524
525
526
527  
528    <link rel="modulepreload" as="script" href="https://lektormilky.cz/build/assets/cartflow-Bc_Bk2ZJ.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/iconsAndAliases-CInoBnLm.js" />

528<script type="module" src="https://lektormilky.cz/build/assets/cartflow-Bc_Bk2ZJ.js"></script>

528<script>
529window.addEventListener('load', () => {
530  const popup = document.getElementById('gdpr-popup');
531  const dialog = document.getElementById('privacy-dialog');
532  const dialogContent = document.getElementById('privacy-dialog-content');
533  const openBtn = document.getElementById('open-privacy-dialog');
534  const accept = document.getElementById('gdpr-accept');
535  const decline = document.getElementById('gdpr-decline');
536
537  if (!localStorage.getItem('gdpr-consent')) {
538    popup.style.display = 'flex';
539  }
540
541  openBtn?.addEventListener('click', async () => {
542    dialog.classList.add('show');
543    dialogContent.innerHTML = `
544      <button id="close-privacy-dialog">&times;</button>
545      <div class="text-center text-gray-500 py-8">Načítání…</div>
546    `;
547    dialogContent.querySelector('#close-privacy-dialog')
548                 .addEventListener('click', () => dialog.classList.remove('show'));
549
550    try {
551      const response = await fetch('https://lektormilky.cz/privacy');
552      const text = await response.text();
553      const temp = document.createElement('div');
554      temp.innerHTML = text;
555      const inner = temp.querySelector('.privacy-inner')?.innerHTML || text;
556      dialogContent.innerHTML = `
557        <button id="close-privacy-dialog">&times;</button>
558        <div class="privacy-header">
559            <img src="https://lektormilky.cz/favicon.ico" alt="Lektor Milky logo" class="privacy-logo">
560            <span class="privacy-brand">Lektor Milky</span>
561        </div>
562        <div class="subcard">${inner}</div>
563        `;
564
565      dialogContent.querySelector('#close-privacy-dialog')
566                   .addEventListener('click', () => dialog.classList.remove('show'));
567    } catch (e) {
568      dialogContent.innerHTML = `
569        <button id="close-privacy-dialog">&times;</button>
570        <div class="p-6 text-center text-red-600">Nepodařilo se načíst obsah.</div>
571      `;
572    }
573  });
574
575  accept?.addEventListener('click', () => {
576    localStorage.setItem('gdpr-consent', 'accepted');
577    popup.style.display = 'none';
578  });
579  decline?.addEventListener('click', () => {
580    localStorage.setItem('gdpr-consent', 'declined');
581    popup.style.display = 'none';
582  });
583});
584</script>

584
585</body>
586</html>