feat: Clock

backend/static/styles.css

@@ -57,6 +57,7 @@ h3 {
   gap: 0.4rem;
   flex-wrap: wrap;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .container {
@@ -103,7 +104,7 @@ h3 {
   background: var(--card);
   border: 1px solid rgba(39, 66, 53, 0.1);
   border-radius: 18px;
-  box-shadow: 0 10px 32px rgba(39, 66, 53, 0.08);
+  box-shadow: 0 8px 22px rgba(39, 66, 53, 0.09);
   padding: 1.25rem;
   margin-bottom: 1rem;
 }
@@ -127,6 +128,7 @@ h3 {
   align-items: center;
   justify-content: center;
   min-height: 90px;
+  cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
@@ -145,12 +147,6 @@ h3 {
   animation-delay: var(--stagger-delay, 0ms);
 }
 
-.dashboard-grid.is-focusing .dashboard-link-card:not(.is-opening) {
-  opacity: 0.56;
-  transform: scale(0.975);
-  filter: saturate(0.82);
-}
-
 @keyframes dashboard-card-in {
   from {
     opacity: 0;
@@ -173,28 +169,18 @@ h3 {
   background: #fffdf9;
   border: 1px solid rgba(39, 66, 53, 0.11);
   letter-spacing: 0.01em;
-  box-shadow: 0 12px 30px rgba(39, 66, 53, 0.12);
+  box-shadow: 0 8px 22px rgba(39, 66, 53, 0.09);
   will-change: transform, opacity, filter;
 }
 
-.dashboard-link-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 18px 40px rgba(39, 66, 53, 0.18);
-}
-
-.dashboard-link-card.is-opening {
-  box-shadow: 0 20px 44px rgba(39, 66, 53, 0.22);
-  pointer-events: none;
-}
-
 .link-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 14px 30px rgba(39, 66, 53, 0.16);
+  transform: translateY(-5px);
+  box-shadow: 0 14px 30px rgba(39, 66, 53, 0.15);
 }
 
-.dashboard-grid .dashboard-link-card:hover {
-  transform: translateY(-6px);
-  box-shadow: 0 18px 40px rgba(39, 66, 53, 0.18);
+.link-card:focus-visible {
+  transform: translateY(-5px);
+  box-shadow: 0 14px 30px rgba(39, 66, 53, 0.15);
 }
 
 .form-card {
@@ -448,10 +434,13 @@ input[type="file"]:focus {
   padding: 0.42rem 0.78rem;
   font-size: 0.98rem;
   font-weight: 600;
+  min-height: 2.35rem;
 }
 
 .toolbar-nav-btn {
-  padding: 0.42rem 0.62rem;
+  width: 2.35rem;
+  padding: 0;
+  flex: 0 0 2.35rem;
 }
 
 .toolbar-nav-btn svg {
@@ -460,6 +449,106 @@ input[type="file"]:focus {
   fill: currentColor;
 }
 
+.toolbar-session-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.38rem;
+  flex-wrap: nowrap;
+}
+
+.toolbar-timer {
+  position: relative;
+}
+
+.toolbar-timer-btn {
+  width: 2.35rem;
+  padding: 0;
+  flex: 0 0 2.35rem;
+}
+
+.toolbar-timer-btn svg {
+  width: 0.9rem;
+  height: 0.9rem;
+  fill: currentColor;
+}
+
+.toolbar-timer-popover {
+  position: absolute;
+  top: calc(100% + 0.38rem);
+  right: 0;
+  min-width: 12.4rem;
+  padding: 0.62rem 0.7rem;
+  border-radius: 12px;
+  border: 1px solid rgba(39, 66, 53, 0.14);
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 10px 26px rgba(39, 66, 53, 0.14);
+  z-index: 25;
+}
+
+.toolbar-timer-label {
+  margin: 0 0 0.35rem;
+  color: rgba(31, 31, 31, 0.72);
+  font-size: 0.76rem;
+}
+
+.toolbar-timer-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.38rem;
+}
+
+.toolbar-timer-unit {
+  background: rgba(39, 66, 53, 0.045);
+  border: 1px solid rgba(39, 66, 53, 0.09);
+  border-radius: 10px;
+  padding: 0.38rem 0.18rem 0.3rem;
+  display: grid;
+  justify-items: center;
+}
+
+.toolbar-timer-value {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--forest);
+  line-height: 1.05;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.toolbar-timer-value.is-updated {
+  animation: countdown-pop 220ms ease;
+}
+
+.toolbar-timer-unit-label {
+  margin-top: 0.1rem;
+  color: rgba(31, 31, 31, 0.62);
+  font-size: 0.64rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+.toolbar-timer-subline {
+  margin: 0.42rem 0 0;
+  color: rgba(31, 31, 31, 0.74);
+  font-size: 0.74rem;
+}
+
+@keyframes countdown-pop {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  35% {
+    transform: translateY(-2px);
+    opacity: 0.75;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 .flash {
   padding: 0.7rem 0.9rem;
   border-radius: 10px;
@@ -780,6 +869,16 @@ input[type="file"]:focus {
 }
 
 @media (max-width: 640px) {
+  .toolbar-timer-popover {
+    right: -0.1rem;
+    min-width: 11.5rem;
+    padding: 0.5rem 0.6rem;
+  }
+
+  .toolbar-timer-value {
+    font-size: 0.9rem;
+  }
+
   .location-actions {
     justify-content: flex-start;
   }