Skip to content

Commit d0cafc1

Browse files
Omkumar2003Omkumar2003
authored
Merge pull request #39 from Aujasyarajput18/enhance-chrome-extension-ui
Enhance Chrome extension UI with modern design
2 parents 2250d6b + b7e9258 commit d0cafc1

1 file changed

Lines changed: 223 additions & 71 deletions

File tree

‎LeetCode-Token-Viewer/popup.html‎

Lines changed: 223 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,225 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>LeetCode Token Viewer</title>
6-
<style>
7-
body {
8-
font-family: "Segoe UI", sans-serif;
9-
background: #f5f7fa;
10-
margin: 0;
11-
padding: 20px;
12-
display: flex;
13-
flex-direction: column;
14-
align-items: center;
15-
justify-content: center;
16-
width: 280px;
17-
}
18-
19-
h1 {
20-
font-size: 16px;
21-
margin-bottom: 10px;
22-
color: #333;
23-
}
24-
25-
.token-box {
26-
background: #fff;
27-
border: 1px solid #ccc;
28-
border-radius: 8px;
29-
padding: 15px;
30-
width: 100%;
31-
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
32-
word-break: break-all;
33-
font-size: 13px;
34-
color: #444;
35-
}
36-
37-
.label {
38-
font-weight: bold;
39-
color: #000;
40-
}
41-
42-
button {
43-
margin-top: 15px;
44-
background: #007bff;
45-
color: white;
46-
border: none;
47-
padding: 8px 12px;
48-
border-radius: 6px;
49-
cursor: pointer;
50-
font-size: 13px;
51-
transition: 0.2s;
52-
}
53-
54-
button:hover {
55-
background: #0056b3;
56-
}
57-
58-
#status {
59-
margin-top: 10px;
60-
font-size: 12px;
61-
color: green;
62-
}
63-
</style>
64-
</head>
65-
<body>
66-
<h1>🔐 LeetCode Token Viewer</h1>
67-
<div id="token" class="token-box">Fetching tokens...</div>
68-
<button id="copy">Copy Merge Token</button>
69-
<div id="status"></div>
70-
71-
<script src="popup.js"></script>
72-
</body>
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>LeetCode Token Viewer</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
width: 400px;
16+
min-height: 300px;
17+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
18+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19+
color: #fff;
20+
padding: 0;
21+
}
22+
23+
.container {
24+
padding: 24px;
25+
}
26+
27+
.header {
28+
text-align: center;
29+
margin-bottom: 24px;
30+
padding-bottom: 16px;
31+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
32+
}
33+
34+
.header h1 {
35+
font-size: 20px;
36+
font-weight: 600;
37+
margin-bottom: 4px;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
gap: 8px;
42+
}
43+
44+
.header p {
45+
font-size: 13px;
46+
opacity: 0.85;
47+
}
48+
49+
.token-section {
50+
background: rgba(255, 255, 255, 0.1);
51+
backdrop-filter: blur(10px);
52+
border-radius: 12px;
53+
padding: 16px;
54+
margin-bottom: 16px;
55+
border: 1px solid rgba(255, 255, 255, 0.2);
56+
}
57+
58+
.token-label {
59+
font-size: 12px;
60+
font-weight: 500;
61+
opacity: 0.85;
62+
margin-bottom: 8px;
63+
text-transform: uppercase;
64+
letter-spacing: 0.5px;
65+
}
66+
67+
.token-display {
68+
background: rgba(0, 0, 0, 0.2);
69+
border-radius: 8px;
70+
padding: 12px;
71+
font-family: 'Courier New', monospace;
72+
font-size: 12px;
73+
word-break: break-all;
74+
line-height: 1.5;
75+
max-height: 120px;
76+
overflow-y: auto;
77+
border: 1px solid rgba(255, 255, 255, 0.1);
78+
}
79+
80+
.token-display::-webkit-scrollbar {
81+
width: 6px;
82+
}
83+
84+
.token-display::-webkit-scrollbar-track {
85+
background: rgba(0, 0, 0, 0.1);
86+
border-radius: 3px;
87+
}
88+
89+
.token-display::-webkit-scrollbar-thumb {
90+
background: rgba(255, 255, 255, 0.3);
91+
border-radius: 3px;
92+
}
93+
94+
.token-display::-webkit-scrollbar-thumb:hover {
95+
background: rgba(255, 255, 255, 0.5);
96+
}
97+
98+
.loading {
99+
display: flex;
100+
align-items: center;
101+
gap: 8px;
102+
opacity: 0.7;
103+
}
104+
105+
.spinner {
106+
width: 16px;
107+
height: 16px;
108+
border: 2px solid rgba(255, 255, 255, 0.3);
109+
border-top-color: #fff;
110+
border-radius: 50%;
111+
animation: spin 0.8s linear infinite;
112+
}
113+
114+
@keyframes spin {
115+
to { transform: rotate(360deg); }
116+
}
117+
118+
.btn-container {
119+
display: flex;
120+
gap: 8px;
121+
}
122+
123+
button {
124+
flex: 1;
125+
padding: 12px 20px;
126+
border: none;
127+
border-radius: 8px;
128+
font-size: 14px;
129+
font-weight: 500;
130+
cursor: pointer;
131+
transition: all 0.2s ease;
132+
display: flex;
133+
align-items: center;
134+
justify-content: center;
135+
gap: 6px;
136+
}
137+
138+
#copy {
139+
background: rgba(255, 255, 255, 0.95);
140+
color: #667eea;
141+
}
142+
143+
#copy:hover {
144+
background: #fff;
145+
transform: translateY(-1px);
146+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
147+
}
148+
149+
#copy:active {
150+
transform: translateY(0);
151+
}
152+
153+
#copy:disabled {
154+
opacity: 0.5;
155+
cursor: not-allowed;
156+
transform: none;
157+
}
158+
159+
.status {
160+
text-align: center;
161+
margin-top: 12px;
162+
font-size: 13px;
163+
min-height: 20px;
164+
font-weight: 500;
165+
opacity: 0;
166+
transition: opacity 0.3s ease;
167+
}
168+
169+
.status.show {
170+
opacity: 1;
171+
}
172+
173+
.warning {
174+
background: rgba(255, 193, 7, 0.15);
175+
border: 1px solid rgba(255, 193, 7, 0.3);
176+
color: #ffd54f;
177+
}
178+
179+
.footer {
180+
text-align: center;
181+
margin-top: 16px;
182+
padding-top: 16px;
183+
border-top: 1px solid rgba(255, 255, 255, 0.2);
184+
font-size: 11px;
185+
opacity: 0.7;
186+
}
187+
</style>
188+
</head>
189+
<body>
190+
<div class="container">
191+
<div class="header">
192+
<h1>
193+
<span>🔐</span>
194+
LeetCode Token Viewer
195+
</h1>
196+
<p>Secure token management for automation</p>
197+
</div>
198+
199+
<div class="token-section">
200+
<div class="token-label">Merged Token</div>
201+
<div id="token" class="token-display">
202+
<div class="loading">
203+
<div class="spinner"></div>
204+
<span>Fetching tokens...</span>
205+
</div>
206+
</div>
207+
</div>
208+
209+
<div class="btn-container">
210+
<button id="copy">
211+
<span>📋</span>
212+
Copy Token
213+
</button>
214+
</div>
215+
216+
<div id="status" class="status"></div>
217+
218+
<div class="footer">
219+
Make sure you're logged in to leetcode.com
220+
</div>
221+
</div>
222+
223+
<script src="popup.js"></script>
224+
</body>
73225
</html>

0 commit comments

Comments
 (0)