Skip to content

Commit d7ac397

Browse files
febinbellamyfebinbellamy
committed
Create settings modal
1 parent 57e2d5a commit d7ac397

6 files changed

Lines changed: 270 additions & 0 deletions

File tree

‎assets/languageLevelProblem.png‎

112 KB
Loading

‎assets/levelLanguageProblem.png‎

109 KB
Loading

‎assets/levelProblemLanguage.png‎

107 KB
Loading

‎css/welcome.css‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,3 +217,179 @@ footer {
217217
transform: translateX(0);
218218
}
219219
}
220+
221+
.modal {
222+
display: none;
223+
position: fixed;
224+
z-index: 1000;
225+
left: 0;
226+
top: 0;
227+
width: 100%;
228+
height: 100%;
229+
background-color: rgba(0, 0, 0, 0.8);
230+
}
231+
232+
.modal-content {
233+
background-color: #2a2b35;
234+
margin: 2% auto;
235+
padding: 0;
236+
border-radius: 10px;
237+
width: 90%;
238+
max-width: 600px;
239+
max-height: 90vh;
240+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
241+
color: white;
242+
display: flex;
243+
flex-direction: column;
244+
overflow: hidden;
245+
}
246+
247+
.modal-header {
248+
display: flex;
249+
justify-content: center;
250+
align-items: center;
251+
padding: 15px 30px;
252+
border-bottom: 1px solid #444;
253+
position: relative;
254+
flex-shrink: 0;
255+
}
256+
257+
.modal-header h2 {
258+
margin: 0;
259+
font-size: 28px;
260+
color: white;
261+
}
262+
263+
.close {
264+
color: #aaa;
265+
font-size: 35px;
266+
font-weight: bold;
267+
cursor: pointer;
268+
transition: color 0.2s ease;
269+
position: absolute;
270+
top: 20px;
271+
right: 30px;
272+
}
273+
274+
.close:hover,
275+
.close:focus {
276+
color: rgba(229, 44, 55, 255);
277+
}
278+
279+
.modal-body {
280+
padding: 20px 30px;
281+
line-height: 1.6;
282+
flex: 1;
283+
overflow-y: auto;
284+
}
285+
286+
.modal-body h3 {
287+
margin-top: 0;
288+
margin-bottom: 15px;
289+
font-size: 24px;
290+
color: rgb(76, 190, 228);
291+
}
292+
293+
.modal-body p {
294+
font-size: 16px;
295+
margin-bottom: 20px;
296+
color: #ddd;
297+
}
298+
299+
.folder-option {
300+
margin-bottom: 15px;
301+
padding: 6px;
302+
border: 2px solid #444;
303+
border-radius: 8px;
304+
transition: border-color 0.3s ease;
305+
}
306+
307+
.folder-option:hover {
308+
border-color: rgb(76, 190, 228);
309+
}
310+
311+
.folder-option:has(input[type="radio"]:checked),
312+
.folder-option.selected {
313+
border-color: rgb(76, 190, 228);
314+
background-color: rgba(76, 190, 228, 0.1);
315+
}
316+
317+
.folder-option input[type="radio"] {
318+
margin-right: 12px;
319+
transform: scale(1.3);
320+
}
321+
322+
.folder-option label {
323+
cursor: pointer;
324+
display: block;
325+
font-size: 18px;
326+
padding: 0;
327+
}
328+
329+
.folder-option label strong {
330+
color: white;
331+
font-size: 20px;
332+
}
333+
334+
.modal-footer {
335+
padding: 20px 30px;
336+
border-top: 1px solid #444;
337+
text-align: right;
338+
}
339+
340+
.save-btn {
341+
background-color: rgb(76, 190, 228);
342+
color: white;
343+
border: none;
344+
padding: 12px 25px;
345+
font-size: 18px;
346+
border-radius: 5px;
347+
cursor: pointer;
348+
transition: all 0.2s ease;
349+
font-weight: bold;
350+
}
351+
352+
.save-btn:hover {
353+
background-color: rgb(56, 170, 208);
354+
transform: scale(1.05);
355+
}
356+
357+
#settings-icon {
358+
cursor: pointer;
359+
}
360+
361+
@media (max-width: 768px) {
362+
.modal-content {
363+
width: 95%;
364+
margin: 10% auto;
365+
}
366+
367+
.modal-header,
368+
.modal-body,
369+
.modal-footer {
370+
padding: 20px;
371+
}
372+
373+
.modal-header h2 {
374+
font-size: 24px;
375+
}
376+
377+
.modal-body h3 {
378+
font-size: 20px;
379+
}
380+
381+
.folder-option label strong {
382+
font-size: 18px;
383+
}
384+
}
385+
386+
.folder-option img {
387+
display: block;
388+
max-width: 100%;
389+
width: 100%;
390+
height: auto;
391+
margin-top: 4px;
392+
margin-bottom: 4px;
393+
border-radius: 8px;
394+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
395+
}

