third commit

public/output.css

@@ -14,6 +14,8 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
@@ -182,6 +184,61 @@
   }
 }
 @layer utilities {
+  .modal {
+    @layer daisyui.l1.l2.l3 {
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      inset: calc(0.25rem * 0);
+      margin: calc(0.25rem * 0);
+      display: grid;
+      height: 100%;
+      max-height: none;
+      width: 100%;
+      max-width: none;
+      align-items: center;
+      justify-items: center;
+      background-color: transparent;
+      padding: calc(0.25rem * 0);
+      color: inherit;
+      transition: visibility 0.3s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
+      overflow: clip;
+      overscroll-behavior: contain;
+      z-index: 999;
+      scrollbar-gutter: auto;
+      &::backdrop {
+        display: none;
+      }
+    }
+    @layer daisyui.l1.l2 {
+      &.modal-open, &[open], &:target, .modal-toggle:checked + & {
+        pointer-events: auto;
+        visibility: visible;
+        opacity: 100%;
+        transition: visibility 0s allow-discrete, background-color 0.3s ease-out, opacity 0.1s ease-out;
+        background-color: oklch(0% 0 0/ 0.4);
+        .modal-box {
+          translate: 0 0;
+          scale: 1;
+          opacity: 1;
+        }
+        :root:has(&) {
+          --page-has-backdrop: 1;
+          --page-overflow: hidden;
+          --page-scroll-bg: var(--page-scroll-bg-on);
+          --page-scroll-gutter: stable;
+          --page-scroll-transition: var(--page-scroll-transition-on);
+          animation: set-page-has-scroll forwards;
+          animation-timeline: scroll();
+        }
+      }
+      @starting-style {
+        &.modal-open, &[open], &:target, .modal-toggle:checked + & {
+          opacity: 0%;
+        }
+      }
+    }
+  }
   .dock {
     @layer daisyui.l1.l2.l3 {
       position: fixed;
@@ -901,6 +958,92 @@
       }
     }
   }
+  .checkbox\! {
+    @layer daisyui.l1.l2.l3 {
+      border: var(--border) solid var(--input-color, var(--color-base-content)) !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)) !important;
+      }
+      position: relative !important;
+      display: inline-block !important;
+      flex-shrink: 0 !important;
+      cursor: pointer !important;
+      appearance: none !important;
+      border-radius: var(--radius-selector) !important;
+      padding: calc(0.25rem * 1) !important;
+      vertical-align: middle !important;
+      color: var(--color-base-content) !important;
+      box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 0 #0000 inset, 0 0 #0000 !important;
+      transition: background-color 0.2s, box-shadow 0.2s !important;
+      --size: calc(var(--size-selector, 0.25rem) * 6) !important;
+      width: var(--size) !important;
+      height: var(--size) !important;
+      background-size: auto, calc(var(--noise) * 100%) !important;
+      background-image: none, var(--fx-noise) !important;
+      &:before {
+        --tw-content: "" !important;
+        content: var(--tw-content) !important;
+        display: block !important;
+        width: 100% !important;
+        height: 100% !important;
+        rotate: 45deg !important;
+        background-color: currentcolor !important;
+        opacity: 0% !important;
+        transition: clip-path 0.3s, opacity 0.1s, rotate 0.3s, translate 0.3s !important;
+        transition-delay: 0.1s !important;
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%) !important;
+        box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset !important;
+        font-size: 1rem !important;
+        line-height: 0.75 !important;
+      }
+      &:focus-visible {
+        outline: 2px solid var(--input-color, currentColor) !important;
+        outline-offset: 2px !important;
+      }
+      &:checked, &[aria-checked="true"] {
+        background-color: var(--input-color, #0000) !important;
+        box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) !important;
+        &:before {
+          clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%) !important;
+          opacity: 100% !important;
+        }
+        @media (forced-colors: active) {
+          &:before {
+            rotate: 0deg !important;
+            background-color: transparent !important;
+            --tw-content: "✔︎" !important;
+            clip-path: none !important;
+          }
+        }
+        @media print {
+          &:before {
+            rotate: 0deg !important;
+            background-color: transparent !important;
+            --tw-content: "✔︎" !important;
+            clip-path: none !important;
+          }
+        }
+      }
+      &:indeterminate {
+        background-color: var( --input-color, var(--color-base-content) ) !important;
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: var( --input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000) ) !important;
+        }
+        &:before {
+          rotate: 0deg !important;
+          opacity: 100% !important;
+          translate: 0 -35% !important;
+          clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%) !important;
+        }
+      }
+    }
+    &:disabled {
+      @layer daisyui.l1.l2 {
+        cursor: not-allowed !important;
+        opacity: 20% !important;
+      }
+    }
+  }
   .card {
     @layer daisyui.l1.l2.l3 {
       position: relative;
@@ -950,6 +1093,15 @@
       }
     }
   }
