Skip to content

Commit c6e14aa

Browse files
jydv402jydv402
committed
Extenstion UI refactor
1 parent b62bc83 commit c6e14aa

File tree

2 files changed

+132
-10
lines changed

2 files changed

+132
-10
lines changed

‎extension/popup.css‎

Lines changed: 125 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,147 @@
11
body {
2-
font-family: Arial, sans-serif;
3-
padding: 10px;
4-
width: 300px;
2+
font-family: 'Segoe UI', sans-serif;
3+
margin: 0;
4+
padding: 20px;
5+
width: 320px;
6+
height: auto;
7+
background: #262626;
8+
color: #f0f0f0;
9+
border-radius: 16px;
10+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
11+
border: 1px solid rgba(255, 255, 255, 0.1);
512
}
613

14+
715
h3 {
816
margin-top: 0;
17+
color: #fff;
918
}
1019

1120
#getHelp {
12-
padding: 10px;
13-
background: #4CAF50;
14-
color: white;
21+
background: rgba(140, 100, 0, 0.15);
22+
color: #FFA726;
23+
font-weight: 500;
24+
font-size: 0.80rem;
25+
padding: 16px 18px;
1526
border: none;
27+
border-radius: 12px;
1628
width: 100%;
17-
border-radius: 5px;
29+
margin: 0 auto 15px;
30+
display: block;
1831
cursor: pointer;
19-
margin-bottom: 10px;
32+
transition: background 0.5s ease-in-out;
2033
}
2134

22-
#output {
23-
white-space: pre-wrap;
35+
#getHelp:hover {
36+
background: rgba(255, 162, 24, 0.15);
37+
transform: scale(1.01);
2438
}
2539

40+
2641
ul {
2742
padding-left: 20px;
2843
}
2944

3045
li {
3146
margin-bottom: 5px;
47+
}
48+
49+
/* Typography for rendered markdown */
50+
#output h1 {
51+
font-size: 1.4rem;
52+
margin: 1rem 0 0.5rem;
53+
font-weight: bold;
54+
color: #000000;
55+
}
56+
57+
#output h2 {
58+
font-size: 1.2rem;
59+
margin: 1rem 0 0.5rem;
60+
font-weight: bold;
61+
color: #ffffff;
62+
}
63+
64+
#output h3 {
65+
font-size: 1.05rem;
66+
margin: 1rem 0 0.5rem;
67+
font-weight: 600;
68+
color: #ffffff;
69+
}
70+
71+
#output p {
72+
font-size: 0.95rem;
73+
line-height: 1.5;
74+
margin: 0.5rem 0;
75+
color: #f2f2f2;
76+
}
77+
78+
#output ul {
79+
padding-left: 1.2rem;
80+
margin: 0.5rem 0;
81+
font-size: 0.95rem;
82+
color: #e6e6e6;
83+
}
84+
85+
#output li {
86+
margin-bottom: 0.4rem;
87+
line-height: 1.4;
88+
}
89+
90+
/* Optional: style emphasis */
91+
#output em {
92+
font-style: italic;
93+
color: #ffd1dc;
94+
}
95+
96+
#output strong {
97+
font-weight: bold;
98+
color: #ffffff;
99+
}
100+
101+
/* For inline code */
102+
#output code {
103+
font-family: 'Courier New', monospace;
104+
background-color: rgba(255, 255, 255, 0.1);
105+
padding: 2px 5px;
106+
border-radius: 4px;
107+
}
108+
109+
/* For code blocks */
110+
#output pre {
111+
background-color: rgba(255, 255, 255, 0.08);
112+
padding: 10px;
113+
border-radius: 8px;
114+
overflow-x: auto;
115+
font-size: 0.9rem;
116+
margin: 0.5rem 0;
117+
}
118+
119+
::-webkit-scrollbar {
120+
width: 6px;
121+
}
122+
123+
::-webkit-scrollbar-thumb {
124+
background-color: rgba(255, 255, 255, 0.2);
125+
border-radius: 10px;
126+
}
127+
128+
/* Loader spinner */
129+
.spinner {
130+
border: 4px solid rgba(255, 255, 255, 0.2);
131+
border-top: 4px solid white;
132+
border-radius: 50%;
133+
width: 28px;
134+
height: 28px;
135+
animation: spin 1s linear infinite;
136+
margin: auto;
137+
}
138+
139+
@keyframes spin {
140+
0% {
141+
transform: rotate(0deg);
142+
}
143+
144+
100% {
145+
transform: rotate(360deg);
146+
}
32147
}

‎extension/popup.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33

44
<head>
5+
<meta charset="UTF-8">
56
<title>LeetCode Helper</title>
67
<link rel="stylesheet" href="popup.css">
78
<script src="marked.min.js"></script><!--Markdown display package-->
@@ -11,6 +12,12 @@
1112
<h3>Need Help with LeetCode?</h3>
1213
<button id="getHelp">Get Step-by-Step Help</button>
1314

15+
<!-- Loader Spinner -->
16+
<div id="loader" style="display: none; text-align: center;">
17+
<div class="spinner"></div>
18+
</div>
19+
20+
1421
<div id="output"></div><!-- This is where the guided steps will appear -->
1522

1623
<script src="popup.js"></script>

0 commit comments

Comments
 (0)