90 lines
4.6 KiB
HTML
90 lines
4.6 KiB
HTML
<div class="flex flex-wrap justify-between">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="block text-blue-500">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
|
<g id="SVGRepo_iconCarrier">
|
|
<g clip-path="url(#clip0_429_11128)">
|
|
<path d="M20 3.99994H4L9.6 11.4666C9.85964 11.8128 10 12.2339 10 12.6666V19.9999L14 17.9999V12.6666C14 12.2339 14.1404 11.8128 14.4 11.4666L20 3.99994Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"></path>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_429_11128"> <rect width="24" height="24" fill="white"></rect>
|
|
</clipPath>
|
|
</defs>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-2xl font-extrabold">Filter Pressure Drop - Basic</h2>
|
|
</div>
|
|
<div class="flex items-center gap-x-0 mb-6">
|
|
<button class=" font-bold py-2 px-4 transition-colors
|
|
bg-yellow-300 enabled:hover:bg-yellow-400
|
|
text-blue-600 rounded-s-lg" disabled type="button">Basic</button>
|
|
<button class=" font-bold py-2 px-4 transition-colors
|
|
bg-blue-500 enabled:hover:bg-blue-600
|
|
text-yellow-300 rounded-e-lg" hx-target="#content" hx-push-url="true" hx-get="/filter-pressure-drop?mode=fanLaw" type="button">Fan Law</button>
|
|
</div>
|
|
</div>
|
|
<form hx-post="/filter-pressure-drop" hx-target="#result">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<div>
|
|
<h4 class="text-lg font-bold mb-4">System Parameters</h4>
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-4 space-y-6">
|
|
<div>
|
|
<label for="systemSize" class="block text-sm font-medium mb-2">System Size: (Tons)</label>
|
|
<input id="systemSize" placeholder="Tons" name="systemSize" class=" w-full px-4 py-2 border rounded-md min-h-11
|
|
focus:ring-2 focus:ring-yellow-800 focus:border-yellow-800
|
|
placeholder-shown:!border-gray-400
|
|
invalid:border-red-500 out-of-range:border-red-500" type="number" step="0.5" min="1.0" autofocus required>
|
|
</div>
|
|
<div>
|
|
<label for="climateZone" class="block text-sm font-medium mb-2">Climate Zone</label>
|
|
<select id="climateZone" name="climateZone" class="w-full rounded-md border px-4 py-2 min-h-11">
|
|
<option value="hotHumid">Hot Humid (1A, 2A)</option>
|
|
<option value="moist">Moist (3A, 4A, 5A, 6A, 7A)</option>
|
|
<option value="dry">Dry (2B, 3B, 4B, 5B, 6B, 7B)</option>
|
|
<option value="marine">Marine (3C, 4C)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="filterType" class="block text-sm font-medium mb-2">Filter Type</label>
|
|
<select id="filterType" name="filterType" class="w-full rounded-md border px-4 py-2 min-h-11">
|
|
<option value="fiberglass">Fiberglass (MERV 1-4)</option>
|
|
<option value="pleatedBasic">Basic Pleated (MERV 5-8)</option>
|
|
<option value="pleatedBetter">Better Pleated (MERV 9-12)</option>
|
|
<option value="pleatedBest">Best Pleated (MERV 13-16)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 lg:mt-0">
|
|
<h4 class="text-lg font-bold mb-4">Filter Parameters</h4>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-4 space-y-6">
|
|
<div>
|
|
<label for="filterWidth" class="block text-sm font-medium mb-2">Width: (in)</label>
|
|
<input id="filterWidth" placeholder="Width" name="filterWidth" class=" w-full px-4 py-2 border rounded-md min-h-11
|
|
focus:ring-2 focus:ring-yellow-800 focus:border-yellow-800
|
|
placeholder-shown:!border-gray-400
|
|
invalid:border-red-500 out-of-range:border-red-500" type="number" step="0.1" min="0.1" required>
|
|
</div>
|
|
<div>
|
|
<label for="filterHeight" class="block text-sm font-medium mb-2">Height: (in)</label>
|
|
<input id="filterHeight" placeholder="Height" name="filterHeight" class=" w-full px-4 py-2 border rounded-md min-h-11
|
|
focus:ring-2 focus:ring-yellow-800 focus:border-yellow-800
|
|
placeholder-shown:!border-gray-400
|
|
invalid:border-red-500 out-of-range:border-red-500" type="number" step="0.1" min="0.1" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button type="submit" class=" w-full font-bold py-3 rounded-md transition-colors
|
|
bg-yellow-300 dark:bg-blue-500
|
|
hover:bg-yellow-400 hover:dark:bg-blue-600
|
|
text-blue-500 dark:text-yellow-300">Calculate Pressure Drop</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div id="result"></div> |