83 lines
6 KiB
HTML
83 lines
6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Beango!</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="css/beango.css">
|
|
</head>
|
|
<body class="flex flex-col items-center justify-center p-4 font-sans relative">
|
|
|
|
<!-- Notification Area -->
|
|
<div id="notification-area" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 px-4 py-2 rounded shadow-lg text-white text-sm transition-opacity duration-300 opacity-0">
|
|
Notification Message
|
|
</div>
|
|
|
|
<!-- Main Content Area (Board and Controls) -->
|
|
<div class="w-full flex flex-col items-center justify-center p-4 overflow-y-auto">
|
|
<div id="board-header" class="bg-white rounded-t-lg pt-4 w-full max-w-2xl centered">
|
|
<h1 class="text-4xl font-bold text-green-800 mb-6">Beango!</h1>
|
|
<img id="bean" src="../bean.svg" alt="Bean" onclick="explodeBeans()">
|
|
</div>
|
|
|
|
<!-- Bingo Board Container -->
|
|
<div id="bingo-board-container" class="w-full max-w-2xl bg-white p-4 rounded-b-lg shadow-md mb-4">
|
|
<div id="bingo-board" class="bingo-board">
|
|
<!-- Cells will be generated here -->
|
|
<div class="bingo-cell">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Control Buttons -->
|
|
<div class="flex space-x-4 mb-4">
|
|
<button onclick="generateBoard()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
|
|
Generate/Update Board
|
|
</button>
|
|
<button onclick="randomizeBoard()" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">
|
|
Randomize
|
|
</button>
|
|
<button onclick="clearMarks()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
|
|
Clear Marks
|
|
</button>
|
|
<button id="config-toggle-button" onclick="toggleConfig()" class="fixed top-4 right-4 z-30 bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-full shadow-lg">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.646.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.004.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 1.555c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.333.184-.583.496-.646.87l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.063-.374-.313-.686-.646-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.293-.24.438-.613.431-.992a6.759 6.759 0 0 1 0-1.555c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.184.582-.496.646-.87l.213-1.281Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Pane (Right Side) -->
|
|
<div id="config-pane" class="w-80 bg-white p-6 shadow-lg fixed top-0 right-0 h-full z-20 overflow-y-auto transition-transform duration-300 ease-in-out config-pane-closed">
|
|
<h2 class="text-xl font-semibold text-green-700 mb-4">Configuration</h2>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="board-size" class="block text-sm font-medium text-gray-700">Board Size (e.g., 5 for 5x5):</label>
|
|
<input type="number" id="board-size" name="board-size" min="1" value="5" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
|
|
</div>
|
|
<div>
|
|
<label for="cell-contents" class="block text-sm font-medium text-gray-700">Cell Contents (one item per line):</label>
|
|
<textarea id="cell-contents" name="cell-contents" rows="10" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm" placeholder="Enter bingo items here, one per line..."></textarea>
|
|
</div>
|
|
<div>
|
|
<label for="file-input" class="block text-sm font-medium text-gray-700">Or Upload File:</label>
|
|
<input type="file" id="file-input" name="file-input" accept=".txt" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100">
|
|
</div>
|
|
<div>
|
|
<label for="background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
|
|
<input type="color" id="background-color-picker" name="background-color-picker" value="#FFFFFF" class="mt-1 block w-full h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500">
|
|
</div>
|
|
<button onclick="generateBoard()" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
|
|
Apply Settings & Generate
|
|
</button>
|
|
<button onclick="resetSettings()" class="w-full mt-2 bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded">
|
|
Reset Settings & Board
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/beango.js"></script>
|
|
</body>
|
|
</html>
|