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

Custom header

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2025-04-17 19:24:49 -06:00
commit e20a182103
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
2 changed files with 192 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

37
beango/index.html
View file

@ -16,9 +16,14 @@
<!-- 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()">
<!-- 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">
<!-- 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>
<img id="bean" src="../bean.svg" alt="Bean" onclick="explodeBeans()" class="w-16 h-16 cursor-pointer">
</div>
</div>
<!-- Bingo Board Container -->
@ -65,6 +70,32 @@
<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>
<!-- Header Customization -->
<div class="border-t pt-4 mt-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Header Customization:</label>
<div class="mt-1 flex space-x-4 mb-2">
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-green-600" name="header-type" value="text" checked>
<span class="ml-2">Text</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-green-600" name="header-type" value="image">
<span class="ml-2">Image URL</span>
</label>
</div>
<div id="header-text-settings">
<label for="header-text-input" class="block text-sm font-medium text-gray-700">Header Text:</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">The bean image will appear next to the text.</p>
</div>
<div id="header-image-settings" class="hidden">
<label for="header-image-url-input" class="block text-sm font-medium text-gray-700">Header Image URL:</label>
<input type="url" id="header-image-url-input" name="header-image-url-input" placeholder="https://example.com/image.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">
</div>
</div>
<!-- End Header Customization -->
<div>
<label class="block text-sm font-medium text-gray-700">Background Type:</label>
<div class="mt-1 flex space-x-4">