Hugging Face's logo

Spaces:
Gathubaze
/
ai-apps
Running

App Files Community
Gathubaze commited on
Commit
e73bc6f
·
verified ·
1 Parent(s): e9518cf

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +1171 -1
index.html CHANGED
@@ -33,5 +33,1175 @@
33
 
34
  .ai-tool-card {
35
  border-left: 4px solid #3b82f6;
36
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  </html>
 
33
 
34
  .ai-tool-card {
35
  border-left: 4px solid #3b82f6;
36
+ }
37
+
38
+ .topic-chip {
39
+ transition: all 0.2s ease;
40
+ }
41
+
42
+ .topic-chip:hover {
43
+ background-color: #3b82f6;
44
+ color: white;
45
+ }
46
+
47
+ .documentary-type-card {
48
+ background-size: cover;
49
+ background-position: center;
50
+ height: 300px;
51
+ position: relative;
52
+ overflow: hidden;
53
+ }
54
+
55
+ .documentary-type-card::before {
56
+ content: '';
57
+ position: absolute;
58
+ top: 0;
59
+ left: 0;
60
+ right: 0;
61
+ bottom: 0;
62
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%);
63
+ }
64
+
65
+ .type-content {
66
+ position: relative;
67
+ z-index: 2;
68
+ }
69
+
70
+ .process-step {
71
+ position: relative;
72
+ padding-left: 3rem;
73
+ }
74
+
75
+ .process-step::before {
76
+ content: '';
77
+ position: absolute;
78
+ left: 0;
79
+ top: 0;
80
+ width: 2px;
81
+ height: 100%;
82
+ background-color: #3b82f6;
83
+ }
84
+
85
+ .step-number {
86
+ position: absolute;
87
+ left: -1.5rem;
88
+ top: 0;
89
+ width: 3rem;
90
+ height: 3rem;
91
+ border-radius: 50%;
92
+ background-color: #3b82f6;
93
+ color: white;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ font-weight: bold;
98
+ }
99
+
100
+ .ai-chat-container {
101
+ background-color: #1f2937;
102
+ border-radius: 0.5rem;
103
+ height: 400px;
104
+ overflow-y: auto;
105
+ }
106
+
107
+ .ai-message {
108
+ background-color: #374151;
109
+ border-radius: 1rem 1rem 1rem 0;
110
+ }
111
+
112
+ .user-message {
113
+ background-color: #3b82f6;
114
+ border-radius: 1rem 1rem 0 1rem;
115
+ }
116
+
117
+ .input-glow:focus {
118
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
119
+ }
120
+
121
+ @keyframes pulse {
122
+ 0%, 100% {
123
+ opacity: 1;
124
+ }
125
+ 50% {
126
+ opacity: 0.5;
127
+ }
128
+ }
129
+
130
+ .animate-pulse {
131
+ animation: pulse 2s infinite;
132
+ }
133
+
134
+ /* AI Tool Modal */
135
+ .ai-tool-modal {
136
+ display: none;
137
+ position: fixed;
138
+ top: 0;
139
+ left: 0;
140
+ right: 0;
141
+ bottom: 0;
142
+ background-color: rgba(0,0,0,0.5);
143
+ z-index: 1000;
144
+ align-items: center;
145
+ justify-content: center;
146
+ }
147
+
148
+ .ai-tool-modal-content {
149
+ background-color: white;
150
+ border-radius: 0.5rem;
151
+ width: 90%;
152
+ max-width: 800px;
153
+ max-height: 90vh;
154
+ overflow-y: auto;
155
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
156
+ }
157
+
158
+ .loading-dots {
159
+ display: inline-flex;
160
+ align-items: center;
161
+ }
162
+
163
+ .loading-dots span {
164
+ width: 8px;
165
+ height: 8px;
166
+ margin: 0 2px;
167
+ background-color: currentColor;
168
+ border-radius: 50%;
169
+ display: inline-block;
170
+ animation: bounce 1.4s infinite ease-in-out both;
171
+ }
172
+
173
+ .loading-dots span:nth-child(1) {
174
+ animation-delay: -0.32s;
175
+ }
176
+
177
+ .loading-dots span:nth-child(2) {
178
+ animation-delay: -0.16s;
179
+ }
180
+
181
+ @keyframes bounce {
182
+ 0%, 80%, 100% {
183
+ transform: scale(0);
184
+ } 40% {
185
+ transform: scale(1.0);
186
+ }
187
+ }
188
+ </style>
189
+ </head>
190
+ <body class="text-gray-800">
191
+ <!-- Navigation -->
192
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
193
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
194
+ <div class="flex justify-between h-16">
195
+ <div class="flex items-center">
196
+ <div class="flex-shrink-0 flex items-center">
197
+ <i class="fas fa-film text-blue-600 text-2xl mr-2"></i>
198
+ <span class="text-xl font-bold text-gray-900 playfair">DocuCraft</span>
199
+ </div>
200
+ </div>
201
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
202
+ <a href="#features" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Features</a>
203
+ <a href="#process" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Process</a>
204
+ <a href="#topics" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Topics</a>
205
+ <a href="#ai-tools" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">AI Tools</a>
206
+ <a href="#resources" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Resources</a>
207
+ </div>
208
+ <div class="flex items-center">
209
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
210
+ Get Started
211
+ </button>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </nav>
216
+
217
+ <!-- AI Tool Modals -->
218
+ <div id="researchModal" class="ai-tool-modal">
219
+ <div class="ai-tool-modal-content">
220
+ <div class="p-6">
221
+ <div class="flex justify-between items-center mb-6">
222
+ <h3 class="text-2xl font-bold playfair">Research Assistant</h3>
223
+ <button onclick="closeModal('researchModal')" class="text-gray-500 hover:text-gray-700">
224
+ <i class="fas fa-times text-xl"></i>
225
+ </button>
226
+ </div>
227
+ <div class="mb-6">
228
+ <p class="text-gray-600 mb-4">Enter your research topic to get AI-generated information, sources, and analysis.</p>
229
+ <div class="flex">
230
+ <input type="text" id="researchInput" placeholder="e.g., Crimes of passion in Victorian England" class="flex-grow border border-gray-300 rounded-l-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
231
+ <button onclick="generateResearch()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg">
232
+ Research
233
+ </button>
234
+ </div>
235
+ </div>
236
+ <div id="researchResults" class="bg-gray-50 p-4 rounded-lg min-h-48">
237
+ <p class="text-gray-500 italic">Your research results will appear here...</p>
238
+ </div>
239
+ <div class="mt-4 flex justify-end">
240
+ <button onclick="copyToClipboard('researchResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
241
+ <i class="fas fa-copy mr-2"></i>Copy
242
+ </button>
243
+ <button onclick="downloadAsText('researchResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
244
+ <i class="fas fa-download mr-2"></i>Download
245
+ </button>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <div id="scriptModal" class="ai-tool-modal">
252
+ <div class="ai-tool-modal-content">
253
+ <div class="p-6">
254
+ <div class="flex justify-between items-center mb-6">
255
+ <h3 class="text-2xl font-bold playfair">Script Generator</h3>
256
+ <button onclick="closeModal('scriptModal')" class="text-gray-500 hover:text-gray-700">
257
+ <i class="fas fa-times text-xl"></i>
258
+ </button>
259
+ </div>
260
+ <div class="mb-6">
261
+ <p class="text-gray-600 mb-4">Describe your documentary to generate a script outline or full script.</p>
262
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
263
+ <div>
264
+ <label class="block text-gray-700 mb-2">Documentary Type</label>
265
+ <select id="scriptType" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
266
+ <option value="investigative">Investigative</option>
267
+ <option value="character-driven">Character-Driven</option>
268
+ <option value="historical">Historical</option>
269
+ <option value="social-issue">Social Issue</option>
270
+ <option value="nature">Nature/Wildlife</option>
271
+ </select>
272
+ </div>
273
+ <div>
274
+ <label class="block text-gray-700 mb-2">Tone</label>
275
+ <select id="scriptTone" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
276
+ <option value="serious">Serious</option>
277
+ <option value="dramatic">Dramatic</option>
278
+ <option value="informative">Informative</option>
279
+ <option value="emotional">Emotional</option>
280
+ <option value="hopeful">Hopeful</option>
281
+ </select>
282
+ </div>
283
+ </div>
284
+ <div class="mb-4">
285
+ <label class="block text-gray-700 mb-2">Documentary Description</label>
286
+ <textarea id="scriptDescription" rows="3" placeholder="Describe your documentary topic, focus, and key elements..." class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
287
+ </div>
288
+ <div class="flex">
289
+ <button onclick="generateScriptOutline()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg mr-2">
290
+ Generate Outline
291
+ </button>
292
+ <button onclick="generateFullScript()" class="bg-blue-800 hover:bg-blue-900 text-white px-4 py-2 rounded-lg">
293
+ Full Script
294
+ </button>
295
+ </div>
296
+ </div>
297
+ <div id="scriptResults" class="bg-gray-50 p-4 rounded-lg min-h-48">
298
+ <p class="text-gray-500 italic">Your script will appear here...</p>
299
+ </div>
300
+ <div class="mt-4 flex justify-end">
301
+ <button onclick="copyToClipboard('scriptResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
302
+ <i class="fas fa-copy mr-2"></i>Copy
303
+ </button>
304
+ <button onclick="downloadAsText('scriptResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
305
+ <i class="fas fa-download mr-2"></i>Download
306
+ </button>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <div id="voiceoverModal" class="ai-tool-modal">
313
+ <div class="ai-tool-modal-content">
314
+ <div class="p-6">
315
+ <div class="flex justify-between items-center mb-6">
316
+ <h3 class="text-2xl font-bold playfair">Voiceover Studio</h3>
317
+ <button onclick="closeModal('voiceoverModal')" class="text-gray-500 hover:text-gray-700">
318
+ <i class="fas fa-times text-xl"></i>
319
+ </button>
320
+ </div>
321
+ <div class="mb-6">
322
+ <p class="text-gray-600 mb-4">Generate natural-sounding voiceovers for your documentary narration.</p>
323
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
324
+ <div>
325
+ <label class="block text-gray-700 mb-2">Voice Style</label>
326
+ <select id="voiceStyle" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
327
+ <option value="professional-male">Professional Male</option>
328
+ <option value="professional-female">Professional Female</option>
329
+ <option value="warm-male">Warm Male</option>
330
+ <option value="warm-female">Warm Female</option>
331
+ <option value="authoritative">Authoritative</option>
332
+ <option value="conversational">Conversational</option>
333
+ </select>
334
+ </div>
335
+ <div>
336
+ <label class="block text-gray-700 mb-2">Language</label>
337
+ <select id="voiceLanguage" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
338
+ <option value="english">English</option>
339
+ <option value="spanish">Spanish</option>
340
+ <option value="french">French</option>
341
+ <option value="german">German</option>
342
+ <option value="italian">Italian</option>
343
+ </select>
344
+ </div>
345
+ </div>
346
+ <div class="mb-4">
347
+ <label class="block text-gray-700 mb-2">Narration Text</label>
348
+ <textarea id="voiceoverText" rows="5" placeholder="Enter the text you want to convert to voiceover..." class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
349
+ </div>
350
+ <button onclick="generateVoiceover()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg">
351
+ Generate Voiceover
352
+ </button>
353
+ </div>
354
+ <div id="voiceoverResults" class="bg-gray-50 p-4 rounded-lg min-h-48 flex flex-col items-center justify-center">
355
+ <p class="text-gray-500 italic mb-4">Your voiceover will appear here...</p>
356
+ <audio id="voiceoverAudio" controls class="w-full hidden"></audio>
357
+ </div>
358
+ <div class="mt-4 flex justify-end">
359
+ <button onclick="downloadVoiceover()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
360
+ <i class="fas fa-download mr-2"></i>Download
361
+ </button>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <div id="musicModal" class="ai-tool-modal">
368
+ <div class="ai-tool-modal-content">
369
+ <div class="p-6">
370
+ <div class="flex justify-between items-center mb-6">
371
+ <h3 class="text-2xl font-bold playfair">Music Recommender</h3>
372
+ <button onclick="closeModal('musicModal')" class="text-gray-500 hover:text-gray-700">
373
+ <i class="fas fa-times text-xl"></i>
374
+ </button>
375
+ </div>
376
+ <div class="mb-6">
377
+ <p class="text-gray-600 mb-4">Get personalized music recommendations based on your documentary's mood and scenes.</p>
378
+ <div class="grid md:grid-cols-2 gap-4 mb-4">
379
+ <div>
380
+ <label class="block text-gray-700 mb-2">Scene Type</label>
381
+ <select id="sceneType" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
382
+ <option value="opening">Opening Sequence</option>
383
+ <option value="interview">Interview Background</option>
384
+ <option value="dramatic">Dramatic Moment</option>
385
+ <option value="emotional">Emotional Scene</option>
386
+ <option value="montage">Montage Sequence</option>
387
+ <option value="closing">Closing Credits</option>
388
+ </select>
389
+ </div>
390
+ <div>
391
+ <label class="block text-gray-700 mb-2">Mood</label>
392
+ <select id="musicMood" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
393
+ <option value="inspiring">Inspiring</option>
394
+ <option value="tense">Tense</option>
395
+ <option value="sad">Sad</option>
396
+ <option value="hopeful">Hopeful</option>
397
+ <option value="mysterious">Mysterious</option>
398
+ <option value="upbeat">Upbeat</option>
399
+ </select>
400
+ </div>
401
+ </div>
402
+ <div class="mb-4">
403
+ <label class="block text-gray-700 mb-2">Scene Description (optional)</label>
404
+ <textarea id="sceneDescription" rows="2" placeholder="Briefly describe the scene you're scoring..." class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
405
+ </div>
406
+ <button onclick="recommendMusic()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg">
407
+ Recommend Music
408
+ </button>
409
+ </div>
410
+ <div id="musicResults" class="bg-gray-50 p-4 rounded-lg min-h-48">
411
+ <p class="text-gray-500 italic">Your music recommendations will appear here...</p>
412
+ </div>
413
+ <div class="mt-4 flex justify-end">
414
+ <button onclick="copyToClipboard('musicResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
415
+ <i class="fas fa-copy mr-2"></i>Copy
416
+ </button>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+
422
+ <div id="editingModal" class="ai-tool-modal">
423
+ <div class="ai-tool-modal-content">
424
+ <div class="p-6">
425
+ <div class="flex justify-between items-center mb-6">
426
+ <h3 class="text-2xl font-bold playfair">Editing Assistant</h3>
427
+ <button onclick="closeModal('editingModal')" class="text-gray-500 hover:text-gray-700">
428
+ <i class="fas fa-times text-xl"></i>
429
+ </button>
430
+ </div>
431
+ <div class="mb-6">
432
+ <p class="text-gray-600 mb-4">Get AI-powered suggestions for editing your documentary footage.</p>
433
+ <div class="mb-4">
434
+ <label class="block text-gray-700 mb-2">Upload Footage (simulated)</label>
435
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
436
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
437
+ <p class="text-gray-500">Drag and drop video files here or click to browse</p>
438
+ <input type="file" id="footageUpload" class="hidden" accept="video/*">
439
+ <button onclick="document.getElementById('footageUpload').click()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
440
+ Select Files
441
+ </button>
442
+ </div>
443
+ </div>
444
+ <div class="mb-4">
445
+ <label class="block text-gray-700 mb-2">Editing Goals</label>
446
+ <select id="editingGoals" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
447
+ <option value="pacing">Improve Pacing</option>
448
+ <option value="storyflow">Enhance Story Flow</option>
449
+ <option value="interview">Best Interview Clips</option>
450
+ <option value="broll">B-Roll Placement</option>
451
+ <option value="transitions">Smooth Transitions</option>
452
+ </select>
453
+ </div>
454
+ <button onclick="analyzeFootage()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg">
455
+ Analyze Footage
456
+ </button>
457
+ </div>
458
+ <div id="editingResults" class="bg-gray-50 p-4 rounded-lg min-h-48">
459
+ <p class="text-gray-500 italic">Your editing suggestions will appear here...</p>
460
+ </div>
461
+ <div class="mt-4 flex justify-end">
462
+ <button onclick="copyToClipboard('editingResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
463
+ <i class="fas fa-copy mr-2"></i>Copy
464
+ </button>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <div id="analyticsModal" class="ai-tool-modal">
471
+ <div class="ai-tool-modal-content">
472
+ <div class="p-6">
473
+ <div class="flex justify-between items-center mb-6">
474
+ <h3 class="text-2xl font-bold playfair">Analytics Dashboard</h3>
475
+ <button onclick="closeModal('analyticsModal')" class="text-gray-500 hover:text-gray-700">
476
+ <i class="fas fa-times text-xl"></i>
477
+ </button>
478
+ </div>
479
+ <div class="mb-6">
480
+ <p class="text-gray-600 mb-4">Upload your documentary to get viewer engagement analytics and insights.</p>
481
+ <div class="mb-4">
482
+ <label class="block text-gray-700 mb-2">Upload Documentary (simulated)</label>
483
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
484
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
485
+ <p class="text-gray-500">Drag and drop your documentary file here or click to browse</p>
486
+ <input type="file" id="docUpload" class="hidden" accept="video/*">
487
+ <button onclick="document.getElementById('docUpload').click()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
488
+ Select File
489
+ </button>
490
+ </div>
491
+ </div>
492
+ <div class="mb-4">
493
+ <label class="block text-gray-700 mb-2">Target Audience</label>
494
+ <select id="targetAudience" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
495
+ <option value="general">General Audience</option>
496
+ <option value="young-adults">Young Adults (18-30)</option>
497
+ <option value="middle-aged">Middle-Aged (30-50)</option>
498
+ <option value="seniors">Seniors (50+)</option>
499
+ <option value="students">Students</option>
500
+ <option value="professionals">Professionals</option>
501
+ </select>
502
+ </div>
503
+ <button onclick="analyzeDocumentary()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg">
504
+ Analyze Documentary
505
+ </button>
506
+ </div>
507
+ <div id="analyticsResults" class="bg-gray-50 p-4 rounded-lg min-h-48">
508
+ <p class="text-gray-500 italic">Your analytics report will appear here...</p>
509
+ </div>
510
+ <div class="mt-4 flex justify-end">
511
+ <button onclick="copyToClipboard('analyticsResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2">
512
+ <i class="fas fa-copy mr-2"></i>Copy
513
+ </button>
514
+ <button onclick="downloadAsText('analyticsResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md">
515
+ <i class="fas fa-download mr-2"></i>Download
516
+ </button>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+
522
+ <!-- Hero Section -->
523
+ <section class="hero-gradient text-white py-20">
524
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
525
+ <div class="md:flex items-center justify-between">
526
+ <div class="md:w-1/2 mb-10 md:mb-0">
527
+ <h1 class="text-4xl md:text-5xl font-bold mb-6 playfair">Craft Captivating Documentaries with AI</h1>
528
+ <p class="text-xl mb-8 text-blue-100">From research to final cut, our platform helps you create powerful documentaries with expert guidance and AI assistance at every step.</p>
529
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
530
+ <button class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition duration-300">
531
+ Start Your Project
532
+ </button>
533
+ <button class="border border-white text-white hover:bg-blue-700 px-6 py-3 rounded-md text-lg font-semibold transition duration-300">
534
+ Watch Demo
535
+ </button>
536
+ </div>
537
+ </div>
538
+ <div class="md:w-1/2 flex justify-center">
539
+ <div class="relative w-full max-w-md">
540
+ <div class="absolute -top-6 -left-6 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
541
+ <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
542
+ <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden">
543
+ <div class="bg-gray-800 p-4 text-white text-center font-medium">
544
+ AI Documentary Assistant
545
+ </div>
546
+ <div class="p-6">
547
+ <div class="flex mb-4">
548
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
549
+ <i class="fas fa-robot text-blue-600"></i>
550
+ </div>
551
+ <div class="bg-gray-100 p-3 rounded-lg max-w-xs">
552
+ <p class="text-gray-800">Hi! I can help you research, write scripts, and plan your documentary. What topic are you exploring?</p>
553
+ </div>
554
+ </div>
555
+ <div class="flex justify-end mb-4">
556
+ <div class="bg-blue-100 p-3 rounded-lg max-w-xs">
557
+ <p class="text-blue-800">I'm interested in crimes of passion throughout history.</p>
558
+ </div>
559
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center ml-3">
560
+ <i class="fas fa-user text-white"></i>
561
+ </div>
562
+ </div>
563
+ <div class="flex">
564
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
565
+ <i class="fas fa-robot text-blue-600"></i>
566
+ </div>
567
+ <div class="bg-gray-100 p-3 rounded-lg max-w-xs">
568
+ <p class="text-gray-800">Fascinating topic! Let me suggest some famous cases and storytelling approaches...</p>
569
+ </div>
570
+ </div>
571
+ <div class="mt-4">
572
+ <input type="text" placeholder="Ask the AI anything..." class="w-full border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
573
+ </div>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </section>
581
+
582
+ <!-- Features Section -->
583
+ <section id="features" class="py-20 bg-white">
584
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
585
+ <div class="text-center mb-16">
586
+ <h2 class="text-3xl font-bold text-gray-900 mb-4 playfair">Your Complete Documentary Toolkit</h2>
587
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to research, plan, shoot, and edit compelling documentaries with professional results.</p>
588
+ </div>
589
+
590
+ <div class="grid md:grid-cols-3 gap-8">
591
+ <!-- Feature 1 -->
592
+ <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
593
+ <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
594
+ <i class="fas fa-book-open text-blue-600 text-2xl"></i>
595
+ </div>
596
+ <h3 class="text-xl font-bold mb-3">Research & Story Development</h3>
597
+ <p class="text-gray-600 mb-4">Access curated databases of historical events, expert interviews, and case studies to build your narrative foundation.</p>
598
+ <ul class="space-y-2 text-gray-600">
599
+ <li class="flex items-center">
600
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
601
+ AI-powered research assistant
602
+ </li>
603
+ <li class="flex items-center">
604
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
605
+ Story structure templates
606
+ </li>
607
+ <li class="flex items-center">
608
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
609
+ Character development tools
610
+ </li>
611
+ </ul>
612
+ </div>
613
+
614
+ <!-- Feature 2 -->
615
+ <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
616
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
617
+ <i class="fas fa-pen-fancy text-purple-600 text-2xl"></i>
618
+ </div>
619
+ <h3 class="text-xl font-bold mb-3">Scriptwriting & Storyboarding</h3>
620
+ <p class="text-gray-600 mb-4">Collaborative tools to craft your documentary script with AI suggestions for pacing, dialogue, and visual storytelling.</p>
621
+ <ul class="space-y-2 text-gray-600">
622
+ <li class="flex items-center">
623
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
624
+ Interactive script editor
625
+ </li>
626
+ <li class="flex items-center">
627
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
628
+ Visual storyboard creator
629
+ </li>
630
+ <li class="flex items-center">
631
+ <i class="fas fa-check-circle text-purple-500 mr-2"></i>
632
+ Narrative flow analyzer
633
+ </li>
634
+ </ul>
635
+ </div>
636
+
637
+ <!-- Feature 3 -->
638
+ <div class="bg-white rounded-xl shadow-lg p-8 card-hover">
639
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
640
+ <i class="fas fa-video text-green-600 text-2xl"></i>
641
+ </div>
642
+ <h3 class="text-xl font-bold mb-3">Production & Post-Production</h3>
643
+ <p class="text-gray-600 mb-4">Comprehensive guides and tools for shooting techniques, editing workflows, and adding music/sound design.</p>
644
+ <ul class="space-y-2 text-gray-600">
645
+ <li class="flex items-center">
646
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
647
+ Shot composition analyzer
648
+ </li>
649
+ <li class="flex items-center">
650
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
651
+ AI-powered editing assistant
652
+ </li>
653
+ <li class="flex items-center">
654
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
655
+ Royalty-free music library
656
+ </li>
657
+ </ul>
658
+ </div>
659
+ </div>
660
+ </div>
661
+ </section>
662
+
663
+ <!-- Documentary Types Section -->
664
+ <section class="py-16 bg-gray-50">
665
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
666
+ <h2 class="text-3xl font-bold text-center mb-12 playfair">Explore Documentary Styles</h2>
667
+
668
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
669
+ <!-- Type 1 -->
670
+ <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
671
+ <div class="type-content h-full flex flex-col justify-end p-6">
672
+ <h3 class="text-2xl font-bold text-white mb-2 playfair">Crimes of Passion</h3>
673
+ <p class="text-gray-200 mb-4">Explore the psychology behind crimes committed in the name of love and obsession.</p>
674
+ <div class="flex flex-wrap gap-2">
675
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Love Gone Wrong</span>
676
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Jealousy</span>
677
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Obsession</span>
678
+ </div>
679
+ </div>
680
+ </div>
681
+
682
+ <!-- Type 2 -->
683
+ <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1600077106724-946750eeaf3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
684
+ <div class="type-content h-full flex flex-col justify-end p-6">
685
+ <h3 class="text-2xl font-bold text-white mb-2 playfair">Historical Mysteries</h3>
686
+ <p class="text-gray-200 mb-4">Uncover forgotten stories and re-examine historical events with new perspectives.</p>
687
+ <div class="flex flex-wrap gap-2">
688
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Unsolved Cases</span>
689
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Cold Cases</span>
690
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Historical Figures</span>
691
+ </div>
692
+ </div>
693
+ </div>
694
+
695
+ <!-- Type 3 -->
696
+ <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1452421822248-d49c2fafb6a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
697
+ <div class="type-content h-full flex flex-col justify-end p-6">
698
+ <h3 class="text-2xl font-bold text-white mb-2 playfair">Social Justice</h3>
699
+ <p class="text-gray-200 mb-4">Examine systemic issues and highlight voices working toward change.</p>
700
+ <div class="flex flex-wrap gap-2">
701
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Activism</span>
702
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Human Rights</span>
703
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Inequality</span>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- Type 4 -->
709
+ <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1504868584819-f8e8b4b630d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80')">
710
+ <div class="type-content h-full flex flex-col justify-end p-6">
711
+ <h3 class="text-2xl font-bold text-white mb-2 playfair">Biographical</h3>
712
+ <p class="text-gray-200 mb-4">Dive deep into the lives of fascinating individuals who shaped our world.</p>
713
+ <div class="flex flex-wrap gap-2">
714
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Artists</span>
715
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Scientists</span>
716
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Pioneers</span>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <!-- Type 5 -->
722
+ <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1500382018108-823d5c3c1f3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
723
+ <div class="type-content h-full flex flex-col justify-end p-6">
724
+ <h3 class="text-2xl font-bold text-white mb-2 playfair">Nature & Environment</h3>
725
+ <p class="text-gray-200 mb-4">Showcase the beauty of our planet and the challenges it faces.</p>
726
+ <div class="flex flex-wrap gap-2">
727
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Conservation</span>
728
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Wildlife</span>
729
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Climate Change</span>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <!-- Type 6 -->
735
+ <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')">
736
+ <div class="type-content h-full flex flex-col justify-end p-6">
737
+ <h3 class="text-2xl font-bold text-white mb-2 playfair">Science & Technology</h3>
738
+ <p class="text-gray-200 mb-4">Explore breakthroughs, innovations, and the people behind them.</p>
739
+ <div class="flex flex-wrap gap-2">
740
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Innovation</span>
741
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Future Tech</span>
742
+ <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Medical Advances</span>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ </div>
747
+
748
+ <div class="text-center mt-12">
749
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md text-lg font-semibold transition duration-300">
750
+ Browse All Documentary Types
751
+ </button>
752
+ </div>
753
+ </div>
754
+ </section>
755
+
756
+ <!-- Documentary Process Section -->
757
+ <section id="process" class="py-20 bg-white">
758
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
759
+ <div class="text-center mb-16">
760
+ <h2 class="text-3xl font-bold text-gray-900 mb-4 playfair">The Documentary Creation Process</h2>
761
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">From initial concept to final cut, we guide you through every step of creating a compelling documentary.</p>
762
+ </div>
763
+
764
+ <div class="max-w-3xl mx-auto space-y-12">
765
+ <!-- Step 1 -->
766
+ <div class="process-step">
767
+ <div class="step-number">1</div>
768
+ <div class="bg-gray-50 p-6 rounded-xl">
769
+ <h3 class="text-2xl font-bold mb-3 playfair">Research & Concept Development</h3>
770
+ <p class="text-gray-600 mb-4">Dive deep into your subject matter, identify key themes, and develop your unique angle. Our AI research assistant can help uncover obscure facts and suggest narrative directions.</p>
771
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
772
+ <h4 class="font-bold text-blue-800 mb-2 flex items-center">
773
+ <i class="fas fa-lightbulb mr-2"></i> Pro Tip
774
+ </h4>
775
+ <p class="text-blue-700">For crimes of passion documentaries, focus on the psychological aspects rather than just the sensational details. Interview psychologists to add depth to your analysis.</p>
776
+ </div>
777
+ </div>
778
+ </div>
779
+
780
+ <!-- Step 2 -->
781
+ <div class="process-step">
782
+ <div class="step-number">2</div>
783
+ <div class="bg-gray-50 p-6 rounded-xl">
784
+ <h3 class="text-2xl font-bold mb-3 playfair">Scriptwriting & Storyboarding</h3>
785
+ <p class="text-gray-600 mb-4">Structure your narrative with our interactive script tools. Our AI can suggest dramatic arcs, interview questions, and visual sequences based on successful documentaries in your genre.</p>
786
+ <div class="grid md:grid-cols-2 gap-4 mt-4">
787
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
788
+ <h5 class="font-bold mb-2">Script Elements to Include:</h5>
789
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
790
+ <li>Strong opening hook</li>
791
+ <li>Clear central question</li>
792
+ <li>Character development</li>
793
+ <li>Evidence presentation</li>
794
+ <li>Emotional climax</li>
795
+ <li>Thought-provoking conclusion</li>
796
+ </ul>
797
+ </div>
798
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
799
+ <h5 class="font-bold mb-2">Storyboard Tips:</h5>
800
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
801
+ <li>Vary shot types for visual interest</li>
802
+ <li>Plan interview setups</li>
803
+ <li>Sketch archival material placement</li>
804
+ <li>Note transitions between scenes</li>
805
+ <li>Indicate music/sound effects</li>
806
+ </ul>
807
+ </div>
808
+ </div>
809
+ </div>
810
+ </div>
811
+
812
+ <!-- Step 3 -->
813
+ <div class="process-step">
814
+ <div class="step-number">3</div>
815
+ <div class="bg-gray-50 p-6 rounded-xl">
816
+ <h3 class="text-2xl font-bold mb-3 playfair">Production Planning</h3>
817
+ <p class="text-gray-600 mb-4">Organize your shoots, interviews, and location scouting. Our platform helps you create production schedules, shot lists, and equipment checklists tailored to your budget.</p>
818
+ <div class="bg-white p-4 rounded-lg border border-gray-200 mt-4">
819
+ <h4 class="font-bold mb-3">Essential Production Documents:</h4>
820
+ <div class="grid md:grid-cols-3 gap-3">
821
+ <div class="bg-blue-50 p-3 rounded-lg">
822
+ <div class="font-medium text-blue-800 mb-1">Shot List</div>
823
+ <div class="text-sm text-blue-700">Every visual element you need to capture</div>
824
+ </div>
825
+ <div class="bg-blue-50 p-3 rounded-lg">
826
+ <div class="font-medium text-blue-800 mb-1">Interview Questions</div>
827
+ <div class="text-sm text-blue-700">Tailored for each subject</div>
828
+ </div>
829
+ <div class="bg-blue-50 p-3 rounded-lg">
830
+ <div class="font-medium text-blue-800 mb-1">Release Forms</div>
831
+ <div class="text-sm text-blue-700">Legal permissions from participants</div>
832
+ </div>
833
+ <div class="bg-blue-50 p-3 rounded-lg">
834
+ <div class="font-medium text-blue-800 mb-1">Equipment List</div>
835
+ <div class="text-sm text-blue-700">Cameras, mics, lighting, etc.</div>
836
+ </div>
837
+ <div class="bg-blue-50 p-3 rounded-lg">
838
+ <div class="font-medium text-blue-800 mb-1">Location Scouting</div>
839
+ <div class="text-sm text-blue-700">Notes on each potential filming site</div>
840
+ </div>
841
+ <div class="bg-blue-50 p-3 rounded-lg">
842
+ <div class="font-medium text-blue-800 mb-1">Schedule</div>
843
+ <div class="text-sm text-blue-700">Detailed timeline for each shoot day</div>
844
+ </div>
845
+ </div>
846
+ </div>
847
+ </div>
848
+ </div>
849
+
850
+ <!-- Step 4 -->
851
+ <div class="process-step">
852
+ <div class="step-number">4</div>
853
+ <div class="bg-gray-50 p-6 rounded-xl">
854
+ <h3 class="text-2xl font-bold mb-3 playfair">Filming Techniques</h3>
855
+ <p class="text-gray-600 mb-4">Learn professional techniques for capturing compelling footage, whether you're using a smartphone or cinema camera.</p>
856
+ <div class="grid md:grid-cols-2 gap-6 mt-4">
857
+ <div>
858
+ <h4 class="font-bold mb-2 text-lg">Interview Setup</h4>
859
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
860
+ <div class="flex items-start mb-3">
861
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
862
+ <i class="fas fa-check text-blue-600"></i>
863
+ </div>
864
+ <div>
865
+ <div class="font-medium">Lighting</div>
866
+ <div class="text-sm text-gray-600">Three-point lighting setup for professional interviews</div>
867
+ </div>
868
+ </div>
869
+ <div class="flex items-start mb-3">
870
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
871
+ <i class="fas fa-check text-blue-600"></i>
872
+ </div>
873
+ <div>
874
+ <div class="font-medium">Framing</div>
875
+ <div class="text-sm text-gray-600">Rule of thirds, proper headroom, and eye line</div>
876
+ </div>
877
+ </div>
878
+ <div class="flex items-start">
879
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
880
+ <i class="fas fa-check text-blue-600"></i>
881
+ </div>
882
+ <div>
883
+ <div class="font-medium">Audio</div>
884
+ <div class="text-sm text-gray-600">Lavalier mics for clean dialogue, room tone recording</div>
885
+ </div>
886
+ </div>
887
+ </div>
888
+ </div>
889
+ <div>
890
+ <h4 class="font-bold mb-2 text-lg">B-Roll Capture</h4>
891
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
892
+ <div class="flex items-start mb-3">
893
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
894
+ <i class="fas fa-check text-blue-600"></i>
895
+ </div>
896
+ <div>
897
+ <div class="font-medium">Variety</div>
898
+ <div class="text-sm text-gray-600">Wide, medium, close-up, and extreme close-up shots</div>
899
+ </div>
900
+ </div>
901
+ <div class="flex items-start mb-3">
902
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
903
+ <i class="fas fa-check text-blue-600"></i>
904
+ </div>
905
+ <div>
906
+ <div class="font-medium">Movement</div>
907
+ <div class="text-sm text-gray-600">Static shots, pans, tilts, and tracking shots</div>
908
+ </div>
909
+ </div>
910
+ <div class="flex items-start">
911
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
912
+ <i class="fas fa-check text-blue-600"></i>
913
+ </div>
914
+ <div>
915
+ <div class="font-medium">Details</div>
916
+ <div class="text-sm text-gray-600">Capture textures, objects, and environmental details</div>
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </div>
921
+ </div>
922
+ </div>
923
+ </div>
924
+
925
+ <!-- Step 5 -->
926
+ <div class="process-step">
927
+ <div class="step-number">5</div>
928
+ <div class="bg-gray-50 p-6 rounded-xl">
929
+ <h3 class="text-2xl font-bold mb-3 playfair">Editing & Post-Production</h3>
930
+ <p class="text-gray-600 mb-4">Transform your raw footage into a polished documentary with our editing guides and AI-powered tools.</p>
931
+ <div class="bg-white p-4 rounded-lg border border-gray-200 mt-4">
932
+ <h4 class="font-bold mb-3">Editing Workflow:</h4>
933
+ <div class="space-y-4">
934
+ <div class="flex items-start">
935
+ <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div>
936
+ <div>
937
+ <div class="font-medium">Assembly Cut</div>
938
+ <div class="text-sm text-gray-600">String together your best footage in rough sequence</div>
939
+ </div>
940
+ </div>
941
+ <div class="flex items-start">
942
+ <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div>
943
+ <div>
944
+ <div class="font-medium">Fine Cut</div>
945
+ <div class="text-sm text-gray-600">Refine pacing, tighten sequences, add transitions</div>
946
+ </div>
947
+ </div>
948
+ <div class="flex items-start">
949
+ <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div>
950
+ <div>
951
+ <div class="font-medium">Sound Design</div>
952
+ <div class="text-sm text-gray-600">Add music, sound effects, and mix audio levels</div>
953
+ </div>
954
+ </div>
955
+ <div class="flex items-start">
956
+ <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">4</div>
957
+ <div>
958
+ <div class="font-medium">Color Grading</div>
959
+ <div class="text-sm text-gray-600">Create visual consistency and mood</div>
960
+ </div>
961
+ </div>
962
+ <div class="flex items-start">
963
+ <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">5</div>
964
+ <div>
965
+ <div class="font-medium">Titles & Graphics</div>
966
+ <div class="text-sm text-gray-600">Add lower thirds, credits, and informational graphics</div>
967
+ </div>
968
+ </div>
969
+ </div>
970
+ </div>
971
+ </div>
972
+ </div>
973
+
974
+ <!-- Step 6 -->
975
+ <div class="process-step">
976
+ <div class="step-number">6</div>
977
+ <div class="bg-gray-50 p-6 rounded-xl">
978
+ <h3 class="text-2xl font-bold mb-3 playfair">Music & Sound Design</h3>
979
+ <p class="text-gray-600 mb-4">The right soundtrack can elevate your documentary from good to unforgettable. Access our royalty-free music library or get AI suggestions based on your film's mood.</p>
980
+ <div class="grid md:grid-cols-3 gap-4 mt-4">
981
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
982
+ <div class="font-bold mb-2">Music Selection Guide</div>
983
+ <ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm">
984
+ <li>Match music to emotional tone of scenes</li>
985
+ <li>Consider tempo and instrumentation</li>
986
+ <li>Use leitmotifs for recurring themes</li>
987
+ <li>Ensure proper licensing</li>
988
+ </ul>
989
+ </div>
990
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
991
+ <div class="font-bold mb-2">Sound Design Tips</div>
992
+ <ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm">
993
+ <li>Record clean ambient sound</li>
994
+ <li>Layer subtle sound effects</li>
995
+ <li>Use audio transitions between scenes</li>
996
+ <li>Balance dialogue, music, and effects</li>
997
+ </ul>
998
+ </div>
999
+ <div class="bg-white p-4 rounded-lg border border-gray-200">
1000
+ <div class="font-bold mb-2">Voiceover Considerations</div>
1001
+ <ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm">
1002
+ <li>Choose the right narrator voice</li>
1003
+ <li>Record in a treated space</li>
1004
+ <li>Maintain consistent audio levels</li>
1005
+ <li>Use AI voiceovers for drafts</li>
1006
+ </ul>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ </div>
1011
+ </div>
1012
+ </div>
1013
+ </section>
1014
+
1015
+ <!-- AI Tools Section -->
1016
+ <section id="ai-tools" class="py-20 bg-gray-50">
1017
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1018
+ <div class="text-center mb-16">
1019
+ <h2 class="text-3xl font-bold text-gray-900 mb-4 playfair">AI-Powered Documentary Tools</h2>
1020
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Leverage artificial intelligence to enhance every aspect of your documentary creation process.</p>
1021
+ </div>
1022
+
1023
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
1024
+ <!-- AI Tool 1 -->
1025
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card">
1026
+ <div class="p-6">
1027
+ <div class="flex items-center mb-4">
1028
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
1029
+ <i class="fas fa-search text-blue-600 text-xl"></i>
1030
+ </div>
1031
+ <h3 class="text-xl font-bold">Research Assistant</h3>
1032
+ </div>
1033
+ <p class="text-gray-600 mb-4">Our AI scans thousands of sources to find relevant facts, historical context, and expert opinions for your documentary topic.</p>
1034
+ <div class="bg-blue-50 p-3 rounded-lg">
1035
+ <div class="text-sm font-medium text-blue-800 mb-1">Try asking:</div>
1036
+ <p class="text-sm text-blue-700">"Find me primary sources about crimes of passion in Victorian England"</p>
1037
+ </div>
1038
+ <button onclick="openModal('researchModal')" class="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md font-medium transition duration-300">
1039
+ Open Research Assistant
1040
+ </button>
1041
+ </div>
1042
+ </div>
1043
+
1044
+ <!-- AI Tool 2 -->
1045
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card">
1046
+ <div class="p-6">
1047
+ <div class="flex items-center mb-4">
1048
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
1049
+ <i class="fas fa-scroll text-purple-600 text-xl"></i>
1050
+ </div>
1051
+ <h3 class="text-xl font-bold">Script Generator</h3>
1052
+ </div>
1053
+ <p class="text-gray-600 mb-4">Generate documentary script drafts based on your research, with options for different narrative styles and tones.</p>
1054
+ <div class="bg-purple-50 p-3 rounded-lg">
1055
+ <div class="text-sm font-medium text-purple-800 mb-1">Try asking:</div>
1056
+ <p class="text-sm text-purple-700">"Create a script outline for a documentary about fatal attraction cases"</p>
1057
+ </div>
1058
+ <button onclick="openModal('scriptModal')" class="w-full mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition duration-300">
1059
+ Open Script Generator
1060
+ </button>
1061
+ </div>
1062
+ </div>
1063
+
1064
+ <!-- AI Tool 3 -->
1065
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card">
1066
+ <div class="p-6">
1067
+ <div class="flex items-center mb-4">
1068
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
1069
+ <i class="fas fa-microphone-alt text-green-600 text-xl"></i>
1070
+ </div>
1071
+ <h3 class="text-xl font-bold">Voiceover Studio</h3>
1072
+ </div>
1073
+ <p class="text-gray-600 mb-4">Create natural-sounding voiceovers in multiple languages and accents to use in your documentary drafts.</p>
1074
+ <div class="bg-green-50 p-3 rounded-lg">
1075
+ <div class="text-sm font-medium text-green-800 mb-1">Try asking:</div>
1076
+ <p class="text-sm text-green-700">"Generate a British female voiceover for my crime documentary introduction"</p>
1077
+ </div>
1078
+ <button onclick="openModal('voiceoverModal')" class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white py-2 rounded-md font-medium transition duration-300">
1079
+ Open Voiceover Studio
1080
+ </button>
1081
+ </div>
1082
+ </div>
1083
+
1084
+ <!-- AI Tool 4 -->
1085
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card">
1086
+ <div class="p-6">
1087
+ <div class="flex items-center mb-4">
1088
+ <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mr-4">
1089
+ <i class="fas fa-music text-yellow-600 text-xl"></i>
1090
+ </div>
1091
+ <h3 class="text-xl font-bold">Music Recommender</h3>
1092
+ </div>
1093
+ <p class="text-gray-600 mb-4">Get personalized music recommendations based on the mood and pacing of your documentary scenes.</p>
1094
+ <div class="bg-yellow-50 p-3 rounded-lg">
1095
+ <div class="text-sm font-medium text-yellow-800 mb-1">Try asking:</div>
1096
+ <p class="text-sm text-yellow-700">"Suggest tense, dramatic music for a crime scene recreation"</p>
1097
+ </div>
1098
+ <button onclick="openModal('musicModal')" class="w-full mt-4 bg-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-md font-medium transition duration-300">
1099
+ Open Music Recommender
1100
+ </button>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <!-- AI Tool 5 -->
1105
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card">
1106
+ <div class="p-6">
1107
+ <div class="flex items-center mb-4">
1108
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
1109
+ <i class="fas fa-cut text-red-600 text-xl"></i>
1110
+ </div>
1111
+ <h3 class="text-xl font-bold">Editing Assistant</h3>
1112
+ </div>
1113
+ <p class="text-gray-600 mb-4">Upload your footage and get AI-powered suggestions for editing sequences, pacing, and transitions.</p>
1114
+ <div class="bg-red-50 p-3 rounded-lg">
1115
+ <div class="text-sm font-medium text-red-800 mb-1">Try asking:</div>
1116
+ <p class="text-sm text-red-700">"Analyze my interview footage and suggest the best soundbites"</p>
1117
+ </div>
1118
+ <button onclick="openModal('editingModal')" class="w-full mt-4 bg-red-600 hover:bg-red-700 text-white py-2 rounded-md font-medium transition duration-300">
1119
+ Open Editing Assistant
1120
+ </button>
1121
+ </div>
1122
+ </div>
1123
+
1124
+ <!-- AI Tool 6 -->
1125
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card">
1126
+ <div class="p-6">
1127
+ <div class="flex items-center mb-4">
1128
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
1129
+ <i class="fas fa-chart-line text-indigo-600 text-xl"></i>
1130
+ </div>
1131
+ <h3 class="text-xl font-bold">Analytics Dashboard</h3>
1132
+ </div>
1133
+ <p class="text-gray-600 mb-4">Track viewer engagement with your documentary and get insights about which segments resonate most.</p>
1134
+ <div class="bg-indigo-50 p-3 rounded-lg">
1135
+ <div class="text-sm font-medium text-indigo-800 mb-1">Try asking:</div>
1136
+ <p class="text-sm text-indigo-700">"Show me which parts of my documentary had the highest drop-off rates"</p>
1137
+ </div>
1138
+ <button onclick="openModal('analyticsModal')" class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-md font-medium transition duration-300">
1139
+ Open Analytics Dashboard
1140
+ </button>
1141
+ </div>
1142
+ </div>
1143
+ </div>
1144
+
1145
+ <div class="mt-16 bg-white rounded-xl shadow-lg overflow-hidden">
1146
+ <div class="md:flex">
1147
+ <div class="md:w-1/2 p-8 md:p-12">
1148
+ <h3 class="text-2xl font-bold mb-4 playfair">Try Our AI Documentary Assistant</h3>
1149
+ <p class="text-gray-600 mb-6">Get instant help with research, scripting, and planning your documentary. Our AI has been trained on thousands of successful documentaries to provide expert guidance.</p>
1150
+ <div class="ai-chat-container p-4 mb-4">
1151
+ <div class="flex mb-4">
1152
+ <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
1153
+ <i class="fas fa-robot text-gray-600"></i>
1154
+ </div>
1155
+ <div class="ai-message p-3 max-w-xs">
1156
+ <p class="text-white">Hello! I'm your documentary assistant. What topic would you like to explore today?</p>
1157
+ </div>
1158
+ </div>
1159
+ <div class="flex justify-end mb-4">
1160
+ <div class="user-message p-3 max-w-xs">
1161
+ <p class="text-white">I'm interested in crimes of passion in the 1920s.</p>
1162
+ </div>
1163
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center ml-3">
1164
+ <i class="fas fa-user text-white"></i>
1165
+ </div>
1166
+ </div>
1167
+ <div class="flex mb-4">
1168
+ <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
1169
+ <i class="fas fa-robot text-gray-600"></i>
1170
+ </div>
1171
+ <div class="ai-message p-3 max-w-xs">
1172
+ <p class="text-white">Fascinating era! The 1920s saw many high-profile crimes of passion due to changing social norms. Would you like me to suggest:</p>
1173
+ <div class="mt-2 space-y-2">
1174
+ <div class="bg-gray-700 p-2 rounded-lg text-sm">1. Famous cases from that decade</div>
1175
+ <div class="bg-gray-700 p-2 rounded-lg text-sm">2. Social context analysis</div>
1176
+ <div class="bg-gray-700 p-2 rounded-lg text-sm">3. Potential interview subjects</div>
1177
+ </div>
1178
+ </div>
1179
+ </div>
1180
+ </div>
1181
+ <div class="relative">
1182
+ <input type="text" placeholder="Ask the AI anything about your documentary..." class="w-full border border-gray-300 rounded-full py-3 px-5 pr-12 focus:outline-none input-glow">
1183
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center">
1184
+ <i class="fas fa-paper-plane"></i>
1185
+ </button>
1186
+ </div>
1187
+ </div>
1188
+ <div class="md:w-1/2 bg-blue-600 text-white p-8 md:p-12 flex flex-col justify-center">
1189
+ <h3 class="text-2xl font-bold mb-4 playfair">How AI Can Enhance Your Documentary</h3>
1190
+ <ul class="space-y-4">
1191
+ <li class="flex items-start">
1192
+ <div class="bg-blue-700 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
1193
+ <i class="fas fa-check text-sm"></i>
1194
+ </div>
1195
+ <div>
1196
+ <div class="font-medium">Save hundreds of research hours</div>
1197
+ <div class="text-blue-100 text-sm">AI quickly surfaces relevant facts, sources, and expert opinions</div>
1198
+ </div>
1199
+ </li>
1200
+ <li class="flex items-start">
1201
+ <div class="bg-blue-700 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">
1202
+ <i class="fas fa-check text-sm"></i>
1203
+ </div>
1204
+ <div>
1205
+ <div class="font-medium">Overcome writer's block</div>
1206
+ <
1207
  </html>