jyapayne/justbean
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Header color

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2025-04-17 21:56:01 -06:00
commit d72a2c6c05
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 79 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
beango/css/beango.css
View file

@ -3,6 +3,10 @@
margin-bottom: 0px;
}
#board-header {
/* Background color/opacity set by JS */
}
html,
body {
min-height: 100vh;

12
beango/index.html
View file

@ -17,7 +17,7 @@
<!-- Main Content Area (Board and Controls) -->
<div class="w-full flex flex-col items-center justify-center p-4 overflow-y-auto">
<!-- Updated Header Section -->
<div id="board-header" class="bg-white rounded-t-lg pt-4 pb-4 w-full max-w-2xl flex justify-center items-center gap-4">
<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) -->
@ -112,6 +112,16 @@
<input type="url" id="header-image-url-input" name="header-image-url-input" placeholder="Leave blank to use default bean with text" 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>

65
beango/js/beango.js
View file

@ -21,6 +21,8 @@ const LS_HEADER_TEXT = 'beango_headerText';
const LS_HEADER_IMAGE_URL = 'beango_headerImageUrl';
const LS_HEADER_TEXT_COLOR = 'beango_headerTextColor';
const LS_HEADER_TEXT_COLOR_OPACITY = 'beango_headerTextColorOpacity'; // New
const LS_HEADER_BG_COLOR = 'beango_headerBgColor';
const LS_HEADER_BG_OPACITY = 'beango_headerBgOpacity';
const LS_MARKED_COLOR = 'beango_markedColor';
const LS_MARKED_COLOR_OPACITY = 'beango_markedColorOpacity'; // New (replaces LS_MARKED_OPACITY)
const LS_MARKED_IMAGE_URL = 'beango_markedImageUrl';
@ -49,6 +51,8 @@ const DEFAULT_HEADER_TEXT = 'Beango!'; // REVERTED default back to Beango!
const DEFAULT_HEADER_IMAGE_URL = ''; // No default image
const DEFAULT_HEADER_TEXT_COLOR = '#15803d'; // Tailwind green-700 (approx)
const DEFAULT_HEADER_TEXT_COLOR_OPACITY = 100; // New
const DEFAULT_HEADER_BG_COLOR = '#ffffff';
const DEFAULT_HEADER_BG_OPACITY = 100;
const DEFAULT_MARKED_COLOR = '#fde047'; // Default yellow
const DEFAULT_MARKED_COLOR_OPACITY = 80; // New (replaces DEFAULT_MARKED_OPACITY)
const DEFAULT_MARKED_IMAGE_URL = '';
@ -325,6 +329,20 @@ function saveHeaderSettings() {
localStorage.setItem(LS_HEADER_IMAGE_URL, document.getElementById('header-image-url-input').value);
localStorage.setItem(LS_HEADER_TEXT_COLOR, document.getElementById('header-text-color-picker').value);
localStorage.setItem(LS_HEADER_TEXT_COLOR_OPACITY, document.getElementById('header-text-color-opacity-slider').value);
// Save header background
localStorage.setItem(LS_HEADER_BG_COLOR, document.getElementById('header-bg-color-picker').value);
localStorage.setItem(LS_HEADER_BG_OPACITY, document.getElementById('header-bg-opacity-slider').value);
}
// --- Function to apply header background style ---
function applyHeaderBgStyle() {
const headerElement = document.getElementById('board-header');
if (!headerElement) return;
const bgColor = localStorage.getItem(LS_HEADER_BG_COLOR) || DEFAULT_HEADER_BG_COLOR;
const opacity = parseInt(localStorage.getItem(LS_HEADER_BG_OPACITY) || DEFAULT_HEADER_BG_OPACITY, 10);
headerElement.style.backgroundColor = hexToRgba(bgColor, opacity);
}
// --- Function to update the header display ---
@ -832,6 +850,8 @@ function loadFromLocalStorage() {
savedHeaderTextColor = DEFAULT_HEADER_TEXT_COLOR;
}
const savedHeaderTextOpacity = localStorage.getItem(LS_HEADER_TEXT_COLOR_OPACITY) || DEFAULT_HEADER_TEXT_COLOR_OPACITY;
const savedHeaderBgColor = localStorage.getItem(LS_HEADER_BG_COLOR) || DEFAULT_HEADER_BG_COLOR;
const savedHeaderBgOpacity = localStorage.getItem(LS_HEADER_BG_OPACITY) || DEFAULT_HEADER_BG_OPACITY;
const savedMarkedColor = localStorage.getItem(LS_MARKED_COLOR) || DEFAULT_MARKED_COLOR;
const savedMarkedColorOpacity = localStorage.getItem(LS_MARKED_COLOR_OPACITY) || DEFAULT_MARKED_COLOR_OPACITY;
const savedMarkedImageUrl = localStorage.getItem(LS_MARKED_IMAGE_URL) || DEFAULT_MARKED_IMAGE_URL;
@ -978,7 +998,12 @@ function loadFromLocalStorage() {
document.getElementById('header-text-color-picker').value = savedHeaderTextColor;
document.getElementById('header-text-color-opacity-slider').value = savedHeaderTextOpacity;
if(document.getElementById('header-text-color-opacity-value')) document.getElementById('header-text-color-opacity-value').textContent = savedHeaderTextOpacity; // Update display span
updateHeaderDisplay(); // Apply the loaded header
// Restore header background inputs
document.getElementById('header-bg-color-picker').value = savedHeaderBgColor;
document.getElementById('header-bg-opacity-slider').value = savedHeaderBgOpacity;
if(document.getElementById('header-bg-opacity-value')) document.getElementById('header-bg-opacity-value').textContent = savedHeaderBgOpacity;
applyHeaderBgStyle(); // Apply header background style
updateHeaderDisplay(); // Apply the loaded header content
// --- End Restore Header Settings ---
// --- Restore Marked Style Settings ---
@ -1357,6 +1382,15 @@ document.addEventListener('DOMContentLoaded', () => {
saveHeaderSettings();
updateHeaderDisplay();
});
document.getElementById('header-bg-color-picker').addEventListener('input', () => {
saveHeaderSettings();
applyHeaderBgStyle();
});
document.getElementById('header-bg-opacity-slider').addEventListener('input', (e) => {
if(document.getElementById('header-bg-opacity-value')) document.getElementById('header-bg-opacity-value').textContent = e.target.value;
saveHeaderSettings();
applyHeaderBgStyle();
});
// --- Add Event Listeners for Marked Style Controls ---
document.getElementById('marked-color-picker').addEventListener('input', () => {
@ -1431,6 +1465,35 @@ document.addEventListener('DOMContentLoaded', () => {
applyBoardBgStyle();
});
// --- Search Listener ---
const searchInput = document.getElementById('search-input');
if (searchInput) {
searchInput.addEventListener('input', () => {
const searchTerm = searchInput.value.trim().toLowerCase();
const cells = document.querySelectorAll('#bingo-board .bingo-cell');
// Split search term into words
const searchWords = searchTerm.split(/\s+/).filter(word => word.length > 0);
cells.forEach(cell => {
const textSpan = cell.querySelector('.bingo-cell-text');
let isMatch = false;
if (textSpan && searchWords.length > 0) {
const cellText = textSpan.textContent.trim().toLowerCase();
// Check if ALL search words are included in the cell text
isMatch = searchWords.every(word => cellText.includes(word));
}
// Add or remove highlight based on match status
if (isMatch) {
cell.classList.add('highlighted');
} else {
cell.classList.remove('highlighted');
}
});
});
}
// --- Other Listeners ---
window.addEventListener('resize', equalizeCellSizes);
equalizeCellSizes(); // Initial call after load