+  .modal-toggle {
+    @layer daisyui.l1.l2.l3 {
+      position: fixed;
+      height: calc(0.25rem * 0);
+      width: calc(0.25rem * 0);
+      appearance: none;
+      opacity: 0%;
+    }
+  }
   .sticky {
     position: sticky;
   }
@@ -962,9 +1114,44 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .modal-backdrop {
+    @layer daisyui.l1.l2.l3 {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      display: grid;
+      align-self: stretch;
+      justify-self: stretch;
+      color: transparent;
+      z-index: -1;
+      button {
+        cursor: pointer;
+      }
+    }
+  }
   .z-50 {
     z-index: 50;
   }
+  .modal-box {
+    @layer daisyui.l1.l2.l3 {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      max-height: 100vh;
+      width: calc(11/12 * 100%);
+      max-width: 32rem;
+      background-color: var(--color-base-100);
+      padding: calc(0.25rem * 6);
+      transition: translate 0.3s ease-out, scale 0.3s ease-out, opacity 0.2s ease-out 0.05s, box-shadow 0.3s ease-out;
+      border-top-left-radius: var(--modal-tl, var(--radius-box));
+      border-top-right-radius: var(--modal-tr, var(--radius-box));
+      border-bottom-left-radius: var(--modal-bl, var(--radius-box));
+      border-bottom-right-radius: var(--modal-br, var(--radius-box));
+      scale: 95%;
+      opacity: 0;
+      box-shadow: oklch(0% 0 0/ 0.25) 0px 25px 50px -12px;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+  }
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
@@ -1008,28 +1195,6 @@
       padding-inline: calc(var(--size) / 2 - var(--border));
     }
   }
-  .card-body {
-    @layer daisyui.l1.l2.l3 {
-      display: flex;
-      flex: auto;
-      flex-direction: column;
-      gap: calc(0.25rem * 2);
-      padding: var(--card-p, 1.5rem);
-      font-size: var(--card-fs, 0.875rem);
-      :where(p) {
-        flex-grow: 1;
-      }
-    }
-  }
-  .card-title {
-    @layer daisyui.l1.l2.l3 {
-      display: flex;
-      align-items: center;
-      gap: calc(0.25rem * 2);
-      font-size: var(--cardtitle-fs, 1.125rem);
-      font-weight: 600;
-    }
-  }
   .block {
     display: block;
   }
@@ -1083,9 +1248,6 @@
   .w-14 {
     width: calc(var(--spacing) * 14);
   }
-  .w-96 {
-    width: calc(var(--spacing) * 96);
-  }
   .w-\[248px\] {
     width: 248px;
   }
