rakadu1
/
visualizer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

HTML changes.

refactor/sync-centralize
RUSHIL AMBARISH KADU 5 months ago
parent
ffaf2a2209
commit
e85b031f32
2 changed files with 282 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 335
      steps/User_Manual.html
  2. 30
      steps/index.html

335
steps/User_Manual.html
View File

@ -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 {
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 800;
}
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); }
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);
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);
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;
@ -70,8 +111,9 @@
padding: 1rem;
text-align: center;
font-weight: 500;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
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,39 +142,70 @@
}
/* 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;
border: 1px solid var(--c-dark);
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
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>
@ -203,14 +369,14 @@
<div class="annotation" style="top: 8rem; left: 10rem;">
<strong>1. Radar Canvas</strong>
<p>Main p5.js visualization. Shows:<br>
- Point Clouds (Points)<br>
- Object Trajectories (Lines)<br>
- Track Markers (+)<br>
- Ego Vehicle (Box at bottom)
- Point Clouds (Points)<br>
- Object Trajectories (Lines)<br>
- Track Markers (+)<br>
- Ego Vehicle (Box at bottom)
</p>
<p class="mt-1">Overlays (top-left):<br>
<code>Frame: 123</code> <code>Time: 12:30:01.456</code><br>
<code>Mode: Color by SNR</code> <code>Drift: -15ms</code>
<code>Frame: 123</code> <code>Time: 12:30:01.456</code><br>
<code>Mode: Color by SNR</code> <code>Drift: -15ms</code>
</p>
</div>
@ -218,8 +384,8 @@
<div class="annotation" style="top: 8rem; right: 8rem;">
<strong>2. Video Player</strong>
<p>Shows the synchronized video feed.<br>
Overlays (top-left):<br>
<code>Frame: 110</code> <code>Time: 12:30:01.440</code>
Overlays (top-left):<br>
<code>Frame: 110</code> <code>Time: 12:30:01.440</code>
</p>
</div>
@ -227,7 +393,7 @@
<div class="annotation" style="bottom: 17rem; right: 9rem;">
<strong>3. Speed Graph</strong>
<p>Shows Ego Speed vs. CAN Speed over time.<br>
A red line indicates the current playback position.
A red line indicates the current playback position.
</p>
</div>
@ -235,9 +401,9 @@
<div class="annotation" style="bottom: 5rem; left: 25%;">
<strong>4. Control Bar & Timeline</strong>
<p>Main controls for playback.<br>
- <kbd>Play</kbd> / <kbd>Pause</kbd> (<kbd>Space</kbd>), <kbd>Stop</kbd><br>
- Timeline slider (Click, drag, or <kbd>Scroll Wheel</kbd> to seek)<br>
- Playback <kbd>Speed</kbd> slider
- <kbd>Play</kbd> / <kbd>Pause</kbd> (<kbd>Space</kbd>), <kbd>Stop</kbd><br>
- Timeline slider (Click, drag, or <kbd>Scroll Wheel</kbd> to seek)<br>
- Playback <kbd>Speed</kbd> slider
</p>
</div>
@ -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>

30
steps/index.html
View File

@ -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" />

Write Preview
Loading…
Cancel
Save