174 lines
7.3 KiB
Svelte
174 lines
7.3 KiB
Svelte
<script lang="ts">
|
|
import A4 from "../../zhen/notes/physics/sharedComps/A4.svelte";
|
|
import { BatteryLifeCalculator } from "./pageSrc/BatteryCalc";
|
|
|
|
let mathMachine = new BatteryLifeCalculator();
|
|
|
|
let useCustom: boolean = false;
|
|
let selectedText: string = "";
|
|
|
|
|
|
|
|
|
|
const options = ["esp32-s3", "Text Two", "Text Three"];
|
|
</script>
|
|
|
|
<div class="flex justify-center pt-10">
|
|
<A4
|
|
bottomBorder={false}
|
|
bgColor={"rounded-lg bg-base-300"}
|
|
class="cozette text-base-content h-full"
|
|
>
|
|
<div class="p-4 flex flex-col h-full">
|
|
<h1 class="text-5xl font-bold">Battery life calculator</h1>
|
|
<span class="w-full text-xl">
|
|
Calculates the time a battery will last. Too lazy to explain
|
|
more.
|
|
</span>
|
|
|
|
<!-- Spacing -->
|
|
<div class="pt-14"></div>
|
|
|
|
<div class="p-4 bg-base-200 rounded-lg">
|
|
<h2 class="text-2xl font-bolc">Software</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="form-control">
|
|
<span class="text-sm text-slate-300 text-opacity-60"
|
|
>Duration of code execution</span
|
|
>
|
|
<div class="join">
|
|
<input
|
|
type="number"
|
|
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
/>
|
|
<div
|
|
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
|
|
>
|
|
<span class="text-center pl-1 pr-2">sec</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-control">
|
|
<span class="text-sm text-slate-300 text-opacity-60"
|
|
>sleep time</span
|
|
>
|
|
<div class="join">
|
|
<input
|
|
type="number"
|
|
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
/>
|
|
<div
|
|
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
|
|
>
|
|
<span class="text-center pl-1 pr-2">sec</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-full">
|
|
<h2 class=" text-2xl font-bolc">Hardware</h2>
|
|
<div class="flex">
|
|
<div
|
|
class="text-sm text-slate-300 text-opacity-60 text"
|
|
>
|
|
Use custom values
|
|
</div>
|
|
<input
|
|
bind:checked={useCustom}
|
|
class="ml-2 checkbox checkbox-xs my-auto"
|
|
type="checkbox"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{#if !useCustom}
|
|
<select
|
|
bind:value={selectedText}
|
|
class="select select-sm select-bordered w-56 max-w-xs"
|
|
>
|
|
<option disabled value="">Select a text</option>
|
|
{#each options as option}
|
|
<option value={option}>{option}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
{#if selectedText}
|
|
<p class="mt-4 text-lg">
|
|
You selected: {selectedText}
|
|
</p>
|
|
{/if}
|
|
{:else}
|
|
<div class="form-control">
|
|
<span class="text-sm text-slate-300 text-opacity-60"
|
|
>Duration of code execution</span
|
|
>
|
|
<div class="join">
|
|
<input
|
|
type="number"
|
|
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
/>
|
|
<div
|
|
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
|
|
>
|
|
<span class="text-center pl-1 pr-2"
|
|
>sec</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-control">
|
|
<span class="text-sm text-slate-300 text-opacity-60"
|
|
>sleep time</span
|
|
>
|
|
<div class="join">
|
|
<input
|
|
type="number"
|
|
class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
|
|
/>
|
|
<div
|
|
class="bg-base-content bg-opacity-60 join-item grid place-content-center"
|
|
>
|
|
<span class="text-center pl-1 pr-2"
|
|
>sec</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-auto align-text-bottom text-center">
|
|
Source for the calculations is at this
|
|
<a
|
|
class="text-blue-500 underline"
|
|
target="_blank"
|
|
href="https://github.com/simonneutert/batterylife-calculator"
|
|
>github</a
|
|
>
|
|
and the
|
|
<a
|
|
class="text-blue-500 underline"
|
|
target="_blank "
|
|
href="https://www.of-things.de/battery-life-calculator.php"
|
|
>original website.</a
|
|
>
|
|
I just mearly made additions.
|
|
</div>
|
|
</div>
|
|
</A4>
|
|
</div>
|
|
|
|
<style>
|
|
/* Hide the spinner for Chrome, Safari, Edge, Opera */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hide the spinner for Firefox */
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
</style>
|