eye-care 1.0.0

package/src/renderer/break.css

@@ -0,0 +1,265 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  width: 100%;
+  height: 100%;
+  background: #0b1020;
+  color: #f7f8fa;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  overflow: hidden;
+  user-select: none;
+}
+
+.bg-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  filter: blur(3px) brightness(0.8);
+  transform: scale(1.05);
+  display: none;
+}
+
+.bg-layer.has-bg { display: block; }
+
+#root {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.overlay {
+  width: min(680px, 92vw);
+  padding: 40px 36px;
+  text-align: center;
+  background: rgba(11, 16, 32, 0.55);
+  border-radius: 16px;
+  backdrop-filter: blur(8px);
+}
+
+.header { margin-bottom: 24px; }
+
+.title {
+  font-size: 30px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.subtitle {
+  margin-top: 6px;
+  font-size: 15px;
+  color: #9aa4c0;
+}
+
+.progress-track {
+  width: 100%;
+  height: 6px;
+  background: #1e2540;
+  border-radius: 999px;
+  overflow: hidden;
+  margin: 20px 0 24px;
+}
+
+.progress-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, #4f8cff, #6bd4c0);
+  transition: width 0.2s linear;
+}
+
+.exercise { min-height: 320px; }
+
+.exercise-name {
+  font-size: 20px;
+  font-weight: 600;
+  color: #6bd4c0;
+  margin-bottom: 14px;
+}
+
+.guide-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 240px;
+  margin: 0 auto 18px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+}
+
+.guide-svg {
+  width: 100%;
+  height: 100%;
+  max-width: 480px;
+}
+
+.step-text {
+  font-size: 18px;
+  line-height: 1.5;
+  color: #f7f8fa;
+  margin-bottom: 12px;
+  min-height: 27px;
+}
+
+.step-time {
+  font-size: 48px;
+  font-weight: 300;
+  color: #4f8cff;
+  font-variant-numeric: tabular-nums;
+}
+
+.source {
+  margin-top: 20px;
+  font-size: 12px;
+  color: #6b7494;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.source:hover { color: #9aa4c0; }
+
+.actions { margin-top: 24px; }
+
+.btn-skip {
+  background: transparent;
+  border: 1px solid #3a4470;
+  color: #9aa4c0;
+  padding: 8px 18px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-skip:hover {
+  border-color: #6bd4c0;
+  color: #f7f8fa;
+}
+
+/* ===== SVG guide shared ===== */
+.guide-svg .label {
+  fill: #9aa4c0;
+  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.guide-svg .target {
+  fill: none;
+  stroke: #4f8cff;
+  stroke-width: 2;
+  opacity: 0.4;
+}
+
+.guide-svg .dot {
+  fill: #6bd4c0;
+  filter: drop-shadow(0 0 8px rgba(107, 212, 192, 0.7));
+}
+
+.guide-svg .eye-outline {
+  fill: none;
+  stroke: #4f8cff;
+  stroke-width: 2;
+}
+
+.guide-svg .eye-lid {
+  fill: #0b1020;
+  stroke: #4f8cff;
+  stroke-width: 2;
+}
+
+/* ===== 20-20-20: dot alternates center -> far-left -> center -> far-right ===== */
+.dot-20-20-20 {
+  animation: dotFar 8s ease-in-out infinite;
+}
+@keyframes dotFar {
+  0%, 100% { transform: translate(200px, 120px); }
+  12% { transform: translate(200px, 120px); }
+  25% { transform: translate(60px, 50px); }
+  37% { transform: translate(60px, 50px); }
+  50% { transform: translate(200px, 120px); }
+  62% { transform: translate(200px, 120px); }
+  75% { transform: translate(340px, 50px); }
+  87% { transform: translate(340px, 50px); }
+}
+
+/* ===== Conscious blink: eyelid closes/opens ===== */
+.lid-top { animation: lidTop 3s ease-in-out infinite; transform-origin: 200px 80px; }
+.lid-bottom { animation: lidBottom 3s ease-in-out infinite; transform-origin: 200px 160px; }
+@keyframes lidTop {
+  0%, 100% { transform: scaleY(0); }
+  35%, 65% { transform: scaleY(1); }
+}
+@keyframes lidBottom {
+  0%, 100% { transform: scaleY(0); }
+  35%, 65% { transform: scaleY(1); }
+}
+
+/* ===== Near-far focus shift: bar fixed at center, scales near (big) <-> far (small) ===== */
+.dot-near-far {
+  animation: dotNearFar 8s ease-in-out infinite;
+  transform-origin: 200px 120px;
+  transform-box: view-box;
+}
+@keyframes dotNearFar {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(0.35); }
+}
+
+/* ===== Figure-8 tracing: reverse direction halfway through ===== */
+.dot-figure8 {
+  animation: dotFigure8 6s ease-in-out infinite alternate;
+}
+@keyframes dotFigure8 {
+  0% { offset-distance: 0%; }
+  100% { offset-distance: 100%; }
+}
+
+/* ===== Palming: expanding warm glow circle ===== */
+.palm-glow {
+  animation: palmGlow 5s ease-in-out infinite;
+  transform-origin: 200px 120px;
+}
+@keyframes palmGlow {
+  0%, 100% { transform: scale(0.7); opacity: 0.5; }
+  50% { transform: scale(1.1); opacity: 0.95; }
+}
+
+.palm-breathe-text { animation: breatheText 5s ease-in-out infinite; }
+@keyframes breatheText {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
+/* ===== Horizontal eye rolls: dot sweeps L -> R -> L (symmetric) ===== */
+.dot-horizontal {
+  animation: dotHorizontal 4s ease-in-out infinite;
+}
+@keyframes dotHorizontal {
+  0% { transform: translate(80px, 120px); }
+  50% { transform: translate(320px, 120px); }
+  100% { transform: translate(80px, 120px); }
+}
+
+/* ===== Rest fallback: slow breathing circle ===== */
+.dot-rest {
+  animation: dotRest 8s ease-in-out infinite;
+  transform-origin: 200px 130px;
+}
+@keyframes dotRest {
+  0%, 100% { transform: scale(0.7); opacity: 0.4; }
+  50% { transform: scale(1.15); opacity: 0.85; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot-20-20-20, .dot-near-far, .dot-figure8, .dot-horizontal, .dot-rest,
+  .lid-top, .lid-bottom, .palm-glow, .palm-breathe-text {
+    animation: none;
+  }
+}

package/src/renderer/break.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;" />
+  <title>eye-care break</title>
+  <link rel="stylesheet" href="break.css" />
+</head>
+<body>
+  <div id="bgLayer" class="bg-layer"></div>
+  <div id="root">
+    <div class="overlay">
+      <div class="header">
+        <div class="title" id="title">Time for an eye break</div>
+        <div class="subtitle" id="subtitle">Follow the guided exercises below.</div>
+      </div>
+      <div class="progress-track"><div class="progress-fill" id="progress"></div></div>
+
+      <div class="exercise">
+        <div class="exercise-name" id="exerciseName"></div>
+
+        <div class="guide-stage" id="guideStage">
+          <svg class="guide-svg" id="guideSvg" viewBox="0 0 400 240" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
+        </div>
+
+        <div class="step-text" id="stepText"></div>
+        <div class="step-time" id="stepTime"></div>
+      </div>
+
+      <div class="source" id="source"></div>
+      <div class="actions">
+        <button id="skipBtn" class="btn-skip">Skip break</button>
+      </div>
+    </div>
+  </div>
+  <script src="break.js"></script>
+</body>
+</html>