466 lines
42 KiB
HTML
466 lines
42 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?v=1.0.6">
|
|
<link rel="icon" type="image/svg+xml" href="/bean.svg">
|
|
</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">
|
|
<!-- Top-right action buttons -->
|
|
<div class="fixed top-4 right-4 z-30 flex gap-2">
|
|
<button onclick="copyShareLink()" class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-full shadow-lg" title="Copy Share Link" aria-label="Copy Share Link">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
|
<path d="M13.5 6a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0V8.56l-6.22 6.22a.75.75 0 0 1-1.06-1.06L16.94 7.5h-1.94A.75.75 0 0 1 13.5 6Z"/>
|
|
<path d="M6 5.25A2.25 2.25 0 0 0 3.75 7.5v12A2.25 2.25 0 0 0 6 21.75h12A2.25 2.25 0 0 0 20.25 19.5v-6a.75.75 0 0 0-1.5 0v6c0 .414-.336.75-.75.75H6a.75.75 0 0 1-.75-.75v-12c0-.414.336-.75.75-.75h6a.75.75 0 0 0 0-1.5H6Z"/>
|
|
</svg>
|
|
</button>
|
|
<button id="config-toggle-button" onclick="toggleConfig()" class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-full shadow-lg" title="Toggle Settings" aria-label="Toggle Settings">
|
|
<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>
|
|
<!-- Search Bar -->
|
|
<div class="mb-4 w-full max-w-xl">
|
|
<label for="search-input" class="sr-only">Search Items</label>
|
|
<input type="search" id="search-input" placeholder="Search items on board..." class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
|
|
</div>
|
|
<!-- Updated Header Section -->
|
|
<div id="board-header" class="rounded-t-lg pt-4 pb-4 w-full max-w-2xl flex justify-center items-center gap-4">
|
|
<!-- Content will be dynamically added by JS -->
|
|
<div id="custom-header-content" class="flex justify-center items-center gap-4">
|
|
<!-- Default content (can be replaced) -->
|
|
<h1 class="text-4xl font-bold text-green-800">Beango!</h1>
|
|
<div id="bean-container" class="w-16 h-16 cursor-pointer">
|
|
<img id="bean" src="/bean.svg" alt="Bean" onclick="explodeBeans(event)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bingo Board Container -->
|
|
<div id="bingo-board-container" class="w-full max-w-2xl 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">
|
|
<!-- Removed Generate/Update 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>
|
|
</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">
|
|
|
|
<details class="config-section" open>
|
|
<summary class="config-summary">Board Settings</summary>
|
|
<div class="config-content space-y-4 pt-2">
|
|
<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>
|
|
<!-- Moved Buttons -->
|
|
<button onclick="generateBoard()" class="w-full mt-4 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 Board Only
|
|
</button>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="config-section">
|
|
<summary class="config-summary">Header Customization</summary>
|
|
<div class="config-content space-y-4 pt-2">
|
|
<div id="header-text-settings">
|
|
<label for="header-text-input" class="block text-sm font-medium text-gray-700">Header Text (Optional):</label>
|
|
<input type="text" id="header-text-input" name="header-text-input" value="Beango!" 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">
|
|
<p class="mt-1 text-xs text-gray-500">Use Word[color] for specific word colors (e.g., Beango![green] or Title[#ffcc00]). Default color applies otherwise.</p>
|
|
<div class="mt-2">
|
|
<label for="header-text-color-picker" class="block text-sm font-medium text-gray-700">Header Text Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="header-text-color-picker" name="header-text-color-picker" value="#15803d" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="header-text-color-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="header-text-color-opacity-value">100</span>%</label>
|
|
<input type="range" id="header-text-color-opacity-slider" name="header-text-color-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- START Header Font Size Setting -->
|
|
<div class="mt-2">
|
|
<label for="header-text-font-size-input" class="block text-sm font-medium text-gray-700">Header Font Size (px):</label>
|
|
<input type="number" id="header-text-font-size-input" name="header-text-font-size-input" min="10" max="100" step="1" value="36" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
|
|
</div>
|
|
<!-- END Header Font Size Setting -->
|
|
<!-- START Header Font Family Setting -->
|
|
<div class="mt-2">
|
|
<label for="header-text-font-family-select" class="block text-sm font-medium text-gray-700">Header Font Family:</label>
|
|
<select id="header-text-font-family-select" name="header-text-font-family-select" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
|
|
<option value="sans-serif">System Default Sans-Serif</option>
|
|
<option value="serif">System Default Serif</option>
|
|
<option value="monospace">System Default Monospace</option>
|
|
<option value="Arial, Helvetica, sans-serif">Arial</option>
|
|
<option value="'Times New Roman', Times, serif">Times New Roman</option>
|
|
<option value="'Courier New', Courier, monospace">Courier New</option>
|
|
<option value="Georgia, serif">Georgia</option>
|
|
<option value="Verdana, Geneva, sans-serif">Verdana</option>
|
|
<option value="Tahoma, Geneva, sans-serif">Tahoma</option>
|
|
<option value="'Trebuchet MS', Helvetica, sans-serif">Trebuchet MS</option>
|
|
<option value="'Lucida Console', Monaco, monospace">Lucida Console</option>
|
|
<option value="cursive">Cursive</option>
|
|
<option value="fantasy">Fantasy</option>
|
|
</select>
|
|
</div>
|
|
<!-- END Header Font Family Setting -->
|
|
<!-- START Header Font Style Settings -->
|
|
<div class="mt-2 flex space-x-4">
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" id="header-text-style-italic" name="header-text-style-italic" class="form-checkbox h-5 w-5 text-green-600">
|
|
<span class="ml-2 text-sm font-medium text-gray-700">Italic</span>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" id="header-text-style-bold" name="header-text-style-bold" class="form-checkbox h-5 w-5 text-green-600">
|
|
<span class="ml-2 text-sm font-medium text-gray-700">Bold</span>
|
|
</label>
|
|
</div>
|
|
<!-- END Header Font Style Settings -->
|
|
<!-- START Header Text Outline Settings -->
|
|
<div class="mt-2">
|
|
<label for="header-text-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="header-text-outline-color-picker" name="header-text-outline-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="header-text-outline-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="header-text-outline-opacity-value">100</span>%</label>
|
|
<input type="range" id="header-text-outline-opacity-slider" name="header-text-outline-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<label for="header-text-outline-width-input" class="block text-xs font-medium text-gray-700">Outline Width (px):</label>
|
|
<input type="number" id="header-text-outline-width-input" name="header-text-outline-width-input" min="0" max="5" step="0.5" value="0" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
|
|
</div>
|
|
<!-- END Header Text Outline Settings -->
|
|
</div>
|
|
<div id="header-image-settings">
|
|
<label for="header-image-url-input" class="block text-sm font-medium text-gray-700">Header Image URL (Optional):</label>
|
|
<input type="url" id="header-image-url-input" name="header-image-url-input" placeholder="Image url" 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">
|
|
<p class="mt-1 text-xs text-gray-500">If text is also provided, image appears next to it.</p>
|
|
</div>
|
|
<div class="border-t pt-4 mt-4">
|
|
<label for="header-bg-color-picker" class="block text-sm font-medium text-gray-700">Header Background Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="header-bg-color-picker" name="header-bg-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="header-bg-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="header-bg-opacity-value">100</span>%</label>
|
|
<input type="range" id="header-bg-opacity-slider" name="header-bg-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="config-section">
|
|
<summary class="config-summary">Background Style</summary>
|
|
<div class="config-content space-y-4 pt-2">
|
|
<div class="mt-1 flex space-x-4">
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" class="form-radio text-green-600" name="background-type" value="solid">
|
|
<span class="ml-2">Solid</span>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="radio" class="form-radio text-green-600" name="background-type" value="gradient" checked>
|
|
<span class="ml-2">Gradient</span>
|
|
</label>
|
|
</div>
|
|
<div id="solid-color-settings">
|
|
<label for="background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="background-color-picker" name="background-color-picker" value="#ff7e5f" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="background-color-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="background-color-opacity-value">100</span>%</label>
|
|
<input type="range" id="background-color-opacity-slider" name="background-color-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="gradient-color-settings" class="space-y-2 hidden">
|
|
<div>
|
|
<label for="gradient-color-1" class="block text-sm font-medium text-gray-700">Gradient Start Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="gradient-color-1" name="gradient-color-1" value="#ff7e5f" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="gradient-color-1-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="gradient-color-1-opacity-value">100</span>%</label>
|
|
<input type="range" id="gradient-color-1-opacity-slider" name="gradient-color-1-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="gradient-color-2" class="block text-sm font-medium text-gray-700">Gradient End Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="gradient-color-2" name="gradient-color-2" value="#feb47b" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="gradient-color-2-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="gradient-color-2-opacity-value">100</span>%</label>
|
|
<input type="range" id="gradient-color-2-opacity-slider" name="gradient-color-2-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="gradient-direction" class="block text-sm font-medium text-gray-700">Gradient Direction:</label>
|
|
<select id="gradient-direction" name="gradient-direction" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
|
|
<option value="to bottom">Top to Bottom</option>
|
|
<option value="to right">Left to Right</option>
|
|
<option value="to top">Bottom to Top</option>
|
|
<option value="to left">Right to Left</option>
|
|
<option value="to top right">Bottom Left to Top Right</option>
|
|
<option value="to bottom left">Top Right to Bottom Left</option>
|
|
<option value="135deg" selected>Diagonal (135deg)</option>
|
|
<option value="radial">Radial (Circle)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="config-section">
|
|
<summary class="config-summary">Default Cell Style</summary>
|
|
<div class="config-content space-y-4 pt-2">
|
|
<div>
|
|
<label for="cell-background-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="cell-background-color-picker" name="cell-background-color-picker" value="#F5F5DC" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="cell-background-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-background-opacity-value">100</span>%</label>
|
|
<input type="range" id="cell-background-opacity-slider" name="cell-background-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="cell-background-image-url-input" class="block text-sm font-medium text-gray-700">Background Image URL (Optional):</label>
|
|
<input type="url" id="cell-background-image-url-input" name="cell-background-image-url-input" placeholder="Clear to use background color" 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 class="mt-1 w-28 flex flex-col items-center ml-auto">
|
|
<label for="cell-background-image-opacity-slider" class="block text-xs font-medium text-gray-500">Image Opacity: <span id="cell-background-image-opacity-value">100</span>%</label>
|
|
<input type="range" id="cell-background-image-opacity-slider" name="cell-background-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
<div class="border-t pt-4 mt-4 space-y-2">
|
|
<label for="cell-border-color-picker" class="block text-sm font-medium text-gray-700">Border Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="cell-border-color-picker" name="cell-border-color-picker" value="#8B4513" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="cell-border-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-border-opacity-value">100</span>%</label>
|
|
<input type="range" id="cell-border-opacity-slider" name="cell-border-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Default Cell Border Width Setting -->
|
|
<div>
|
|
<label for="cell-border-width-input" class="block text-sm font-medium text-gray-700">Border Width (px):</label>
|
|
<input type="number" id="cell-border-width-input" name="cell-border-width-input" min="0" max="10" step="1" value="1" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
|
|
</div>
|
|
<!-- Text Style Settings -->
|
|
<div class="border-t pt-4 mt-4 space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Text Style:</label>
|
|
<div>
|
|
<label for="cell-text-color-picker" class="block text-xs font-medium text-gray-700">Text Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="cell-text-color-picker" name="cell-text-color-picker" value="#000000" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="cell-text-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-text-opacity-value">100</span>%</label>
|
|
<input type="range" id="cell-text-opacity-slider" name="cell-text-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="cell-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="cell-outline-color-picker" name="cell-outline-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="cell-outline-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="cell-outline-opacity-value">100</span>%</label>
|
|
<input type="range" id="cell-outline-opacity-slider" name="cell-outline-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="cell-outline-width-input" class="block text-xs font-medium text-gray-700">Outline Width (px):</label>
|
|
<input type="number" id="cell-outline-width-input" name="cell-outline-width-input" min="0" max="5" step="0.5" value="1" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="config-section">
|
|
<summary class="config-summary">Marked Cell Style</summary>
|
|
<div class="config-content space-y-4 pt-2">
|
|
<div id="marked-color-settings">
|
|
<label for="marked-color-picker" class="block text-sm font-medium text-gray-700">Marked Cell Background Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="marked-color-picker" name="marked-color-picker" value="#fde047" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="marked-color-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="marked-color-opacity-value">80</span>%</label>
|
|
<input type="range" id="marked-color-opacity-slider" name="marked-color-opacity-slider" min="0" max="100" value="80" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="marked-image-settings">
|
|
<label for="marked-image-url-input" class="block text-sm font-medium text-gray-700">Marked Cell Background Image URL (Optional):</label>
|
|
<input type="url" id="marked-image-url-input" name="marked-image-url-input" placeholder="https://example.com/marker.png" 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">
|
|
<p class="mt-1 text-xs text-gray-500">If set, this image is layered over the background color.</p>
|
|
<div class="mt-1 w-28 flex flex-col items-center ml-auto">
|
|
<label for="marked-image-opacity-slider" class="block text-xs font-medium text-gray-500">Image Opacity: <span id="marked-image-opacity-value">100</span>%</label>
|
|
<input type="range" id="marked-image-opacity-slider" name="marked-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
<div class="border-t mt-2 pt-4 mt-4 space-y-2">
|
|
<label for="marked-border-color-picker" class="block text-sm font-medium text-gray-700">Marked Cell Border Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="marked-border-color-picker" name="marked-border-color-picker" value="#ca8a04" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="marked-border-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="marked-border-opacity-value">100</span>%</label>
|
|
<input type="range" id="marked-border-opacity-slider" name="marked-border-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Border Width Setting for Marked Cells -->
|
|
<div>
|
|
<label for="marked-border-width-input" class="block text-sm font-medium text-gray-700">Marked Cell Border Width (px):</label>
|
|
<input type="number" id="marked-border-width-input" name="marked-border-width-input" min="0" max="10" step="1" value="2" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
|
|
</div>
|
|
<!-- START Text Style Settings for Marked Cells -->
|
|
<div class="border-t pt-4 mt-4 space-y-2">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Text Style (Marked):</label>
|
|
<div>
|
|
<label for="marked-cell-text-color-picker" class="block text-xs font-medium text-gray-700">Text Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="marked-cell-text-color-picker" name="marked-cell-text-color-picker" value="#000000" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="marked-cell-text-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="marked-cell-text-opacity-value">100</span>%</label>
|
|
<input type="range" id="marked-cell-text-opacity-slider" name="marked-cell-text-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="marked-cell-outline-color-picker" class="block text-xs font-medium text-gray-700">Outline Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="marked-cell-outline-color-picker" name="marked-cell-outline-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="marked-cell-outline-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="marked-cell-outline-opacity-value">100</span>%</label>
|
|
<input type="range" id="marked-cell-outline-opacity-slider" name="marked-cell-outline-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="marked-cell-outline-width-input" class="block text-xs font-medium text-gray-700">Outline Width (px):</label>
|
|
<input type="number" id="marked-cell-outline-width-input" name="marked-cell-outline-width-input" min="0" max="5" step="0.5" value="0" class="mt-1 block w-full px-2 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-sm">
|
|
<p class="mt-1 text-xs text-gray-500">Set width to 0 to disable outline for marked cells.</p>
|
|
</div>
|
|
</div>
|
|
<!-- END Text Style Settings for Marked Cells -->
|
|
</div>
|
|
</details>
|
|
|
|
<details class="config-section">
|
|
<summary class="config-summary">Board Background Style</summary>
|
|
<div class="config-content space-y-4 pt-2">
|
|
<div>
|
|
<label for="board-bg-color-picker" class="block text-sm font-medium text-gray-700">Background Color:</label>
|
|
<div class="flex items-center space-x-2 mt-1">
|
|
<input type="color" id="board-bg-color-picker" name="board-bg-color-picker" value="#ffffff" class="h-10 border border-gray-300 rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-green-500 focus:border-green-500 flex-grow">
|
|
<div class="w-28 flex flex-col items-center">
|
|
<label for="board-bg-color-opacity-slider" class="block text-xs font-medium text-gray-500">Opacity: <span id="board-bg-color-opacity-value">100</span>%</label>
|
|
<input type="range" id="board-bg-color-opacity-slider" name="board-bg-color-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="board-bg-image-url-input" class="block text-sm font-medium text-gray-700">Background Image URL (Optional):</label>
|
|
<input type="url" id="board-bg-image-url-input" name="board-bg-image-url-input" placeholder="Overrides background color" 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">
|
|
<p class="mt-1 text-xs text-gray-500">If set, opacity still applies to the image.</p>
|
|
<!-- START Board Background Image Opacity Slider -->
|
|
<div class="mt-1 w-28 flex flex-col items-center ml-auto">
|
|
<label for="board-bg-image-opacity-slider" class="block text-xs font-medium text-gray-500">Image Opacity: <span id="board-bg-image-opacity-value">100</span>%</label>
|
|
<input type="range" id="board-bg-image-opacity-slider" name="board-bg-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
</div>
|
|
<!-- END Board Background Image Opacity Slider -->
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Import/Export Section -->
|
|
<details class="config-section">
|
|
<summary class="config-summary">Import/Export Settings</summary>
|
|
<div class="config-content space-y-4 pt-2">
|
|
<div>
|
|
<button onclick="exportSettings()" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
|
|
Export Settings to File
|
|
</button>
|
|
<p class="mt-1 text-xs text-gray-500">Saves all current settings to a downloadable .json file.</p>
|
|
</div>
|
|
<div>
|
|
<button onclick="importSettings()" class="w-full bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded">
|
|
Import Settings from File
|
|
</button>
|
|
<p class="mt-1 text-xs text-gray-500">Loads settings from a previously exported .json file, overwriting current settings.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Dangerous Reset All Button -->
|
|
<div class="border-t border-red-300 pt-4 mt-6">
|
|
<button onclick="resetAllSettings()" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 inline-block mr-1 align-text-bottom">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.008v.008H12v-.008Z" />
|
|
</svg>
|
|
Reset ALL Settings to Defaults
|
|
</button>
|
|
<p class="mt-2 text-xs text-red-600 text-center">Warning: This will clear all saved customizations and board content.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="js/beango.js?v=1.0.5"></script>
|
|
<script type="module">
|
|
import { toggleConfig, exportSettings, importSettings, resetAllSettings, explodeBeans, randomizeBoard, clearMarks, generateBoard, resetSettings, copyShareLink } from './js/beango.js';
|
|
window.explodeBeans = explodeBeans;
|
|
window.toggleConfig = toggleConfig;
|
|
window.exportSettings = exportSettings;
|
|
window.importSettings = importSettings;
|
|
window.resetAllSettings = resetAllSettings;
|
|
window.randomizeBoard = randomizeBoard;
|
|
window.clearMarks = clearMarks;
|
|
window.generateBoard = generateBoard;
|
|
window.resetSettings = resetSettings;
|
|
window.copyShareLink = copyShareLink;
|
|
</script>
|
|
</body>
|
|
</html>
|