From 29d2b0792a3a0ade780d3103c33c1e839bc2c845 Mon Sep 17 00:00:00 2001
From: Gaofeng <u3011873@connect.hku.hk>
Date: Tue, 2 Dec 2025 21:13:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=B3=A8=E5=86=8C=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E7=9A=84=E5=90=8C=E6=84=8F=E5=8D=8F=E8=AE=AEcheckbox?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=9C=A8=E7=81=AB=E7=8B=90=E6=B5=8F=E8=A7=88?=
 =?UTF-8?q?=E5=99=A8=E4=B8=8A=E4=B8=8Dwork=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/auth/+page.svelte | 63 ++++++++++++++++++++++++++----------
 1 file changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index fad852ed02..905b135d00 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -423,25 +423,54 @@
 										{/if}
 
 										{#if mode === 'signup'}
-											<div class="mt-3 flex items-start text-sm text-left text-gray-700 dark:text-gray-300 gap-2">
-												<input
+											<div class="mt-3 flex flex-wrap items-center text-sm text-left text-gray-700 dark:text-gray-300 gap-2">
+												<button
+													type="button"
 													id="agree-privacy"
-													type="checkbox"
-													class="mt-0.5 rounded border-gray-300 bg-transparent text-gray-800 dark:text-gray-100 focus:ring-0"
-													bind:checked={agreeToPrivacy}
-												/>
-												<label for="agree-privacy" class="leading-tight">
-													<span>我已阅读并同意</span>
-													<button
-														type="button"
-														class="ml-1 underline font-medium"
-														on:click={() => {
-															showPrivacyModal = true;
-														}}
-													>
-														隐私协议
-													</button>
+													class="size-4 shrink-0 rounded border transition-all {agreeToPrivacy
+														? 'bg-blue-600 border-blue-600'
+														: 'border-gray-300 bg-transparent dark:bg-gray-800 dark:border-gray-600'
+													} flex items-center justify-center cursor-pointer"
+													on:click={() => {
+														agreeToPrivacy = !agreeToPrivacy;
+													}}
+													role="checkbox"
+													aria-checked={agreeToPrivacy}
+													aria-labelledby="agree-privacy-label"
+												>
+													{#if agreeToPrivacy}
+														<svg
+															viewBox="0 0 16 16"
+															fill="none"
+															stroke="white"
+															stroke-width="3"
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															class="w-3 h-3"
+														>
+															<path d="M4 8l3 3l5-5"/>
+														</svg>
+													{/if}
+												</button>
+												<label
+													id="agree-privacy-label"
+													for="agree-privacy"
+													class="inline-block cursor-pointer select-none"
+													on:click={() => {
+														agreeToPrivacy = !agreeToPrivacy;
+													}}
+												>
+													我已阅读并同意
 												</label>
+												<button
+													type="button"
+													class="underline font-medium hover:text-gray-900 dark:hover:text-gray-100"
+													on:click={() => {
+														showPrivacyModal = true;
+													}}
+												>
+													隐私协议
+												</button>
 											</div>
 										{/if}
 									</div>