w33ble/gridfinity-calc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move the unit selection above the inputs, make it blue

Browse Source
This commit is contained in:
w33ble
2026-01-11 20:01:29 -07:00
parent 925ecc395d
commit 92b90dd3b0
2 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@@ -15,11 +15,22 @@
<main class="grid gap-8">
<!-- Inputs Section -->
<section class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
<h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
Drawer Dimensions
</h2>
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6 pb-6 border-b border-slate-100">
<h2 class="text-xl font-semibold flex items-center gap-2">
Drawer Dimensions
</h2>
<div class="flex items-center gap-3">
<label class="text-sm font-medium text-slate-700">Units:</label>
<div class="flex bg-slate-100 p-1 rounded-lg">
<button id="unit-mm" class="px-4 py-1 rounded-md text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors">mm</button>
<button id="unit-in" class="px-4 py-1 rounded-md text-sm font-medium bg-blue-600 text-white shadow-sm transition-colors">inches</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-slate-700 mb-1">Width</label>
<input type="number" id="input-width" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="0" step="any" />
@@ -33,14 +44,6 @@
<input type="number" id="input-height" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="0" step="any" />
</div>
</div>
<div class="flex items-center gap-4">
<label class="text-sm font-medium text-slate-700">Units:</label>
<div class="flex bg-slate-100 p-1 rounded-lg">
<button id="unit-mm" class="px-4 py-1 rounded-md text-sm font-medium bg-white shadow-sm">mm</button>
<button id="unit-in" class="px-4 py-1 rounded-md text-sm font-medium text-slate-600 hover:text-slate-900">inches</button>
</div>
</div>
</section>
<!-- Results Section -->