48 lines
1.6 KiB
HTML
48 lines
1.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Orange Catcher - A Fun Arcade Game{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid hero-section">
|
|
<div class="content-wrapper">
|
|
<h1 class="game-title">Orange Catcher</h1>
|
|
<p class="game-subtitle">An old-school arcade game, reimagined.</p>
|
|
<a href="#game-area" class="btn btn-play">Play Now</a>
|
|
</div>
|
|
<div class="shape-1"></div>
|
|
<div class="shape-2"></div>
|
|
</div>
|
|
|
|
<div id="game-area" class="container game-container my-5">
|
|
<div class="game-wrapper">
|
|
<div class="instructions">
|
|
<h2 class="instructions-title">How to Play</h2>
|
|
<p>Use the <strong>left</strong> and <strong>right</strong> arrow keys to move your character.</p>
|
|
<p>Catch as many oranges as you can before you run out of lives!</p>
|
|
</div>
|
|
<div class="canvas-wrapper">
|
|
<canvas id="gameCanvas" width="800" height="600"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5">
|
|
<div class="row">
|
|
<div class="col-lg-6 mx-auto">
|
|
<h2 class="text-center mb-4">Leaderboard</h2>
|
|
<table class="table table-striped table-dark">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Player</th>
|
|
<th scope="col">Score</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="leaderboard-body">
|
|
<!-- Scores will be inserted here by JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |