Initial AI-generated site
This commit is contained in:
+597
@@ -0,0 +1,597 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>7XL – חווית הימורים ברמה אחרת</title>
|
||||
<meta name="description" content="7XL - פלטפורמת הימורי ספורט וקזינו מובילה. הורד עכשיו וקבל בונוס הצטרפות מיוחד. ספורט חי, קזינו אונליין, בונוסים שווים.">
|
||||
<meta property="og:title" content="7XL – חווית הימורים ברמה אחרת">
|
||||
<meta property="og:description" content="פלטפורמת הימורי ספורט וקזינו מובילה בישראל. הצטרף עכשיו!">
|
||||
<meta property="og:type" content="website">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230a1628' width='100' height='100' rx='20'/><text x='50' y='68' text-anchor='middle' font-family='system-ui' font-size='40' font-weight='600' fill='%23d4af37'>7XL</text></svg>">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="site-header">
|
||||
<nav class="nav-container">
|
||||
<a href="#" class="logo" aria-label="7XL דף הבית">
|
||||
<span class="logo-text" lang="en">7XL</span>
|
||||
</a>
|
||||
<ul class="nav-links" role="list">
|
||||
<li><a href="#sports">ספורט חי</a></li>
|
||||
<li><a href="#casino">קזינו</a></li>
|
||||
<li><a href="#bonuses">בונוסים</a></li>
|
||||
<li><a href="#download">הורדה</a></li>
|
||||
</ul>
|
||||
<a href="#download" class="nav-cta">הצטרף עכשיו</a>
|
||||
<button class="mobile-toggle" aria-label="פתח תפריט" aria-expanded="false" aria-controls="mobile-nav">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
<div class="mobile-nav" id="mobile-nav" hidden>
|
||||
<ul role="list">
|
||||
<li><a href="#sports">ספורט חי</a></li>
|
||||
<li><a href="#casino">קזינו</a></li>
|
||||
<li><a href="#bonuses">בונוסים</a></li>
|
||||
<li><a href="#download">הורדה</a></li>
|
||||
<li><a href="#download" class="mobile-cta">הצטרף עכשיו</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-bg">
|
||||
<div class="hero-gradient"></div>
|
||||
<div class="hero-particles" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">הפלטפורמה המובילה בישראל</span>
|
||||
<h1><span lang="en">7XL</span> – חווית הימורים <span class="gold-text">ברמה אחרת</span></h1>
|
||||
<p class="hero-desc">הימורי ספורט חי, קזינו אונליין פרימיום, ובונוסים שלא תמצאו בשום מקום אחר. הצטרפו לאלפי שחקנים שכבר נהנים מחוויית המשחק המתקדמת ביותר.</p>
|
||||
<div class="hero-ctas">
|
||||
<a href="#download" class="btn btn-primary glow">
|
||||
<span>הורד עכשיו</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#bonuses" class="btn btn-secondary">
|
||||
<span>קבל בונוס</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-number" lang="en">50,000+</span>
|
||||
<span class="stat-label">שחקנים פעילים</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number" lang="en">24/7</span>
|
||||
<span class="stat-label">תמיכה בעברית</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-number" lang="en">100+</span>
|
||||
<span class="stat-label">משחקים</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="phone-mockup">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-notch"></div>
|
||||
<div class="phone-screen">
|
||||
<div class="app-header">
|
||||
<span class="app-logo" lang="en">7XL</span>
|
||||
<div class="app-balance">₪12,450</div>
|
||||
</div>
|
||||
<div class="app-nav">
|
||||
<div class="app-nav-item active">ספורט</div>
|
||||
<div class="app-nav-item">קזינו</div>
|
||||
<div class="app-nav-item">לייב</div>
|
||||
</div>
|
||||
<div class="app-content">
|
||||
<div class="match-card">
|
||||
<div class="match-league">פרמייר ליג</div>
|
||||
<div class="match-teams">
|
||||
<span>ליברפול</span>
|
||||
<span class="match-vs" lang="en">VS</span>
|
||||
<span>מנצ'סטר סיטי</span>
|
||||
</div>
|
||||
<div class="match-odds">
|
||||
<div class="odd" lang="en">1.85</div>
|
||||
<div class="odd" lang="en">3.40</div>
|
||||
<div class="odd" lang="en">4.20</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="match-card live">
|
||||
<div class="live-indicator" lang="en">● LIVE</div>
|
||||
<div class="match-league">לה ליגה</div>
|
||||
<div class="match-teams">
|
||||
<span>ריאל מדריד</span>
|
||||
<span class="match-score" lang="en">2 - 1</span>
|
||||
<span>ברצלונה</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="phone-glow" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="floating-cards" aria-hidden="true">
|
||||
<div class="floating-card card-1">
|
||||
<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="#d4af37" opacity="0.2"/><text x="20" y="26" text-anchor="middle" fill="#d4af37" font-size="20">♠</text></svg>
|
||||
</div>
|
||||
<div class="floating-card card-2">
|
||||
<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="#ff6b35" opacity="0.2"/><text x="20" y="26" text-anchor="middle" fill="#ff6b35" font-size="20">♦</text></svg>
|
||||
</div>
|
||||
<div class="floating-card card-3">
|
||||
<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="#d4af37" opacity="0.2"/><text x="20" y="26" text-anchor="middle" fill="#d4af37" font-size="20">⚽</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-scroll-indicator" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M19 12l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features" id="features">
|
||||
<div class="container">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">למה 7XL?</span>
|
||||
<h2>יתרונות הפלטפורמה</h2>
|
||||
</header>
|
||||
<div class="features-grid">
|
||||
<article class="feature-card glass">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
|
||||
<circle cx="24" cy="24" r="22" stroke="url(#feat1)" stroke-width="2"/>
|
||||
<path d="M24 12v12l8 4" stroke="#d4af37" stroke-width="3" stroke-linecap="round"/>
|
||||
<circle cx="24" cy="24" r="3" fill="#ff6b35"/>
|
||||
<defs><linearGradient id="feat1" x1="0" y1="0" x2="48" y2="48"><stop stop-color="#d4af37"/><stop offset="1" stop-color="#ff6b35"/></linearGradient></defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>הימורי ספורט חי</h3>
|
||||
<p>הימורים בזמן אמת על אלפי משחקים מכל רחבי העולם. אודסים תחרותיים ושווקים מגוונים.</p>
|
||||
</article>
|
||||
<article class="feature-card glass featured">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
|
||||
<rect x="4" y="8" width="40" height="32" rx="4" stroke="url(#feat2)" stroke-width="2"/>
|
||||
<circle cx="24" cy="24" r="10" stroke="#d4af37" stroke-width="2"/>
|
||||
<circle cx="24" cy="24" r="3" fill="#ff6b35"/>
|
||||
<defs><linearGradient id="feat2" x1="0" y1="0" x2="48" y2="48"><stop stop-color="#d4af37"/><stop offset="1" stop-color="#ff6b35"/></linearGradient></defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3>קזינו אונליין</h3>
|
||||
<p>מאות משחקי קזינו פרימיום — רולטה, בלאקג'ק, סלוטים ופוקר עם דילרים חיים.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="feature-card glass">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
|
||||
<path d="M24 4l6 12 13 2-9.5 9 2.5 13-12-6.5L12 40l2.5-13L5 18l13-2z" stroke="url(#feat3)" stroke-width="2" fill="none"/>
|
||||
<defs><linearGradient id="feat3" x1="0" y1="0" x2="48" y2="48"><stop stop-color="#d4af37"/><stop offset="1" stop-color="#ff6b35"/></linearGradient></defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>בונוסים שווים</h3>
|
||||
<p>בונוס הצטרפות נדיב, הטבות יומיות והחזרי כספים. ככל שמשחקים יותר — מקבלים יותר.</p>
|
||||
</article>
|
||||
<article class="feature-card glass">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 48 48" fill="none" aria-hidden="true">
|
||||
<rect x="12" y="4" width="24" height="40" rx="4" stroke="url(#feat4)" stroke-width="2"/>
|
||||
<rect x="16" y="8" width="16" height="28" rx="2" fill="#1a0a2e"/>
|
||||
<circle cx="24" cy="40" r="2" fill="#d4af37"/>
|
||||
<defs><linearGradient id="feat4" x1="0" y1="0" x2="48" y2="48"><stop stop-color="#d4af37"/><stop offset="1" stop-color="#ff6b35"/></linearGradient></defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>אפליקציה מהירה</h3>
|
||||
<p>אפליקציה מותאמת לכל מכשיר עם ביצועים מעולים וממשק אינטואיטיבי בעברית.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sports Section -->
|
||||
<section class="sports" id="sports">
|
||||
<div class="container">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">ספורט חי</span>
|
||||
<h2>הימורי ספורט</h2>
|
||||
<p>אלפי משחקים מכל רחבי העולם, כולל ליגות מובילות ואירועים בינלאומיים</p>
|
||||
</header>
|
||||
<div class="sports-grid">
|
||||
<article class="sport-card glass" data-sport="football">
|
||||
<div class="sport-icon">
|
||||
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" stroke="#d4af37" stroke-width="2"/>
|
||||
<path d="M32 4a28 28 0 100 56 28 28 0 000-56zM32 18l8 6-3 10h-10l-3-10z" fill="#d4af37" opacity="0.3"/>
|
||||
<circle cx="32" cy="32" r="8" fill="#ff6b35"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>כדורגל</h3>
|
||||
<p>פרמייר ליג, לה ליגה, סריה A, בונדסליגה ועוד</p>
|
||||
<span class="sport-count" lang="en">500+</span>
|
||||
<span class="sport-count-label">משחקים יומיים</span>
|
||||
</article>
|
||||
<article class="sport-card glass" data-sport="basketball">
|
||||
<div class="sport-icon">
|
||||
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" stroke="#d4af37" stroke-width="2"/>
|
||||
<path d="M4 32h56M32 4v56" stroke="#ff6b35" stroke-width="2"/>
|
||||
<path d="M10 15c12 8 12 26 0 34M54 15c-12 8-12 26 0 34" stroke="#d4af37" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>כדורסל</h3>
|
||||
<p><span lang="en">NBA</span>, יורוליג, ליגת העל ועוד</p>
|
||||
<span class="sport-count" lang="en">200+</span>
|
||||
<span class="sport-count-label">משחקים יומיים</span>
|
||||
</article>
|
||||
<article class="sport-card glass" data-sport="tennis">
|
||||
<div class="sport-icon">
|
||||
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" stroke="#d4af37" stroke-width="2"/>
|
||||
<ellipse cx="32" cy="32" rx="12" ry="28" stroke="#ff6b35" stroke-width="2"/>
|
||||
<path d="M4 32h56" stroke="#ff6b35" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>טניס</h3>
|
||||
<p>גרנד סלאם, <span lang="en">ATP</span>, <span lang="en">WTA</span></p>
|
||||
<span class="sport-count" lang="en">150+</span>
|
||||
<span class="sport-count-label">משחקים יומיים</span>
|
||||
</article>
|
||||
<article class="sport-card glass more-sports" data-sport="more">
|
||||
<div class="sport-icon">
|
||||
<svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
|
||||
<circle cx="16" cy="32" r="6" fill="#d4af37"/>
|
||||
<circle cx="32" cy="32" r="6" fill="#ff6b35"/>
|
||||
<circle cx="48" cy="32" r="6" fill="#d4af37"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>ענפים נוספים</h3>
|
||||
<p>הוקי, אמריקאי, <span lang="en">MMA</span>, משחקי וידאו ועוד</p>
|
||||
<span class="sport-count" lang="en">50+</span>
|
||||
<span class="sport-count-label">ענפי ספורט</span>
|
||||
</article>
|
||||
</div>
|
||||
<div class="live-matches">
|
||||
<div class="live-header">
|
||||
<span class="live-pulse" aria-hidden="true"></span>
|
||||
<h4>משחקים חיים עכשיו</h4>
|
||||
</div>
|
||||
<div class="matches-ticker" aria-label="משחקים חיים">
|
||||
<div class="match-item">
|
||||
<span class="match-time" lang="en">67'</span>
|
||||
<span class="match-info">ליברפול 2-1 מנצ'סטר יונייטד</span>
|
||||
<span class="match-odds-small" lang="en">1.35</span>
|
||||
</div>
|
||||
<div class="match-item">
|
||||
<span class="match-time" lang="en">Q3</span>
|
||||
<span class="match-info">לייקרס 78-82 סלטיקס</span>
|
||||
<span class="match-odds-small" lang="en">2.10</span>
|
||||
</div>
|
||||
<div class="match-item">
|
||||
<span class="match-time" lang="en">SET2</span>
|
||||
<span class="match-info">ג'וקוביץ' נגד נדאל</span>
|
||||
<span class="match-odds-small" lang="en">1.65</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Casino Section -->
|
||||
<section class="casino" id="casino">
|
||||
<div class="casino-bg" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<header class="section-header light">
|
||||
<span class="section-tag">קזינו אונליין</span>
|
||||
<h2>משחקי קזינו פרימיום</h2>
|
||||
<p>חוויית קזינו אמיתית עם דילרים חיים ומשחקים מהמובילים בעולם</p>
|
||||
</header>
|
||||
<div class="casino-games">
|
||||
<article class="casino-game">
|
||||
<div class="game-visual roulette">
|
||||
<svg viewBox="0 0 120 120" class="roulette-wheel" aria-hidden="true">
|
||||
<circle cx="60" cy="60" r="55" fill="#1a0a2e" stroke="#d4af37" stroke-width="3"/>
|
||||
<circle cx="60" cy="60" r="40" fill="#0a1628" stroke="#ff6b35" stroke-width="2"/>
|
||||
<circle cx="60" cy="60" r="15" fill="#d4af37"/>
|
||||
<g class="wheel-numbers">
|
||||
<circle cx="60" cy="12" r="6" fill="#e63946"/><circle cx="85" cy="18" r="6" fill="#1d3557"/>
|
||||
<circle cx="102" cy="40" r="6" fill="#e63946"/><circle cx="108" cy="60" r="6" fill="#1d3557"/>
|
||||
<circle cx="102" cy="80" r="6" fill="#e63946"/><circle cx="85" cy="102" r="6" fill="#1d3557"/>
|
||||
<circle cx="60" cy="108" r="6" fill="#e63946"/><circle cx="35" cy="102" r="6" fill="#1d3557"/>
|
||||
<circle cx="18" cy="80" r="6" fill="#e63946"/><circle cx="12" cy="60" r="6" fill="#2a9d8f"/>
|
||||
<circle cx="18" cy="40" r="6" fill="#e63946"/><circle cx="35" cy="18" r="6" fill="#1d3557"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="game-info">
|
||||
<h3>רולטה</h3>
|
||||
<p>רולטה אירופאית ואמריקאית עם דילרים חיים</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="casino-game">
|
||||
<div class="game-visual blackjack">
|
||||
<div class="cards-stack">
|
||||
<div class="playing-card card-back" aria-hidden="true"></div>
|
||||
<div class="playing-card card-ace" aria-hidden="true"><span lang="en">A</span><span>♠</span></div>
|
||||
<div class="playing-card card-king" aria-hidden="true"><span lang="en">K</span><span>♥</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-info">
|
||||
<h3>בלאקג'ק</h3>
|
||||
<p>שולחנות <span lang="en">VIP</span> ושולחנות למתחילים</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="casino-game">
|
||||
<div class="game-visual slots">
|
||||
<div class="slot-machine" aria-hidden="true">
|
||||
<div class="slot-reel">7</div>
|
||||
<div class="slot-reel">7</div>
|
||||
<div class="slot-reel">7</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-info">
|
||||
<h3>סלוטים</h3>
|
||||
<p>מאות מכונות מזל עם ג'קפוטים ענקיים</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="casino-game">
|
||||
<div class="game-visual poker">
|
||||
<div class="poker-chips" aria-hidden="true">
|
||||
<div class="chip chip-gold"></div>
|
||||
<div class="chip chip-orange"></div>
|
||||
<div class="chip chip-purple"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-info">
|
||||
<h3>פוקר</h3>
|
||||
<p>טקסס הולדם, אומהה וטורנירים יומיים</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bonuses Section -->
|
||||
<section class="bonuses" id="bonuses">
|
||||
<div class="container">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">הטבות מיוחדות</span>
|
||||
<h2>בונוסים שווים</h2>
|
||||
</header>
|
||||
<div class="bonus-showcase">
|
||||
<div class="bonus-main glass">
|
||||
<div class="bonus-badge" lang="en">LIMITED OFFER</div>
|
||||
<div class="bonus-amount">
|
||||
<span class="bonus-percent" lang="en">100%</span>
|
||||
<span class="bonus-text">בונוס הפקדה ראשונה</span>
|
||||
</div>
|
||||
<p>הפקד עד ₪1,000 וקבל כפול! בונוס הצטרפות בלעדי לשחקנים חדשים.</p>
|
||||
<ul class="bonus-features" role="list">
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
ללא דרישת הימור מינימלית
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
משיכה מיידית
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
|
||||
תקף לכל המשחקים
|
||||
</li>
|
||||
</ul>
|
||||
<a href="#download" class="btn btn-primary glow">הצטרף וקבל בונוס</a>
|
||||
</div>
|
||||
<div class="bonus-extras">
|
||||
<div class="bonus-card glass">
|
||||
<div class="bonus-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" fill="none">
|
||||
<path d="M24 4v40M4 24h40" stroke="#ff6b35" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle cx="24" cy="24" r="8" fill="#d4af37"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4>בונוס יומי</h4>
|
||||
<p>היכנס כל יום וקבל בונוס הפתעה</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bonus-card glass">
|
||||
<div class="bonus-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" fill="none">
|
||||
<path d="M24 8l4 8 9 1-6.5 6.5 1.5 9L24 28l-8 4.5 1.5-9L11 17l9-1z" fill="#d4af37"/>
|
||||
<circle cx="24" cy="24" r="20" stroke="#ff6b35" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4>תוכנית <span lang="en">VIP</span></h4>
|
||||
<p>החזרים של עד 20% לשחקני פרימיום</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bonus-card glass">
|
||||
<div class="bonus-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" fill="none">
|
||||
<rect x="8" y="16" width="32" height="24" rx="4" stroke="#d4af37" stroke-width="2"/>
|
||||
<path d="M8 24h32" stroke="#ff6b35" stroke-width="2"/>
|
||||
<rect x="12" y="32" width="8" height="4" rx="1" fill="#d4af37"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4>בונוס הפקדה</h4>
|
||||
<p>10% על כל הפקדה — ללא הגבלה</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download Section -->
|
||||
<section class="download" id="download">
|
||||
<div class="download-bg" aria-hidden="true"></div>
|
||||
<div class="container">
|
||||
<div class="download-content">
|
||||
<div class="download-text">
|
||||
<span class="section-tag">הורד עכשיו</span>
|
||||
<h2>התחל לשחק <span class="gold-text">תוך דקות</span></h2>
|
||||
<p>האפליקציה זמינה לכל המכשירים. הורד, הירשם, והתחל להרוויח!</p>
|
||||
<div class="download-buttons">
|
||||
<a href="#" class="download-btn ios" aria-label="הורד לאייפון מ-App Store">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
|
||||
</svg>
|
||||
<div class="download-btn-text">
|
||||
<span class="small">הורד ל</span>
|
||||
<span class="big" lang="en">App Store</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="download-btn android" aria-label="הורד לאנדרואיד">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M17.523 2.586l1.414 1.414-2.829 2.829a7.963 7.963 0 011.414 2.757H20v2h-2.478a8.013 8.013 0 01-1.414 2.757l2.829 2.829-1.414 1.414-2.829-2.829a7.963 7.963 0 01-2.757 1.414V20h-2v-2.478a8.013 8.013 0 01-2.757-1.414l-2.829 2.829-1.414-1.414 2.829-2.829A7.963 7.963 0 014.478 12H2v-2h2.478a8.013 8.013 0 011.414-2.757L3.063 4.414 4.477 3l2.829 2.829A7.963 7.963 0 0110.063 4.42V2h2v2.42a8.013 8.013 0 012.757 1.414l2.829-2.829zM12 8a4 4 0 100 8 4 4 0 000-8z"/>
|
||||
</svg>
|
||||
<div class="download-btn-text">
|
||||
<span class="small">הורד ל</span>
|
||||
<span class="big" lang="en">Android</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="download-btn windows" aria-label="הורד לווינדוס">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M3 5.557l7.357-1.002v7.102H3V5.557zm0 12.886l7.357 1.002v-7.088H3v6.086zm8.143 1.124L21 21V12.357h-9.857v7.21zM11.143 4.433L21 3v8.357h-9.857V4.433z"/>
|
||||
</svg>
|
||||
<div class="download-btn-text">
|
||||
<span class="small">הורד ל</span>
|
||||
<span class="big" lang="en">Windows</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="download-support">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#d4af37" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
|
||||
</svg>
|
||||
<span>תמיכה טכנית 24/7 בעברית</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="download-visual">
|
||||
<div class="qr-container glass">
|
||||
<div class="qr-code" aria-label="קוד QR להורדת האפליקציה">
|
||||
<svg viewBox="0 0 100 100" class="qr-svg" role="img">
|
||||
<rect width="100" height="100" fill="#0a1628"/>
|
||||
<g fill="#d4af37">
|
||||
<rect x="10" y="10" width="25" height="25"/>
|
||||
<rect x="65" y="10" width="25" height="25"/>
|
||||
<rect x="10" y="65" width="25" height="25"/>
|
||||
<rect x="15" y="15" width="15" height="15" fill="#0a1628"/>
|
||||
<rect x="70" y="15" width="15" height="15" fill="#0a1628"/>
|
||||
<rect x="15" y="70" width="15" height="15" fill="#0a1628"/>
|
||||
<rect x="18" y="18" width="9" height="9"/>
|
||||
<rect x="73" y="18" width="9" height="9"/>
|
||||
<rect x="18" y="73" width="9" height="9"/>
|
||||
<rect x="40" y="10" width="5" height="5"/>
|
||||
<rect x="50" y="10" width="5" height="5"/>
|
||||
<rect x="40" y="20" width="10" height="5"/>
|
||||
<rect x="55" y="40" width="5" height="5"/>
|
||||
<rect x="65" y="45" width="15" height="5"/>
|
||||
<rect x="40" y="40" width="10" height="10"/>
|
||||
<rect x="10" y="45" width="5" height="10"/>
|
||||
<rect x="20" y="50" width="10" height="5"/>
|
||||
<rect x="45" y="55" width="5" height="10"/>
|
||||
<rect x="55" y="60" width="10" height="5"/>
|
||||
<rect x="70" y="55" width="5" height="10"/>
|
||||
<rect x="80" y="65" width="5" height="10"/>
|
||||
<rect x="55" y="75" width="10" height="5"/>
|
||||
<rect x="70" y="80" width="10" height="5"/>
|
||||
<rect x="40" y="85" width="15" height="5"/>
|
||||
</g>
|
||||
<text x="50" y="55" text-anchor="middle" fill="#ff6b35" font-family="Inter" font-weight="600" font-size="8">7XL</text>
|
||||
</svg>
|
||||
</div>
|
||||
<p>סרוק להורדה מהירה</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-main">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo" lang="en">7XL</span>
|
||||
<p>פלטפורמת הימורי ספורט וקזינו מובילה. חוויית משחק פרימיום עם תמיכה מלאה בעברית.</p>
|
||||
<div class="footer-contact">
|
||||
<a href="mailto:support@7xl.example">support@7xl.example</a>
|
||||
<a href="tel:+972-3-000-0000" dir="ltr">03-000-0000</a>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<a href="#" aria-label="ערוץ טלגרם">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69.01-.03.01-.14-.07-.2-.08-.06-.19-.04-.27-.02-.12.02-1.96 1.25-5.54 3.66-.52.36-1 .53-1.42.52-.47-.01-1.37-.26-2.03-.48-.82-.27-1.47-.42-1.42-.88.03-.24.37-.49 1.02-.75 3.98-1.73 6.64-2.87 7.97-3.43 3.79-1.6 4.58-1.88 5.1-1.89.11 0 .37.03.54.17.14.12.18.28.2.45-.01.06.01.24 0 .38z"/></svg>
|
||||
</a>
|
||||
<a href="#" aria-label="וואטסאפ">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<div class="footer-col">
|
||||
<h4>משחקים</h4>
|
||||
<ul role="list">
|
||||
<li><a href="#sports">הימורי ספורט</a></li>
|
||||
<li><a href="#casino">קזינו אונליין</a></li>
|
||||
<li><a href="#">משחקים חיים</a></li>
|
||||
<li><a href="#">פוקר</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>עזרה</h4>
|
||||
<ul role="list">
|
||||
<li><a href="#">שאלות נפוצות</a></li>
|
||||
<li><a href="#">איך להפקיד</a></li>
|
||||
<li><a href="#">איך למשוך</a></li>
|
||||
<li><a href="#">תמיכה טכנית</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h4>משפטי</h4>
|
||||
<ul role="list">
|
||||
<li><a href="#">תנאי שימוש</a></li>
|
||||
<li><a href="#">מדיניות פרטיות</a></li>
|
||||
<li><a href="#">משחק אחראי</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 <span lang="en">7XL</span>. כל הזכויות שמורות.</p>
|
||||
<p class="age-warning">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
|
||||
מותר לגילאי 18+ בלבד. שחקו באחריות.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* 7XL – Interactive Features
|
||||
* Clean, accessible, respects user preferences
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
/**
|
||||
* Header scroll behavior
|
||||
*/
|
||||
function initHeader() {
|
||||
const header = document.querySelector('.site-header');
|
||||
if (!header) return;
|
||||
|
||||
let ticking = false;
|
||||
|
||||
function handleScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(() => {
|
||||
if (window.pageYOffset > 40) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
handleScroll();
|
||||
}
|
||||
|
||||
/**
|
||||
* Mobile menu toggle
|
||||
*/
|
||||
function initMobileMenu() {
|
||||
const toggle = document.querySelector('.mobile-toggle');
|
||||
const mobileNav = document.querySelector('.mobile-nav');
|
||||
|
||||
if (!toggle || !mobileNav) return;
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
|
||||
toggle.setAttribute('aria-expanded', !isExpanded);
|
||||
mobileNav.hidden = isExpanded;
|
||||
|
||||
if (!isExpanded) {
|
||||
const firstLink = mobileNav.querySelector('a');
|
||||
if (firstLink) firstLink.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on link click
|
||||
mobileNav.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
toggle.setAttribute('aria-expanded', 'false');
|
||||
mobileNav.hidden = true;
|
||||
});
|
||||
});
|
||||
|
||||
// Close on escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && !mobileNav.hidden) {
|
||||
toggle.setAttribute('aria-expanded', 'false');
|
||||
mobileNav.hidden = true;
|
||||
toggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll reveal animations
|
||||
*/
|
||||
function initScrollReveal() {
|
||||
if (prefersReducedMotion) return;
|
||||
|
||||
const revealElements = document.querySelectorAll(
|
||||
'.feature-card, .sport-card, .casino-game, .bonus-card, .bonus-main, .section-header'
|
||||
);
|
||||
|
||||
if (!revealElements.length) return;
|
||||
|
||||
revealElements.forEach(el => el.classList.add('reveal'));
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.15,
|
||||
rootMargin: '0px 0px -40px 0px'
|
||||
}
|
||||
);
|
||||
|
||||
revealElements.forEach(el => observer.observe(el));
|
||||
}
|
||||
|
||||
/**
|
||||
* Smooth scroll for anchor links
|
||||
*/
|
||||
function initSmoothScroll() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
|
||||
const header = document.querySelector('.site-header');
|
||||
const offset = header ? header.offsetHeight + 16 : 80;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||
});
|
||||
|
||||
// Set focus for accessibility
|
||||
target.setAttribute('tabindex', '-1');
|
||||
target.focus({ preventScroll: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Pause animations when not in view (performance)
|
||||
*/
|
||||
function initAnimationPausing() {
|
||||
if (prefersReducedMotion) return;
|
||||
|
||||
const roulette = document.querySelector('.roulette-wheel');
|
||||
if (!roulette) return;
|
||||
|
||||
// Add animation via JS so it only runs when visible
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.roulette-wheel.animate {
|
||||
animation: spin 15s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
roulette.classList.add('animate');
|
||||
} else {
|
||||
roulette.classList.remove('animate');
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.3 }
|
||||
);
|
||||
observer.observe(roulette);
|
||||
}
|
||||
|
||||
/**
|
||||
* Floating cards animation (CSS-only when visible)
|
||||
*/
|
||||
function initFloatingCards() {
|
||||
if (prefersReducedMotion) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12px); }
|
||||
}
|
||||
.floating-card.animate {
|
||||
animation: float 5s ease-in-out infinite;
|
||||
}
|
||||
.floating-card.card-2.animate {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
.floating-card.card-3.animate {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
const cards = document.querySelectorAll('.floating-card');
|
||||
if (!cards.length) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach(entry => {
|
||||
cards.forEach(card => {
|
||||
if (entry.isIntersecting) {
|
||||
card.classList.add('animate');
|
||||
} else {
|
||||
card.classList.remove('animate');
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
|
||||
const heroVisual = document.querySelector('.hero-visual');
|
||||
if (heroVisual) observer.observe(heroVisual);
|
||||
}
|
||||
|
||||
/**
|
||||
* Live pulse animation
|
||||
*/
|
||||
function initLivePulse() {
|
||||
if (prefersReducedMotion) return;
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.4); opacity: 0.6; }
|
||||
}
|
||||
.live-pulse {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
.live-indicator {
|
||||
animation: blink 1.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all features
|
||||
*/
|
||||
function init() {
|
||||
initHeader();
|
||||
initMobileMenu();
|
||||
initScrollReveal();
|
||||
initSmoothScroll();
|
||||
initAnimationPausing();
|
||||
initFloatingCards();
|
||||
initLivePulse();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user