71 lines
2.2 KiB
HTML
71 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Homepage - 2048</title>
|
|
<link rel="stylesheet" href="Homepage.css">
|
|
</head>
|
|
<body>
|
|
<!-- Neon Particles Background -->
|
|
<div id="particles"></div>
|
|
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="logo">2048</div>
|
|
<div class="nav-buttons">
|
|
<a href="Login.html" class="btn btn-secondary">Login</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-title">2048</div>
|
|
<p class="hero-subtitle">Join the tiles, reach 2048</p>
|
|
<div class="cta-buttons">
|
|
<a href="2048.html" class="btn btn-cta btn-play">Play</a>
|
|
<a href="leaderboard.html" class="btn btn-cta btn-leaderboard">🏆 Leaderboard</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
|
|
<script src="Animation_Homepage.js"></script>
|
|
|
|
<!-- Logout Confirmation Modal -->
|
|
<div class="logout-overlay" id="logout-overlay" style="display: none">
|
|
<div class="logout-modal">
|
|
<div class="logout-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
|
<polyline points="16 17 21 12 16 7"/>
|
|
<line x1="21" y1="12" x2="9" y2="12"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="logout-title">Logout Confirmation</h2>
|
|
<p class="logout-message">Are you sure you want to logout?</p>
|
|
|
|
<div class="logout-buttons">
|
|
<button class="btn-logout-cancel" id="btn-logout-cancel">Cancel</button>
|
|
<button class="btn-logout-confirm" id="btn-logout-confirm">Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logout Success Modal -->
|
|
<div class="logout-success-overlay" id="logout-success-overlay" style="display: none">
|
|
<div class="logout-success-modal">
|
|
<div class="success-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="success-title">Logout Successful!</h2>
|
|
<p class="success-message">You have been logged out successfully</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load logout.js -->
|
|
<script src="logout.js"></script>
|
|
</body>
|
|
</html> |