Skip to content

Commit 0aca1a0

Browse files
huizebruinhuizebruin
committed
fix 3
1 parent 213e4fa commit 0aca1a0

File tree

3 files changed

+114
-107
lines changed

3 files changed

+114
-107
lines changed

‎static/js/script.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ fetch('navbar.html')
33
.then(response => response.text())
44
.then(data => {
55
document.getElementById('navbar').innerHTML = data;
6+
// Mobile menu toggle logic
7+
const toggle = document.getElementById('navbar-toggle');
8+
const links = document.getElementById('navbar-links');
9+
if (toggle && links) {
10+
toggle.onclick = function() {
11+
links.classList.toggle('show');
12+
};
13+
}
614
})
715
.catch(error => console.error('Error loading navbar:', error));
816

@@ -27,8 +35,10 @@ document.addEventListener("DOMContentLoaded", function () {
2735
const emailUser = "support";
2836
const emailDomain = "s0tool.nl";
2937
const emailLink = document.getElementById("email-link");
30-
emailLink.href = `mailto:${emailUser}@${emailDomain}`;
31-
emailLink.textContent = `${emailUser}@${emailDomain}`;
38+
if (emailLink) {
39+
emailLink.href = `mailto:${emailUser}@${emailDomain}`;
40+
emailLink.textContent = `${emailUser}@${emailDomain}`;
41+
}
3242
});
3343

3444

‎static/navbar.html‎

Lines changed: 0 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
<!DOCTYPE html>
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>S0tool.nl</title>
7-
</head>
8-
<body>
91

102
<nav class="custom-navbar">
113
<div class="navbar-brand">
@@ -26,101 +18,4 @@
2618
</li>
2719
</ul>
2820
</nav>
29-
<script>
30-
// Mobiele menu toggle
31-
document.getElementById('navbar-toggle').onclick = function() {
32-
document.getElementById('navbar-links').classList.toggle('show');
33-
};
34-
</script>
35-
<style>
36-
.custom-navbar {
37-
background: #2d3748;
38-
color: #fff;
39-
display: flex;
40-
align-items: center;
41-
padding: 0.5rem 1.5rem;
42-
position: relative;
43-
font-family: 'Segoe UI', Arial, sans-serif;
44-
border-radius: 0 0 16px 16px;
45-
}
46-
.navbar-brand a {
47-
color: #fff;
48-
font-size: 1.3rem;
49-
font-weight: 700;
50-
text-decoration: none;
51-
margin-right: 2rem;
52-
}
53-
.navbar-toggle {
54-
background: none;
55-
border: none;
56-
color: #fff;
57-
font-size: 2rem;
58-
cursor: pointer;
59-
margin-left: auto;
60-
display: none;
61-
}
62-
.navbar-links {
63-
list-style: none;
64-
display: flex;
65-
gap: 1.2rem;
66-
margin: 0;
67-
padding: 0;
68-
align-items: center;
69-
flex-wrap: wrap;
70-
}
71-
.navbar-links li {
72-
display: flex;
73-
align-items: center;
74-
}
75-
.navbar-links a {
76-
color: #fff;
77-
text-decoration: none;
78-
font-size: 1rem;
79-
padding: 0.5rem 0.8rem;
80-
border-radius: 6px;
81-
transition: background 0.2s;
82-
}
83-
.navbar-links a:hover {
84-
background: #0d6efd;
85-
}
86-
.navbar-badge img {
87-
vertical-align: middle;
88-
margin-left: 0.5rem;
89-
}
90-
@media (max-width: 800px) {
91-
.custom-navbar {
92-
flex-direction: column;
93-
align-items: flex-start;
94-
padding: 0.5rem 1rem;
95-
}
96-
.navbar-toggle {
97-
display: block;
98-
margin-left: 0;
99-
margin-top: 0.5rem;
100-
}
101-
.navbar-links {
102-
flex-direction: column;
103-
width: 100%;
104-
display: none;
105-
gap: 0;
106-
}
107-
.navbar-links.show {
108-
display: flex;
109-
}
110-
.navbar-links li {
111-
width: 100%;
112-
margin-bottom: 0.5rem;
113-
}
114-
.navbar-links a {
115-
width: 100%;
116-
display: block;
117-
padding: 0.7rem 1rem;
118-
}
119-
.navbar-badge {
120-
margin-top: 0.5rem;
121-
}
122-
}
123-
</style>
12421

125-
</body>
126-
</html>

‎static/styles.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,4 +470,106 @@ body.show-special .special {
470470
font-size: 1.2rem;
471471
margin-bottom: 0.5rem;
472472
color: #fff;
473+
}
474+
475+
.custom-navbar {
476+
background: #2d3748;
477+
color: #fff;
478+
display: flex;
479+
align-items: center;
480+
padding: 0.5rem 1.5rem;
481+
position: relative;
482+
font-family: 'Segoe UI', Arial, sans-serif;
483+
border-radius: 0 0 16px 16px;
484+
}
485+
486+
.navbar-brand a {
487+
color: #fff;
488+
font-size: 1.3rem;
489+
font-weight: 700;
490+
text-decoration: none;
491+
margin-right: 2rem;
492+
}
493+
494+
.navbar-toggle {
495+
background: none;
496+
border: none;
497+
color: #fff;
498+
font-size: 2rem;
499+
cursor: pointer;
500+
margin-left: auto;
501+
display: none;
502+
}
503+
504+
.navbar-links {
505+
list-style: none;
506+
display: flex;
507+
gap: 1.2rem;
508+
margin: 0;
509+
padding: 0;
510+
align-items: center;
511+
flex-wrap: wrap;
512+
}
513+
514+
.navbar-links li {
515+
display: flex;
516+
align-items: center;
517+
}
518+
519+
.navbar-links a {
520+
color: #fff;
521+
text-decoration: none;
522+
font-size: 1rem;
523+
padding: 0.5rem 0.8rem;
524+
border-radius: 6px;
525+
transition: background 0.2s;
526+
}
527+
528+
.navbar-links a:hover {
529+
background: #0d6efd;
530+
}
531+
532+
.navbar-badge img {
533+
vertical-align: middle;
534+
margin-left: 0.5rem;
535+
}
536+
537+
@media (max-width: 800px) {
538+
.custom-navbar {
539+
flex-direction: column;
540+
align-items: flex-start;
541+
padding: 0.5rem 1rem;
542+
}
543+
544+
.navbar-toggle {
545+
display: block;
546+
margin-left: 0;
547+
margin-top: 0.5rem;
548+
}
549+
550+
.navbar-links {
551+
flex-direction: column;
552+
width: 100%;
553+
display: none;
554+
gap: 0;
555+
}
556+
557+
.navbar-links.show {
558+
display: flex;
559+
}
560+
561+
.navbar-links li {
562+
width: 100%;
563+
margin-bottom: 0.5rem;
564+
}
565+
566+
.navbar-links a {
567+
width: 100%;
568+
display: block;
569+
padding: 0.7rem 1rem;
570+
}
571+
572+
.navbar-badge {
573+
margin-top: 0.5rem;
574+
}
473575
}

0 commit comments

Comments
 (0)