133 lines
5.8 KiB
HTML
133 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="pl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mines - Elegant Casino</title>
|
||
<link rel="stylesheet" href="mines.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="casino-container">
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="logo">
|
||
<span class="logo-icon">◆</span>
|
||
<span class="logo-text">MINES</span>
|
||
</div>
|
||
<div class="balance-display">
|
||
<span class="balance-label">Balance</span>
|
||
<span class="balance-value" id="balance">$1,000.00</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Game Area -->
|
||
<main class="game-area">
|
||
<!-- Left Panel - Controls -->
|
||
<aside class="controls-panel">
|
||
<div class="panel-section">
|
||
<label class="input-label">Bet Amount</label>
|
||
<div class="bet-input-group">
|
||
<span class="currency-symbol">$</span>
|
||
<input type="number" id="bet-amount" class="bet-input" value="10" min="1" step="1">
|
||
<div class="bet-buttons">
|
||
<button class="bet-btn" data-action="half">½</button>
|
||
<button class="bet-btn" data-action="double">2×</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section">
|
||
<label class="input-label">Number of Mines</label>
|
||
<div class="mines-selector">
|
||
<button class="mines-btn" id="mines-decrease">−</button>
|
||
<span class="mines-value" id="mines-count">3</span>
|
||
<button class="mines-btn" id="mines-increase">+</button>
|
||
</div>
|
||
<div class="mines-range">
|
||
<span>1</span>
|
||
<input type="range" id="mines-slider" min="1" max="24" value="3">
|
||
<span>24</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section stats-section">
|
||
<div class="stat-row">
|
||
<span class="stat-label">Tiles</span>
|
||
<span class="stat-value" id="tiles-info">25 (5×5)</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Safe Tiles</span>
|
||
<span class="stat-value" id="safe-tiles">22</span>
|
||
</div>
|
||
<div class="stat-row">
|
||
<span class="stat-label">Next Multiplier</span>
|
||
<span class="stat-value multiplier" id="next-multiplier">×1.14</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section payout-section">
|
||
<div class="current-multiplier">
|
||
<span class="payout-label">Current Multiplier</span>
|
||
<span class="payout-value" id="current-multiplier">×1.00</span>
|
||
</div>
|
||
<div class="potential-win">
|
||
<span class="payout-label">Potential Win</span>
|
||
<span class="payout-value win-value" id="potential-win">$0.00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-section action-section">
|
||
<button class="action-btn start-btn" id="start-btn">
|
||
<span class="btn-icon">▶</span>
|
||
Start Round
|
||
</button>
|
||
<button class="action-btn cashout-btn hidden" id="cashout-btn">
|
||
<span class="btn-icon">$</span>
|
||
Cash Out
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Center - Game Grid -->
|
||
<section class="grid-container">
|
||
<div class="grid-wrapper">
|
||
<div class="game-grid" id="game-grid">
|
||
<!-- Tiles will be generated by JS -->
|
||
</div>
|
||
<div class="grid-overlay hidden" id="grid-overlay">
|
||
<div class="overlay-content">
|
||
<span class="overlay-icon" id="overlay-icon">💎</span>
|
||
<span class="overlay-text" id="overlay-text">Place your bet and start!</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="revealed-counter">
|
||
<span id="revealed-count">0</span> / <span id="total-safe">22</span> tiles revealed
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Right Panel - History -->
|
||
<aside class="history-panel">
|
||
<h3 class="panel-title">Round History</h3>
|
||
<div class="history-list" id="history-list">
|
||
<div class="history-empty">No rounds played yet</div>
|
||
</div>
|
||
</aside>
|
||
</main>
|
||
|
||
<!-- Result Modal -->
|
||
<div class="modal hidden" id="result-modal">
|
||
<div class="modal-content" id="modal-content">
|
||
<div class="modal-icon" id="modal-icon">💎</div>
|
||
<h2 class="modal-title" id="modal-title">You Won!</h2>
|
||
<p class="modal-amount" id="modal-amount">$125.00</p>
|
||
<p class="modal-subtitle" id="modal-subtitle">×2.50 multiplier</p>
|
||
<button class="modal-btn" id="modal-close">Continue</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="mines.js"></script>
|
||
</body>
|
||
</html> |