update tutorial layout

src/src/App.css

@@ -0,0 +1,2047 @@
+/* =========================================
+   1. REACT layout setting
+   ========================================= */
+html, body, #root {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+.app-container {
+    width: 100%;
+    min-height: 100vh; /* screen height */
+    display: flex;
+    flex-direction: column;
+    background-color: #f9f9f9;
+}
+
+/* =========================================
+   2. original layout
+   ========================================= */
+
+/* GLOBAL STYLES */
+body {
+    font-family: 'Nunito', sans-serif;
+    background-color: #f9f9f9;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+/* dynamic class name */
+.hidden {
+    display: none !important;
+}
+
+/* TOP MENU */
+#top-menu {
+    height: 60px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    padding: 0 16px 0 20px;
+    box-sizing: border-box;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    z-index: 1000;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
+.top-menu-links {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0;
+    min-width: 0;
+}
+
+.menu-btn {
+    background: none;
+    border: none;
+    font-family: 'Nunito', sans-serif;
+    font-size: 16px;
+    color: #333;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.menu-btn:hover {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+}
+
+/* active for React */
+.menu-btn.active {
+    font-weight: bold;
+    color: #007BFF;
+    background-color: #eef7ff;
+    border-radius: 4px;
+}
+
+.separator {
+    width: 1px;
+    height: 20px;
+    background-color: #555; /* Dark gray separator */
+    margin: 0 5px;
+}
+
+/* PAGE CONTAINER */
+.page {
+    /* content under menu */
+    min-height: calc(100vh - 60px);
+    width: 100%;
+    padding-top: 60px; /* Space for fixed menu */
+    padding-bottom: 40px; /* Space at bottom for scrolling */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto; 
+}
+
+/* Ensure page titles are black */
+.page h1 {
+    color: #000 !important;
+    background: transparent !important;
+}
+
+.page-title {
+    color: #000 !important;
+    background: transparent !important;
+}
+
+/* PAGE A SPECIFIC */
+#page-a {
+    justify-content: center; /* Center vertically */
+    /* Fine-tune this margin if the Home screen sits slightly too low. */
+    margin-top: -40px; 
+    flex: 1; /* Fill the remaining height so vertical centering still works. */
+}
+
+#page-a h1 {
+    font-size: 80px;
+    margin: 0 0 10px 0;
+    color: #000;
+    text-align: center; /* Keep the heading centered. */
+}
+
+#page-a p {
+    color: #666;
+    font-size: 20px;
+    margin-bottom: 40px;
+    text-align: center;
+}
+
+.btn-main {
+    background-color: #007BFF; /* Blue */
+    color: white;
+    border: none;
+    padding: 15px 50px;
+    font-size: 20px;
+    font-family: 'Nunito', sans-serif;
+    border-radius: 30px; /* Fully rounded corners */
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+.btn-main:hover {
+    transform: scale(1.1); /* Zoom effect */
+}
+
+/* PAGE B SPECIFIC */
+#page-b {
+    justify-content: space-evenly; /* Distribute vertical space */
+    padding-bottom: 20px;
+    min-height: calc(100vh - 60px); /* Ensure the page still fills the viewport. */
+}
+
+/* 1. Display Area */
+#display-area {
+    width: 60%;
+    height: 50vh; /* Use viewport height to scale more consistently across screens. */
+    min-height: 300px;
+    border: 2px solid #ddd;
+    border-radius: 12px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #555;
+    font-size: 24px;
+    position: relative;
+    /* Keep video content centered without overflowing the frame. */
+    overflow: hidden; 
+}
+
+.focus-display-shell {
+    background: #101010;
+}
+
+@keyframes fadeInOverlay {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUpCard {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+
+.focus-flow-overlay {
+    position: fixed;
+    top: 76px;
+    right: 20px;
+    bottom: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background: rgba(17, 31, 52, 0.18);
+    backdrop-filter: blur(10px);
+    z-index: 900;
+    animation: fadeInOverlay 0.3s ease-out forwards;
+}
+
+.focus-flow-card {
+    width: min(1040px, 100%);
+    background: #fff;
+    border-radius: 24px;
+    padding: 30px 34px;
+    box-shadow: 0 28px 80px rgba(14, 44, 88, 0.18);
+    border: 1px solid rgba(0, 123, 255, 0.12);
+    box-sizing: border-box;
+    animation: slideUpCard 0.4s ease-out forwards;
+}
+
+.focus-flow-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 18px;
+}
+
+.focus-flow-eyebrow {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 999px;
+    background: #e7f3ff;
+    color: #007BFF;
+    font-size: 0.82rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.focus-flow-header h2 {
+    margin: 14px 0 0;
+    color: #333;
+    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
+    line-height: 1.1;
+}
+
+.focus-flow-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 116px;
+    height: 116px;
+    border-radius: 24px;
+    background: linear-gradient(180deg, #f4f9ff 0%, #edf5ff 100%);
+    border: 1px solid rgba(0, 123, 255, 0.12);
+}
+
+.focus-flow-lead {
+    margin: 0 0 20px;
+    color: #4a4a4a;
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+.focus-flow-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+}
+
+.focus-flow-panel {
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+    border-radius: 14px;
+    padding: 18px;
+}
+.focus-flow-grid .focus-flow-panel:last-child {
+    grid-column: 1 / -1;
+}
+
+.focus-flow-panel h3,
+.focus-flow-step-copy h3 {
+    margin: 0 0 8px;
+    color: #333;
+    font-size: 1rem;
+}
+
+.focus-flow-panel p,
+.focus-flow-step-copy p {
+    margin: 0;
+    color: #5e6670;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+.focus-flow-steps {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+}
+
+.focus-flow-step {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+    border-radius: 14px;
+    padding: 16px 18px;
+    min-height: 100px;
+    box-sizing: border-box;
+}
+
+.focus-flow-step-number {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: #007BFF;
+    color: #fff;
+    font-size: 0.95rem;
+    font-weight: 800;
+}
+
+.focus-flow-step-copy {
+    min-width: 0;
+}
+
+.focus-flow-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: 20px;
+}
+
+.focus-flow-note {
+    color: #667281;
+    font-size: 0.94rem;
+    line-height: 1.6;
+}
+
+.focus-flow-glasses-note {
+    background: #fffbea;
+    border: 1px solid #f5c518;
+    border-radius: 10px;
+    padding: 12px 16px;
+    font-size: 0.9rem;
+    color: #5a4a00;
+    line-height: 1.55;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+.focus-flow-panel-warn {
+    border-left: 3px solid #f5a623;
+    background: #fff9f0;
+}
+
+.eye-gaze-modal-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 16px;
+    font-size: 0.9rem;
+    color: #667281;
+    cursor: pointer;
+    user-select: none;
+}
+
+.focus-flow-button,
+.focus-flow-secondary {
+    border: none;
+    border-radius: 999px;
+    padding: 13px 24px;
+    font-family: 'Nunito', sans-serif;
+    font-size: 0.98rem;
+    font-weight: 800;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.focus-flow-button {
+    background: #007BFF;
+    color: #fff;
+    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.18);
+}
+
+.focus-flow-button:hover {
+    background: #0069d9;
+    border-color: transparent;
+    transform: translateY(-1px);
+}
+
+.focus-flow-secondary {
+    background: #eef3f8;
+    color: #4b5a6b;
+}
+
+.focus-flow-secondary:hover {
+    background: #e2eaf3;
+    border-color: transparent;
+}
+
+.focus-state-pill {
+    position: absolute;
+    top: 18px;
+    left: 18px;
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 16px;
+    border-radius: 999px;
+    color: #fff;
+    font-size: 0.88rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    z-index: 2;
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
+}
+
+.focus-state-pill.pending {
+    background: rgba(87, 96, 111, 0.92);
+}
+
+.focus-state-pill.focused {
+    background: rgba(33, 163, 102, 0.94);
+}
+
+.focus-state-pill.not-focused {
+    background: rgba(215, 68, 68, 0.94);
+}
+
+.focus-state-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: currentColor;
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
+}
+
+.focus-idle-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.72));
+    color: #fff;
+    text-align: center;
+    z-index: 1;
+}
+
+.focus-idle-overlay p {
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: 800;
+}
+
+.focus-idle-overlay span {
+    max-width: 420px;
+    color: rgba(255, 255, 255, 0.82);
+    font-size: 0.98rem;
+    line-height: 1.5;
+}
+
+.focus-inline-error {
+    margin-top: 18px;
+    padding: 12px 16px;
+    max-width: 620px;
+    border-radius: 12px;
+    background: #fff1ee;
+    color: #b54028;
+    font-size: 0.95rem;
+    font-weight: 700;
+    box-shadow: 0 10px 20px rgba(181, 64, 40, 0.08);
+}
+
+.focus-inline-error-standalone {
+    width: 60%;
+    box-sizing: border-box;
+}
+
+.focus-debug-panel {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0,0,0,0.7);
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: monospace;
+}
+
+.focus-model-strip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px 16px;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    margin: 10px auto;
+    max-width: 700px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+
+/* --- Model info card --- */
+.model-card {
+    width: 60%;
+    margin: 14px auto 0;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 14px;
+    padding: 18px 22px 14px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
+    animation: cardFadeIn 0.25s ease;
+    box-sizing: border-box;
+}
+
+.model-card-details {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+}
+
+@keyframes cardFadeIn {
+    from { opacity: 0; transform: translateY(4px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.model-card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 4px;
+}
+
+.model-card-title {
+    margin: 0;
+    font-size: 1.05rem;
+    color: #1a1a2e;
+}
+
+.model-card-badge {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #e7f3ff;
+    color: #007BFF;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.model-card-badge-baseline {
+    padding: 3px 10px;
+    border-radius: 999px;
+    background: #fff3e0;
+    color: #e67e22;
+    font-size: 0.7rem;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.model-card-tagline {
+    margin: 0 0 12px;
+    color: #667281;
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+
+.model-card-metrics {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+    margin-bottom: 14px;
+}
+
+.model-card-metric {
+    text-align: center;
+    padding: 8px 4px;
+    background: #f8fbff;
+    border: 1px solid #e8f0fe;
+    border-radius: 10px;
+}
+
+.model-card-metric-value {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #007BFF;
+    line-height: 1.2;
+}
+
+.model-card-metric-label {
+    display: block;
+    font-size: 0.65rem;
+    color: #8899aa;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-top: 2px;
+}
+
+.model-card-section {
+    margin-bottom: 8px;
+}
+
+.model-card-section h4 {
+    margin: 0 0 2px;
+    font-size: 0.78rem;
+    color: #555;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.model-card-section p {
+    margin: 0;
+    font-size: 0.82rem;
+    color: #4a4a4a;
+    line-height: 1.5;
+}
+
+.model-card-eval {
+    margin-top: 10px;
+    padding: 6px 10px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    font-size: 0.72rem;
+    color: #7a8a9a;
+    font-weight: 600;
+}
+
+@media (max-width: 768px) {
+    .model-card {
+        width: 90%;
+    }
+    .model-card-metrics {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .model-card-details {
+        grid-template-columns: 1fr;
+    }
+}
+
+.focus-model-label {
+    color: #666;
+    font-size: 13px;
+    font-weight: 700;
+    margin-right: 4px;
+}
+
+.focus-model-button {
+    padding: 6px 16px;
+    border-radius: 16px;
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #555;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.focus-model-button:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
+}
+
+.focus-model-button.active {
+    border: 2px solid #007BFF;
+    background: #007BFF;
+    color: #fff;
+}
+
+.focus-model-sep {
+    width: 1px;
+    height: 24px;
+    background: #d0d0d0;
+    margin: 0 4px;
+}
+
+.eye-gaze-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 14px;
+    border-radius: 16px;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.25s ease;
+}
+
+.eye-gaze-toggle.off {
+    border: 1px solid #d0d0d0;
+    background: #f5f5f5;
+    color: #888;
+}
+
+.eye-gaze-toggle.off:hover {
+    border-color: #007BFF;
+    color: #007BFF;
+    background: #f0f7ff;
+}
+
+.eye-gaze-toggle.on {
+    border: 2px solid #007BFF;
+    background: #007BFF;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
+}
+
+.eye-gaze-toggle.on:hover {
+    background: #0069d9;
+    border-color: #0069d9;
+}
+
+.eye-gaze-icon {
+    flex-shrink: 0;
+}
+
+.focus-model-button.recalibrate {
+    border: 1px solid #007BFF;
+    background: transparent;
+    color: #007BFF;
+    font-weight: 600;
+    font-size: 11px;
+}
+
+.focus-model-button.recalibrate:hover {
+    background: #f0f7ff;
+}
+
+.focus-system-stats {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 4px 16px;
+    margin: 4px auto;
+    max-width: 400px;
+    font-size: 12px;
+    color: #888;
+}
+
+.focus-system-stats strong {
+    color: #555;
+}
+
+.focus-system-stats-sep {
+    width: 1px;
+    height: 12px;
+    background: #ccc;
+}
+
+#display-area video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Behaves similarly to background-size: cover. */
+}
+
+/* 2. Timeline Area */
+#timeline-area {
+    width: 60%;
+    height: 80px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-self: center;
+    margin: 0 auto;
+}
+
+#timeline-visuals {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 2px;
+    width: 100%;
+}
+
+.timeline-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #888;
+    font-size: 14px;
+}
+
+#timeline-line {
+    width: 100%;
+    height: 2px;
+    background-color: #87CEEB; /* Light blue */
+}
+
+/* 3. Control Panel */
+#control-panel {
+    display: flex;
+    gap: 20px;
+    width: 60%;
+    justify-content: space-between;
+}
+
+.action-btn {
+    flex: 1; /* Evenly distributed width */
+    padding: 12px 0;
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+    color: white;
+    transition: opacity 0.2s;
+}
+
+.action-btn:hover {
+    opacity: 0.9;
+}
+
+.action-btn.green { background-color: #28a745; }
+.action-btn.blue { background-color: #007BFF; }
+.action-btn.orange { background-color: #e67e22; }
+.action-btn.red { background-color: #dc3545; }
+
+/* 4. Frame Control */
+#frame-control {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    color: #333;
+    font-weight: bold;
+}
+
+#frame-slider {
+    width: 200px;
+    cursor: pointer;
+}
+
+#frame-input {
+    width: 50px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+    font-family: 'Nunito', sans-serif;
+}
+
+/* ================ ACHIEVEMENT PAGE ================ */
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    width: 80%;
+    margin: 40px auto;
+}
+
+.stat-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.stat-number {
+    font-size: 48px;
+    font-weight: bold;
+    color: #007BFF;
+    margin-bottom: 10px;
+}
+
+.stat-label {
+    font-size: 16px;
+    color: #666;
+}
+
+.achievements-section {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.achievements-section h2 {
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.badges-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+
+.badge {
+    background: white;
+    padding: 30px 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.2s;
+}
+
+.badge:hover {
+    transform: translateY(-5px);
+}
+
+.badge.locked {
+    opacity: 0.4;
+    filter: grayscale(100%);
+}
+
+.badge-icon {
+    font-size: 64px;
+    margin-bottom: 15px;
+}
+
+.badge-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+
+/* ================ RECORDS PAGE ================ */
+
+.records-controls {
+    display: flex;
+    gap: 10px;
+    margin: 20px auto;
+    width: 80%;
+    justify-content: center;
+}
+
+.filter-btn {
+    padding: 10px 20px;
+    border: 2px solid #007BFF;
+    background: white;
+    color: #007BFF;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+
+.filter-btn:hover {
+    background: #e7f3ff;
+}
+
+.filter-btn.active {
+    background: #007BFF;
+    color: white;
+}
+
+.chart-container {
+    width: 80%;
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin: 20px auto;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+#focus-chart {
+    display: block;
+    margin: 0 auto;
+    /* Make sure the chart scales within its container. */
+    max-width: 100%;
+}
+
+.sessions-list {
+    width: 80%;
+    margin: 20px auto;
+}
+
+.sessions-list h2 {
+    color: #333;
+    margin-bottom: 15px;
+}
+
+#sessions-table {
+    width: 100%;
+    background: white;
+    border-collapse: collapse;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+#sessions-table th {
+    background: #007BFF;
+    color: white;
+    padding: 15px;
+    text-align: left;
+    font-weight: 600;
+}
+
+#sessions-table td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee;
+}
+
+#sessions-table tr:last-child td {
+    border-bottom: none;
+}
+
+#sessions-table tbody tr:hover {
+    background: #f8f9fa;
+}
+
+.btn-view {
+    padding: 6px 18px;
+    background: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 999px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    transition: background 0.2s;
+}
+
+.btn-view:hover {
+    background: #0056b3;
+}
+
+.records-detail-modal {
+    width: min(960px, 92vw);
+    max-width: 960px;
+    max-height: 86vh;
+    overflow-y: auto;
+    padding: 30px;
+    box-sizing: border-box;
+}
+
+.records-detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.records-detail-kicker {
+    color: #007BFF;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.records-detail-header h2 {
+    margin: 10px 0 8px;
+    color: #333;
+    text-align: left;
+}
+
+.records-detail-subtitle {
+    margin: 0;
+    color: #667281;
+    line-height: 1.6;
+}
+
+.records-detail-close {
+    border: 1px solid #d6e6fa;
+    background: #f4f9ff;
+    color: #3569a8;
+    border-radius: 999px;
+    padding: 10px 18px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.records-detail-close:hover {
+    border-color: #bfd9f7;
+    background: #e9f4ff;
+}
+
+.records-detail-feedback {
+    padding: 18px 20px;
+    border-radius: 14px;
+    background: #f7f9fc;
+    color: #516173;
+    font-weight: 700;
+}
+
+.records-detail-feedback-error {
+    background: #fff1ee;
+    color: #b54028;
+}
+
+.records-detail-summary {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 14px;
+    margin-bottom: 18px;
+}
+
+.records-detail-stat {
+    padding: 18px;
+    border-radius: 14px;
+    background: #f8fbff;
+    border: 1px solid #d9eaff;
+}
+
+.records-detail-stat.excellent {
+    background: #eef9f0;
+    border-color: #cdebd3;
+}
+
+.records-detail-stat.good {
+    background: #fff9eb;
+    border-color: #f8e3a8;
+}
+
+.records-detail-stat.fair {
+    background: #fff4eb;
+    border-color: #ffd6af;
+}
+
+.records-detail-stat.low {
+    background: #fff0f0;
+    border-color: #f3c7c7;
+}
+
+.records-detail-stat-label {
+    display: block;
+    margin-bottom: 8px;
+    color: #667281;
+    font-size: 13px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.records-detail-stat-value {
+    display: block;
+    color: #1f2d3d;
+    font-size: 28px;
+    line-height: 1.1;
+}
+
+.records-detail-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+    margin-bottom: 16px;
+}
+
+.records-detail-card {
+    background: white;
+    border: 1px solid #e8eef5;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 8px 24px rgba(20, 44, 74, 0.06);
+    margin-bottom: 16px;
+}
+
+.records-detail-card:last-child {
+    margin-bottom: 0;
+}
+
+.records-detail-card h3 {
+    margin: 0 0 16px;
+    color: #333;
+    font-size: 18px;
+}
+
+.records-detail-list {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 14px 18px;
+}
+
+.records-detail-item {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.records-detail-item-label {
+    color: #7a8795;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.records-detail-item-value {
+    color: #263445;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+.records-detail-section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.records-detail-section-head span {
+    color: #7a8795;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.records-detail-timeline {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+    gap: 5px;
+}
+
+.records-detail-segment {
+    height: 48px;
+    border-radius: 999px;
+}
+
+.records-detail-segment.focused {
+    background: linear-gradient(180deg, #3ab86a 0%, #23a057 100%);
+}
+
+.records-detail-segment.mixed {
+    background: linear-gradient(180deg, #f1b447 0%, #df9a1e 100%);
+}
+
+.records-detail-segment.distracted {
+    background: linear-gradient(180deg, #ec7d7d 0%, #d9534f 100%);
+}
+
+.records-detail-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 14px;
+    color: #667281;
+    font-size: 13px;
+    font-weight: 700;
+}
+
+.records-detail-legend span {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.records-detail-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.records-detail-dot.focused {
+    background: #23a057;
+}
+
+.records-detail-dot.mixed {
+    background: #df9a1e;
+}
+
+.records-detail-dot.distracted {
+    background: #d9534f;
+}
+
+.records-detail-events {
+    display: grid;
+    gap: 10px;
+    max-height: 280px;
+    overflow-y: auto;
+}
+
+.records-detail-event {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    background: #f8fbff;
+    border: 1px solid #e1edf9;
+    border-radius: 14px;
+}
+
+.records-detail-event-time {
+    min-width: 52px;
+    color: #3569a8;
+    font-size: 13px;
+    font-weight: 800;
+}
+
+.records-detail-event-copy {
+    min-width: 0;
+}
+
+.records-detail-event-status {
+    color: #243345;
+    font-size: 14px;
+    font-weight: 800;
+}
+
+.records-detail-event-meta {
+    margin-top: 4px;
+    color: #6f7d8c;
+    font-size: 12px;
+    line-height: 1.5;
+}
+
+.records-detail-event-badge {
+    padding: 7px 12px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.records-detail-event-badge.focused {
+    background: #eaf8ef;
+    color: #1f8a4c;
+}
+
+.records-detail-event-badge.distracted {
+    background: #fff1f1;
+    color: #c24c49;
+}
+
+.records-detail-empty {
+    padding: 16px 18px;
+    border-radius: 14px;
+    background: #f7f9fc;
+    color: #708090;
+    font-weight: 700;
+}
+
+/* ================ SETTINGS PAGE ================ */
+
+.settings-container {
+    width: 60%;
+    max-width: 800px;
+    margin: 20px auto;
+}
+
+.setting-group {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.setting-group h2 {
+    margin-top: 0;
+    color: #333;
+    font-size: 20px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007BFF;
+    padding-bottom: 10px;
+}
+
+.setting-item {
+    margin-bottom: 25px;
+}
+
+.setting-item:last-child {
+    margin-bottom: 0;
+}
+
+.setting-item label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: 600;
+}
+
+.slider-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.slider-group input[type="range"] {
+    flex: 1;
+}
+
+.slider-group span {
+    min-width: 40px;
+    text-align: center;
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+
+.setting-description {
+    font-size: 14px;
+    color: #666;
+    margin-top: 5px;
+    font-style: italic;
+}
+
+input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+input[type="number"] {
+    width: 100px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-family: 'Nunito', sans-serif;
+}
+
+/* Center the settings buttons and give them more width. */
+.setting-group .action-btn {
+    display: inline-block;   /* Allow buttons to sit side by side. */
+    width: 48%;              /* Roughly half-width each, with a small gutter. */
+    margin: 15px 1%;         /* Vertical spacing plus horizontal separation. */
+    text-align: center;      /* Center the label text. */
+    box-sizing: border-box;  /* Prevent borders from forcing an early wrap. */
+}
+
+#save-settings {
+    display: block;
+    margin: 20px auto;
+}
+
+/* ================ HELP PAGE ================ */
+
+.help-container {
+    width: 70%;
+    max-width: 900px;
+    margin: 20px auto;
+}
+
+/* Fake ad block (Help page) */
+.fake-ad {
+    position: relative;
+    display: block;
+    width: min(600px, 90%);
+    margin: 10px auto 30px auto;
+    border: 1px solid #e5e5e5;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #fff;
+    text-decoration: none;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.fake-ad:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
+}
+
+.fake-ad img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.fake-ad-badge {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    background: rgba(0,0,0,0.75);
+    color: #fff;
+    font-size: 12px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    letter-spacing: 0.5px;
+}
+
+.fake-ad-cta {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    background: #111;
+    color: #fff;
+    font-size: 14px;
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+
+.help-section {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.help-section h2 {
+    color: #007BFF;
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+
+.help-section ol,
+.help-section ul {
+    line-height: 1.8;
+    color: #333;
+}
+
+.help-section p {
+    line-height: 1.6;
+    color: #333;
+}
+
+details {
+    margin: 15px 0;
+    cursor: pointer;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 5px;
+}
+
+summary {
+    font-weight: bold;
+    padding: 5px;
+    color: #007BFF;
+}
+
+details[open] summary {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+
+details p {
+    margin: 10px 0 0 0;
+}
+
+/* ================ SESSION SUMMARY MODAL ================ */
+/* These modal styles can be reused for future overlays. */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+
+.modal-content {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    max-width: 500px;
+    width: 90%;
+}
+
+.modal-content h2 {
+    margin-top: 0;
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.summary-stats {
+    margin-bottom: 30px;
+}
+
+.summary-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+}
+
+.summary-item:last-child {
+    border-bottom: none;
+}
+
+.summary-label {
+    font-weight: 600;
+    color: #666;
+}
+
+.summary-value {
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+
+.modal-content .btn-main {
+    display: block;
+    margin: 0 auto;
+    padding: 12px 40px;
+}
+
+/* ================ TIMELINE BLOCKS ================ */
+
+.timeline-block {
+    transition: opacity 0.2s;
+    border-radius: 2px;
+}
+
+.timeline-block:hover {
+    opacity: 0.7;
+}
+
+/* ================ RESPONSIVE DESIGN ================ */
+
+@media (max-width: 1200px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .badges-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .stats-grid,
+    .badges-grid {
+        grid-template-columns: 1fr;
+        width: 90%;
+    }
+
+    .settings-container,
+    .help-container,
+    .chart-container,
+    .sessions-list,
+    .records-controls {
+        width: 90%;
+    }
+
+    #control-panel {
+        width: 90%;
+        flex-wrap: wrap;
+    }
+
+    #display-area {
+        width: 90%;
+    }
+
+    #timeline-area {
+        width: 90%;
+    }
+
+    #frame-control {
+        width: 90%;
+        flex-direction: column;
+    }
+
+    .focus-inline-error-standalone {
+        width: 90%;
+    }
+
+    .focus-flow-overlay {
+        top: 70px;
+        right: 10px;
+        bottom: 10px;
+        left: 10px;
+    }
+
+    .focus-flow-card {
+        padding: 22px 20px;
+    }
+
+    .focus-flow-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .focus-flow-icon {
+        width: 92px;
+        height: 92px;
+    }
+
+    .focus-flow-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .focus-flow-steps {
+        grid-template-columns: 1fr;
+    }
+
+    .focus-flow-footer {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .focus-flow-button,
+    .focus-flow-secondary {
+        width: 100%;
+    }
+
+    .records-detail-modal {
+        width: 94vw;
+        padding: 22px 18px;
+    }
+
+    .records-detail-header,
+    .records-detail-section-head {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .records-detail-summary,
+    .records-detail-grid,
+    .records-detail-list {
+        grid-template-columns: 1fr;
+    }
+
+    .records-detail-event {
+        grid-template-columns: 1fr;
+        align-items: flex-start;
+    }
+}
+/* =========================================
+   SESSION RESULT OVERLAY
+   ========================================= */
+
+.session-result-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent backdrop. */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    z-index: 10;
+    animation: fadeIn 0.5s ease;
+    backdrop-filter: blur(5px); /* Optional background blur. */
+}
+
+.session-result-overlay h3 {
+    font-size: 32px;
+    margin-bottom: 30px;
+    color: #4cd137; /* Green title accent. */
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.session-result-overlay .result-item {
+    display: flex;
+    justify-content: space-between;
+    width: 200px; /* Keep the stat row compact. */
+    margin-bottom: 15px;
+    font-size: 20px;
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    padding-bottom: 5px;
+}
+
+.session-result-overlay .label {
+    color: #ccc;
+    font-weight: normal;
+}
+
+.session-result-overlay .value {
+    color: #fff;
+    font-weight: bold;
+    font-family: 'Courier New', monospace; /* Give the values a data-like look. */
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+}
+
+/* ================= Welcome modal styles ================= */
+.welcome-modal-overlay {
+position: fixed;
+top: 0; left: 0; right: 0; bottom: 0;
+background-color: rgba(0, 0, 0, 0.7);
+display: flex;
+justify-content: center;
+align-items: center;
+z-index: 9999;
+}
+
+.welcome-modal {
+background-color: #1e1e24;
+padding: 40px;
+border-radius: 15px;
+text-align: center;
+box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+border: 1px solid #333;
+}
+
+.welcome-modal h2 { margin-top: 0; color: #fff; }
+.welcome-modal p { margin-bottom: 30px; color: #ccc; }
+.welcome-buttons { display: flex; gap: 20px; justify-content: center; }
+
+/* ================= Top-left avatar styles ================= */
+.avatar-container {
+    position: absolute;
+    left: 20px;
+    cursor: pointer;
+    z-index: 1;
+}
+
+.avatar-circle {
+width: 40px;
+height: 40px;
+border-radius: 50%;
+display: flex;
+justify-content: center;
+align-items: center;
+font-weight: bold;
+font-size: 1.2rem;
+color: white;
+transition: all 0.3s ease;
+border: 2px solid transparent;
+}
+
+.avatar-circle.user { background-color: #555; }
+.avatar-circle.admin { background-color: #ffaa00; border-color: #fff; box-shadow: 0 0 10px rgba(255, 170, 0, 0.5); }
+
+/* ================ CALIBRATION OVERLAY ================ */
+
+.cal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(8, 15, 28, 0.94);
+  backdrop-filter: blur(6px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Nunito', sans-serif;
+}
+
+/* ---- header / instructions ---- */
+.cal-header {
+  position: absolute;
+  top: 36px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  pointer-events: none;
+}
+
+.cal-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cal-eyebrow-collect {
+  background: rgba(40, 167, 69, 0.18);
+  color: #5ee882;
+}
+
+.cal-eyebrow-verify {
+  background: rgba(0, 123, 255, 0.18);
+  color: #6bb8ff;
+}
+
+.cal-instruction {
+  margin: 10px 0 0;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+/* ---- target dot + ring ---- */
+.cal-target {
+  position: absolute;
+  transform: translate(-50%, -50%);
+}
+
+.cal-ring {
+  position: absolute;
+  left: -30px;
+  top: -30px;
+}
+
+.cal-dot {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  transition: box-shadow 0.3s ease;
+}
+
+/* ---- cancel button (matches focus-flow-secondary) ---- */
+.cal-cancel {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  padding: 12px 28px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Nunito', sans-serif;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.cal-cancel:hover {
+  background: rgba(255, 255, 255, 0.14);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+/* ---- done card (matches focus-flow-card style) ---- */
+.cal-done-card {
+  text-align: center;
+  padding: 36px 44px;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4);
+  animation: fadeIn 0.4s ease;
+}
+
+.cal-done-success {
+  background: linear-gradient(168deg, rgba(40, 167, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(40, 167, 69, 0.3);
+}
+
+.cal-done-fail {
+  background: linear-gradient(168deg, rgba(220, 53, 69, 0.15) 0%, rgba(20, 30, 48, 0.95) 60%);
+  border-color: rgba(220, 53, 69, 0.3);
+}
+
+.cal-done-eyebrow {
+  display: inline-block;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+}
+
+.cal-done-success .cal-done-eyebrow {
+  background: rgba(40, 167, 69, 0.2);
+  color: #5ee882;
+}
+
+.cal-done-fail .cal-done-eyebrow {
+  background: rgba(220, 53, 69, 0.2);
+  color: #f87171;
+}
+
+.cal-done-title {
+  margin: 0 0 8px;
+  font-size: 1.6rem;
+  color: #fff;
+}
+
+.cal-done-subtitle {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+/* ================= Home page 2x2 responsive button grid ================= */
+.home-button-grid {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  max-width: 360px;
+  margin: 40px auto 0;
+}
+
+.home-button-grid .btn-main {
+  width: 100%;
+  height: 60px; /* Keep all tiles at the same height. */
+  margin: 0; /* Remove default outer spacing. */
+  padding: 10px;
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  box-sizing: border-box; /* Prevent padding and borders from breaking the grid. */
+}
+
+/* Mobile-only scaling for screens below 600px. */
+@media (max-width: 600px) {
+  #top-menu {
+    justify-content: flex-start;
+    padding: 0 12px 0 68px;
+  }
+
+  .menu-btn {
+    padding: 10px 14px;
+    font-size: 0.92rem;
+  }
+
+  .separator {
+    margin: 0 2px;
+  }
+
+  .home-button-grid {
+    gap: 15px; 
+    max-width: 90%; 
+  }
+  
+  .home-button-grid .btn-main {
+    height: 50px;
+    font-size: 0.85rem; 
+  }
+}

src/src/App.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useRef, useEffect } from 'react';
+import './App.css';
+import { VideoManagerLocal } from './utils/VideoManagerLocal';
+
+import Home from './components/Home';
+import FocusPageLocal from './components/FocusPageLocal';
+import Achievement from './components/Achievement';
+import Records from './components/Records';
+import Help from './components/Help';
+
+function App() {
+  const [activeTab, setActiveTab] = useState('home');
+  const videoManagerRef = useRef(null);
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [sessionResult, setSessionResult] = useState(null); 
+  const [isTutorialActive, setIsTutorialActive] = useState(false);
+  const [hasSeenTutorial, setHasSeenTutorial] = useState(false);
+
+  useEffect(() => {
+    fetch('/api/history', { method: 'DELETE' })
+      .then(() => {
+        const backup = localStorage.getItem('focus_magic_backup');
+        if (backup) {
+          try {
+            const sessions = JSON.parse(backup);
+            fetch('/api/import', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(sessions)
+            });
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      })
+      .catch(err => console.error(err));
+
+    const callbacks = {
+      onSessionStart: () => {
+        setIsSessionActive(true);
+        setSessionResult(null);
+      },
+      onSessionEnd: (summary) => {
+        setIsSessionActive(false);
+        if (summary) setSessionResult(summary);
+        
+        fetch('/api/sessions?filter=all')
+          .then(res => res.json())
+          .then(data => {
+            if (data && Array.isArray(data)) {
+              localStorage.setItem('focus_magic_backup', JSON.stringify(data));
+            }
+          })
+          .catch(err => console.error(err));
+      }
+    };
+    videoManagerRef.current = new VideoManagerLocal(callbacks);
+
+    return () => {
+      if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
+    };
+  }, []);
+
+  const handleStartFocus = () => {
+    if (!hasSeenTutorial) {
+      setIsTutorialActive(true);
+    }
+    setActiveTab('focus');
+  };
+
+  const handleStartTutorial = () => {
+    setIsTutorialActive(true);
+    setActiveTab('focus');
+  };
+
+  return (
+    <div className="app-container">
+      <nav id="top-menu">
+        <button 
+          className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`} 
+          onClick={() => setActiveTab('home')}
+        >
+          Home
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={handleStartFocus}>
+          Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'achievement' ? 'active' : ''}`} onClick={() => setActiveTab('achievement')}>
+          My Achievement
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'records' ? 'active' : ''}`} onClick={() => setActiveTab('records')}>
+          My Records
+        </button>
+        <div className="separator"></div>
+
+        <button className={`menu-btn ${activeTab === 'help' ? 'active' : ''}`} onClick={() => setActiveTab('help')}>
+          Help
+        </button>
+      </nav>
+
+      {activeTab === 'home' && <Home onStartFocus={handleStartFocus} onStartTutorial={handleStartTutorial} />}
+
+      <FocusPageLocal
+        videoManager={videoManagerRef.current}
+        sessionResult={sessionResult}
+        setSessionResult={setSessionResult}
+        isActive={activeTab === 'focus'}
+        isTutorialActive={isTutorialActive}
+        setIsTutorialActive={setIsTutorialActive}
+        setHasSeenTutorial={setHasSeenTutorial}
+      />
+      {activeTab === 'achievement' && <Achievement />}
+      {activeTab === 'records' && <Records />}
+      {activeTab === 'help' && <Help />}
+    </div>
+  );
+}
+
+export default App;