@@ -1312,6 +1474,10 @@
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1428,10 +1594,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-primary\/30 {
     --tw-shadow-color: var(--color-primary);
     @supports (color: color-mix(in lab, red, red)) {

public/updateWeekDisplay.js

@@ -3,11 +3,3 @@ function updateWeekDisplay(value) {
   document.getElementById('week-num').textContent = value;
 }
 
-function darkMode() {
-  const element = document.getElementById('darkmode')
-  if (element.getElementById("checkbox1").checked === true) {
-    element.setAttribute("data-theme", "silk")
-  } else {
-    element.setAttribute("data-theme", "dracula")
-  }
-}

src/index.tsx

@@ -5,6 +5,7 @@ import { MesobuilderPage1, MesobuilderPage2 } from './layout/mesobuilder.js'
 import { Navbar } from './layout/nav.js'
 import { NewDay } from './layout/newday.js'
 import { ChangeTheme } from './layout/theme.js'
+import { ExerciseTab } from './layout/exercises.js'
 
 
 
@@ -32,6 +33,10 @@ app.get('/meso2', (c) => {
   )
 })
 
+app.get('/addExercise', (c) => {
+  return c.html(<ExerciseTab></ExerciseTab>)
+})
+
 
 app.get('/newday', (c) => {
   return c.html(

src/layout/card.tsx

@@ -1,8 +0,0 @@
-export const Card = ({ title, body }: { title: string; body: string }) => (
-  <div class="card bg-base-100 shadow-xl w-96">
-    <div class="card-body">
-      <h2 class="card-title">{title}</h2>
-      <p>{body}</p>
-    </div>
-  </div>
-)

src/layout/exercises.tsx

@@ -1,4 +1,5 @@
 export const ExerciseTab = () => (
+
   <div>
     <div>
       <div class="text-[10px] font-bold tracking-widest uppercase text-primary px-1 mb-1">Chest</div>

src/layout/mesobuilder.tsx

@@ -80,33 +80,6 @@ export const MesobuilderPage2 = () => (
 
       <div class="flex-1 overflow-x-auto kanban-scroll p-4 flex gap-3 bg-base-200/60 kabanBoard">
 
-        <div class="card card-bordered flex-shrink-0 w-[248px] bg-base-100 shadow-md overflow-hidden newDay">
-          <div class="px-4 py-3 border-b border-base-300 flex items-center gap-2">
-            <div class="flex-1">
-              <div class="font-bc text-[15px] font-bold uppercase tracking-wider">Day 1</div>
-              <select class="select select-bordered select-xs w-full mt-1 text-primary font-semibold">
-                <option>Tuesday</option>
-                <option>Monday</option>
-                <option>Wednesday</option>
-                <option>Thursday</option>
-                <option>Friday</option>
-                <option>Saturday</option>
-                <option>Sunday</option>
-                <option selected>— Flexible</option>
-              </select>
-            </div>
-            <button class="btn btn-xs btn-ghost btn-square text-error">✕</button>
-          </div>
-
-          <div class="p-3 flex flex-col gap-3 min-h-[100px]">
-
-          </div>
-
-          <button class="mx-3 mb-3 py-3 border border-dashed border-base-300 rounded-xl text-center text-xs font-semibold text-base-content/50 ">
-            + Add exercise
-          </button>
-        </div>
-
         <button class="addDay btn btn-ghost flex-shrink-0 w-14 h-14 rounded-2xl border-2 border-dashed border-base-300 text-3xl text-base-content/40 self-start hover:border-primary hover:text-primary transition-colors"
           hx-get="/newday"
           hx-target=".addDay"

src/layout/newday.tsx

@@ -4,8 +4,8 @@ export const NewDay = () => (
       <div class="flex-1">
         <div class="font-bc text-[15px] font-bold uppercase tracking-wider">Day</div>
         <select class="select select-bordered select-xs w-full mt-1 text-primary font-semibold">
-          <option selected>Tuesday</option>
           <option>Monday</option>
+          <option >Tuesday</option>
           <option>Wednesday</option>
           <option>Thursday</option>
           <option>Friday</option>
@@ -24,8 +24,17 @@ export const NewDay = () => (
     <div class="p-3 flex flex-col gap-3 min-h-[100px]">
     </div>
 
-    <button class="mx-3 mb-3 py-3 border border-dashed border-base-300 rounded-xl text-center text-xs font-semibold text-base-content/50">
+    <label htmlFor="my_modal_7" class="mx-3 mb-3 py-3 border border-dashed border-base-300 rounded-xl text-center text-xs font-semibold text-base-content/50"
-      + Add exercise
+      hx-get="/addExercise"
-    </button>
+      hx-target="#exercise-modal-content"
+      hx-swap="outer"
+    >+ Add exercise</label>
+    <input type="checkbox" id="my_modal_7" className="modal-toggle" />
+    <div className="modal" role="dialog">
+      <div class="modal-box" id="exercise-modal-content">
+      </div>
+      <label className="modal-backdrop" htmlFor="my_modal_7">Close</label>
+    </div>
+
   </div >
 )

src/layout/theme.tsx

@@ -1,11 +1,11 @@
 export const ChangeTheme = () => (
-  <label className="swap swap-rotate" onclick='darkMode()'>
+  <label className="swap swap-rotate">
     {/* this hidden checkbox controls the state */}
-    <input id='checkbox1' type="checkbox" />
+    <input type="checkbox" className="theme-controller" value="silk" />
 
     {/* sun icon */}
     <svg
-      className="swap-on h-10 w-10 fill-current"
+      className="swap-off h-10 w-10 fill-current"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24">
       <path
@@ -14,7 +14,7 @@ export const ChangeTheme = () => (
 
     {/* moon icon */}
     <svg
-      className="swap-off h-10 w-10 fill-current"
+      className="swap-on h-10 w-10 fill-current"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24">
       <path