complete asl course page with tree

projecthearthstone.in/Courses/ASL course/course-data.json

@@ -0,0 +1,144 @@
+{
+  "course": {
+    "title": "ASL Mastery",
+    "description": "American Sign Language from foundations to fluency"
+  },
+  "sections": [
+    {
+      "id": 1,
+      "key": "foundations",
+      "label": "Foundations",
+      "theme": "emerald",
+      "color": "#22dd88",
+      "portalColor": "34,221,136",
+      "description": "The core building blocks of ASL, including history, handshape, posture, fingerspelling, and expression.",
+      "videos": [
+        { "id": "v1_1", "title": "What is ASL?", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_2", "title": "History of ASL", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_3", "title": "Deaf Culture and Community", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_4", "title": "How to Hold Your Hands and Body Posture", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_5", "title": "Fingerspelling A–M", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_6", "title": "Fingerspelling N–Z", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_7", "title": "Numbers 1–100", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_8", "title": "Eye Contact and Facial Expressions", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v1_9", "title": "Unit Test", "youtube": "www.youtube.com", "duration": "", "isTest": true }
+      ]
+    },
+    {
+      "id": 2,
+      "key": "everyday-vocab",
+      "label": "Everyday Vocab",
+      "theme": "frost",
+      "color": "#4499ff",
+      "portalColor": "68,153,255",
+      "description": "Practical everyday vocabulary, including family, pronouns, places, people, and asking the six W questions.",
+      "locked": true,
+      "videos": [
+        { "id": "v2_1", "title": "Family Signs (Naming)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v2_2", "title": "Pronouns and Indications", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v2_3", "title": "Describing People, Places, and Objects", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v2_4", "title": "At-Home Vocabulary", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v2_5", "title": "Cities and Public Places", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v2_6", "title": "Asking and Responding to the 6 W Questions", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v2_7", "title": "Responding to or Asking for Help (Emergency)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v2_8", "title": "Unit Test", "youtube": "www.youtube.com", "duration": "", "isTest": true }
+      ]
+    },
+    {
+      "id": 3,
+      "key": "quantity-time",
+      "label": "Quantity & Time",
+      "theme": "gold",
+      "color": "#ffaa22",
+      "portalColor": "255,170,34",
+      "description": "Numbers up to 1000, reading clocks, relative time, seasons, years, and money.",
+      "locked": true,
+      "videos": [
+        { "id": "v3_1", "title": "Numbers 1–1000", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v3_2", "title": "Reading and Interpreting Time on a Clock", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v3_3", "title": "Days, Weeks, and Months", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v3_4", "title": "Relative Time (Today, Tomorrow, Yesterday…)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v3_5", "title": "Seasons and Years", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v3_6", "title": "Money and Prices", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v3_7", "title": "Unit Test", "youtube": "www.youtube.com", "duration": "", "isTest": true }
+      ]
+    },
+    {
+      "id": 4,
+      "key": "actions-feelings",
+      "label": "Actions & Feelings",
+      "theme": "hellfire",
+      "color": "#ff5533",
+      "portalColor": "255,85,51",
+      "description": "Common action words, emotions, facial grammar, body/health markers, adverbs, and question types.",
+      "locked": true,
+      "videos": [
+        { "id": "v4_1", "title": "Common Action Words (Eat, Drink, Go…)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v4_2", "title": "Negation (No, Don't, Not)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v4_3", "title": "Emotions", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v4_4", "title": "Facial Indicators for Emotions", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v4_5", "title": "Body and Health Markers (Hungry, Tired, Sick…)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v4_6", "title": "Adverbs in ASL", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v4_7", "title": "Question Types: Yes/No vs. 6W Questions", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v4_8", "title": "Unit Test", "youtube": "www.youtube.com", "duration": "", "isTest": true }
+      ]
+    },
+    {
+      "id": 5,
+      "key": "grammar",
+      "label": "ASL Grammar",
+      "theme": "toxic",
+      "color": "#66cc00",
+      "portalColor": "102,204,0",
+      "description": "ASL sentence structure, spatial references, tense, classifiers, perspective, rhetorics, and conditionals.",
+      "locked": true,
+      "videos": [
+        { "id": "v5_1", "title": "ASL Sentence Structure (Topic-Comment)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v5_2", "title": "Setting Spatial References", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v5_3", "title": "Tense Types in ASL", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v5_4", "title": "Classifiers (Descriptive Signs)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v5_5", "title": "Perspective and Directionality (Reflexive Verbs)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v5_6", "title": "Rhetorical Questions", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v5_7", "title": "Conditionals in ASL", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v5_8", "title": "Unit Test", "youtube": "www.youtube.com", "duration": "", "isTest": true }
+      ]
+    },
+    {
+      "id": 6,
+      "key": "conversation",
+      "label": "Conversation",
+      "theme": "blood",
+      "color": "#cc0022",
+      "portalColor": "180,0,34",
+      "description": "Opening and closing conversations, clarification, and real-world conversational contexts.",
+      "locked": true,
+      "videos": [
+        { "id": "v6_1", "title": "Opening and Closing a Conversation", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v6_2", "title": "Clarifying, Repeating, and Asking Again", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v6_3", "title": "Medical Conversations (Vocab and Flow)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v6_4", "title": "Shopping Conversations", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v6_5", "title": "School and Sports Conversations", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v6_6", "title": "Unit Test", "youtube": "www.youtube.com", "duration": "", "isTest": true }
+      ]
+    },
+    {
+      "id": 7,
+      "key": "fluency",
+      "label": "Fluency",
+      "theme": "arcane",
+      "color": "#aa55ff",
+      "portalColor": "140,60,255",
+      "description": "Regional variation, initialized signs, mouthing, speed reading, ASL literature, and the final challenge.",
+      "locked": true,
+      "boss": true,
+      "videos": [
+        { "id": "v7_1", "title": "Regional and Stylistic Variation", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v7_2", "title": "Initialized Signs (F for Family, etc.)", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v7_3", "title": "Mouthing Words in ASL", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v7_4", "title": "Reading Fast Signers", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v7_5", "title": "ASL Literature and Its Importance", "youtube": "www.youtube.com", "duration": "" },
+        { "id": "v7_6", "title": "Unit Test", "youtube": "www.youtube.com", "duration": "", "isTest": true }
+      ]
+    }
+  ]
+}

projecthearthstone.in/Courses/ASL course/course_video/course_video.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ASL Course - Playback</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="../../../Navbar/styles.css">
+</head>
+<body>
+<!-- <div id="navbarcontainer"></div> -->
+<canvas id="star-canvas"></canvas>
+<div id="loading-overlay">
+  <div class="loading-glyph">ASL Mastery</div>
+  <div class="loading-sub">Loading course…</div>
+</div>
+<div id="unlock-toast">
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M3 8.5l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  <span id="unlock-toast-text">Lesson unlocked</span>
+</div>
+
+<div id="app">
+
+  <div id="sidebar">
+    <div id="sidebar-header">
+
+      <a id="btn-tree" href="../index.html" title="Return to the Tree Map">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <rect x="7" y="10" width="2" height="4" rx="1" fill="currentColor" opacity="0.75"/>
+          <path d="M8 14 C5.5 14 3.5 15.2 3.5 15.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
+          <path d="M8 14 C10.5 14 12.5 15.2 12.5 15.2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
+          <circle cx="8" cy="5.5" r="5" fill="currentColor" opacity="0.9"/>
+          <circle cx="4.5" cy="7.5" r="3" fill="currentColor" opacity="0.6"/>
+          <circle cx="11.5" cy="7.5" r="3" fill="currentColor" opacity="0.6"/>
+        </svg>
+        Back to Tree
+      </a>
+
+      <div id="sidebar-section-name">—</div>
+      <div id="sidebar-section-desc"></div>
+    </div>
+    <div id="section-tabs"></div>
+    <div id="video-list"></div>
+  </div>
+
+  <div id="main">
+    <div id="video-frame-wrap">
+      <iframe id="video-frame"
+        src="about:blank"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen></iframe>
+
+      <div id="video-locked-overlay">
+        <div class="locked-overlay-icon">
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+            <path d="M16 22V17a8 8 0 0116 0v5" stroke="rgba(255,255,255,0.4)" stroke-width="2.5" stroke-linecap="round"/>
+            <rect x="10" y="22" width="28" height="20" rx="4" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.25)" stroke-width="2"/>
+            <circle cx="24" cy="33" r="3" fill="rgba(255,255,255,0.3)"/>
+            <line x1="24" y1="33" x2="24" y2="39" stroke="rgba(255,255,255,0.3)" stroke-width="2.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <div class="locked-overlay-title">Lesson Locked</div>
+        <div class="locked-overlay-hint">Complete the previous lesson to unlock this one.</div>
+      </div>
+
+      <div id="complete-btn-wrap">
+        <button id="complete-btn">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M2.5 7.5l3 3 6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          Mark Complete
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div id="bottom-bar">
+    <div id="bottom-bar-left">
+      <div id="current-video-title">—</div>
+      <div id="current-video-meta"></div>
+    </div>
+    <div id="video-nav">
+      <button class="vnav-btn" id="btn-prev-vid">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <path d="M9 2L4.5 7 9 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Prev Lesson
+      </button>
+      <button class="vnav-btn primary" id="btn-next-vid">
+        Next Lesson
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <path d="M5 2l4.5 5L5 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+</div>
+<script type="module" src="../../../Navbar/script.js"></script>
+<script src="script.js"></script>
+</body>
+</html>