Add text outline
This commit is contained in:
parent
d72a2c6c05
commit
6567579acf
3 changed files with 377 additions and 90 deletions
|
|
@ -68,18 +68,18 @@
|
|||
<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>
|
||||
<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
|
||||
|
|
@ -128,18 +128,18 @@
|
|||
<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="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">
|
||||
|
|
@ -147,10 +147,10 @@
|
|||
<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>
|
||||
<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">
|
||||
|
|
@ -158,9 +158,9 @@
|
|||
<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>
|
||||
<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">
|
||||
|
|
@ -168,21 +168,21 @@
|
|||
<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>
|
||||
<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>
|
||||
|
||||
|
|
@ -218,6 +218,36 @@
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
|
@ -252,6 +282,34 @@
|
|||
<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>
|
||||
<!-- 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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue