PageSourceSearch

https://imreykodesh.com/hadrana-landing

html imreykodesh.com collected 2026-10-02 01:32:17 UTC 55,232 bytes, 1,049 lines download raw bytes

1<!DOCTYPE html>
2<html lang="he" dir="rtl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>הדרנא – לוח חזרות | אמרי קודש</title>
7    <link rel="icon" type="image/png" sizes="192x192" href="assets/icon-square.png">
8    <link rel="apple-touch-icon" href="assets/icon-square.png">
9    <link rel="preconnect" href="https://fonts.googleapis.com">
10    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11    <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Yrsa:wght@400;500;600;700&display=swap" rel="stylesheet">
12    <link rel="stylesheet" href="style.css?v=20260901-install-1">
13
14    <style>
15        /* ====================================================
16           הדרנא – עיצוב ייחודי, עקבי עם גופן האתר (Heebo)
17           ==================================================== */
18        :root {
19            --gold: #D4AF37;
20            --gold-dark: #b5952f;
21            --gold-light: #f0d870;
22            --gold-faint: rgba(212,175,55,0.12);
23            --hadrana-cream: #fdfaf2;
24            --hadrana-dark: #111008;
25            --hadrana-text: #2c2510;
26            --hadrana-text-soft: #6b5e3e;
27            --hadrana-border: rgba(212,175,55,0.22);
28        }
29
30        body.hadrana-page {
31            background: var(--hadrana-cream) !important;
32        }
33
34        /* ===== HERO ===== */
35        .hadrana-hero {
36            min-height: 52vh;
37            display: flex;
38            flex-direction: column;
39            align-items: center;
40            justify-content: center;
41            text-align: center;
42            padding: 36px 24px 44px;
43            position: relative;
44            background:
45                radial-gradient(ellipse 80% 55% at 50% 0%, rgba(212,175,55,0.13) 0%, transparent 70%),
46                linear-gradient(180deg, #fdfaf2 0%, #f5edd8 100%);
47            overflow: hidden;
48            margin: 0 -1rem;
49        }
50
51        .hadrana-hero::before {
52            content: '';
53            position: absolute;
54            inset: 0;
55            background-image:
56                repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(212,175,55,0.055) 80px),
57                repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(212,175,55,0.055) 80px);
58            pointer-events: none;
59        }
60
61        /* פינות קישוט */
62        .hadrana-ornament {
63            position: absolute;
64            width: 70px;
65            height: 70px;
66            opacity: 0.18;
67        }
68        .hadrana-ornament-tl { top: 16px; right: 16px; }
69        .hadrana-ornament-br { bottom: 16px; left: 16px; transform: rotate(180deg); }
70
71        .hadrana-hero-eyebrow {
72            font-family: 'Heebo', sans-serif;
73            font-size: 0.82rem;
74            font-weight: 700;
75            letter-spacing: 0.15em;
76            color: var(--gold-dark);
77            text-transform: uppercase;
78            margin-bottom: 12px;
79            position: relative;
80            display: inline-flex;
81            align-items: center;
82            gap: 12px;
83        }
84        .hadrana-hero-eyebrow::before,
85        .hadrana-hero-eyebrow::after {
86            content: '';
87            width: 32px;
88            height: 1px;
89            background: var(--gold-dark);
90            opacity: 0.5;
91        }
92
93        .hadrana-hero-title {
94            font-family: 'Yrsa', 'Heebo', serif;
95            font-size: clamp(3rem, 9vw, 5.5rem);
96            font-weight: 900;
97            line-height: 0.95;
98            color: var(--hadrana-dark);
99            letter-spacing: -0.02em;
100            position: relative;
101            margin-bottom: 10px;
102        }
103        .hadrana-hero-title .gold { color: var(--gold-dark); }
104
105        .hadrana-hero-subtitle {
106            font-family: 'Heebo', sans-serif;
107            font-size: clamp(0.95rem, 2.2vw, 1.2rem);
108            font-weight: 300;
109            color: var(--hadrana-text-soft);
110            margin-bottom: 30px;
111            letter-spacing: 0.06em;
112        }
113
114        .hadrana-cta {
115            display: inline-flex;
116            align-items: center;
117            gap: 10px;
118            background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-dark) 100%);
119            background-size: 200% 100%;
120            color: #ffffff;
121            text-decoration: none;
122            font-family: 'Heebo', sans-serif;
123            font-size: 1rem;
124            font-weight: 800;
125            padding: 14px 40px;
126            border-radius: 60px;
127            transition: all 0.4s ease;
128            box-shadow: 0 6px 24px rgba(181,149,47,0.38), 0 2px 0 rgba(255,255,255,0.28) inset;
129            position: relative;
130            letter-spacing: 0.01em;
131            animation: hadrana-shimmer 3.5s ease-in-out infinite;
132        }
133        @keyframes hadrana-shimmer {
134            0%, 100% { background-position: 0% 0%; }
135            50% { background-position: 100% 0%; }
136        }
137        .hadrana-cta:hover {
138            transform: translateY(-4px);
139            box-shadow: 0 18px 52px rgba(181,149,47,0.52), 0 2px 0 rgba(255,255,255,0.28) inset;
140            color: #ffffff;
141        }
142        .hadrana-cta svg { transition: transform 0.3s; }
143        .hadrana-cta:hover svg { transform: translateX(-5px); }
144
145        .hadrana-hero-note {
146            margin-top: 14px;
147            font-family: 'Heebo', sans-serif;
148            font-size: 0.85rem;
149            color: var(--hadrana-text);
150            opacity: 0.75;
151            letter-spacing: 0.02em;
152        }
153
154        /* ===== DIVIDER ===== */
155        .hadrana-divider {
156            display: flex;
157            align-items: center;
158            gap: 20px;
159            max-width: 560px;
160            margin: 0 auto 36px;
161            padding: 0 24px;
162        }
163        .hadrana-divider-line {
164            flex: 1;
165            height: 1px;
166            background: linear-gradient(90deg, transparent, var(--gold), transparent);
167        }
168        .hadrana-divider-diamond {
169            width: 10px;
170            height: 10px;
171            background: var(--gold);
172            transform: rotate(45deg);
173            flex-shrink: 0;
174        }
175
176        /* ===== INTRO ===== */
177        .hadrana-intro {
178            max-width: 700px;
179            margin: 36px auto 48px;
180            padding: 0 24px;
181            text-align: center;
182        }
183        .hadrana-intro-label {
184            font-family: 'Heebo', sans-serif;
185            font-size: 0.82rem;
186            letter-spacing: 0.15em;
187            color: var(--gold-dark);
188            font-weight: 700;
189            text-transform: uppercase;
190            margin-bottom: 12px;
191        }
192        .hadrana-intro h2 {
193            font-family: 'Yrsa', 'Heebo', serif;
194            font-size: clamp(1.4rem, 3.5vw, 2.1rem);
195            font-weight: 700;
196            color: var(--hadrana-dark);
197            margin-bottom: 14px;
198            line-height: 1.35;
199        }
200        .hadrana-intro p {
201            font-family: 'Heebo', sans-serif;
202            font-size: 1rem;
203            line-height: 1.8;
204            color: var(--hadrana-text-soft);
205        }
206
207        /* ===== FEATURE CARDS ===== */
208        .hadrana-features {
209            max-width: 1080px;
210            margin: 0 auto 52px;
211            padding: 0 24px;
212            display: grid;
213            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
214            gap: 20px;
215        }
216        .hadrana-feature-card {
217            background: #fff;
218            border: 1px solid var(--hadrana-border);
219            border-radius: 16px;
220            padding: 28px 24px;
221            transition: all 0.35s ease;
222            position: relative;
223            overflow: hidden;
224        }
225        .hadrana-feature-card::before {
226            content: '';
227            position: absolute;
228            top: 0; right: 0;
229            width: 90px; height: 90px;
230            background: radial-gradient(circle at top right, rgba(212,175,55,0.1), transparent 70%);
231        }
232        .hadrana-feature-card:hover {
233            transform: translateY(-7px);
234            box-shadow: 0 22px 64px rgba(181,149,47,0.16);
235            border-color: rgba(212,175,55,0.52);
236        }
237        .hadrana-feature-icon {
238            font-size: 2.4rem;
239            margin-bottom: 18px;
240            display: block;
241        }
242        .hadrana-feature-card h3 {
243            font-family: 'Heebo', sans-serif;
244            font-size: 1.18rem;
245            font-weight: 700;
246            color: var(--hadrana-dark);
247            margin-bottom: 10px;
248        }
249        .hadrana-feature-card p {
250            font-family: 'Heebo', sans-serif;
251            font-size: 0.93rem;
252            line-height: 1.8;
253            color: var(--hadrana-text-soft);
254        }
255
256        /* ===== HOW IT WORKS ===== */
257        .hadrana-how-section {
258            background: var(--hadrana-dark);
259            padding: 52px 24px;
260            text-align: center;
261            position: relative;
262            overflow: hidden;
263            margin: 0 -1rem;
264        }
265        .hadrana-how-section::before {
266            content: '';
267            position: absolute;
268            inset: 0;
269            background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,0.09) 0%, transparent 65%);
270        }
271        .hadrana-how-section .section-label {
272            font-family: 'Heebo', sans-serif;
273            font-size: 0.88rem;
274            letter-spacing: 0.15em;
275            color: var(--gold-light);
276            font-weight: 700;
277            text-transform: uppercase;
278            margin-bottom: 16px;
279            position: relative;
280        }
281        .hadrana-how-section h2 {
282            font-family: 'Yrsa', 'Heebo', serif;
283            font-size: clamp(1.6rem, 3.5vw, 2.4rem);
284            font-weight: 900;
285            color: #fff;
286            margin-bottom: 40px;
287            position: relative;
288            line-height: 1.3;
289        }
290        .hadrana-how-section h2 span { color: var(--gold); }
291
292        .hadrana-steps {
293            display: flex;
294            justify-content: center;
295            gap: 0;
296            flex-wrap: wrap;
297            max-width: 920px;
298            margin: 0 auto;
299            position: relative;
300        }
301        .hadrana-step {
302            flex: 1;
303            min-width: 200px;
304            max-width: 270px;
305            padding: 28px 22px;
306            position: relative;
307        }
308        .hadrana-step-num {
309            width: 54px; height: 54px;
310            border-radius: 50%;
311            background: transparent;
312            border: 2px solid var(--gold);
313            color: var(--gold);
314            font-family: 'Yrsa', 'Heebo', serif;
315            font-size: 1.5rem;
316            font-weight: 700;
317            display: flex;
318            align-items: center;
319            justify-content: center;
320            margin: 0 auto 18px;
321            position: relative;
322            z-index: 1;
323        }
324        .hadrana-step h4 {
325            font-family: 'Heebo', sans-serif;
326            color: #fff;
327            font-size: 1.02rem;
328            font-weight: 700;
329            margin-bottom: 10px;
330        }
331        .hadrana-step p {
332            font-family: 'Heebo', sans-serif;
333            color: rgba(255,255,255,0.75);
334            font-size: 0.98rem;
335            line-height: 1.7;
336        }
337
338        /* ===== BOTTOM CTA ===== */
339        .hadrana-bottom-cta {
340            padding: 52px 24px;
341            text-align: center;
342            background: linear-gradient(180deg, #f7f1e0 0%, var(--hadrana-cream) 100%);
343            margin: 0 -1rem;
344        }
345        .hadrana-bottom-cta h2 {
346            font-family: 'Yrsa', 'Heebo', serif;
347            font-size: clamp(1.6rem, 3.5vw, 2.4rem);
348            font-weight: 900;
349            color: var(--hadrana-dark);
350            margin-bottom: 12px;
351        }
352        .hadrana-bottom-cta p {
353            font-family: 'Heebo', sans-serif;
354            color: var(--hadrana-text-soft);
355            font-size: 1rem;
356            margin-bottom: 32px;
357            line-height: 1.7;
358        }
359
360        /* ===== SCROLL ANIMATION ===== */
361        .hadrana-reveal {
362            opacity: 0;
363            transform: translateY(28px);
364            transition: opacity 0.7s ease, transform 0.7s ease;
365        }
366        .hadrana-reveal.visible {
367            opacity: 1;
368            transform: none;
369        }
370
371        @media (max-width: 600px) {
372            .hadrana-features { grid-template-columns: 1fr; }
373            .hadrana-steps { flex-direction: column; align-items: center; }
374            .hadrana-ornament { width: 70px; height: 70px; }
375        }
376        /* ===== DESKTOP APP SECTION ===== */
377        .hadrana-desktop-section { max-width: 820px; margin: 0 auto 84px; padding: 0 24px; text-align: center; }
378        .hadrana-desktop-card { background: var(--hadrana-dark); border: 1px solid rgba(212,175,55,0.28); border-radius: 22px; padding: 56px 44px 48px; position: relative; overflow: hidden; }
379        .hadrana-desktop-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(212,175,55,0.10) 0%, transparent 65%); pointer-events: none; }
380        .hadrana-desktop-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.35); border-radius: 30px; padding: 6px 16px; font-family: "Heebo", sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; color: #f0d870; text-transform: uppercase; margin-bottom: 26px; }
381        .hadrana-desktop-title { font-family: "Yrsa", "Heebo", serif; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 900; color: #fff; line-height: 1.25; margin-bottom: 16px; }
382        .hadrana-desktop-title span { color: var(--gold, #D4AF37); }
383        .hadrana-desktop-desc { font-family: "Heebo", sans-serif; font-size: 1.02rem; color: rgba(255,255,255,0.72); line-height: 1.85; margin-bottom: 36px; max-width: 580px; margin-left: auto; margin-right: auto; }
384        .hadrana-features-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; margin-bottom: 40px; }
385        .hadrana-feature-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 30px; padding: 7px 16px; font-family: "Heebo", sans-serif; font-size: 0.88rem; color: rgba(255,255,255,0.82); }
386        .hadrana-dl-btn { display: inline-flex; align-items: center; gap: 11px; background: linear-gradient(135deg, #b5952f 0%, #D4AF37 50%, #b5952f 100%); background-size: 200% 100%; color: #fff !important; text-decoration: none; font-family: "Heebo", sans-serif; font-size: 1.08rem; font-weight: 800; padding: 17px 48px; border-radius: 60px; border: none; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 8px 32px rgba(181,149,47,0.38); animation: hadrana-shimmer 3.5s ease-in-out infinite; }
387        .hadrana-dl-btn:hover { transform: translateY(-4px); box-shadow: 0 18px 52px rgba(181,149,47,0.52); }
388        .hadrana-dl-note { margin-top: 14px; font-family: "Heebo", sans-serif; font-size: 0.83rem; color: rgba(255,255,255,0.38); }
389        @media (max-width: 600px) { .hadrana-desktop-card { padding: 40px 20px 36px; } }
390
391        /* ===== CHOICE SECTION (שתי אפשרויות) ===== */
392        .hadrana-choice-section {
393            max-width: 1000px;
394            margin: 0 auto 60px;
395            padding: 0 24px;
396        }
397        .hadrana-choice-head {
398            text-align: center;
399            margin-bottom: 32px;
400        }
401        .hadrana-choice-head .section-label {
402            font-family: 'Heebo', sans-serif;
403            font-size: 0.88rem;
404            letter-spacing: 0.15em;
405            color: var(--gold-dark);
406            font-weight: 700;
407            text-transform: uppercase;
408            margin-bottom: 14px;
409        }
410        .hadrana-choice-head h2 {
411            font-family: 'Yrsa', 'Heebo', serif;
412            font-size: clamp(1.7rem, 4vw, 2.6rem);
413            font-weight: 900;
414            color: var(--hadrana-dark);
415            line-height: 1.3;
416        }
417        .hadrana-choice-head h2 span { color: var(--gold-dark); }
418        .hadrana-choice-grid {
419            display: grid;
420            grid-template-columns: 1fr 1fr 1fr;
421            gap: 28px;
422            align-items: stretch;
423        }
424        .hadrana-choice-card {
425            display: flex;
426            flex-direction: column;
427            border-radius: 20px;
428            padding: 32px 28px 28px;
429            position: relative;
430            overflow: hidden;
431            transition: transform 0.35s ease, box-shadow 0.35s ease;
432        }
433        .hadrana-choice-card:hover {
434            transform: translateY(-6px);
435        }
436        /* כרטיס אונליין - בהיר */
437        .hadrana-choice-card.online {
438            background: #fff;
439            border: 1.5px solid var(--hadrana-border);
440        }
441        .hadrana-choice-card.online:hover {
442            box-shadow: 0 22px 60px rgba(181,149,47,0.18);
443            border-color: rgba(212,175,55,0.5);
444        }
445        /* כרטיס דסקטופ - כהה */
446        .hadrana-choice-card.desktop {
447            background: var(--hadrana-dark);
448            border: 1.5px solid rgba(212,175,55,0.3);
449        }
450        .hadrana-choice-card.desktop:hover {
451            box-shadow: 0 22px 60px rgba(181,149,47,0.28);
452            border-color: rgba(212,175,55,0.6);
453        }
454        .hadrana-choice-card.desktop::before {
455            content: '';
456            position: absolute;
457            inset: 0;
458            background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(212,175,55,0.10) 0%, transparent 65%);
459            pointer-events: none;
460        }
461        .hadrana-choice-badge {
462            display: inline-flex;
463            align-self: flex-start;
464            align-items: center;
465            gap: 7px;
466            border-radius: 30px;
467            padding: 6px 15px;
468            font-family: 'Heebo', sans-serif;
469            font-size: 0.78rem;
470            font-weight: 700;
471            letter-spacing: 0.1em;
472            text-transform: uppercase;
473            margin-bottom: 22px;
474        }
475        .online .hadrana-choice-badge {
476            background: var(--gold-faint);
477            border: 1px solid rgba(212,175,55,0.35);
478            color: var(--gold-dark);
479        }
480        .desktop .hadrana-choice-badge {
481            background: rgba(212,175,55,0.12);
482            border: 1px solid rgba(212,175,55,0.35);
483            color: #f0d870;
484        }
485        .hadrana-choice-icon {
486            width: 56px; height: 56px;
487            border-radius: 16px;
488            display: flex;
489            align-items: center;
490            justify-content: center;
491            margin-bottom: 20px;
492        }
493        .online .hadrana-choice-icon { background: var(--gold-faint); color: var(--gold-dark); }
494        .desktop .hadrana-choice-icon { background: rgba(212,175,55,0.14); color: var(--gold-light); }
495        .hadrana-choice-card h3 {
496            font-family: 'Yrsa', 'Heebo', serif;
497            font-size: 1.65rem;
498            font-weight: 800;
499            margin-bottom: 12px;
500            line-height: 1.25;
501        }
502        .online h3 { color: var(--hadrana-dark); }
503        .desktop h3 { color: #fff; }
504        .hadrana-choice-card .choice-desc {
505            font-family: 'Heebo', sans-serif;
506            font-size: 0.96rem;
507            line-height: 1.8;
508            margin-bottom: 24px;
509        }
510        .online .choice-desc { color: var(--hadrana-text-soft); }
511        .desktop .choice-desc { color: rgba(255,255,255,0.72); }
512        .hadrana-choice-list {
513            list-style: none;
514            padding: 0;
515            margin: 0 0 32px;
516            display: flex;
517            flex-direction: column;
518            gap: 11px;
519        }
520        .hadrana-choice-list li {
521            display: flex;
522            align-items: center;
523            gap: 10px;
524            font-family: 'Heebo', sans-serif;
525            font-size: 0.92rem;
526        }
527        .online .hadrana-choice-list li { color: var(--hadrana-text); }
528        .desktop .hadrana-choice-list li { color: rgba(255,255,255,0.82); }
529        .hadrana-choice-list svg { flex-shrink: 0; }
530        .hadrana-choice-card .choice-action { margin-top: auto; }
531        .hadrana-choice-btn {
532            display: flex;
533            align-items: center;
534            justify-content: center;
535            gap: 11px;
536            width: 100%;
537            box-sizing: border-box;
538            text-decoration: none;
539            font-family: 'Heebo', sans-serif;
540            font-size: 1.05rem;
541            font-weight: 800;
542            padding: 16px 28px;
543            border-radius: 14px;
544            border: none;
545            cursor: pointer;
546            transition: all 0.3s ease;
547        }
548        .hadrana-choice-btn.primary {
549            background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 50%, var(--gold-dark) 100%);
550            background-size: 200% 100%;
551            color: #fff;
552            box-shadow: 0 8px 26px rgba(181,149,47,0.36);
553            animation: hadrana-shimmer 3.5s ease-in-out infinite;
554        }
555        .hadrana-choice-btn.primary:hover {
556            transform: translateY(-3px);
557            box-shadow: 0 16px 40px rgba(181,149,47,0.5);
558            color: #fff;
559        }
560        .hadrana-choice-btn.outline {
561            background: rgba(212,175,55,0.06);
562            color: var(--gold-dark);
563            border: 1.5px solid var(--gold);
564        }
565        .hadrana-choice-btn.outline:hover {
566            background: var(--gold);
567            color: #fff;
568            transform: translateY(-3px);
569        }
570        /* כרטיס אנדרואיד */
571        .hadrana-choice-card.android {
572            background: #f0ece3;
573            border: 1.5px solid var(--hadrana-border);
574        }
575        .hadrana-choice-card.android:hover {
576            box-shadow: 0 22px 60px rgba(181,149,47,0.16);
577            border-color: rgba(212,175,55,0.52);
578        }
579        .hadrana-choice-card.android::before {
580            content: '';
581            position: absolute;
582            inset: 0;
583            background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,0.08) 0%, transparent 65%);
584            pointer-events: none;
585        }
586        .android .hadrana-choice-badge {
587            background: var(--gold-faint);
588            border: 1px solid rgba(212,175,55,0.35);
589            color: var(--gold-dark);
590        }
591        .android .hadrana-choice-icon { background: var(--gold-faint); color: var(--gold-dark); }
592        .android h3 { color: var(--hadrana-dark); }
593        .android .choice-desc { color: var(--hadrana-text-soft); }
594        .android .hadrana-choice-list li { color: var(--hadrana-text); }
595        .android .choice-action-note { color: var(--hadrana-text-soft); }
596
597        .hadrana-install-warning {
598            display: flex;
599            align-items: flex-start;
600            gap: 10px;
601            margin-bottom: 14px;
602            padding: 12px 14px;
603            border: 1px solid #d97706;
604            border-radius: 10px;
605            background: #fff7ed;
606            color: #7c2d12;
607            font-family: 'Heebo', sans-serif;
608            font-size: 0.88rem;
609            font-weight: 600;
610            line-height: 1.55;
611            text-align: right;
612        }
613        .hadrana-install-warning[hidden] { display: none; }
614        .hadrana-install-warning svg { flex: 0 0 auto; margin-top: 2px; }
615        .hadrana-install-warning p { margin: 0; }
616
617        .hadrana-choice-btn.android-btn {
618            background: linear-gradient(135deg, #1a2a4a 0%, #2e4a80 50%, #1a2a4a 100%);
619            background-size: 200% 100%;
620            color: #fff;
621            box-shadow: 0 8px 26px rgba(46,74,128,0.4);
622            animation: hadrana-shimmer 3.5s ease-in-out infinite;
623        }
624        .hadrana-choice-btn.android-btn:hover {
625            transform: translateY(-3px);
626            box-shadow: 0 16px 40px rgba(46,74,128,0.55);
627            color: #fff;
628        }
629        .choice-action-note {
630            text-align: center;
631            margin-top: 12px;
632            font-family: 'Heebo', sans-serif;
633            font-size: 0.8rem;
634        }
635        .online .choice-action-note { color: var(--hadrana-text-soft); }
636        .desktop .choice-action-note { color: rgba(255,255,255,0.4); }
637
638        /* ===== NEW BADGE ===== */
639        .hadrana-new-badge {
640            position: absolute;
641            top: -1px;
642            left: -1px;
643            background: linear-gradient(135deg, #8b0000 0%, #c0392b 50%, #8b0000 100%);
644            background-size: 200% 100%;
645            color: #fff;
646            font-family: 'Heebo', sans-serif;
647            font-size: 0.72rem;
648            font-weight: 800;
649            letter-spacing: 0.12em;
650            text-transform: uppercase;
651            padding: 5px 14px 5px 12px;
652            border-radius: 0 0 14px 0;
653            box-shadow: 0 4px 16px rgba(139,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
654            animation: badge-shimmer 3s ease-in-out infinite;
655            display: flex;
656            align-items: center;
657            gap: 5px;
658        }
659        @keyframes badge-shimmer {
660            0%, 100% { background-position: 0% 0%; }
661            50%       { background-position: 100% 0%; }
662        }
663        @media (max-width: 720px) {
664            .hadrana-choice-grid { grid-template-columns: 1fr; }
665        }
666            /* === הודעה צפה — עדכון ידני Windows === */
667        #hadrana-update-toast {
668            position: fixed;
669            top: 130px;
670            left: 24px;
671            background: #ffffff;
672            border-radius: 12px;
673            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
674            border: 1px solid #e2e8f0;
675            width: 400px;
676            max-width: calc(100vw - 40px);
677            z-index: 9998;
678            overflow: hidden;
679            direction: rtl;
680            transform: translateX(-50px) scale(0.9);
681            opacity: 0;
682            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
683            pointer-events: none;
684        }
685        #hadrana-update-toast.show {
686            transform: translateX(0) scale(1);
687            opacity: 1;
688            pointer-events: auto;
689        }
690        #hadrana-update-toast .toast-content-wrapper {
691            display: flex;
692            align-items: center;
693            padding: 16px 20px;
694            gap: 15px;
695        }
696        #hadrana-update-toast .toast-icon {
697            background: #FFFBEB;
698            width: 44px;
699            height: 44px;
700            border-radius: 50%;
701            display: flex;
702            align-items: center;
703            justify-content: center;
704            flex-shrink: 0;
705        }
706        #hadrana-update-toast .toast-icon svg {
707            width: 24px;
708            height: 24px;
709            color: #D97706;
710        }
711        #hadrana-update-toast .toast-text { flex: 1; text-align: right; }
712        #hadrana-update-toast .toast-text h4 { margin: 0 0 4px 0; font-size: 1rem; color: #1e293b; font-weight: 800; }
713        #hadrana-update-toast .toast-text p { margin: 0; font-size: 0.85rem; color: #475569; line-height: 1.4; }
714        #hadrana-update-toast .toast-close-btn {
715            background: transparent; border: none; color: #94a3b8;
716            font-size: 26px; cursor: pointer; padding: 0;
717            width: 28px; height: 28px; display: flex;
718            align-items: center; justify-content: center;
719            transition: color 0.2s; margin-bottom: auto; margin-top: -2px;
720        }
721        #hadrana-update-toast .toast-close-btn:hover { color: #1e293b; }
722        #hadrana-update-toast .toast-progress-bar {
723            height: 3px;
724            background: linear-gradient(90deg, #D97706, #f59e0b);
725            width: 100%;
726            animation: hadrana-shrink 12s linear forwards;
727        }
728        @keyframes hadrana-shrink { from { width: 100%; } to { width: 0%; } }
729        @media (max-width: 600px) {
730            #hadrana-update-toast { top: 100px; right: 50%; transform: translate(50%, -20px) scale(0.9); }
731            #hadrana-update-toast.show { transform: translate(-50%, 0) scale(1); }
732        }
733        </style>
734</head>
735<body class="hadrana-page">
736
737    <div id="header-placeholder"></div>
738
739    <main style="padding-top: 145px; max-width: 1200px; width: 100%; margin: 0 auto; overflow: hidden;">
740
741        <!-- Hero -->
742        <section class="hadrana-hero">
743            <svg class="hadrana-ornament hadrana-ornament-tl" viewBox="0 0 120 120" fill="none">
744                <path d="M10 10 L110 10 L110 20 L20 20 L20 110 L10 110 Z" stroke="#D4AF37" stroke-width="1.5" fill="none"/>
745                <path d="M30 30 L90 30 L90 40 L40 40 L40 90 L30 90 Z" stroke="#D4AF37" stroke-width="1" fill="none" opacity="0.6"/>
746                <circle cx="10" cy="10" r="4" fill="#D4AF37"/>
747                <circle cx="110" cy="10" r="2" fill="#D4AF37" opacity="0.5"/>
748                <circle cx="10" cy="110" r="2" fill="#D4AF37" opacity="0.5"/>
749            </svg>
750            <svg class="hadrana-ornament hadrana-ornament-br" viewBox="0 0 120 120" fill="none">
751                <path d="M10 10 L110 10 L110 20 L20 20 L20 110 L10 110 Z" stroke="#D4AF37" stroke-width="1.5" fill="none"/>
752                <path d="M30 30 L90 30 L90 40 L40 40 L40 90 L30 90 Z" stroke="#D4AF37" stroke-width="1" fill="none" opacity="0.6"/>
753                <circle cx="10" cy="10" r="4" fill="#D4AF37"/>
754            </svg>
755
756            <div style="display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:0;">
757                <p class="hadrana-hero-eyebrow" style="margin-bottom:0;">כלי לימוד דיגיטלי</p>
758            </div>
759            <span style="
760                position:absolute; top:20px; left:20px;
761                display:inline-flex; align-items:center; gap:6px;
762                background: linear-gradient(135deg, #8b0000 0%, #c0392b 50%, #8b0000 100%);
763                background-size: 200% 100%;
764                color:#fff;
765                font-family:'Heebo',sans-serif;
766                font-size:0.72rem;
767                font-weight:800;
768                letter-spacing:0.08em;
769                padding:6px 14px;
770                border-radius:20px;
771                box-shadow:0 3px 12px rgba(139,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
772                animation: badge-shimmer 3s ease-in-out infinite;
773                white-space:nowrap;
774                z-index:2;
775            ">
776                <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
777                חדש! לוח הדרנא בתוכנה להורדה
778            </span>
779            <h1 class="hadrana-hero-title">הַדְרָנָ<span class="gold">א</span></h1>
780            <p class="hadrana-hero-subtitle">לוח חזרות חכם · שיטת חבורת ש"ס</p>
781            <a href="hadrana.html" target="_blank" rel="noopener" class="hadrana-cta" id="hadrana-enter-btn-hero">
782                כניסה ללוח החזרות
783                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewB
783ox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
784            </a>
785            <p class="hadrana-hero-note">✦ ללא התקנה · ללא רישום · ללא תשלום ✦</p>
786        </section>
787
788        <!-- Choice Section: שתי אפשרויות זו לצד זו -->
789        <div class="hadrana-choice-section hadrana-reveal" style="margin-top: 48px;">
790            <div class="hadrana-choice-head">
791                <p class="section-label">איך תרצו ללמוד?</p>
792                <h2>שלושה דרכים <span>להתחיל</span></h2>
793            </div>
794            <div class="hadrana-choice-grid">
795
796                <!-- אונליין -->
797                <div class="hadrana-choice-card online">
798                    <span class="hadrana-choice-badge">מיידי · בדפדפן</span>
799                    <div class="hadrana-choice-icon">
800                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
801                    </div>
802                    <h3>לוח החזרות אונליין</h3>
803                    <p class="choice-desc">פתחו את הלוח ישירות בדפדפן והתחילו תוך שניות. אין מה להתקין, אין הרשמה.</p>
804                    <ul class="hadrana-choice-list">
805                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>ללא התקנה כלל</li>
806                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>עובד בכל מכשיר ומערכת</li>
807                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>תמיד הגרסה העדכנית</li>
808                    </ul>
809                    <div class="choice-action">
810                        <a href="hadrana.html" target="_blank" rel="noopener" class="hadrana-choice-btn primary" id="hadrana-enter-btn-choice">
811                            כניסה ללוח החזרות
812                            <svg width="19" height="19" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
813                        </a>
814                        <p class="choice-action-note">ללא תשלום · ללא הרשמה</p>
815                    </div>
816                </div>
817
818                <!-- דסקטופ -->
819                <div class="hadrana-choice-card desktop">
820                    <span class="hadrana-new-badge">
821                        <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
822                        חדש
823                    </span>
824                    <span class="hadrana-choice-badge">
825                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="2" y="3" width="20" height="14" rx="2"/><polyline points="8 21 12 17 16 21"/></svg>
826                        אפליקציית Desktop
827                    </span>
828                    <div class="hadrana-choice-icon">
829                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
830                    </div>
831                    <h3>הדרנא על המחשב</h3>
832                    <p class="choice-desc">אפליקציה עצמאית לWindows - ללא דפדפן, עובדת גם ללא רשת, עם עדכונים אוטומטיים שקטים.</p>
833                    <ul class="hadrana-choice-list">
834                        <li>
834<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#D4AF37" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>עובד ללא אינטרנט</li>
835                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#D4AF37" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>עדכונים אוטומטיים · ~5MB</li>
836                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#D4AF37" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>קובץ התקנה אחד</li>
837                    </ul>
838                    <div class="choice-action">
839                        <a href="#" id="hadrana-desktop-dl-btn" class="hadrana-choice-btn primary">
840                            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
841                            הורדה לווינדוס
842                        </a>
843                                                <p class="choice-action-note" id="hadrana-desktop-version">Windows 64-bit · הורדה חינמית</p>
844                    </div>
845                </div>
846
847                <!-- אנדרואיד -->
848                <div class="hadrana-choice-card android hadrana-reveal">
849                    <span class="hadrana-new-badge">
850                        <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
851                        חדש
852                    </span>
853                    <span class="hadrana-choice-badge">
854                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
855                        אפליקציית Android
856                    </span>
857                    <div class="hadrana-choice-icon">
858                        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
859                    </div>
860                    <h3>הדרנא על האנדרואיד</h3>
861                    <p class="choice-desc">אפליקציה מלאה לסמארטפון Android. עובדת ללא רשת, מותקנת בקלות.</p>
862                    <ul class="hadrana-choice-list">
863                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#66bb6a" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>עובד ללא אינטרנט</li>
864                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#66bb6a" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>כל התכונות מלאות</li>
865                        <li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#66bb6a" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>~33MB · חינם לחלוטין</li>
866                    </ul>
867                    <div class="choice-action">
868                        <div id="hadrana-android-install-warning" class="hadrana-install-warning" role="alert" aria-live="polite" aria-atomic="true" hidden>
869                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10.3 2.9 1.8 17a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 2.9a2 2 0 0 0-3.4 0Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
870                            <p id="hadrana-android-install-warning-text"></p>
871                        </div>
872                        <a href="#" id="hadrana-apk-dl-btn" class="hadrana-choice-btn android-btn">
873                            <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
874                            הורדה לאנדרואיד
875                        </a>
876                        <p class="choice-action-note" id="hadrana-apk-version">Android APK · הורדה חינמית</p>
877                    </div>
878                </div>
879
880            </div>
881        </div>
882
883        <!-- Divider -->
884        <div class="hadrana-divider" style="margin-top: 16px; margin-bottom: 0;">
885            <div class="hadrana-divider-line"></div>
886            <div class="hadrana-divider-diamond"></div>
887            <div class="hadrana-divider-line"></div>
888        </div>
889
890        <!-- Intro -->
891        <div class="hadrana-intro hadrana-reveal">
892            <p class="hadrana-intro-label">מהי שיטת החזרות?</p>
893            <h2>שיטת חבורת ש"ס – הדרך המוכחת לשמירת הלימוד</h2>
894            <p>
895                "הדרנא" היא מערכת חזרות מבוססת מרווחי זמן אופטימליים (Spaced Repetition), שפותחה על פי עקרונות חבורת ש"ס.
896                השיטה מחשבת עבורך את מועדי החזרה לכל יחידת לימוד – בין אם מדובר בדף גמרא, פרק משנה, סימן בשולחן ערוך
897                או פרק ברמב"ם – כך שהחומר נשאר חי ורענן בזיכרון לאורך זמן.
898            </p>
899        </div>
900
901        <!-- Feature cards -->
902        <div class="hadrana-features">
903            <div class="hadrana-feature-card hadrana-reveal">
904                <span class="hadrana-feature-icon">
905                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
906                </span>
907                <h3>מסלול חזרות מותאם אישית</h3>
908                <p>הגדירו תאריך תחילה, כמות יחידות ביום, ומהירות התקדמות – המערכת תבנה עבורכם לוח חזרות שלם ומדויק.</p>
909            </div>
910            <div class="hadrana-feature-card hadrana-reveal" style="transition-delay:0.1s">
911                <span class="hadrana-feature-icon">
912                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
913                </span>
914                <h3>שמונה מקורות תורניים</h3>
915                <p>תנ"ך, תלמוד בבלי (ש"ס), תלמוד ירושלמי, משנה, שולחן ערוך, משנה ברורה, רמב"ם וספר אישי מותאם – כולם בלוח אחד מאוחד ונוח לשימוש.</p>
916            </div>
917            <div class="hadrana-feature-card hadrana-reveal" style="transition-delay:0.2s">
918                <span class="hadrana-feature-icon">
919                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
920                </span>
921                <h3>סימון ומעקב חזרות</h3>
922                <p>סמנו כל חזרה כ"בוצע" ישירות בלוח. הדשבורד מציג את ההתקדמות, הסטריק ואחוז ההשלמה בזמן אמת.</p>
923            </div>
924            <div class="hadrana-feature-card hadrana-reveal" style="transition-delay:0.3s">
925                <span class="hadrana-feature-icon">
926                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
927                </span>
928                <h3>שמירה וייצוא</h3>
929                <p>שמרו את הלוח שלכם כקובץ HTML עצמאי לשימוש אופליין, ייצאו ל-CSV, או הדפיסו ישירות מהדפדפן.</p>
930            </div>
931            <div class="hadrana-feature-card hadrana-reveal" style="transition-delay:0.4s">
932                <span class="hadrana-feature-icon">
933                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
934                </span>
935                <h3>מצב כהה ועיצוב יוקרתי</h3>
936                <p>ממשק נקי ואלגנטי עם תמיכה מלאה במצב כהה – נוח לעיניים בלימוד לילי ובהיר ביום.</p>
937            </div>
938            <div class="hadrana-feature-card hadrana-reveal" style="transition-delay:0.5s">
939                <span class="hadrana-feature-icon">
940                    <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="var(--gold-dark)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
941                </span>
942                <h3>סטטיסטיקות מפורטות</h3>
943                <p>לוח נתונים מובנה המציג כמות חזרות, ממוצע יומי, סטריק רצוף ועוד – כדי לשמור על המוטיבציה.</p>
944            </div>
945        </div>
946
947        <!-- How it works -->
948        <section class="hadrana-how-section">
949            <p class="section-label">איך מתחילים?</p>
950            <h2>שלושה צעדים פשוטים<br>ל<span>לוח חזרות</span> מושלם</h2>
951            <div class="hadrana-steps">
952                <div class="hadrana-step hadrana-reveal">
953                    <div class="hadrana-step-num">א</div>
954                    <h4>בחרו מקור ומסלול</h4>
955                    <p>בחרו את הספר (ש"ס, משנה, שו"ע וכו'), תאריך התחלה, וכמה יחידות ביום ברצונכם ללמוד.</p>
956                </div>
957                <div class="hadrana-step hadrana-reveal" style="transition-delay:0.15s">
958                    <div class="hadrana-step-num">ב</div>
959                    <h4>הפיקו את הלוח</h4>
960                    <p>המערכת מחשבת אוטומטית את כל מועדי החזרה עם 5 שלבי עיגון זיכרון לכל יחידה.</p>
961                </div>
962                <div class="hadrana-step hadrana-reveal" style="transition-delay:0.3s">
963                    <div class="hadrana-step-num">ג</div>
964                    <h4>עקבו ובצעו</h4>
965                    <p>בכל יום סמנו את החזרות שבוצעו. הלוח מתעדכן בזמן אמת ושומר את ההתקדמות שלכם.</p>
966                </div>
967            </div>
968        </section>
969
970        <section class="hadrana-bottom-cta">
971            <div class="hadrana-divider" style="margin-bottom: 52px;">
972                <div class="hadrana-divider-line"></div>
973                <div class="hadrana-divider-diamond"></div>
974                <div class="hadrana-divider-line"></div>
975            </div>
976            <h2 class="hadrana-reveal">מוכנים להתחיל?</h2>
977            <p class="hadrana-reveal">פתחו את לוח החזרות ובנו את המסלול שלכם עוד היום – בחינם, ללא הרשמה.</p>
978            <a href="hadrana.html" target="_blank" rel="noopener" class="hadrana-cta hadrana-reveal" id="hadrana-enter-btn-bottom">
979                כניסה ללוח החזרות
980                <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewB
980ox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
981            </a>
982        </section>
983
984    <button id="open-report-modal-btn" class="hadrana-cta" style="position: fixed; bottom: 24px; left: 24px; padding: 12px 24px; font-size: 0.95rem; z-index: 9999; box-shadow: 0 4px 15px rgba(0,0,0,0.2); border: none;">
985        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="margin-left: 6px;"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
986        מצאתם טעות? דווחו לנו
987    </button>
988
989    <div id="hadrana-report-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999999; align-items: center; justify-content: center; direction: rtl;">
990        <div style="background: var(--hadrana-cream); border: 1px solid var(--gold); border-radius: 12px; padding: 30px; width: 90%; max-width: 500px; position: relative;">
991            <button id="close-report-modal" style="position: absolute; top: 15px; left: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--hadrana-text-soft);">✕</button>
992            <h2 style="color: var(--hadrana-dark); margin-top: 0;">דיווח על שגיאה</h2>
993            <p style="color: var(--hadrana-text-soft); font-size: 0.95rem; margin-bottom: 20px;">מצאתם טעות בחישוב, בלוגיקה או במערכת? נשמח שתעדכנו אותנו כדי שנוכל לתקן.</p>
994            <form id="hadrana-report-form" style="display: flex; flex-direction: column; gap: 15px;">
995                <input type="text" name="name" placeholder="שם (אופציונלי)" style="padding: 10px; border: 1px solid var(--hadrana-border); border-radius: 6px; font-family: 'Heebo', sans-serif;">
996                <input type="email" name="email" placeholder="מייל לחזרה (אופציונלי)" style="padding: 10px; border: 1px solid var(--hadrana-border); border-radius: 6px; font-family: 'Heebo', sans-serif;">
997                <select name="issueType" style="padding: 10px; border: 1px solid var(--hadrana-border); border-radius: 6px; font-family: 'Heebo', sans-serif; background: #fff;">
998                    <option value="טעות במקורות/פרקים">טעות בתוכן או בפרקים</option>
999                    <option value="בעיה בחישוב התאריכים">בעיה בחישוב התאריכים</option>
1000                    <option value="תקלה טכנית בממשק">תקלה טכנית בממשק האתר</option>
1001                    <option value="אחר">אחר</option>
1002                </select>
1003                <textarea name="message" placeholder="תיאור הבעיה..." required rows="4" style="padding: 10px; border: 1px solid var(--hadrana-border); border-radius: 6px; font-family: 'Heebo', sans-serif; resize: vertical;"></textarea>
1004                <button type="submit" class="hadrana-cta" style="border: none; cursor: pointer; justify-content: center; width: 100%;">שלח דיווח</button>
1005                <div id="report-form-result" style="text-align: center; font-size: 0.9rem; font-weight: bold; margin-top: 10px;"></div>
1006            </form>
1007        </div>
1008    </div>
1009
1010    </main>
1011
1012    <div id="footer-placeholder" class="site-footer"></div>
1013<script>
1014        (function() {
1015            function setFreshUrl(btn) {
1016                if (!btn) return;
1017                btn.addEventListener('click', function(e) {
1018                    e.preventDefault();
1019                    // בדיקת חיבור: אונליין יקבל פרמטר רענון, אופליין יטען את הכתובת הרגילה כדי לא לשבור את ה-PWA
1020                    const targetUrl = navigator.onLine ? 'hadrana.html?v=' + Date.now() : 'hadrana.html';
1021                    window.open(targetUrl, '_blank', 'noopener');
1022                });
1023            }
1024            document.addEventListener('DOMContentLoaded', function() {
1025                setFreshUrl(document.getElementById('hadrana-enter-btn-hero'));
1026                setFreshUrl(document.getElementById('hadrana-enter-btn-bottom'));
1027                setFreshUrl(document.getElementById('hadrana-enter-btn-choice'));
1028            });
1029        })();
1030    </script>
1030
1031    
1031<script src="script.js"></script>
1031
1032
1033    <!-- הודעה צפה: עדכון ידני Windows — נשלט ע"י initHadranaBanner() ב-script.js -->
1034    <div id="hadrana-update-toast" style="display:none;">
1035        <div class="toast-content-wrapper">
1036            <div class="toast-icon">
1037                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
1038            </div>
1039            <div class="toast-text">
1040                <h4>עדכון חשוב למשתמשי Windows</h4>
1041                <p>משתמשי גרסאות ישנות לא יקבלו עדכון אוטומטי — יש להתקין את הגרסה האחרונה ידנית מכאן.</p>
1042            </div>
1043            <button class="toast-close-btn" onclick="closeHadranaBanner()" aria-label="סגור">&times;</button>
1044        </div>
1045        <div class="toast-progress-bar"></div>
1046    </div>
1047<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"0b55a17a41a648638553a1c773c58872","r":1,"spa":2}' crossorigin="anonymous"></script>
1047
1048</body>
1049</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.