Hugging Face's logo

Spaces:
Ramohlabi
/
scribblesync-digital-note-haven
Running

App Files Community
Ramohlabi commited on
Commit
3e3797c
·
verified ·
1 Parent(s): 6b57604

create a video of someone singing i love you baby

Browse files
Files changed (2) hide show
  1. index.html +10 -2
  2. video-notes.html +183 -0
index.html CHANGED
@@ -52,7 +52,11 @@
52
  <i data-feather="trash-2" class="mr-3"></i>
53
  Trash
54
  </a>
55
- </nav>
 
 
 
 
56
  <div class="mt-auto">
57
  <div class="p-4 bg-indigo-700 rounded-md mb-4">
58
  <div class="flex items-center">
@@ -87,7 +91,11 @@
87
  <i data-feather="trash-2"></i>
88
  <span class="text-xs mt-1">Trash</span>
89
  </a>
90
- </div>
 
 
 
 
91
  </div>
92
 
93
  <!-- Main content -->
 
52
  <i data-feather="trash-2" class="mr-3"></i>
53
  Trash
54
  </a>
55
+ <a href="video-notes.html" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item">
56
+ <i data-feather="video" class="mr-3"></i>
57
+ Video Notes
58
+ </a>
59
+ </nav>
60
  <div class="mt-auto">
61
  <div class="p-4 bg-indigo-700 rounded-md mb-4">
62
  <div class="flex items-center">
 
91
  <i data-feather="trash-2"></i>
92
  <span class="text-xs mt-1">Trash</span>
93
  </a>
94
+ <a href="video-notes.html" class="flex flex-col items-center justify-center p-3 text-gray-500">
95
+ <i data-feather="video"></i>
96
+ <span class="text-xs mt-1">Videos</span>
97
+ </a>
98
+ </div>
99
  </div>
100
 
101
  <!-- Main content -->
