Подэтап 4.3 — Self-Talk Journal

Реализовать запись 1-минутных видео.

Хранить записи в S3 / CDN.

Добавить интерфейс просмотра прошлых записей.

components/self-talk-recorder.js

@@ -0,0 +1,235 @@
+class SelfTalkRecorder extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+        .container {
+          display: flex;
+          flex-direction: column;
+          gap: 1.5rem;
+        }
+        .video-preview {
+          width: 100%;
+          height: 300px;
+          background: #1e293b;
+          border-radius: 0.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+          overflow: hidden;
+        }
+        video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .placeholder {
+          text-align: center;
+          color: #64748b;
+        }
+        .controls {
+          display: flex;
+          gap: 1rem;
+        }
+        button {
+          flex: 1;
+          padding: 0.75rem;
+          border-radius: 0.5rem;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .record-btn {
+          background: #7c3aed;
+          color: white;
+          border: none;
+        }
+        .record-btn:hover {
+          background: #6d28d9;
+        }
+        .record-btn.recording {
+          background: #dc2626;
+          animation: pulse 1.5s infinite;
+        }
+        .stop-btn {
+          background: #1e293b;
+          color: white;
+          border: 1px solid #334155;
+        }
+        .stop-btn:hover {
+          background: #334155;
+        }
+        .timer {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #7c3aed;
+          text-align: center;
+        }
+        @keyframes pulse {
+          0% { opacity: 1; }
+          50% { opacity: 0.7; }
+          100% { opacity: 1; }
+        }
+      </style>
+      <div class="container">
+        <h2 class="text-xl font-bold gradient-text mb-2">Record Your Self-Talk</h2>
+        <p class="text-slate-300 mb-4">Speak freely for 1 minute about your thoughts, feelings, or affirmations.</p>
+        
+        <div class="video-preview">
+          <video id="videoPreview" autoplay muted></video>
+          <div class="placeholder" id="videoPlaceholder">
+            <i data-feather="video" class="w-12 h-12 mx-auto mb-2"></i>
+            <p>Video preview will appear here</p>
+          </div>
+        </div>
+        
+        <div class="timer" id="timer">01:00</div>
+        
+        <div class="controls">
+          <button class="record-btn" id="recordBtn">
+            <i data-feather="mic"></i> Start Recording
+          </button>
+          <button class="stop-btn" id="stopBtn" disabled>
+            <i data-feather="square"></i> Stop
+          </button>
+        </div>
+      </div>
+    `;
+
+    this.mediaRecorder = null;
+    this.recordedChunks = [];
+    this.countdownInterval = null;
+    this.timeLeft = 60;
+
+    this.setupEventListeners();
+    feather.replace();
+  }
+
+  setupEventListeners() {
+    const recordBtn = this.shadowRoot.getElementById('recordBtn');
+    const stopBtn = this.shadowRoot.getElementById('stopBtn');
+    const videoPreview = this.shadowRoot.getElementById('videoPreview');
+    const videoPlaceholder = this.shadowRoot.getElementById('videoPlaceholder');
+    const timer = this.shadowRoot.getElementById('timer');
+
+    recordBtn.addEventListener('click', async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+          audio: true
+        });
+
+        videoPreview.srcObject = stream;
+        videoPlaceholder.style.display = 'none';
+        videoPreview.style.display = 'block';
+
+        this.mediaRecorder = new MediaRecorder(stream);
+        this.recordedChunks = [];
+
+        this.mediaRecorder.ondataavailable = event => {
+          if (event.data.size > 0) {
+            this.recordedChunks.push(event.data);
+          }
+        };
+
+        this.mediaRecorder.onstop = () => {
+          const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
+          this.saveRecording(blob);
+        };
+
+        this.mediaRecorder.start(100);
+        recordBtn.classList.add('recording');
+        recordBtn.disabled = true;
+        stopBtn.disabled = false;
+
+        // Start countdown
+        this.timeLeft = 60;
+        this.countdownInterval = setInterval(() => {
+          this.timeLeft--;
+          const minutes = Math.floor(this.timeLeft / 60);
+          const seconds = this.timeLeft % 60;
+          timer.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+
+          if (this.timeLeft <= 0) {
+            this.stopRecording();
+          }
+        }, 1000);
+      } catch (error) {
+        console.error('Error accessing media devices:', error);
+        alert('Could not access camera/microphone. Please check permissions.');
+      }
+    });
+
+    stopBtn.addEventListener('click', () => this.stopRecording());
+  }
+
+  stopRecording() {
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = null;
+    }
+
+    if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
+      this.mediaRecorder.stop();
+      
+      const videoPreview = this.shadowRoot.getElementById('videoPreview');
+      const stream = videoPreview.srcObject;
+      stream.getTracks().forEach(track => track.stop());
+      
+      this.shadowRoot.getElementById('recordBtn').classList.remove('recording');
+      this.shadowRoot.getElementById('recordBtn').disabled = false;
+      this.shadowRoot.getElementById('stopBtn').disabled = true;
+      this.shadowRoot.getElementById('timer').textContent = '01:00';
+    }
+  }
+
+  async saveRecording(blob) {
+    // In a real app, this would upload to S3/CDN via your backend
+    console.log('Recording saved:', blob);
+    alert('Recording saved successfully! It will appear in your journal entries.');
+    
+    // Simulate adding to entries list
+    const entriesContainer = document.getElementById('entriesContainer');
+    if (entriesContainer) {
+      const newEntry = {
+        id: Date.now().toString(),
+        date: new Date().toISOString().split('T')[0],
+        duration: '1:00',
+        thumbnail: 'http://static.photos/people/320x240/' + Math.floor(Math.random() * 10),
+        mood: 'New'
+      };
+      
+      entriesContainer.insertAdjacentHTML('afterbegin', `
+        <div class="glass-card entry-card p-6 cursor-pointer">
+          <div class="relative pb-[56.25%] mb-4 overflow-hidden rounded-lg">
+            <img src="${newEntry.thumbnail}" alt="Entry thumbnail" class="absolute h-full w-full object-cover">
+            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3">
+              <div class="text-white font-medium">${newEntry.duration}</div>
+            </div>
+          </div>
+          <div class="flex justify-between items-center">
+            <div>
+              <h3 class="font-bold">${newEntry.date}</h3>
+              <p class="text-sm text-slate-400">${newEntry.mood}</p>
+            </div>
+            <button class="text-indigo-400 hover:text-indigo-300">
+              <i data-feather="play"></i>
+            </button>
+          </div>
+        </div>
+      `);
+      
+      feather.replace();
+    }
+  }
+}
+
+customElements.define('self-talk-recorder', SelfTalkRecorder);

data-architecture.html

@@ -56,6 +56,7 @@
                 <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
                 <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
                 <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
+                <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
 </div>
 </nav>
     

index.html

@@ -54,6 +54,7 @@
                 <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
                 <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
                 <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
+                <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
 </div>
 <button class="md:hidden">
             <i data-feather="menu"></i>

learning-engine.html

@@ -63,6 +63,7 @@
             <a href="auth.html" class="hover:text-indigo-400 transition-colors">Login</a>
             <a href="select-role.html" class="hover:text-indigo-400 transition-colors">Roles</a>
             <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
+            <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
 </div>
     </nav>
     

progress-report.html

@@ -62,7 +62,8 @@
             <a href="data-architecture.html" class="hover:text-indigo-400 transition-colors">Data</a>
             <a href="learning-engine.html" class="hover:text-indigo-400 transition-colors">API</a>
             <a href="progress-report.html" class="text-indigo-400">Progress</a>
-        </div>
+            <a href="self-talk-journal.html" class="hover:text-indigo-400 transition-colors">Self-Talk</a>
+</div>
     </nav>
     
     <main class="container mx-auto px-4 py-16">

self-talk-journal.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Self-Talk Journal | QuantumCode</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/self-talk-recorder.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background-color: #0f172a;
+            color: #e2e8f0;
+        }
+        
+        .gradient-text {
+            background: linear-gradient(90deg, #7c3aed 0%, #2563eb 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        
+        .glass-card {
+            background: rgba(15, 23, 42, 0.7);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 1rem;
+        }
+        
+        .entry-card {
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        
+        .entry-card:hover {
+            transform: translateY(-3px);
+            border-color: #7c3aed;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <nav class="px-6 py-4 flex justify-between items-center">
+        <div class="flex items-center space-x-2">
+            <i data-feather="cpu" class="text-indigo-500"></i>
+            <span class="text-xl font-bold gradient-text">QuantumCode</span>
+        </div>
+        <div class="flex items-center space-x-2">
+            <a href="i18n-setup.html" class="flex items-center text-sm hover:text-indigo-400 transition-colors">
+                <i data-feather="globe" class="w-4 h-4 mr-1"></i>
+                <span id="currentLang">EN</span>
+            </a>
+        </div>
+        <div class="hidden md:flex space-x-8">
+            <a href="index.html" class="hover:text-indigo-400 transition-colors">Home</a>
+            <a href="progress-report.html" class="hover:text-indigo-400 transition-colors">Progress</a>
+            <a href="self-talk-journal.html" class="text-indigo-400">Self-Talk Journal</a>
+        </div>
+    </nav>
+    
+    <main class="container mx-auto px-4 py-16">
+        <section class="max-w-6xl mx-auto mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6">
+                <span class="gradient-text">Self-Talk Journal</span>
+            </h1>
+            <p class="text-xl text-slate-300 mb-10">
+                Record and reflect on your daily self-talk patterns to build confidence and awareness.
+            </p>
+            
+            <div class="glass-card p-8 mb-10">
+                <self-talk-recorder></self-talk-recorder>
+            </div>
+            
+            <h2 class="text-3xl font-bold gradient-text mb-6">Past Entries</h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6" id="entriesContainer">
+                <!-- Entries will be loaded here -->
+            </div>
+        </section>
+    </main>
+    
+    <script>
+        // Load entries from storage
+        async function loadEntries() {
+            // In a real app, this would fetch from your backend/API
+            const mockEntries = [
+                {
+                    id: '1',
+                    date: '2023-06-15',
+                    duration: '1:02',
+                    thumbnail: 'http://static.photos/people/320x240/1',
+                    mood: 'Confident'
+                },
+                {
+                    id: '2',
+                    date: '2023-06-14',
+                    duration: '0:58',
+                    thumbnail: 'http://static.photos/people/320x240/2',
+                    mood: 'Thoughtful'
+                },
+                {
+                    id: '3',
+                    date: '2023-06-13',
+                    duration: '1:05',
+                    thumbnail: 'http://static.photos/people/320x240/3',
+                    mood: 'Nervous'
+                }
+            ];
+            
+            const container = document.getElementById('entriesContainer');
+            container.innerHTML = mockEntries.map(entry => `
+                <div class="glass-card entry-card p-6 cursor-pointer">
+                    <div class="relative pb-[56.25%] mb-4 overflow-hidden rounded-lg">
+                        <img src="${entry.thumbnail}" alt="Entry thumbnail" class="absolute h-full w-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3">
+                            <div class="text-white font-medium">${entry.duration}</div>
+                        </div>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <h3 class="font-bold">${entry.date}</h3>
+                            <p class="text-sm text-slate-400">${entry.mood}</p>
+                        </div>
+                        <button class="text-indigo-400 hover:text-indigo-300">
+                            <i data-feather="play"></i>
+                        </button>
+                    </div>
+                </div>
+            `).join('');
+            
+            feather.replace();
+        }
+        
+        loadEntries();
+        
+        // Set initial language
+        document.getElementById('currentLang').textContent = 
+            document.cookie.match('(^|;)\\s*NEXT_LOCALE\\s*=\\s*([^;]+)')?.pop() || 'EN';
+
+        feather.replace();
+    </script>
+</body>
+</html>