Hugging Face's logo

Spaces:
DevBM
/
TMKOC-Quotes
Running

App Files Community
DevBM commited on
Commit
a555746
·
verified ·
1 Parent(s): 4abab6b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +578 -19
index.html CHANGED
@@ -1,19 +1,578 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>TMKOC Quotes API Demo</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ body {
16
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ min-height: 100vh;
19
+ padding: 20px;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1200px;
24
+ margin: 0 auto;
25
+ }
26
+
27
+ .header {
28
+ text-align: center;
29
+ margin-bottom: 40px;
30
+ animation: fadeInDown 1s ease-out;
31
+ }
32
+
33
+ .header h1 {
34
+ color: white;
35
+ font-size: 3rem;
36
+ margin-bottom: 10px;
37
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
38
+ }
39
+
40
+ .header p {
41
+ color: rgba(255,255,255,0.9);
42
+ font-size: 1.2rem;
43
+ margin-bottom: 20px;
44
+ }
45
+
46
+ .api-info {
47
+ background: rgba(255,255,255,0.1);
48
+ backdrop-filter: blur(10px);
49
+ border-radius: 15px;
50
+ padding: 15px 25px;
51
+ border: 1px solid rgba(255,255,255,0.2);
52
+ display: inline-block;
53
+ }
54
+
55
+ .api-info code {
56
+ color: #FFD700;
57
+ font-weight: bold;
58
+ }
59
+
60
+ .demo-section {
61
+ background: rgba(255,255,255,0.95);
62
+ border-radius: 20px;
63
+ padding: 30px;
64
+ margin-bottom: 30px;
65
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
66
+ animation: fadeInUp 1s ease-out;
67
+ }
68
+
69
+ .section-title {
70
+ font-size: 1.8rem;
71
+ color: #333;
72
+ margin-bottom: 20px;
73
+ display: flex;
74
+ align-items: center;
75
+ gap: 10px;
76
+ }
77
+
78
+ .controls {
79
+ display: flex;
80
+ flex-wrap: wrap;
81
+ gap: 15px;
82
+ margin-bottom: 25px;
83
+ }
84
+
85
+ .btn {
86
+ padding: 12px 24px;
87
+ border: none;
88
+ border-radius: 25px;
89
+ font-size: 1rem;
90
+ font-weight: 600;
91
+ cursor: pointer;
92
+ transition: all 0.3s ease;
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 8px;
96
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
97
+ }
98
+
99
+ .btn-primary {
100
+ background: linear-gradient(45deg, #FF6B6B, #FF8E53);
101
+ color: white;
102
+ }
103
+
104
+ .btn-secondary {
105
+ background: linear-gradient(45deg, #4ECDC4, #44A08D);
106
+ color: white;
107
+ }
108
+
109
+ .btn-accent {
110
+ background: linear-gradient(45deg, #A8E6CF, #88D8A3);
111
+ color: #333;
112
+ }
113
+
114
+ .btn:hover {
115
+ transform: translateY(-2px);
116
+ box-shadow: 0 8px 25px rgba(0,0,0,0.2);
117
+ }
118
+
119
+ .input-group {
120
+ display: flex;
121
+ gap: 10px;
122
+ margin-bottom: 15px;
123
+ flex-wrap: wrap;
124
+ }
125
+
126
+ .form-input {
127
+ flex: 1;
128
+ min-width: 200px;
129
+ padding: 12px 16px;
130
+ border: 2px solid #e0e0e0;
131
+ border-radius: 25px;
132
+ font-size: 1rem;
133
+ transition: all 0.3s ease;
134
+ }
135
+
136
+ .form-input:focus {
137
+ outline: none;
138
+ border-color: #667eea;
139
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
140
+ }
141
+
142
+ .quote-display {
143
+ background: linear-gradient(135deg, #667eea, #764ba2);
144
+ color: white;
145
+ padding: 30px;
146
+ border-radius: 15px;
147
+ margin: 20px 0;
148
+ text-align: center;
149
+ min-height: 150px;
150
+ display: flex;
151
+ flex-direction: column;
152
+ justify-content: center;
153
+ position: relative;
154
+ overflow: hidden;
155
+ }
156
+
157
+ .quote-display::before {
158
+ content: '"';
159
+ font-size: 8rem;
160
+ position: absolute;
161
+ top: -20px;
162
+ left: 20px;
163
+ opacity: 0.1;
164
+ font-family: serif;
165
+ }
166
+
167
+ .quote-text {
168
+ font-size: 1.4rem;
169
+ line-height: 1.6;
170
+ margin-bottom: 15px;
171
+ font-style: italic;
172
+ }
173
+
174
+ .quote-author {
175
+ font-size: 1.1rem;
176
+ font-weight: 600;
177
+ opacity: 0.9;
178
+ }
179
+
180
+ .quote-tags {
181
+ margin-top: 10px;
182
+ }
183
+
184
+ .tag {
185
+ display: inline-block;
186
+ background: rgba(255,255,255,0.2);
187
+ padding: 4px 12px;
188
+ border-radius: 15px;
189
+ font-size: 0.8rem;
190
+ margin: 2px;
191
+ }
192
+
193
+ .results-container {
194
+ max-height: 400px;
195
+ overflow-y: auto;
196
+ border: 1px solid #e0e0e0;
197
+ border-radius: 10px;
198
+ padding: 15px;
199
+ }
200
+
201
+ .quote-item {
202
+ background: #f8f9fa;
203
+ padding: 15px;
204
+ border-radius: 8px;
205
+ margin-bottom: 10px;
206
+ border-left: 4px solid #667eea;
207
+ }
208
+
209
+ .loading {
210
+ text-align: center;
211
+ padding: 40px;
212
+ color: #666;
213
+ }
214
+
215
+ .spinner {
216
+ display: inline-block;
217
+ width: 30px;
218
+ height: 30px;
219
+ border: 3px solid #f3f3f3;
220
+ border-top: 3px solid #667eea;
221
+ border-radius: 50%;
222
+ animation: spin 1s linear infinite;
223
+ margin-bottom: 10px;
224
+ }
225
+
226
+ .error {
227
+ background: #ffebee;
228
+ color: #c62828;
229
+ padding: 15px;
230
+ border-radius: 8px;
231
+ border-left: 4px solid #c62828;
232
+ }
233
+
234
+ .endpoints {
235
+ display: grid;
236
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
237
+ gap: 20px;
238
+ margin-top: 20px;
239
+ }
240
+
241
+ .endpoint-card {
242
+ background: #f8f9fa;
243
+ padding: 20px;
244
+ border-radius: 12px;
245
+ border: 1px solid #e0e0e0;
246
+ }
247
+
248
+ .endpoint-method {
249
+ background: #28a745;
250
+ color: white;
251
+ padding: 4px 8px;
252
+ border-radius: 4px;
253
+ font-size: 0.8rem;
254
+ font-weight: bold;
255
+ margin-bottom: 8px;
256
+ display: inline-block;
257
+ }
258
+
259
+ .endpoint-url {
260
+ font-family: 'Courier New', monospace;
261
+ background: #e9ecef;
262
+ padding: 8px 12px;
263
+ border-radius: 6px;
264
+ font-size: 0.9rem;
265
+ word-break: break-all;
266
+ }
267
+
268
+ @keyframes fadeInDown {
269
+ from {
270
+ opacity: 0;
271
+ transform: translateY(-30px);
272
+ }
273
+ to {
274
+ opacity: 1;
275
+ transform: translateY(0);
276
+ }
277
+ }
278
+
279
+ @keyframes fadeInUp {
280
+ from {
281
+ opacity: 0;
282
+ transform: translateY(30px);
283
+ }
284
+ to {
285
+ opacity: 1;
286
+ transform: translateY(0);
287
+ }
288
+ }
289
+
290
+ @keyframes spin {
291
+ 0% { transform: rotate(0deg); }
292
+ 100% { transform: rotate(360deg); }
293
+ }
294
+
295
+ @media (max-width: 768px) {
296
+ .header h1 {
297
+ font-size: 2rem;
298
+ }
299
+
300
+ .controls {
301
+ flex-direction: column;
302
+ }
303
+
304
+ .input-group {
305
+ flex-direction: column;
306
+ }
307
+
308
+ .form-input {
309
+ min-width: unset;
310
+ }
311
+ }
312
+ </style>
313
+ </head>
314
+ <body>
315
+ <div class="container">
316
+ <div class="header">
317
+ <h1><i class="fas fa-quote-left"></i> TMKOC Quotes API</h1>
318
+ <p>Explore quotes from the beloved Indian sitcom Taarak Mehta Ka Ooltah Chashmah</p>
319
+ <div class="api-info">
320
+ <i class="fas fa-link"></i> Base URL: <code>https://tmkoc-quotes-api.onrender.com</code>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Random Quote Section -->
325
+ <div class="demo-section">
326
+ <h2 class="section-title">
327
+ <i class="fas fa-random"></i>
328
+ Random Quotes
329
+ </h2>
330
+ <div class="controls">
331
+ <button class="btn btn-primary" onclick="getRandomQuote()">
332
+ <i class="fas fa-dice"></i> Get Random Quote
333
+ </button>
334
+ <button class="btn btn-secondary" onclick="getMultipleQuotes()">
335
+ <i class="fas fa-layer-group"></i> Get 3 Random Quotes
336
+ </button>
337
+ </div>
338
+ <div id="randomQuoteDisplay" class="quote-display" style="display: none;">
339
+ <div class="quote-text" id="randomQuoteText"></div>
340
+ <div class="quote-author" id="randomQuoteAuthor"></div>
341
+ <div class="quote-tags" id="randomQuoteTags"></div>
342
+ </div>
343
+ <div id="multipleQuotesDisplay" class="results-container" style="display: none;"></div>
344
+ </div>
345
+
346
+ <!-- Character Filter Section -->
347
+ <div class="demo-section">
348
+ <h2 class="section-title">
349
+ <i class="fas fa-user"></i>
350
+ Filter by Character
351
+ </h2>
352
+ <div class="controls">
353
+ <button class="btn btn-accent" onclick="getQuotesByCharacter('Jethalal')">Jethalal</button>
354
+ <button class="btn btn-accent" onclick="getQuotesByCharacter('Daya')">Daya</button>
355
+ <button class="btn btn-accent" onclick="getQuotesByCharacter('Tapu')">Tapu</button>
356
+ <button class="btn btn-accent" onclick="getQuotesByCharacter('Popatlal')">Popatlal</button>
357
+ </div>
358
+ <div class="input-group">
359
+ <input type="text" class="form-input" id="characterInput" placeholder="Enter character name...">
360
+ <button class="btn btn-primary" onclick="getQuotesByCharacterInput()">
361
+ <i class="fas fa-search"></i> Search
362
+ </button>
363
+ </div>
364
+ <div id="characterQuotesDisplay" class="results-container" style="display: none;"></div>
365
+ </div>
366
+
367
+ <!-- Search Section -->
368
+ <div class="demo-section">
369
+ <h2 class="section-title">
370
+ <i class="fas fa-search"></i>
371
+ Search Quotes
372
+ </h2>
373
+ <div class="input-group">
374
+ <input type="text" class="form-input" id="searchAuthor" placeholder="Author name (optional)">
375
+ <input type="text" class="form-input" id="searchText" placeholder="Search text in quotes">
376
+ <button class="btn btn-primary" onclick="searchQuotes()">
377
+ <i class="fas fa-search"></i> Search
378
+ </button>
379
+ </div>
380
+ <div id="searchResults" class="results-container" style="display: none;"></div>
381
+ </div>
382
+
383
+ <!-- API Endpoints Reference -->
384
+ <div class="demo-section">
385
+ <h2 class="section-title">
386
+ <i class="fas fa-code"></i>
387
+ API Endpoints Reference
388
+ </h2>
389
+ <div class="endpoints">
390
+ <div class="endpoint-card">
391
+ <div class="endpoint-method">GET</div>
392
+ <div class="endpoint-url">/v1/quotes</div>
393
+ <p>Get a random quote</p>
394
+ </div>
395
+ <div class="endpoint-card">
396
+ <div class="endpoint-method">GET</div>
397
+ <div class="endpoint-url">/v1/quotes/{number}</div>
398
+ <p>Get multiple random quotes</p>
399
+ </div>
400
+ <div class="endpoint-card">
401
+ <div class="endpoint-method">GET</div>
402
+ <div class="endpoint-url">/v1/quotes/character/{author}</div>
403
+ <p>Get quotes by character</p>
404
+ </div>
405
+ <div class="endpoint-card">
406
+ <div class="endpoint-method">GET</div>
407
+ <div class="endpoint-url">/v1/quotes/tag/{tag}</div>
408
+ <p>Get quotes by tag/category</p>
409
+ </div>
410
+ <div class="endpoint-card">
411
+ <div class="endpoint-method">GET</div>
412
+ <div class="endpoint-url">/v1/quotes/search?author=X&text=Y</div>
413
+ <p>Search quotes by author and/or text</p>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <script>
420
+ const API_BASE = 'https://tmkoc-quotes-api.onrender.com/v1';
421
+
422
+ function showLoading(containerId) {
423
+ const container = document.getElementById(containerId);
424
+ container.style.display = 'block';
425
+ container.innerHTML = `
426
+ <div class="loading">
427
+ <div class="spinner"></div>
428
+ <p>Loading quotes...</p>
429
+ </div>
430
+ `;
431
+ }
432
+
433
+ function showError(containerId, message) {
434
+ const container = document.getElementById(containerId);
435
+ container.style.display = 'block';
436
+ container.innerHTML = `
437
+ <div class="error">
438
+ <i class="fas fa-exclamation-triangle"></i>
439
+ Error: ${message}
440
+ </div>
441
+ `;
442
+ }
443
+
444
+ function displaySingleQuote(quote) {
445
+ document.getElementById('randomQuoteText').textContent = quote.quote;
446
+ document.getElementById('randomQuoteAuthor').textContent = `— ${quote.author}`;
447
+
448
+ const tagsContainer = document.getElementById('randomQuoteTags');
449
+ if (quote.tags && quote.tags.length > 0) {
450
+ tagsContainer.innerHTML = quote.tags.map(tag =>
451
+ `<span class="tag">#${tag}</span>`
452
+ ).join('');
453
+ } else {
454
+ tagsContainer.innerHTML = '';
455
+ }
456
+
457
+ document.getElementById('randomQuoteDisplay').style.display = 'flex';
458
+ }
459
+
460
+ function displayMultipleQuotes(quotes, containerId) {
461
+ const container = document.getElementById(containerId);
462
+ container.style.display = 'block';
463
+ container.innerHTML = quotes.map(quote => `
464
+ <div class="quote-item">
465
+ <div style="font-size: 1.1rem; margin-bottom: 8px; font-style: italic;">
466
+ "${quote.quote}"
467
+ </div>
468
+ <div style="font-weight: 600; color: #667eea;">
469
+ — ${quote.author}
470
+ </div>
471
+ ${quote.tags ? `
472
+ <div style="margin-top: 8px;">
473
+ ${quote.tags.map(tag => `<span class="tag" style="background: #e3f2fd; color: #1976d2;">#${tag}</span>`).join('')}
474
+ </div>
475
+ ` : ''}
476
+ </div>
477
+ `).join('');
478
+ }
479
+
480
+ async function makeAPICall(endpoint) {
481
+ const response = await fetch(`${API_BASE}${endpoint}`);
482
+ if (!response.ok) {
483
+ throw new Error(`HTTP ${response.status}: ${response.statusText}`);
484
+ }
485
+ return await response.json();
486
+ }
487
+
488
+ async function getRandomQuote() {
489
+ try {
490
+ document.getElementById('multipleQuotesDisplay').style.display = 'none';
491
+ showLoading('randomQuoteDisplay');
492
+
493
+ const quotes = await makeAPICall('/quotes');
494
+ document.getElementById('randomQuoteDisplay').style.display = 'none';
495
+ displaySingleQuote(quotes[0]);
496
+ } catch (error) {
497
+ showError('randomQuoteDisplay', error.message);
498
+ }
499
+ }
500
+
501
+ async function getMultipleQuotes() {
502
+ try {
503
+ document.getElementById('randomQuoteDisplay').style.display = 'none';
504
+ showLoading('multipleQuotesDisplay');
505
+
506
+ const quotes = await makeAPICall('/quotes/3');
507
+ displayMultipleQuotes(quotes, 'multipleQuotesDisplay');
508
+ } catch (error) {
509
+ showError('multipleQuotesDisplay', error.message);
510
+ }
511
+ }
512
+
513
+ async function getQuotesByCharacter(character) {
514
+ try {
515
+ showLoading('characterQuotesDisplay');
516
+ const quotes = await makeAPICall(`/quotes/character/${encodeURIComponent(character)}`);
517
+ displayMultipleQuotes(quotes, 'characterQuotesDisplay');
518
+ } catch (error) {
519
+ showError('characterQuotesDisplay', error.message);
520
+ }
521
+ }
522
+
523
+ async function getQuotesByCharacterInput() {
524
+ const character = document.getElementById('characterInput').value.trim();
525
+ if (!character) {
526
+ alert('Please enter a character name');
527
+ return;
528
+ }
529
+ await getQuotesByCharacter(character);
530
+ }
531
+
532
+ async function searchQuotes() {
533
+ const author = document.getElementById('searchAuthor').value.trim();
534
+ const text = document.getElementById('searchText').value.trim();
535
+
536
+ if (!author && !text) {
537
+ alert('Please enter either author name or search text');
538
+ return;
539
+ }
540
+
541
+ try {
542
+ showLoading('searchResults');
543
+
544
+ const params = new URLSearchParams();
545
+ if (author) params.append('author', author);
546
+ if (text) params.append('text', text);
547
+
548
+ const quotes = await makeAPICall(`/quotes/search?${params.toString()}`);
549
+ displayMultipleQuotes(quotes, 'searchResults');
550
+ } catch (error) {
551
+ showError('searchResults', error.message);
552
+ }
553
+ }
554
+
555
+ // Add enter key support for inputs
556
+ document.getElementById('characterInput').addEventListener('keypress', function(e) {
557
+ if (e.key === 'Enter') {
558
+ getQuotesByCharacterInput();
559
+ }
560
+ });
561
+
562
+ document.getElementById('searchAuthor').addEventListener('keypress', function(e) {
563
+ if (e.key === 'Enter') {
564
+ searchQuotes();
565
+ }
566
+ });
567
+
568
+ document.getElementById('searchText').addEventListener('keypress', function(e) {
569
+ if (e.key === 'Enter') {
570
+ searchQuotes();
571
+ }
572
+ });
573
+
574
+ // Load a random quote on page load
575
+ window.addEventListener('load', getRandomQuote);
576
+ </script>
577
+ </body>
578
+ </html>