‎scripts/welcome.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ const repoConnectedSection = document.querySelector("#repo-connected");
88
const aTagForRepoUrl = document.querySelector("#repo-url");
99
const aTagforUnlinkRepo = document.querySelector("#unlink-repo");
1010
const starCodeHubButton = document.querySelector("#star-repo-button");
11+
const settingsIcon = document.querySelector("#settings-icon");
12+
const settingsModal = document.querySelector("#settings-modal");
13+
const closeModal = document.querySelector(".close");
1114

1215
authButton.addEventListener("click", () => {
1316
chrome.runtime.sendMessage({ action: "authenticateUser" });
@@ -21,6 +24,20 @@ starCodeHubButton.addEventListener("click", () => {
2124
window.open("http://www.github.com/febinbellamy/codehub", "_blank").focus();
2225
});
2326

27+
settingsIcon.addEventListener("click", () => {
28+
settingsModal.style.display = "block";
29+
});
30+
31+
closeModal.addEventListener("click", () => {
32+
settingsModal.style.display = "none";
33+
});
34+
35+
window.addEventListener("click", (event) => {
36+
if (event.target === settingsModal) {
37+
settingsModal.style.display = "none";
38+
}
39+
});
40+
2441
getStartedButton.addEventListener("click", () => {
2542
const selectedOption = document.querySelector("#repo-options").value;
2643
const userInput = document.querySelector("#user-input").value;

‎welcome.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,86 @@
111111
/>
112112
</svg>
113113
</a>
114+
<a id="settings-icon">
115+
<svg
116+
xmlns="http://www.w3.org/2000/svg"
117+
width="30"
118+
height="30"
119+
fill="currentColor"
120+
class="bi bi-gear-fill"
121+
viewBox="0 0 16 16"
122+
>
123+
<path
124+
d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"
125+
/>
126+
</svg>
127+
</a>
114128
</div>
115129
</footer>
116130
</main>
131+
<div id="settings-modal" class="modal">
132+
<div class="modal-content">
133+
<div class="modal-header">
134+
<h2>Settings</h2>
135+
<span class="close">&times;</span>
136+
</div>
137+
<div class="modal-body">
138+
<h3>Folder Structure Organization</h3>
139+
<p>
140+
Choose how you want CodeHub to organize your solutions in your
141+
GitHub repository:
142+
</p>
143+
144+
<div class="folder-option">
145+
<input
146+
type="radio"
147+
id="level-problem-language"
148+
name="folder-structure"
149+
value="level-problem-language"
150+
checked
151+
/>
152+
<label for="level-problem-language">
153+
<strong>Level → Problem → Language</strong> (Default)
154+
<div class="diagram">
155+
<img src="assets/levelProblemLanguage.png" />
156+
</div>
157+
</label>
158+
</div>
159+
<div class="folder-option">
160+
<input
161+
type="radio"
162+
id="language-level-problem"
163+
name="folder-structure"
164+
value="language-level-problem"
165+
/>
166+
<label for="language-level-problem">
167+
<strong>Language → Level → Problem</strong>
168+
<div class="diagram">
169+
<img src="assets/languageLevelProblem.png" />
170+
</div>
171+
</label>
172+
</div>
173+
174+
<div class="folder-option">
175+
<input
176+
type="radio"
177+
id="level-language-problem"
178+
name="folder-structure"
179+
value="level-language-problem"
180+
/>
181+
<label for="level-language-problem">
182+
<strong>Level → Language → Problem</strong>
183+
<div class="diagram">
184+
<img src="assets/levelLanguageProblem.png" />
185+
</div>
186+
</label>
187+
</div>
188+
</div>
189+
<div class="modal-footer">
190+
<button id="save-settings" class="save-btn">Save Settings</button>
191+
</div>
192+
</div>
193+
</div>
117194
<script src="scripts/welcome.js" type="module"></script>
118195
</body>
119196
</html>

0 commit comments

Comments
 (0)