💬 ЭТАП 4. Speak Brave 10 (психо-мотивационный модуль)

Подэтап 4.1 — Структура блока

Добавить поле hasSpeakBrave = true в Lesson.

Создать компонент “Speak Brave Player”.

Создать шаблон: видео мотивации + голосовое задание + рефлексия.

components/speak-brave-player.js

@@ -0,0 +1,152 @@
+class SpeakBravePlayer extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin: 2rem 0;
+        }
+        .container {
+          background: rgba(15, 23, 42, 0.7);
+          backdrop-filter: blur(10px);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 1rem;
+          padding: 2rem;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 1.5rem;
+        }
+        .icon {
+          width: 3rem;
+          height: 3rem;
+          background: rgba(124, 58, 237, 0.2);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 1rem;
+        }
+        h2 {
+          font-size: 1.5rem;
+          font-weight: 600;
+          margin: 0;
+          background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+        .video-container {
+          margin-bottom: 2rem;
+          border-radius: 0.5rem;
+          overflow: hidden;
+        }
+        .task-card, .reflection-card {
+          background: rgba(30, 41, 59, 0.5);
+          border-radius: 0.5rem;
+          padding: 1.5rem;
+          margin-bottom: 1.5rem;
+        }
+        h3 {
+          font-size: 1.25rem;
+          font-weight: 500;
+          margin-top: 0;
+          margin-bottom: 1rem;
+        }
+        .task-instructions {
+          margin-bottom: 1.5rem;
+          line-height: 1.6;
+        }
+        .timer {
+          font-size: 1.5rem;
+          font-weight: 600;
+          color: #7c3aed;
+          margin-bottom: 1rem;
+        }
+        .record-btn {
+          background: #7c3aed;
+          color: white;
+          border: none;
+          padding: 0.75rem 1.5rem;
+          border-radius: 0.5rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: background 0.2s;
+          display: flex;
+          align-items: center;
+        }
+        .record-btn:hover {
+          background: #6d28d9;
+        }
+        .record-btn i {
+          margin-right: 0.5rem;
+        }
+        .reflection-textarea {
+          width: 100%;
+          min-height: 120px;
+          background: rgba(15, 23, 42, 0.5);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 0.5rem;
+          padding: 1rem;
+          color: white;
+          font-family: inherit;
+          margin-bottom: 1rem;
+        }
+        .submit-btn {
+          background: #2563eb;
+          color: white;
+          border: none;
+          padding: 0.75rem 1.5rem;
+          border-radius: 0.5rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+        .submit-btn:hover {
+          background: #1d4ed8;
+        }
+      </style>
+      <div class="container">
+        <div class="header">
+          <div class="icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+            </svg>
+          </div>
+          <h2>Speak Brave Challenge</h2>
+        </div>
+
+        <div class="video-container">
+          <iframe width="100%" height="400" src="https://www.youtube.com/embed/example" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </div>
+
+        <div class="task-card">
+          <h3>Voice Challenge</h3>
+          <div class="task-instructions">
+            <p>Speak your truth boldly for 1 minute. Express yourself freely without hesitation or self-censorship.</p>
+            <p>Focus on: Confidence, Clarity, and Courage</p>
+          </div>
+          <div class="timer">01:00</div>
+          <button class="record-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"></circle>
+              <circle cx="12" cy="12" r="3"></circle>
+            </svg>
+            Start Recording
+          </button>
+        </div>
+
+        <div class="reflection-card">
+          <h3>Reflection</h3>
+          <p>How did this challenge make you feel? What did you learn about yourself?</p>
+          <textarea class="reflection-textarea" placeholder="Write your reflection here..."></textarea>
+          <button class="submit-btn">Submit Reflection</button>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('speak-brave-player', SpeakBravePlayer);

index.html

@@ -224,5 +224,6 @@ el: "#vanta-bg",
     <script>
         feather.replace();
     </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
 </body>
 </html>

learning-engine.html

@@ -97,8 +97,8 @@
             "exercises": [
               {
                 "id": "string",
-                "type": "speaking|listening|vocabulary|grammar"
-              }
+                "type": "speaking|listening|vocabulary|grammar|speak-brave"
+}
             ]
           }
         ]
@@ -190,8 +190,14 @@
     "timeSpent": 150,
     "attempts": 4
   },
+  "speakBraveScore": {
+    "confidence": 85,
+    "clarity": 80,
+    "fluency": 75,
+    "emotionalImpact": 90
+  },
   "confidence": 85,
-  "completionStatus": "completed",
+"completionStatus": "completed",
   "masteryPercentage": 78.75
 }
 

progress-report.html

@@ -202,11 +202,11 @@
         new Chart(ctx, {
             type: 'radar',
             data: {
-                labels: ['Vocabulary', 'Grammar', 'Listening', 'Speaking', 'Reading', 'Writing'],
-                datasets: [{
+                labels: ['Vocabulary', 'Grammar', 'Listening', 'Speaking', 'Reading', 'Writing', 'Courage'],
+datasets: [{
                     label: 'Your Skills',
-                    data: [90, 65, 85, 72, 80, 75],
-                    backgroundColor: 'rgba(99, 102, 241, 0.2)',
+                    data: [90, 65, 85, 72, 80, 75, 88],
+backgroundColor: 'rgba(99, 102, 241, 0.2)',
                     borderColor: 'rgba(99, 102, 241, 1)',
                     borderWidth: 2,
                     pointBackgroundColor: 'rgba(99, 102, 241, 1)'