HTML changes.

5 months ago · e85b031f32
2 changed files with 282 additions and 121 deletions
--- a/steps/User_Manual.html
+++ b/steps/User_Manual.html
@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -7,31 +8,68 @@
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=Roboto+Mono:wght@400;500&display=swap"
        rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc; /* slate-50 */
            color: #1e293b; /* slate-800 */
            background-color: #f8fafc;
            /* slate-50 */
            color: #1e293b;
            /* slate-800 */
        }
        .font-mono {
            font-family: 'Roboto Mono', monospace;
        }
        .font-mono { font-family: 'Roboto Mono', monospace; }
        /* Infographic Palette */
        :root {
            --c-primary: #0284c7; /* sky-600 */
            --c-primary-light: #f0f9ff; /* sky-50 */
            --c-secondary: #059669; /* emerald-600 */
            --c-accent: #db2777; /* pink-600 */
            --c-dark: #334155; /* slate-700 */
            --c-light: #f1f5f9; /* slate-100 */
            --c-text: #374151; /* gray-700 */
            --c-text-light: #64748b; /* slate-500 */
            --c-primary: #0284c7;
            /* sky-600 */
            --c-primary-light: #f0f9ff;
            /* sky-50 */
            --c-secondary: #059669;
            /* emerald-600 */
            --c-accent: #db2777;
            /* pink-600 */
            --c-dark: #334155;
            /* slate-700 */
            --c-light: #f1f5f9;
            /* slate-100 */
            --c-text: #374151;
            /* gray-700 */
            --c-text-light: #64748b;
            /* slate-500 */
        }
        h1,
        h2,
        h3 {
            font-weight: 700;
            letter-spacing: -0.025em;
            color: var(--c-dark);
        }
        h1, h2, h3 { font-weight: 700; letter-spacing: -0.025em; color: var(--c-dark); }
        h1 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 800; }
        h2 { font-size: 1.875rem; line-height: 2.25rem; border-bottom: 2px solid var(--c-light); padding-bottom: 0.5rem; }
        h3 { font-size: 1.25rem; line-height: 1.75rem; color: var(--c-primary); }
        h1 {
            font-size: 2.25rem;
            line-height: 2.5rem;
            font-weight: 800;
        }
        h2 {
            font-size: 1.875rem;
            line-height: 2.25rem;
            border-bottom: 2px solid var(--c-light);
            padding-bottom: 0.5rem;
        }
        h3 {
            font-size: 1.25rem;
            line-height: 1.75rem;
            color: var(--c-primary);
        }
        .section-icon {
            font-size: 2rem;
@ -46,16 +84,19 @@
        .feature-card {
            background-color: white;
            border: 1px solid #e2e8f0; /* slate-200 */
            border: 1px solid #e2e8f0;
            /* slate-200 */
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease-in-out;
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            border-color: var(--c-primary);
        }
        .feature-card-icon {
            font-size: 1.875rem;
            line-height: 2.25rem;
@ -72,6 +113,7 @@
            font-weight: 500;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        .flow-arrow {
            color: var(--c-primary);
            font-size: 2.25rem;
@ -82,10 +124,13 @@
        /* Keyboard Shortcut Styling */
        kbd {
            background-color: #e2e8f0; /* slate-200 */
            border: 1px solid #cbd5e1; /* slate-300 */
            background-color: #e2e8f0;
            /* slate-200 */
            border: 1px solid #cbd5e1;
            /* slate-300 */
            border-bottom-width: 2px;
            color: #334155; /* slate-700 */
            color: #334155;
            /* slate-700 */
            border-radius: 0.375rem;
            padding: 0.125rem 0.5rem;
            font-family: 'Roboto Mono', monospace;
@ -97,22 +142,50 @@
        }
        /* File Tree Styling */
        .file-tree { list-style: none; padding-left: 0; }
        .file-tree li { margin-bottom: 0.25rem; padding-left: 1.75rem; position: relative; font-family: 'Roboto Mono', monospace; color: var(--c-text); }
        .file-tree .folder::before { content: '📁'; position: absolute; left: 0; color: #facc15; } /* yellow-400 */
        .file-tree .file::before { content: '📄'; position: absolute; left: 0; color: #60a5fa; } /* blue-400 */
        .file-tree {
            list-style: none;
            padding-left: 0;
        }
        .file-tree li {
            margin-bottom: 0.25rem;
            padding-left: 1.75rem;
            position: relative;
            font-family: 'Roboto Mono', monospace;
            color: var(--c-text);
        }
        .file-tree .folder::before {
            content: '📁';
            position: absolute;
            left: 0;
            color: #facc15;
        }
        /* yellow-400 */
        .file-tree .file::before {
            content: '📄';
            position: absolute;
            left: 0;
            color: #60a5fa;
        }
        /* blue-400 */
        /* Wireframe Annotation Styling */
        .wireframe-box {
            background-color: var(--c-light);
            border: 2px dashed #94a3b8; /* slate-400 */
            border: 2px dashed #94a3b8;
            /* slate-400 */
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b; /* slate-500 */
            color: #64748b;
            /* slate-500 */
            font-weight: 500;
        }
        .annotation {
            position: absolute;
            background-color: white;
@ -122,14 +195,17 @@
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 10;
        }
        .annotation p {
            font-size: 0.875rem;
            line-height: 1.25rem;
            color: var(--c-text);
        }
        .annotation strong {
            color: var(--c-dark);
        }
        .annotation code {
            font-size: 0.75rem;
            line-height: 1rem;
@ -140,44 +216,134 @@
        }
        @media (max-width: 768px) {
            .flow-diagram { flex-direction: column; }
            .flow-arrow { transform: rotate(90deg); }
            .flow-diagram {
                flex-direction: column;
            }
            .flow-arrow {
                transform: rotate(90deg);
            }
        }
        /* ===== Compact layout tweaks ===== */
        /* 1) Make the page container more compact (reduces top/bottom padding) */
        .container {
            /* original used Tailwind classes; override with slightly smaller padding */
            padding-top: 1rem !important;
            padding-bottom: 1.5rem !important;
            /* Remove max-width to allow the container to use more screen real-estate */
            /* max-width: 1100px; */
        }
        /* 2) Reduce space above/below each section heading and make them compact */
        section {
            padding-top: 0.25rem;
            padding-bottom: 0.75rem;
            margin-top: 2px;
            margin-bottom: 0.5rem;
        }
        /* 3) Make the H2 divider line darker and thicker for readability */
        h2 {
            /* increase thickness & use dark color */
            border-bottom: 3px solid var(--c-dark);
            padding-bottom: 0.4rem; /* compact the space below text and the line */
            margin-top: 2px; /* Set top margin to 2px */
            margin-bottom: 2px; /* Set bottom margin to 2px */
            font-size: 1.5rem;
            /* slightly smaller to fit more content (optional) */
        }
        /* 4) Reduce hero spacing (title and icon) */
        section.text-center {
            margin-top: 0.25rem;
            margin-bottom: 0.5rem;
        }
        .section-icon {
            margin-bottom: 0.25rem;
        }
        /* 5) Reduce vertical gaps in the flow diagram and feature grids */
        .flow-diagram {
            gap: 0.5rem;
        }
        .feature-card {
            margin: 0;
        }
        /* 6) Reduce large fixed heights used for mockups; make them slightly smaller */
        .grid .wireframe-box.h-500px {
            height: 380px;
        }
        /* main canvas smaller */
        .grid .wireframe-box.h-300px {
            height: 240px;
        }
        /* video player smaller */
        .wireframe-box.h-32 {
            height: 110px;
        }
        /* control bar smaller */
        /* 7) If annotations are creating top whitespace due to absolute positioning,
   you may need to bring them higher — small reduction of top offsets:
 */
        .annotation {
            transform: translateY(-0.25rem);
        }
        /* 8) Optional: globally tighten font leading to reduce used vertical space */
        body,
        h1,
        h2,
        h3,
        p,
        li {
            line-height: 1.15;
            line-height: 1.3;
        }
    </style>
 </head>
 <body class="antialiased">
    <div class="container mx-auto px-4 py-12 max-w-6xl space-y-16">
 <body class="antialiased">
    <div class="container mx-auto px-4 space-y-6">
        <!-- 1. Hero Section -->
        <section class="text-center">
            <div class="section-icon">📡️ 🎬</div>
            <h1 class="text-4xl md:text-5xl">Radar & Video Synchronizer</h1>
            <p class="text-xl text-slate-600 max-w-3xl mx-auto mt-4">
            <h1 class="text-3xl md:text-4xl">📡️Radar & 🎬Video Synchronizer</h1>
            <!-- <p class="text-lg text-slate-600 max-w-3xl mx-auto mt-2">
                An infographic user manual for the high-precision visualization tool.
            </p>
            </p> -->
        </section>
        <!-- 2. How to Use (30-Second Guide) -->
        <section>
            <h2 class="text-center mb-8">How to Use (The 30-Second Guide)</h2>
            <div class="flow-diagram flex flex-col md:flex-row items-stretch justify-center gap-4 md:gap-8">
            <h2 class="text-center mb-4">How to Use (The 30-Second Guide)</h2>
            <div class="flow-diagram flex flex-col md:flex-row items-stretch justify-center gap-2 md:gap-4">
                <div class="flow-step flex-1">
                    <span class="text-3xl">1️⃣</span>
                    <h3 class="mt-2">Load Files</h3>
                    <p class="text-sm text-slate-600">Drag & drop your <kbd>.json</kbd> and <kbd>.mp4</kbd> files onto the window, or use the <kbd>Load JSON</kbd> / <kbd>Load Video</kbd> buttons.</p>
                    <h3>Load Files</h3>
                    <p class="text-sm text-slate-600">Drag & drop your <kbd>.json</kbd> and <kbd>.mp4</kbd> files onto
                        the window, or use the <kbd>Load JSON</kbd> / <kbd>Load Video</kbd> buttons.</p>
                </div>
                <div class="flow-arrow self-center">➔</div>
                <div class="flow-step flex-1">
                    <span class="text-3xl">2️⃣</span>
                    <h3 class="mt-2">Play & Sync</h3>
                    <p class="text-sm text-slate-600">Press <kbd>Play</kbd> (or <kbd>Spacebar</kbd>). The app automatically syncs the radar data to the video based on their timestamps.</p>
                    <h3>Play & Sync</h3>
                    <p class="text-sm text-slate-600">Press <kbd>Play</kbd> (or <kbd>Spacebar</kbd>). The app
                        automatically syncs the radar data to the video based on their timestamps.</p>
                </div>
                <div class="flow-arrow self-center">➔</div>
                <div class="flow-step flex-1">
                    <span class="text-3xl">3️⃣</span>
                    <h3 class="mt-2">Explore & Analyze</h3>
                    <p class="text-sm text-slate-600">Use the timeline, sidebar (<kbd>M</kbd>), zoom (<kbd>G</kbd>), and Data Explorer (<kbd>I</kbd>) to analyze the synchronized data.</p>
                    <h3>Explore & Analyze</h3>
                    <p class="text-sm text-slate-600">Use the timeline, sidebar (<kbd>M</kbd>), zoom (<kbd>G</kbd>), and
                        Data Explorer (<kbd>I</kbd>) to analyze the synchronized data.</p>
                </div>
            </div>
        </section>
@ -267,7 +433,9 @@
                        <h3>File Loading & Caching</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        Load <kbd>.json</kbd> and <kbd>.mp4</kbd> files via <strong>Drag & Drop</strong> anywhere on the page or by using the <kbd>Load</kbd> buttons. Files are cached in `IndexedDB` for instant reloads.
                        Load <kbd>.json</kbd> and <kbd>.mp4</kbd> files via <strong>Drag & Drop</strong> anywhere on the
                        page or by using the <kbd>Load</kbd> buttons. Files are cached in `IndexedDB` for instant
                        reloads.
                    </p>
                </div>
@ -278,7 +446,9 @@
                        <h3>High-Precision Sync</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        The app uses a `performance.now()` master clock to drive playback, correcting any video drift. The <strong>time offset</strong> is automatically calculated from filenames (e.g., `fHist_...` and `WIN_...`).
                        The app uses a `performance.now()` master clock to drive playback, correcting any video drift.
                        The <strong>time offset</strong> is automatically calculated from filenames (e.g., `fHist_...`
                        and `WIN_...`).
                    </p>
                </div>
@ -289,7 +459,8 @@
                        <h3>Advanced Timeline Control</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        Click or drag the timeline to seek. You can also hover your <strong>mouse wheel</strong> over the slider to seek frame-by-frame (slow scroll) or scrub quickly (fast scroll).
                        Click or drag the timeline to seek. You can also hover your <strong>mouse wheel</strong> over
                        the slider to seek frame-by-frame (slow scroll) or scrub quickly (fast scroll).
                    </p>
                </div>
@ -300,8 +471,11 @@
                        <h3>Display Settings Sidebar (<kbd>M</kbd>)</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        Toggle visibility of: <strong>Tracks</strong> (<kbd>T</kbd>), <strong>Details</strong> (<kbd>D</kbd>), <strong>Predicted Pos</strong> (<kbd>P</kbd>), <strong>Covariance</strong>, and <strong>Confirmed Tracks</strong>.
                        <br><strong>Color Modes:</strong> Switch between SNR (<kbd>1</kbd>), Cluster (<kbd>2</kbd>), Inlier (<kbd>3</kbd>), or Stationary (<kbd>4</kbd>).
                        Toggle visibility of: <strong>Tracks</strong> (<kbd>T</kbd>), <strong>Details</strong>
                        (<kbd>D</kbd>), <strong>Predicted Pos</strong> (<kbd>P</kbd>), <strong>Covariance</strong>, and
                        <strong>Confirmed Tracks</strong>.
                        <br><strong>Color Modes:</strong> Switch between SNR (<kbd>1</kbd>), Cluster (<kbd>2</kbd>),
                        Inlier (<kbd>3</kbd>), or Stationary (<kbd>4</kbd>).
                        <br><strong>TTC Colors:</strong> Customize the Time-to-Collision (TTC) risk colors.
                    </p>
                </div>
@ -313,7 +487,9 @@
                        <h3>"GOD MODE" Zoom (<kbd>G</kbd>)</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        Activates a separate, high-fidelity p5.js canvas that follows your mouse, showing a <strong>magnified view</strong>. Hover over points/tracks to see a detailed tooltip. Use the <strong>mouse wheel</strong> while in this mode to zoom in/out.
                        Activates a separate, high-fidelity p5.js canvas that follows your mouse, showing a
                        <strong>magnified view</strong>. Hover over points/tracks to see a detailed tooltip. Use the
                        <strong>mouse wheel</strong> while in this mode to zoom in/out.
                    </p>
                </div>
@ -338,7 +514,9 @@
                        <h3>CAN Speed Integration</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        The <kbd>Load CAN</kbd> button has been removed. The visualizer now expects CAN speed data (<code>canVehSpeed_kmph</code>) to be included <strong>directly within the main JSON file</strong>, associated with each radar frame.
                        The <kbd>Load CAN</kbd> button has been removed. The visualizer now expects CAN speed data
                        (<code>canVehSpeed_kmph</code>) to be included <strong>directly within the main JSON
                            file</strong>, associated with each radar frame.
                    </p>
                </div>
@ -349,7 +527,9 @@
                        <h3>Session Management</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        <kbd>Save Session</kbd> downloads a <kbd>.json</kbd> file with your current file names, offset, and all UI toggle states. <kbd>Load Session</kbd> restores this state (requires files to be cached).
                        <kbd>Save Session</kbd> downloads a <kbd>.json</kbd> file with your current file names, offset,
                        and all UI toggle states. <kbd>Load Session</kbd> restores this state (requires files to be
                        cached).
                    </p>
                </div>
@ -360,7 +540,8 @@
                        <h3>Web Worker Parsing</h3>
                    </div>
                    <p class="text-sm text-slate-600 mt-2">
                        Large JSON files are parsed in a background <strong>Web Worker</strong> using a streaming parser. This prevents the UI from freezing and shows a real-time progress bar.
                        Large JSON files are parsed in a background <strong>Web Worker</strong> using a streaming
                        parser. This prevents the UI from freezing and shows a real-time progress bar.
                    </p>
                </div>
@ -454,23 +635,28 @@
                <!-- Setup Guide -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="mb-4">Local Setup Guide</h3>
                    <p class="text-sm text-slate-600 mb-4">The app must be run from a local server due to browser security rules for modules.</p>
                    <p class="text-sm text-slate-600 mb-4">The app must be run from a local server due to browser
                        security rules for modules.</p>
                    <ol class="space-y-3">
                        <li class="flex items-start">
                            <span class="flow-step !p-2 !rounded-full w-8 h-8 mr-3 text-sm">1</span>
                            <span class="text-sm text-slate-600">Run <kbd>Visualization_Start.bat</kbd>. This script checks for Python 3 and starts the server for you.</span>
                            <span class="text-sm text-slate-600">Run <kbd>Visualization_Start.bat</kbd>. This script
                                checks for Python 3 and starts the server for you.</span>
                        </li>
                        <li class="flex items-start">
                            <span class="flow-step !p-2 !rounded-full w-8 h-8 mr-3 text-sm">2</span>
                            <span class="text-sm text-slate-600">Your browser should open to `http://localhost:8000` automatically.</span>
                            <span class="text-sm text-slate-600">Your browser should open to `http://localhost:8000`
                                automatically.</span>
                        </li>
                        <li class="flex items-start">
                            <span class="flow-step !p-2 !rounded-full w-8 h-8 mr-3 text-sm">3</span>
                            <span class="text-sm text-slate-600"><strong>Keep the black terminal window open</strong> while you use the app. Close it to stop the server.</span>
                            <span class="text-sm text-slate-600"><strong>Keep the black terminal window open</strong>
                                while you use the app. Close it to stop the server.</span>
                        </li>
                        <li class="flex items-start">
                            <span class="flow-step !p-2 !rounded-full w-8 h-8 mr-3 text-sm">4</span>
                            <span class="text-sm text-slate-600">If the `.bat` fails, run <kbd>python_check.bat</kbd> to diagnose, or manually run `python -m http.server 8000` in the `steps` folder.</span>
                            <span class="text-sm text-slate-600">If the `.bat` fails, run <kbd>python_check.bat</kbd> to
                                diagnose, or manually run `python -m http.server 8000` in the `steps` folder.</span>
                        </li>
                    </ol>
                </div>
@ -480,10 +666,11 @@
        <!-- Footer -->
        <footer class="text-center mt-12 text-slate-500 text-sm">
            <p>This infographic was generated based on the project's readme.md and context.md files.</p>
            <p>This infographic was auto-generated based on the project's readme.md and context.md files.</p>
        </footer>
    </div>
 </body>
 </html>
--- a/steps/index.html
+++ b/steps/index.html
@ -223,7 +223,7 @@
 </head>
 <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 flex flex-col min-h-screen">
  <header class="bg-white dark:bg-gray-800 shadow-md p-4 z-20 relative">
  <header class="bg-white dark:bg-gray-800 shadow-md pt-0 px-4 pb-4 z-20 relative">
    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
      Radar and Video Synchronizer
    </h1>
@ -608,12 +608,11 @@
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full h-full mx-8 my-4 relative flex flex-col">
      <!-- Header -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10 rounded-t-2xl">
      <div class="flex items-center justify-between px-6 py-1 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10 rounded-t-2xl">
        <div class="flex items-center gap-3">
          <span class="text-3xl">📚</span>
          <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">User Manual</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Quick-Start Guide & Reference</p>
          </div>
        </div>
        <button id="guide-modal-close-btn" class="text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full p-2 transition-colors">
@ -647,31 +646,6 @@
    </div>
  </div>
  <!-- USER GUIDE MODAL -->
  <div id="guide-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-80 backdrop-blur-sm p-4">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full h-full mx-8 my-4 relative flex flex-col">
      <!-- Header -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-900 z-10 rounded-t-2xl">
        <div class="flex items-center gap-3">
          <span class="text-3xl">📚</span>
          <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white">User Manual</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Quick-Start Guide & Reference</p>
          </div>
        </div>
        <button id="guide-modal-close-btn" class="text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full p-2 transition-colors">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <!-- Iframe Content -->
      <iframe id="user-manual-iframe" src="User_Manual.html" class="flex-grow w-full border-0 rounded-b-2xl" style="min-height: 400px;"></iframe>
    </div>
  </div>
  <input type="file" id="json-file-input" class="hidden" accept=".json" />
  <input type="file" id="video-file-input" class="hidden" accept="video/*" />
  <input type="file" id="session-file-input" class="hidden" accept=".json" />