| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Video Notes | ScribbleSync</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> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="hidden md:flex md:flex-shrink-0"> |
| <div class="flex flex-col w-64 bg-indigo-600 text-white"> |
| <div class="flex items-center justify-center h-16 px-4 bg-indigo-700"> |
| <div class="flex items-center"> |
| <i data-feather="edit-3" class="mr-2"></i> |
| <span class="text-xl font-bold">ScribbleSync</span> |
| </div> |
| </div> |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> |
| <nav class="flex-1 space-y-2"> |
| <a href="index.html" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item"> |
| <i data-feather="file-text" class="mr-3"></i> |
| My Notes |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item"> |
| <i data-feather="clock" class="mr-3"></i> |
| History |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item"> |
| <i data-feather="trash-2" class="mr-3"></i> |
| Trash |
| </a> |
| <a href="video-notes.html" class="flex items-center px-4 py-3 text-sm font-medium rounded-md bg-indigo-700 text-white sidebar-item"> |
| <i data-feather="video" class="mr-3"></i> |
| Video Notes |
| </a> |
| </nav> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex flex-col flex-1 overflow-hidden"> |
| |
| <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> |
| <div class="flex items-center"> |
| <button class="md:hidden text-gray-500 mr-2"> |
| <i data-feather="menu"></i> |
| </button> |
| <h1 class="text-lg font-medium text-gray-900">Video Notes</h1> |
| </div> |
| <button id="record-btn" class="flex items-center px-3 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700"> |
| <i data-feather="video" class="mr-1"></i> |
| Record Video |
| </button> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-y-auto p-4"> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| |
| <div class="bg-white rounded-lg shadow-md p-4 border border-gray-200"> |
| <div class="aspect-w-16 aspect-h-9 mb-3"> |
| <video controls class="w-full rounded-lg"> |
| <source src="https://www.example.com/videos/i-love-you-baby.mp4" type="video/mp4"> |
| Your browser does not support the video tag. |
| </video> |
| </div> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-medium text-gray-900">I Love You Baby</h3> |
| <div class="flex space-x-2"> |
| <button class="text-gray-400 hover:text-indigo-600"> |
| <i data-feather="edit"></i> |
| </button> |
| <button class="text-gray-400 hover:text-red-600"> |
| <i data-feather="trash-2"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-sm text-gray-500 mt-1">Recorded 2 days ago</p> |
| </div> |
| |
| |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="recorder-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden"> |
| <div class="absolute top-0 right-0 bottom-0 left-0 md:left-64 flex items-center justify-center"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-lg font-medium">Record Video Note</h2> |
| <button id="close-recorder" class="text-gray-500 hover:text-red-600"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <div class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden mb-4"> |
| <video id="video-preview" class="w-full" autoplay muted></video> |
| </div> |
| <div class="flex justify-center space-x-4"> |
| <button id="start-recording" class="px-4 py-2 bg-red-600 text-white rounded-full hover:bg-red-700"> |
| <i data-feather="circle" class="mr-1"></i> Start |
| </button> |
| <button id="stop-recording" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-gray-300 hidden"> |
| <i data-feather="square" class="mr-1"></i> Stop |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| |
| const recordBtn = document.getElementById('record-btn'); |
| const recorderModal = document.getElementById('recorder-modal'); |
| const closeRecorder = document.getElementById('close-recorder'); |
| const startRecording = document.getElementById('start-recording'); |
| const stopRecording = document.getElementById('stop-recording'); |
| const videoPreview = document.getElementById('video-preview'); |
| |
| let mediaRecorder; |
| let recordedChunks = []; |
| |
| recordBtn.addEventListener('click', function() { |
| recorderModal.classList.remove('hidden'); |
| |
| |
| navigator.mediaDevices.getUserMedia({ video: true, audio: true }) |
| .then(stream => { |
| videoPreview.srcObject = stream; |
| mediaRecorder = new MediaRecorder(stream); |
| |
| mediaRecorder.ondataavailable = function(e) { |
| if (e.data.size > 0) { |
| recordedChunks.push(e.data); |
| } |
| }; |
| |
| mediaRecorder.onstop = function() { |
| const blob = new Blob(recordedChunks, { type: 'video/mp4' }); |
| |
| console.log('Recording saved:', blob); |
| recordedChunks = []; |
| }; |
| }) |
| .catch(err => { |
| console.error('Error accessing media devices:', err); |
| alert('Could not access camera/microphone'); |
| }); |
| }); |
| |
| closeRecorder.addEventListener('click', function() { |
| recorderModal.classList.add('hidden'); |
| if (videoPreview.srcObject) { |
| videoPreview.srcObject.getTracks().forEach(track => track.stop()); |
| } |
| }); |
| |
| startRecording.addEventListener('click', function() { |
| recordedChunks = []; |
| mediaRecorder.start(); |
| startRecording.classList.add('hidden'); |
| stopRecording.classList.remove('hidden'); |
| }); |
| |
| stopRecording.addEventListener('click', function() { |
| mediaRecorder.stop(); |
| startRecording.classList.remove('hidden'); |
| stopRecording.classList.add('hidden'); |
| |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
