-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
222 lines (203 loc) · 11.5 KB
/
Copy pathindex.html
File metadata and controls
222 lines (203 loc) · 11.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎬 VidSynth AI - Premium YouTube Content Synthesizer</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
</head>
<body>
<!-- Mobile Menu Toggle -->
<button class="fab d-md-none" id="mobileMenuToggle">
<i class="fas fa-bars"></i>
</button>
<div class="container-fluid p-0">
<div class="row g-0">
<!-- Glassmorphism Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-content">
<div class="text-center mb-4">
<h2>🎬 VidSynth AI</h2>
<p>Transform any YouTube video into intelligent insights</p>
</div>
<hr>
<h5>Input Details</h5>
<div class="mb-3">
<label for="youtubeUrl" class="form-label">
<i class="fab fa-youtube me-2"></i>YouTube URL
</label>
<input type="url" class="form-control" id="youtubeUrl"
placeholder="https://www.youtube.com/watch?v=..."
autocomplete="off">
<div class="invalid-feedback" id="urlError"></div>
</div>
<div class="mb-4">
<label for="language" class="form-label">
<i class="fas fa-language me-2"></i>Language Code
</label>
<input type="text" class="form-control" id="language"
placeholder="e.g., en, hi, es, fr" value="en"
autocomplete="off">
<small class="text-white-50">Default: English (en)</small>
</div>
<div class="mb-4">
<label class="form-label">
<i class="fas fa-tasks me-2"></i>Choose Task
</label>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="taskOption"
id="chatWithVideo" value="Chat with Video" checked>
<label class="form-check-label" for="chatWithVideo">
<i class="fas fa-comments me-2"></i>Chat with Video
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="taskOption"
id="notesForYou" value="Notes For You">
<label class="form-check-label" for="notesForYou">
<i class="fas fa-sticky-note me-2"></i>Generate Notes
</label>
</div>
</div>
<button class="btn btn-primary w-100 mb-3" id="submitBtn">
<i class="fas fa-rocket me-2"></i>Start Processing
</button>
<hr>
<div class="text-center">
<small class="text-white-50">
<i class="fas fa-shield-alt me-1"></i>
Powered by Gemini AI
</small>
</div>
</div>
</div>
<!-- Premium Main Content -->
<div class="main-content">
<div class="container-fluid">
<div class="text-center mb-5">
<h1 class="display-4 fw-bold">YouTube Content Synthesizer</h1>
<p class="lead">Transform videos into intelligent conversations and comprehensive notes</p>
<div class="d-flex justify-content-center gap-4 mt-4">
<div class="feature-badge">
<i class="fas fa-brain text-primary"></i>
<span>AI-Powered</span>
</div>
<div class="feature-badge">
<i class="fas fa-language text-success"></i>
<span>Multi-Language</span>
</div>
<div class="feature-badge">
<i class="fas fa-bolt text-warning"></i>
<span>Lightning Fast</span>
</div>
</div>
</div>
<!-- Loading Spinner with Premium Animation -->
<div id="loadingSpinner" class="text-center d-none">
<div class="loading-container">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="loading-dots mt-3">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<p class="mt-3" id="loadingText">Processing your video...</p>
<div class="progress mt-3" style="height: 6px;">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" style="width: 0%" id="progressBar"></div>
</div>
</div>
<!-- Results Section with Premium Cards -->
<div id="resultsSection" class="d-none">
<!-- Important Topics -->
<div id="topicsSection" class="mb-5 d-none">
<div class="card">
<div class="card-body">
<h3 class="card-title">
<i class="fas fa-lightbulb text-warning me-2"></i>
Key Topics Discovered
</h3>
<div id="topicsContent" class="mt-3"></div>
</div>
</div>
</div>
<!-- Notes -->
<div id="notesSection" class="mb-5 d-none">
<div class="card">
<div class="card-body">
<h3 class="card-title">
<i class="fas fa-file-alt text-info me-2"></i>
Comprehensive Notes
</h3>
<div id="notesContent" class="mt-3"></div>
</div>
</div>
</div>
<!-- Success Messages -->
<div id="successMessage" class="alert alert-success d-none">
<i class="fas fa-check-circle me-2"></i>
<strong>Success!</strong> Your notes and topics have been generated successfully.
</div>
<div id="chatReadyMessage" class="alert alert-success d-none">
<i class="fas fa-robot me-2"></i>
<strong>Ready to Chat!</strong> Your video is now ready for intelligent conversation.
</div>
</div>
<!-- Premium Chat Interface -->
<div id="chatSection" class="d-none">
<div class="card chat-card">
<div class="card-header bg-gradient text-white">
<h3 class="mb-0">
<i class="fas fa-comments me-2"></i>
Chat with Your Video
</h3>
<small class="opacity-75">Ask anything about the video content</small>
</div>
<div class="card-body p-0">
<div id="chatMessages" class="chat-container">
<div class="welcome-message text-center p-4">
<i class="fas fa-robot fa-3x text-primary mb-3"></i>
<h5>Hi! I'm your AI assistant</h5>
<p class="text-muted">Ask me anything about the video content. I'm here to help!</p>
</div>
</div>
<div class="chat-input-container p-3">
<div class="input-group">
<input type="text" class="form-control" id="chatInput"
placeholder="Ask me anything about the video..."
autocomplete="off">
<button class="btn btn-primary" type="button" id="sendChatBtn">
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div class="d-flex justify-content-between mt-2">
<small class="text-muted">
<i class="fas fa-lightbulb me-1"></i>
Try: "What is the main topic?" or "Summarize key points"
</small>
<button class="btn btn-sm btn-outline-secondary" id="clearChatBtn">
<i class="fas fa-trash me-1"></i>Clear
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Floating Back to Top Button -->
<button class="fab" id="backToTop" style="bottom: 2rem; right: 2rem; display: none;">
<i class="fas fa-arrow-up"></i>
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>