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="ס××ר">×</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.