feat: add <pre> tags for cron explaination

frontend/src/lib/components/DeviceForm.svelte

@@ -365,7 +365,9 @@
 				</fieldset>
 			</div>
 			<div class="flex flex-row flex-wrap gap-4">
-				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
+				<fieldset
+					class="fieldset bg-base-100 border-base-300 rounded-box w-fit min-w-64 border p-4"
+				>
 					<legend class="fieldset-legend">{m.device_wake_cron_enable()}</legend>
 					<label class="fieldset-label">
 						<input
@@ -400,6 +402,18 @@
 							</p>
 						{/if}
 					</label>
+					{#if device.wake_cron_enabled}
+						<pre class="bg-base-100 text-base-content/80 w-fit rounded p-2"><code
+								>* * * * * *
+| | | | | |
+| | | | | day of the week (0–6)
+| | | | month (1–12)
+| | | day of the month (1–31)
+| | hour (0–23)
+| minute (0–59)
+second (0–59, optional)
+</code></pre>
+					{/if}
 				</fieldset>
 				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
 					<legend class="fieldset-legend">{m.device_require_confirmation()}</legend>
@@ -465,7 +479,9 @@
 				{m.device_shutdown_cron_desc()}
 			</p>
 			<div class="flex flex-row flex-wrap gap-4">
-				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
+				<fieldset
+					class="fieldset bg-base-100 border-base-300 rounded-box w-fit min-w-64 border p-4"
+				>
 					<legend class="fieldset-legend">{m.device_shutdown_cron_enable()}</legend>
 					<label class="fieldset-label">
 						<input
@@ -492,7 +508,7 @@
 						/>
 						{#if device.shutdown_cron_enabled}
 							<p class="fieldset-label">
-								{#await validateCron(device.wake_cron)}
+								{#await validateCron(device.shutdown_cron)}
 									<span class="loading loading-spinner loading-xs"></span>
 								{:then valid}
 									{valid ? '✅ ' + nextCronDate(device.shutdown_cron) : m.settings_invalid_cron()}
@@ -500,6 +516,18 @@
 							</p>
 						{/if}
 					</label>
+					{#if device.shutdown_cron_enabled}
+						<pre class="bg-base-100 text-base-content/80 w-fit rounded p-2"><code
+								>* * * * * *
+| | | | | |
+| | | | | day of the week (0–6)
+| | | | month (1–12)
+| | | day of the month (1–31)
+| | hour (0–23)
+| minute (0–59)
+second (0–59, optional)
+</code></pre>
+					{/if}
 				</fieldset>
 				<fieldset class="fieldset bg-base-100 border-base-300 rounded-box w-64 border p-4">
 					<legend class="fieldset-legend">{m.device_require_confirmation()}</legend>

frontend/src/routes/account/+page.svelte

@@ -205,48 +205,51 @@
 		<form on:submit|preventDefault={changePassword}>
 			<div class="w-full max-w-xs">
 				{#if !$pocketbase.authStore.isSuperuser}
-					<label class="label" for="password-old">
+					<fieldset class="fieldset">
-						<span>{m.account_change_password_label()}</span>
+						<label class="floating-label mt-2">
-					</label>
+							<span>{m.account_change_password_label()} <span class="text-error">*</span></span>
 							<input
-						id="password-old"
 								type="password"
 								placeholder={m.account_change_password_label()}
-						class="input w-full max-w-xs"
+								class="input"
 								minlength="5"
 								maxlength="72"
 								bind:value={newPassword.old}
 								required
 							/>
-				{/if}
-				<label class="label" for="password-new">
-					<span>{m.account_change_password_new()}</span>
 						</label>
+					</fieldset>
+				{/if}
+				<fieldset class="fieldset">
+					<label class="floating-label mt-2">
+						<span>{m.account_change_password_new()} <span class="text-error">*</span></span>
 						<input
-					id="password-new"
 							type="password"
 							placeholder={m.account_change_password_new()}
-					class="input w-full max-w-xs"
+							class="input"
 							minlength={$pocketbase.authStore.isSuperuser ? 10 : 5}
 							maxlength="72"
 							bind:value={newPassword.password}
 							required
 						/>
+					</label>
+				</fieldset>
 			</div>
 			<div class="w-full max-w-xs">
-				<label class="label" for="password-confirm">
+				<fieldset class="fieldset">
-					<span>{m.account_change_password_confirm()}</span>
+					<label class="floating-label mt-2">
-				</label>
+						<span>{m.account_change_password_confirm()} <span class="text-error">*</span></span>
 						<input
-					id="password-confirm"
 							type="password"
 							placeholder={m.account_change_password_confirm()}
-					class="input w-full max-w-xs"
+							class="input"
 							minlength={$pocketbase.authStore.isSuperuser ? 10 : 5}
 							maxlength="72"
 							bind:value={newPassword.confirm}
 							required
 						/>
+					</label>
+				</fieldset>
 			</div>
 			<div class="mt-2">
 				<button type="submit" class="btn btn-success mt-2"

frontend/src/routes/settings/+page.svelte

@@ -117,14 +117,6 @@
 					<!-- eslint-disable svelte/no-at-html-tags -->
 					{@html m.settings_ping_interval_desc2()}
 				</p>
-				<p>
-					<span class="badge">Second (Optional)</span>
-					<span class="badge">Minute</span>
-					<span class="badge">Hour</span>
-					<span class="badge">DoM</span>
-					<span class="badge">Month</span>
-					<span class="badge">DoW</span>
-				</p>
 				<div class="mt-2 w-full">
 					<input
 						type="text"
@@ -140,7 +132,16 @@
 						{valid ? '✅ ' + nextCronDate(settingsPrivClone.interval) : m.settings_invalid_cron()}
 					{/await}
 				</p>
-
+				<pre class="bg-base-100 text-base-content/80 w-fit rounded p-2"><code
+						>* * * * * *
+| | | | | |
+| | | | | day of the week (0–6)
+| | | | month (1–12)
+| | | day of the month (1–31)
+| | hour (0–23)
+| minute (0–59)
+second (0–59, optional)
+</code></pre>
 				<h2 class="card-title mt-2">{m.settings_lazy_ping_title()}</h2>
 				<p class="mt-2">
 					{m.settings_lazy_ping_desc()}