-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
111 lines (98 loc) · 6.48 KB
/
Copy pathindex.html
File metadata and controls
111 lines (98 loc) · 6.48 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
<!DOCTYPE html>
<html lang="es" class="h-full bg-slate-950 text-slate-50">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Htrend Lite - YouTube Real-Time Analytics</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="h-full flex flex-col justify-between font-sans antialiased selection:bg-cyan-500 selection:text-slate-950">
<header class="border-b border-slate-900 bg-slate-950/80 backdrop-blur-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
<div class="flex items-center space-x-3">
<span class="text-xl font-bold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">HTREND</span>
<span class="text-xs font-semibold px-2 py-0.5 bg-slate-900 text-cyan-400 border border-slate-800 rounded-full">LITE</span>
</div>
<div class="flex items-center space-x-4">
<select id="language-select" class="bg-slate-900 border border-slate-800 text-sm text-slate-300 rounded-lg focus:ring-cyan-500 focus:border-cyan-500 block p-2">
<option value="en" selected>English</option>
</select>
<button id="api-config-btn" data-i18n="api_config_btn" class="text-sm text-slate-400 hover:text-cyan-400 transition-colors">
Configure API
</button>
</div>
</div>
</header>
<main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-10 space-y-10">
<section class="max-w-3xl mx-auto text-center space-y-6">
<h1 data-i18n="title" class="text-3xl sm:text-4xl font-extrabold tracking-tight text-white">
Real-Time YouTube Analytics
</h1>
<p data-i18n="description" class="text-slate-400 text-sm sm:text-base max-w-xl mx-auto">
Enter the link to any Video or Short to instantly break down its performance metrics.
</p>
<form id="search-form" class="mt-4 flex flex-col sm:flex-row gap-3">
<div class="relative flex-grow">
<input
type="text"
id="search-input"
data-i18n-placeholder="search_placeholder"
placeholder="Paste the video URL here..."
class="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-3.5 text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-all text-sm"
required
>
</div>
<button
type="submit"
data-i18n="analyze_btn"
class="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 font-semibold px-6 py-3.5 rounded-xl text-sm transition-all shadow-lg shadow-cyan-500/10 active:scale-[0.98]"
>
Analyze
</button>
</form>
</section>
<section id="analytics-section" class="space-y-6 hidden">
<div class="bg-slate-900/50 border border-slate-900 rounded-2xl p-6 flex flex-col md:flex-row gap-6 items-center">
<div id="meta-thumbnail" class="w-full md:w-56 aspect-video bg-slate-800 rounded-xl overflow-hidden flex items-center justify-center text-slate-600">
</div>
<div class="flex-grow text-center md:text-left space-y-2">
<h2 id="meta-title" data-i18n="meta_title" class="text-xl font-bold text-white leading-tight">Video title</h2>
<p id="meta-author" data-i18n="meta_author" class="text-sm text-cyan-400 font-medium">Channel Name</p>
<p id="meta-description" data-i18n="meta_description" class="text-xs text-slate-400 line-clamp-2 max-w-2xl">Brief description of the content analyzed...</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="bg-slate-900/40 border border-slate-900 p-6 rounded-2xl space-y-1">
<p data-i18n="metric_views" class="text-xs font-semibold tracking-wider text-slate-500 uppercase">Views</p>
<p id="metric-views" class="text-2xl sm:text-3xl font-bold text-white tabular-nums">0</p>
</div>
<div class="bg-slate-900/40 border border-slate-900 p-6 rounded-2xl space-y-1">
<p data-i18n="metric_likes" class="text-xs font-semibold tracking-wider text-slate-500 uppercase">Likes</p>
<p id="metric-likes" class="text-2xl sm:text-3xl font-bold text-white tabular-nums">0</p>
</div>
<div class="bg-slate-900/40 border border-slate-900 p-6 rounded-2xl space-y-1">
<p data-i18n="metric_comments" class="text-xs font-semibold tracking-wider text-slate-500 uppercase">Comments</p>
<p id="metric-comments" class="text-2xl sm:text-3xl font-bold text-white tabular-nums">0</p>
</div>
</div>
<div class="bg-slate-900/30 border border-slate-900 p-6 rounded-2xl">
<div class="flex items-center justify-between mb-4">
<h3 data-i18n="chart_title" class="text-sm font-semibold text-slate-400 tracking-wide uppercase">Speed and Performance</h3>
<span class="flex h-2 w-2 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
</div>
<div class="w-full h-64 md:h-80">
<canvas id="analytics-chart"></canvas>
</div>
</div>
</section>
</main>
<footer class="border-t border-slate-900 bg-slate-950 py-6 text-center text-xs text-slate-600">
<p>© 2026 Htrend Project.</p>
</footer>
<script src="src/main.js" type="module"></script>
</body>
</html>