From 7e369b7440a39c9bf9d380d9b78f1a2d66f0c512 Mon Sep 17 00:00:00 2001
From: MatsuneMikuroi <romain@de-groote.ch>
Date: Tue, 12 May 2026 00:15:48 +0200
Subject: [PATCH] better selector

---
 index.html | 54 ++++++++++++++++++++++++++++++++++++++++++++++++------
 sw.js      |  2 +-
 2 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 9d53f2a..e713fba 100644
--- a/index.html
+++ b/index.html
@@ -244,18 +244,23 @@
     .form-group { margin-bottom: 14px; }
     .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
     label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-500); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; }
-    input, select {
+    input:not([type="checkbox"]), select {
       width: 100%; padding: 10px 12px;
       border: 1.5px solid var(--gray-200); border-radius: 8px;
       font-size: 15px; color: var(--gray-800); background: white;
       -webkit-appearance: auto; appearance: auto;
       transition: border-color 0.15s;
     }
-    input:focus, select:focus {
+    input:not([type="checkbox"]):focus, select:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 0 0 3px var(--primary-light);
     }
+    input[type="checkbox"] {
+      width: 18px; height: 18px;
+      cursor: pointer; flex-shrink: 0;
+      accent-color: var(--primary);
+    }
 
     /* ── List items ── */
     .list-item {
@@ -325,6 +330,36 @@
     .header-btn:active { background: rgba(255,255,255,0.28); }
     .header-btn svg { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
 
+    /* ── Pass/Fail toggle ── */
+    .pf-toggle {
+      display: flex; align-items: center; justify-content: space-between;
+      background: var(--gray-50); border: 1.5px solid var(--gray-200);
+      border-radius: 10px; padding: 11px 14px; cursor: pointer;
+      transition: border-color 0.15s, background 0.15s;
+      margin-bottom: 14px;
+    }
+    .pf-toggle:has(input:checked) {
+      background: var(--success-light); border-color: var(--success);
+    }
+    .pf-toggle-text { font-size: 14px; font-weight: 500; color: var(--gray-700); line-height: 1.3; }
+    .pf-toggle-sub  { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
+    /* Switch pill */
+    .switch { position: relative; width: 44px; height: 26px; flex-shrink: 0; margin-left: 12px; }
+    .switch input { opacity: 0; width: 0; height: 0; }
+    .switch-track {
+      position: absolute; inset: 0;
+      background: var(--gray-300); border-radius: 13px;
+      transition: background 0.2s;
+    }
+    .switch input:checked + .switch-track { background: var(--success); }
+    .switch-thumb {
+      position: absolute; top: 3px; left: 3px;
+      width: 20px; height: 20px; border-radius: 50%;
+      background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+      transition: transform 0.2s;
+    }
+    .switch input:checked ~ .switch-thumb { transform: translateX(18px); }
+
     /* ── File input ── */
     .file-input-label {
       display: flex; align-items: center; justify-content: center; gap: 8px;
@@ -864,10 +899,17 @@ function showCourseModal(id) {
         <input id="f-grade" type="number" value="${c && !isPF && c.grade != null && c.grade !== '' ? c.grade : ''}" placeholder="e.g. 5.5" min="1" max="6" step="0.25">
       </div>
     </div>
-    <div class="form-group" style="display:flex;align-items:center;gap:10px;padding:4px 0">
-      <input type="checkbox" id="f-passfail" style="width:18px;height:18px;cursor:pointer;flex-shrink:0" ${isPF ? 'checked' : ''} onchange="onPassFailChange(this.checked)">
-      <label for="f-passfail" style="text-transform:none;font-size:14px;font-weight:500;color:var(--gray-700);cursor:pointer;letter-spacing:0">Passed (no grade — excluded from means)</label>
-    </div>
+    <label class="pf-toggle" for="f-passfail">
+      <div>
+        <div class="pf-toggle-text">Pass / Fail course</div>
+        <div class="pf-toggle-sub">Counts for credits but excluded from grade means</div>
+      </div>
+      <div class="switch">
+        <input type="checkbox" id="f-passfail" ${isPF ? 'checked' : ''} onchange="onPassFailChange(this.checked)">
+        <div class="switch-track"></div>
+        <div class="switch-thumb"></div>
+      </div>
+    </label>
     <div class="form-group">
       <label>Semester</label>
       <select id="f-semester">
diff --git a/sw.js b/sw.js
index 3056e12..73eda6d 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'credittracker-v2';
+const CACHE_NAME = 'credittracker-v3';
 const ASSETS = [
   './index.html',
   './manifest.json',