video-notes.html ADDED
@@ -0,0 +1,183 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Video Notes | ScribbleSync</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ </head>
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <div class="flex h-screen overflow-hidden">
13
+ <!-- Sidebar -->
14
+ <div class="hidden md:flex md:flex-shrink-0">
15
+ <div class="flex flex-col w-64 bg-indigo-600 text-white">
16
+ <div class="flex items-center justify-center h-16 px-4 bg-indigo-700">
17
+ <div class="flex items-center">
18
+ <i data-feather="edit-3" class="mr-2"></i>
19
+ <span class="text-xl font-bold">ScribbleSync</span>
20
+ </div>
21
+ </div>
22
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
23
+ <nav class="flex-1 space-y-2">
24
+ <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">
25
+ <i data-feather="file-text" class="mr-3"></i>
26
+ My Notes
27
+ </a>
28
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item">
29
+ <i data-feather="clock" class="mr-3"></i>
30
+ History
31
+ </a>
32
+ <a href="#" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item">
33
+ <i data-feather="trash-2" class="mr-3"></i>
34
+ Trash
35
+ </a>
36
+ <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">
37
+ <i data-feather="video" class="mr-3"></i>
38
+ Video Notes
39
+ </a>
40
+ </nav>
41
+ </div>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Main content -->
46
+ <div class="flex flex-col flex-1 overflow-hidden">
47
+ <!-- Header -->
48
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
49
+ <div class="flex items-center">
50
+ <button class="md:hidden text-gray-500 mr-2">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ <h1 class="text-lg font-medium text-gray-900">Video Notes</h1>
54
+ </div>
55
+ <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">
56
+ <i data-feather="video" class="mr-1"></i>
57
+ Record Video
58
+ </button>
59
+ </div>
60
+
61
+ <!-- Video Notes Content -->
62
+ <div class="flex-1 overflow-y-auto p-4">
63
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
64
+ <!-- Example video note -->
65
+ <div class="bg-white rounded-lg shadow-md p-4 border border-gray-200">
66
+ <div class="aspect-w-16 aspect-h-9 mb-3">
67
+ <video controls class="w-full rounded-lg">
68
+ <source src="https://www.example.com/videos/i-love-you-baby.mp4" type="video/mp4">
69
+ Your browser does not support the video tag.
70
+ </video>
71
+ </div>
72
+ <div class="flex justify-between items-center">
73
+ <h3 class="font-medium text-gray-900">I Love You Baby</h3>
74
+ <div class="flex space-x-2">
75
+ <button class="text-gray-400 hover:text-indigo-600">
76
+ <i data-feather="edit"></i>
77
+ </button>
78
+ <button class="text-gray-400 hover:text-red-600">
79
+ <i data-feather="trash-2"></i>
80
+ </button>
81
+ </div>
82
+ </div>
83
+ <p class="text-sm text-gray-500 mt-1">Recorded 2 days ago</p>
84
+ </div>
85
+
86
+ <!-- Add more video notes here -->
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Video Recorder Modal -->
93
+ <div id="recorder-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
94
+ <div class="absolute top-0 right-0 bottom-0 left-0 md:left-64 flex items-center justify-center">
95
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl p-4">
96
+ <div class="flex justify-between items-center mb-4">
97
+ <h2 class="text-lg font-medium">Record Video Note</h2>
98
+ <button id="close-recorder" class="text-gray-500 hover:text-red-600">
99
+ <i data-feather="x"></i>
100
+ </button>
101
+ </div>
102
+ <div class="aspect-w-16 aspect-h-9 bg-black rounded-lg overflow-hidden mb-4">
103
+ <video id="video-preview" class="w-full" autoplay muted></video>
104
+ </div>
105
+ <div class="flex justify-center space-x-4">
106
+ <button id="start-recording" class="px-4 py-2 bg-red-600 text-white rounded-full hover:bg-red-700">
107
+ <i data-feather="circle" class="mr-1"></i> Start
108
+ </button>
109
+ <button id="stop-recording" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-full hover:bg-gray-300 hidden">
110
+ <i data-feather="square" class="mr-1"></i> Stop
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <script>
118
+ document.addEventListener('DOMContentLoaded', function() {
119
+ feather.replace();
120
+
121
+ // Video recording functionality
122
+ const recordBtn = document.getElementById('record-btn');
123
+ const recorderModal = document.getElementById('recorder-modal');
124
+ const closeRecorder = document.getElementById('close-recorder');
125
+ const startRecording = document.getElementById('start-recording');
126
+ const stopRecording = document.getElementById('stop-recording');
127
+ const videoPreview = document.getElementById('video-preview');
128
+
129
+ let mediaRecorder;
130
+ let recordedChunks = [];
131
+
132
+ recordBtn.addEventListener('click', function() {
133
+ recorderModal.classList.remove('hidden');
134
+
135
+ // Access camera
136
+ navigator.mediaDevices.getUserMedia({ video: true, audio: true })
137
+ .then(stream => {
138
+ videoPreview.srcObject = stream;
139
+ mediaRecorder = new MediaRecorder(stream);
140
+
141
+ mediaRecorder.ondataavailable = function(e) {
142
+ if (e.data.size > 0) {
143
+ recordedChunks.push(e.data);
144
+ }
145
+ };
146
+
147
+ mediaRecorder.onstop = function() {
148
+ const blob = new Blob(recordedChunks, { type: 'video/mp4' });
149
+ // Here you would typically upload the blob to your server
150
+ console.log('Recording saved:', blob);
151
+ recordedChunks = [];
152
+ };
153
+ })
154
+ .catch(err => {
155
+ console.error('Error accessing media devices:', err);
156
+ alert('Could not access camera/microphone');
157
+ });
158
+ });
159
+
160
+ closeRecorder.addEventListener('click', function() {
161
+ recorderModal.classList.add('hidden');
162
+ if (videoPreview.srcObject) {
163
+ videoPreview.srcObject.getTracks().forEach(track => track.stop());
164
+ }
165
+ });
166
+
167
+ startRecording.addEventListener('click', function() {
168
+ recordedChunks = [];
169
+ mediaRecorder.start();
170
+ startRecording.classList.add('hidden');
171
+ stopRecording.classList.remove('hidden');
172
+ });
173
+
174
+ stopRecording.addEventListener('click', function() {
175
+ mediaRecorder.stop();
176
+ startRecording.classList.remove('hidden');
177
+ stopRecording.classList.add('hidden');
178
+ // In a real app, you would show a preview and save button here
179
+ });
180
+ });
181
+ </script>
182
+ </body>
183
+ </html>