|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html> |
3 | | -<head> |
| 3 | +<head> |
4 | 4 | <title>LeetCode Helper</title> |
5 | 5 | <style> |
| 6 | + * { |
| 7 | + box-sizing: border-box; |
| 8 | + } |
| 9 | + |
6 | 10 | body { |
7 | | - font-family: Arial, sans-serif; |
8 | | - padding: 10px; |
9 | | - width: 300px; |
| 11 | + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| 12 | + padding: 20px; |
| 13 | + width: 320px; |
| 14 | + height: auto; |
| 15 | + margin: 0; |
| 16 | + background: linear-gradient(135deg, #2c5364, #203a43, #0f2027); |
| 17 | + color: #ffffff; |
| 18 | + backdrop-filter: blur(10px); |
| 19 | + } |
| 20 | + |
| 21 | + .glass-card { |
| 22 | + background: rgba(255, 255, 255, 0.1); |
| 23 | + border-radius: 15px; |
| 24 | + padding: 20px; |
| 25 | + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); |
| 26 | + border: 1px solid rgba(255, 255, 255, 0.18); |
10 | 27 | } |
11 | 28 |
|
12 | 29 | h3 { |
13 | 30 | margin-top: 0; |
| 31 | + text-align: center; |
| 32 | + font-weight: 600; |
| 33 | + font-size: 20px; |
| 34 | + color: #ffffff; |
14 | 35 | } |
15 | 36 |
|
16 | 37 | #getHelp { |
17 | | - padding: 10px; |
18 | | - background: #4CAF50; |
| 38 | + padding: 12px; |
| 39 | + background: rgba(72, 239, 145, 0.25); |
| 40 | + border: 1px solid rgba(72, 239, 145, 0.5); |
19 | 41 | color: white; |
20 | | - border: none; |
| 42 | + font-weight: bold; |
21 | 43 | width: 100%; |
22 | | - border-radius: 5px; |
| 44 | + border-radius: 10px; |
23 | 45 | cursor: pointer; |
24 | | - margin-bottom: 10px; |
| 46 | + transition: all 0.3s ease; |
| 47 | + margin-top: 15px; |
| 48 | + } |
| 49 | + |
| 50 | + #getHelp:hover { |
| 51 | + background: rgba(72, 239, 145, 0.4); |
| 52 | + transform: scale(1.03); |
25 | 53 | } |
26 | 54 |
|
27 | 55 | ul { |
28 | 56 | padding-left: 20px; |
| 57 | + margin-top: 15px; |
| 58 | + max-height: 200px; |
| 59 | + overflow-y: auto; |
29 | 60 | } |
30 | 61 |
|
31 | 62 | li { |
32 | | - margin-bottom: 5px; |
| 63 | + background: rgba(255, 255, 255, 0.1); |
| 64 | + padding: 8px 10px; |
| 65 | + border-radius: 8px; |
| 66 | + margin-bottom: 8px; |
| 67 | + font-size: 14px; |
| 68 | + line-height: 1.4; |
33 | 69 | } |
| 70 | + |
| 71 | + /* Custom Scrollbar for better UX */ |
| 72 | + ul::-webkit-scrollbar { |
| 73 | + width: 6px; |
| 74 | + } |
| 75 | + |
| 76 | + ul::-webkit-scrollbar-thumb { |
| 77 | + background: rgba(255, 255, 255, 0.2); |
| 78 | + border-radius: 10px; |
| 79 | + } |
| 80 | + |
34 | 81 | </style> |
35 | 82 | </head> |
36 | 83 | <body> |
37 | | - <h3>Need Help with LeetCode?</h3> |
38 | | - <button id="getHelp">Get Step-by-Step Help</button> |
39 | | - |
40 | | - <ul id="output"></ul> <!-- This is where the guided steps will appear --> |
| 84 | + <div class="glass-card"> |
| 85 | + <h3>Need Help with LeetCode?</h3> |
| 86 | + <button id="getHelp">Get Step-by-Step Help</button> |
| 87 | + <ul id="output"></ul> |
| 88 | + </div> |
41 | 89 |
|
42 | 90 | <script src="popup.js"></script> |
43 | 91 | </body> |
|
0 commit comments