| Server IP : 104.21.21.239 / Your IP : 216.73.216.191 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/banners/public_html/leia/memorygame/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NJ Diamonds Memory Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css?v=<?= date('YmdHis') ?>">
</head>
<body>
<!-- WELCOME SCREEN -->
<div id="screen-welcome" class="screen active">
<div class="welcome-container">
<div class="logo-area">
<div class="sparkle sparkle-1"></div>
<div class="sparkle sparkle-2"></div>
<div class="sparkle sparkle-3"></div>
<div class="sparkle sparkle-4"></div>
<div class="sparkle sparkle-5"></div>
<div class="sparkle sparkle-6"></div>
<h1>NJ Diamonds<br><span class="subtitle">Memory Game</span></h1>
<div class="diamond-divider">♦ ♦ ♦</div>
</div>
<div id="greeting" class="greeting"></div>
<div class="form-group">
<label for="player-name">Your Name</label>
<input type="text" id="player-name" maxlength="50" placeholder="Enter your name" autocomplete="off">
</div>
<div class="form-group">
<label>Choose Your Photos</label>
<div class="mode-buttons">
<button class="mode-btn selected" data-mode="leia">
<span class="mode-icon">👑</span>
Leia
</button>
<button class="mode-btn" data-mode="chewie">
<span class="mode-icon">🐾</span>
Chewie
</button>
<button class="mode-btn" data-mode="both">
<span class="mode-icon">💖</span>
Both
</button>
</div>
</div>
<div class="form-group">
<label for="card-count">Number of Cards: <span id="card-count-display" class="count-badge">24</span></label>
<input type="range" id="card-count" min="8" max="36" step="2" value="24">
<div class="range-labels">
<span>8</span>
<span>Easy ←→ Hard</span>
<span>36</span>
</div>
</div>
<div class="button-group">
<button id="btn-start" class="btn-primary">
<span class="btn-sparkle"></span>
Play!
</button>
<button id="btn-highscores" class="btn-secondary">
🏆 High Scores
</button>
</div>
<div class="cross-link">
<a href="../jigsawpuzzle/">🪞 Play the Jigsaw Puzzle</a>
</div>
</div>
</div>
<!-- GAME SCREEN -->
<div id="screen-game" class="screen">
<div class="game-header">
<div class="game-stat">
<span class="stat-label">Time</span>
<span id="timer" class="stat-value">0:00.00</span>
</div>
<div class="game-stat">
<span class="stat-label">Moves</span>
<span id="move-counter" class="stat-value">0</span>
</div>
<div class="game-stat">
<span class="stat-label">Matches</span>
<span id="match-counter" class="stat-value">0 / 0</span>
</div>
<button id="btn-quit" class="btn-quit">✕ Quit</button>
</div>
<div id="loading-overlay" class="loading-overlay">
<div class="loading-content">
<div class="spinner">
<div class="spinner-diamond">♦</div>
</div>
<p class="loading-text">Loading photos...</p>
<div id="load-progress" class="load-progress">0 / 0</div>
</div>
</div>
<div id="card-grid" class="card-grid"></div>
</div>
<!-- HIGH SCORES SCREEN -->
<div id="screen-scores" class="screen">
<div class="scores-container">
<h2>🏆 High Scores</h2>
<div class="score-filters">
<select id="filter-mode">
<option value="">All Modes</option>
<option value="leia">Leia</option>
<option value="chewie">Chewie</option>
<option value="both">Both</option>
</select>
<select id="filter-cards">
<option value="">All Card Counts</option>
<option value="8">8 Cards</option>
<option value="10">10 Cards</option>
<option value="12">12 Cards</option>
<option value="14">14 Cards</option>
<option value="16">16 Cards</option>
<option value="18">18 Cards</option>
<option value="20">20 Cards</option>
<option value="22">22 Cards</option>
<option value="24">24 Cards</option>
<option value="26">26 Cards</option>
<option value="28">28 Cards</option>
<option value="30">30 Cards</option>
<option value="32">32 Cards</option>
<option value="34">34 Cards</option>
<option value="36">36 Cards</option>
</select>
</div>
<div class="score-tabs">
<button class="tab active" data-tab="global">🌍 Global</button>
<button class="tab" data-tab="personal">⭐ My Scores</button>
</div>
<div class="score-table-wrap">
<table id="score-table" class="score-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Mode</th>
<th>Cards</th>
<th>Time</th>
<th>Moves</th>
<th>Date</th>
</tr>
</thead>
<tbody id="score-body"></tbody>
</table>
<div id="no-scores" class="no-scores" style="display:none;">
No scores yet. Be the first to play!
</div>
</div>
<button id="btn-back" class="btn-secondary">← Back to Menu</button>
</div>
</div>
<!-- GAME COMPLETE MODAL -->
<div id="modal-complete" class="modal">
<div class="modal-content">
<div class="confetti-container" id="confetti-container"></div>
<h2>🎉 Congratulations!</h2>
<div id="complete-stats" class="complete-stats"></div>
<div id="complete-rank" class="complete-rank"></div>
<div id="complete-personal-best" class="personal-best-badge" style="display:none;">
⭐ New Personal Best!
</div>
<div class="modal-buttons">
<button id="btn-play-again" class="btn-primary">Play Again</button>
<button id="btn-slideshow" class="btn-secondary">📷 View Slideshow</button>
<button id="btn-view-scores" class="btn-secondary">View Scores</button>
<button id="btn-to-menu" class="btn-secondary">Main Menu</button>
</div>
</div>
</div>
<!-- SLIDESHOW -->
<div id="slideshow" class="slideshow">
<div class="slideshow-header">
<span id="slideshow-counter" class="slideshow-counter">1 / 12</span>
<button id="slideshow-close" class="slideshow-close">×</button>
</div>
<div class="slideshow-stage">
<button id="slideshow-prev" class="slideshow-arrow slideshow-prev-btn">‹</button>
<div class="slideshow-image-wrap">
<img id="slideshow-img" class="slideshow-img" src="" alt="Slideshow photo" draggable="false">
</div>
<button id="slideshow-next" class="slideshow-arrow slideshow-next-btn">›</button>
</div>
<div class="slideshow-dots" id="slideshow-dots"></div>
</div>
<script src="game.js?v=<?= date('YmdHis') ?>"></script>
</body>
</html>