-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpopup.html
More file actions
68 lines (59 loc) · 2.56 KB
/
popup.html
File metadata and controls
68 lines (59 loc) · 2.56 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Subtitle Master</title>
<link href="tailwind.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-slate-900 to-slate-800 text-white min-w-[400px] min-h-[500px] p-6 font-sans">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent mb-2">
🎬 Subtitle Master
</h1>
<p class="text-slate-400 text-sm">Search and download subtitles instantly</p>
</div>
<!-- Search Section -->
<div class="search-section mb-8">
<div class="relative">
<input id="searchInput" type="text" placeholder="Enter movie/TV show name..."
class="w-full px-4 py-3 bg-slate-800/50 border border-slate-600 rounded-xl text-white placeholder-slate-400
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200">
<button id="searchBtn"
class="absolute right-2 top-1/2 -translate-y-1/2 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg
text-sm font-medium flex items-center gap-2">
<span class="search-text">Search</span>
<div class="spinner hidden"></div>
</button>
</div>
</div>
<!-- Results -->
<div id="results" class="space-y-4 max-h-96 overflow-y-auto pb-14"></div>
<!-- Empty State -->
<div id="emptyState" class="hidden text-center py-12 text-slate-500">
<div class="w-20 h-20 mx-auto mb-4 rounded-2xl bg-slate-800/50 flex items-center justify-center">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.5h3m1.834-7.166a3.499 3.499 0 113.034 3.034" />
</svg>
</div>
<p class="text-lg font-medium mb-1">No subtitles found</p>
<p>Try different keywords or spelling</p>
</div>
<!-- Error State -->
<div id="errorState" class="hidden text-center py-12 text-red-400">
<p class="text-lg font-medium mb-2">Search failed</p>
<button id="retryBtn"
class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg text-sm font-medium transition-colors">
Try Again
</button>
</div>
<!-- Fixed Footer -->
<div class="fixed-footer">
Developed By <span class="text-blue-400">MaJHi Bhai</span> •
<a href="mailto:[email protected]">[email protected]</a>
</div>
<script src="popup.js"></script>
</body>
</html>