-
Notifications
You must be signed in to change notification settings - Fork 14
Expand file tree
/
Copy pathpopup.html
More file actions
105 lines (89 loc) · 6.33 KB
/
popup.html
File metadata and controls
105 lines (89 loc) · 6.33 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
<!DOCTYPE html>
<html>
<head>
<title>SweetCode AI Assistant</title>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div class="container">
<!-- First Box: Timer + Settings -->
<div class="timer-box">
<div style="display:flex;justify-content:flex-end;">
<button id="settings-btn" style="background:none; border:none; padding:0; width:24px; height:24px;">
<svg width="24" height="24" viewBox="100 360 40 40" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<path
d="M128.52,381.134 L127.528,382.866 C127.254,383.345 126.648,383.508 126.173,383.232 L123.418,381.628 C122.02,383.219 120.129,384.359 117.983,384.799 L117.983,387 C117.983,387.553 117.54,388 116.992,388 L115.008,388 C114.46,388 114.017,387.553 114.017,387 L114.017,384.799 C111.871,384.359 109.98,383.219 108.582,381.628 L105.827,383.232 C105.352,383.508 104.746,383.345 104.472,382.866 L103.48,381.134 C103.206,380.656 103.369,380.044 103.843,379.769 L106.609,378.157 C106.28,377.163 106.083,376.106 106.083,375 C106.083,373.894 106.28,372.838 106.609,371.843 L103.843,370.232 C103.369,369.956 103.206,369.345 103.48,368.866 L104.472,367.134 C104.746,366.656 105.352,366.492 105.827,366.768 L108.582,368.372 C109.98,366.781 111.871,365.641 114.017,365.201 L114.017,363 C114.017,362.447 114.46,362 115.008,362 L116.992,362 C117.54,362 117.983,362.447 117.983,363 L117.983,365.201 C120.129,365.641 122.02,366.781 123.418,368.372 L126.173,366.768 C126.648,366.492 127.254,366.656 127.528,367.134 L128.52,368.866 C128.794,369.345 128.631,369.956 128.157,370.232 L125.391,371.843 C125.72,372.838 125.917,373.894 125.917,375 C125.917,376.106 125.72,377.163 125.391,378.157 L128.157,379.769 C128.631,380.044 128.794,380.656 128.52,381.134 L128.52,381.134 Z M130.008,378.536 L127.685,377.184 C127.815,376.474 127.901,375.749 127.901,375 C127.901,374.252 127.815,373.526 127.685,372.816 L130.008,371.464 C130.957,370.912 131.281,369.688 130.733,368.732 L128.75,365.268 C128.203,364.312 126.989,363.983 126.041,364.536 L123.694,365.901 C122.598,364.961 121.352,364.192 119.967,363.697 L119.967,362 C119.967,360.896 119.079,360 117.983,360 L114.017,360 C112.921,360 112.033,360.896 112.033,362 L112.033,363.697 C110.648,364.192 109.402,364.961 108.306,365.901 L105.959,364.536 C105.011,363.983 103.797,364.312 103.25,365.268 L101.267,368.732 C100.719,369.688 101.044,370.912 101.992,371.464 L104.315,372.816 C104.185,373.526 104.099,374.252 104.099,375 C104.099,375.749 104.185,376.474 104.315,377.184 L101.992,378.536 C101.044,379.088 100.719,380.312 101.267,381.268 L103.25,384.732 C103.797,385.688 105.011,386.017 105.959,385.464 L108.306,384.099 C109.402,385.039 110.648,385.809 112.033,386.303 L112.033,388 C112.033,389.104 112.921,390 114.017,390 L117.983,390 C119.079,390 119.967,389.104 119.967,388 L119.967,386.303 C121.352,385.809 122.598,385.039 123.694,384.099 L126.041,385.464 C126.989,386.017 128.203,385.688 128.75,384.732 L130.733,381.268 C131.281,380.312 130.957,379.088 130.008,378.536 L130.008,378.536 Z M116,378 C114.357,378 113.025,376.657 113.025,375 C113.025,373.344 114.357,372 116,372 C117.643,372 118.975,373.344 118.975,375 C118.975,376.657 117.643,378 116,378 L116,378 Z M116,370 C113.261,370 111.042,372.238 111.042,375 C111.042,377.762 113.261,380 116,380 C118.739,380 120.959,377.762 120.959,375 C120.959,372.238 118.739,370 116,370 L116,370 Z" />
</svg>
</button>
</div>
<div class="timer-section">
<div class="timer-label">Time Remaining</div>
<div id="timer">00:00</div>
</div>
</div>
<!-- Second Box: AI Assistant + Hints -->
<div class="ai-box">
<h3 id="ai-title">AI Assistant</h3>
<div class="hints">
<button id="ordinary-hint" data-cost="2" style="text-align: center; line-height: 1.2;">
<div><span style="color: #45B1AE;">Ordinary</span></div>
<div><span style="color: #45B1AE;">Hint</span></div>
<div><span class="hint-cost">(-2 mins)</span></div>
</button>
<button id="advanced-hint" data-cost="3" style="text-align: center; line-height: 1.2;">
<div><span style="color: #DB9E04;">Advanced</span></div>
<div><span style="color: #DB9E04;">Hint</span></div>
<div><span class="hint-cost">(-3 mins)</span></div>
</button>
<button id="expert-hint" data-cost="5" style="text-align: center; line-height: 1.2;">
<div><span style="color: #B72F2F;">Expert</span></div>
<div><span style="color: #B72F2F;">Hint</span></div>
<div><span class="hint-cost">(-5 mins)</span></div>
</button>
</div>
</div>
<!-- Revealable hint and error containers (same as before) -->
<div id="hint-container" class="hidden">
<h2>Hint:</h2>
<p id="hint-text"></p>
</div>
<div id="error-container" class="hidden">
<p id="error-text"></p>
</div>
</div>
<!--Settings Section-->
<div id="settings-view" style="display:none;">
<div class="container">
<div class="settings-box">
<!--Close button -->
<div style="display:flex;justify-content:flex-end;">
<button id="close-settings" class="close-btn">
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
<path d="M6 4.586L10.293.293a1 1 0 011.414 1.414L7.414 6l4.293 4.293a1 1 0 01-1.414 1.414L6 7.414l-4.293 4.293a1 1 0 01-1.414-1.414L4.586 6 .293 1.707A1 1 0 011.707.293L6 4.586z"/>
</svg>
</button>
</div>
<h1 class="settings-title">AI Model Settings</h1>
<div class="settings">
<label for="api-key">Groq API Key:</label>
<input type="password" id="api-key" placeholder="Enter your Groq API key">
<label for="model-select">Select Model:</label>
<select id="model-select">
<option value="llama-3.1-8b-instant">Llama3.1-8b</option>
<option value="moonshotai/kimi-k2-instruct">Kimi-k2</option>
<option value="openai/gpt-oss-120b">GPT-OSS</option>
<option value="custom">Custom</option>
</select>
<!-- Text box appears only when "Custom" is selected -->
<input type="text" id="custom-model-input" placeholder="Enter custom model name"
style="display: none; margin-top: 8px;">
<label for="reset-period">Reset Period (days):</label>
<input type="number" id="reset-period" min="1" placeholder="7">
<button id="save-settings">Save</button>
</div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>