Initial AI-generated site
This commit is contained in:
+188
@@ -0,0 +1,188 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>משחק מירוץ סירות בנמל | משחק דפדפן חינמי</title>
|
||||
<meta name="description" content="משחק מירוץ סירות מרהיב בדפדפן! אספו מתנות, קבלו בוסטים והגיעו הכי רחוק שאפשר. חינם, בלי התקנה.">
|
||||
<meta property="og:title" content="משחק מירוץ סירות בנמל">
|
||||
<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'><text y='.9em' font-size='90'>⛵</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@400;700;900&family=Rubik+Mono+One&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
<div class="scanlines" aria-hidden="true"></div>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="header-content">
|
||||
<div class="logo">
|
||||
<span class="logo-icon" aria-hidden="true">⛵</span>
|
||||
<span class="logo-text">מירוץ סירות</span>
|
||||
</div>
|
||||
<nav class="main-nav" aria-label="ניווט ראשי">
|
||||
<button class="nav-btn" data-action="instructions">הוראות</button>
|
||||
<button class="nav-btn" data-action="highscores">שיאים</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="hero" aria-labelledby="hero-title">
|
||||
<div class="hero-content">
|
||||
<h1 id="hero-title" class="hero-title">מירוץ סירות בנמל</h1>
|
||||
<p class="hero-subtitle">אספו מתנות · קבלו בוסטים · שברו שיאים!</p>
|
||||
<button class="start-btn pixel-btn" id="startGame">
|
||||
<span>התחל משחק</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hero-decoration" aria-hidden="true">
|
||||
<div class="harbor-elements">
|
||||
<div class="lighthouse"></div>
|
||||
<div class="buoy buoy-1"></div>
|
||||
<div class="buoy buoy-2"></div>
|
||||
</div>
|
||||
<div class="wave wave-1"></div>
|
||||
<div class="wave wave-2"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="game-container" id="gameContainer" aria-label="אזור המשחק">
|
||||
<div class="game-hud">
|
||||
<div class="hud-item score">
|
||||
<span class="hud-label">ניקוד</span>
|
||||
<span class="hud-value" id="scoreDisplay">0</span>
|
||||
</div>
|
||||
<div class="hud-item distance">
|
||||
<span class="hud-label">מרחק</span>
|
||||
<span class="hud-value" id="distanceDisplay">0 מ׳</span>
|
||||
</div>
|
||||
<div class="hud-item boost">
|
||||
<span class="hud-label" id="boostLabel">בוסט</span>
|
||||
<div class="boost-bar" role="progressbar" aria-labelledby="boostLabel" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="boost-fill" id="boostBar"></div>
|
||||
<span class="boost-value" id="boostValue">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hud-item gifts">
|
||||
<span class="hud-label">מתנות</span>
|
||||
<span class="hud-value" id="giftsDisplay">0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sr-only" role="status" aria-live="polite" aria-atomic="true" id="gameStatus"></div>
|
||||
|
||||
<canvas id="gameCanvas" aria-label="משחק מירוץ סירות פעיל"></canvas>
|
||||
|
||||
<div class="game-overlay" id="gameOverlay" role="dialog" aria-labelledby="overlayTitle" aria-modal="true">
|
||||
<div class="overlay-content">
|
||||
<h2 id="overlayTitle">מוכנים למירוץ?</h2>
|
||||
<p id="overlayMessage">לחצו על ״התחל״ או על רווח</p>
|
||||
<div class="final-stats" id="finalStats" hidden>
|
||||
<div class="stat-row">
|
||||
<span>ניקוד סופי:</span>
|
||||
<span id="finalScore">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>מתנות שנאספו:</span>
|
||||
<span id="finalGifts">0</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>מרחק:</span>
|
||||
<span id="finalDistance">0 מ׳</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="pixel-btn" id="overlayBtn">התחל</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features" aria-labelledby="features-title">
|
||||
<h2 id="features-title" class="section-title">איך משחקים?</h2>
|
||||
<div class="features-grid">
|
||||
<article class="feature-card">
|
||||
<div class="feature-icon" aria-hidden="true">????</div>
|
||||
<h3>שליטה פשוטה</h3>
|
||||
<p>חיצים למעלה ולמטה להזזת הסירה, או החלקה במובייל</p>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<div class="feature-icon" aria-hidden="true">????</div>
|
||||
<h3>אספו מתנות</h3>
|
||||
<p>מתנות צפות על המים — אספו לניקוד בונוס ולמילוי מד הבוסט</p>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<div class="feature-icon" aria-hidden="true">⚡</div>
|
||||
<h3>בוסט מהירות</h3>
|
||||
<p>כשהמד מלא, לחצו רווח או הקשה כפולה לזינוק קדימה!</p>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<div class="feature-icon" aria-hidden="true">????</div>
|
||||
<h3>שברו שיאים</h3>
|
||||
<p>התחרו בעצמכם ושפרו את השיא האישי שוב ושוב</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="highscores-section" id="highscoresSection" aria-labelledby="highscores-title">
|
||||
<h2 id="highscores-title" class="section-title">טבלת שיאים</h2>
|
||||
<div class="highscores-table" role="table" aria-label="טבלת שיאים">
|
||||
<div class="table-header" role="row">
|
||||
<span role="columnheader">מקום</span>
|
||||
<span role="columnheader">ניקוד</span>
|
||||
<span role="columnheader">מתנות</span>
|
||||
</div>
|
||||
<div class="table-body" id="highscoresBody" role="rowgroup">
|
||||
<div class="table-row table-row--empty" role="row">
|
||||
<span role="cell">עדיין אין שיאים — היו הראשונים!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo" aria-hidden="true">⛵ מירוץ סירות בנמל</div>
|
||||
<p class="footer-credits">נבנה באהבה לסגנון הרטרו</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="instructions-modal" id="instructionsModal" role="dialog" aria-labelledby="instructions-title" aria-modal="true" hidden>
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" id="closeInstructions" aria-label="סגור חלון הוראות">✕</button>
|
||||
<h2 id="instructions-title">הוראות המשחק</h2>
|
||||
<div class="instructions-list">
|
||||
<div class="instruction-item">
|
||||
<span class="key">↑ ↓</span>
|
||||
<span>הזזת הסירה למעלה ולמטה</span>
|
||||
</div>
|
||||
<div class="instruction-item">
|
||||
<span class="key">רווח</span>
|
||||
<span>הפעלת בוסט (כשהמד מלא)</span>
|
||||
</div>
|
||||
<div class="instruction-item">
|
||||
<span class="key" lang="en">P</span>
|
||||
<span>השהיית המשחק</span>
|
||||
</div>
|
||||
<div class="instruction-item">
|
||||
<span class="key">????</span>
|
||||
<span>במובייל: החלקה למעלה/למטה, הקשה כפולה לבוסט</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3>טיפים</h3>
|
||||
<ul class="tips-list">
|
||||
<li>אספו מתנות למילוי מד הבוסט</li>
|
||||
<li>השתמשו בבוסט בזמן הנכון</li>
|
||||
<li>הימנעו מסלעים ומכשולים</li>
|
||||
<li>המהירות עולה עם הזמן!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user