marvin/MarvinKrausser.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'test'

Browse Source
This commit is contained in:
marvin
2026-05-08 01:43:02 +02:00
parent 64247659c1 5c887d66ea
commit fa2be110df
5 changed files with 178 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+19 -1
View File
@@ -12,7 +12,25 @@
</head>
<body>
<button id="button-mobile" class="button-mobile">22</button>
<div id="navbar-mobile">
<div id="navbar-mobile-links">
</div>
<label class="switch">
<input type="checkbox" id="themeToggle2">
<span class="slider"></span>
</label>
<div class="lang-dropdown" id="lang-dropdown2">
<button class="lang-button" id="lang-button2">Sprache</button>
<div id="lang-menu2" class="lang-menu hidden">
<div class="lang-item hidden" data-lang="de">de</div>
<div class="lang-item hidden" data-lang="en">en</div>
</div>
</div>
</div>
<aside class="sidebar">
@@ -34,7 +52,7 @@
<div class="lang-dropdown" id="lang-dropdown">
<button id="lang-button">Sprache</button>
<button id="lang-button" class="lang-button">Sprache</button>
<div id="lang-menu" class="lang-menu hidden">
<div class="lang-item hidden" data-lang="de">de</div>
scripts/main_page.js
+82 -60
View File
@@ -6,26 +6,6 @@ if (lang != "en" && lang != "de") {
lang = "en";
}
const toggle = document.getElementById("themeToggle");
toggle.addEventListener("change", () => {
document.documentElement.classList.toggle("dark", toggle.checked);
if (toggle.checked) {
setCookie("theme", "dark", 60 * 60 * 24 * 7);
}
else {
setCookie("theme", "light", 60 * 60 * 24 * 7);
}
});
const theme = getCookie("theme");
if (theme === "dark") {
document.documentElement.classList.add("dark");
toggle.checked = true;
}
history.scrollRestoration = "manual";
function saveScroll() {
@@ -86,6 +66,21 @@ async function loadData() {
const sidebar_top = document.getElementById("sidebar-top-content");
const navbar_mobile = document.getElementById("navbar-mobile");
const navbar_mobile_links = document.getElementById("navbar-mobile-links");
const button_navbar_mobile = document.createElement("button");
const button_mobile = document.getElementById("button-mobile");
button_navbar_mobile.textContent = "";
button_mobile.textContent = "";
button_navbar_mobile.classList = "button-mobile";
navbar_mobile_links.appendChild(button_navbar_mobile);
button_navbar_mobile.addEventListener("click", () => {
navbar_mobile.classList.toggle("inactive");
button_mobile.classList.toggle("inactive");
});
button_mobile.addEventListener("click", () => {
navbar_mobile.classList.toggle("inactive");
button_mobile.classList.toggle("inactive");
});
const sidebar_top_status = document.createElement("p");
sidebar_top_status.textContent = data.status;
@@ -115,7 +110,7 @@ async function loadData() {
github_link_introduction.rel = "noopener noreferrer";
introduction.appendChild(github_link_introduction);
create_navbar_entry(navbar, navbar_mobile, data.title_introduction, "introduction", 0);
create_navbar_entry(navbar, navbar_mobile_links, data.title_introduction, "introduction", 0);
const navbar_group = document.createElement("li");
navbar_group.className = "navbar-group";
@@ -130,7 +125,7 @@ async function loadData() {
project.setAttribute("data-nav", item.id);
container.appendChild(project);
create_navbar_entry(navbar, navbar_mobile, item.title, item.id, j + 1);
create_navbar_entry(navbar, navbar_mobile_links, item.title, item.id, j + 1);
const header = document.createElement("div");
header.className = "section-header";
@@ -232,52 +227,79 @@ async function loadData() {
});
restoreScroll();
setupObserver();
navbar_mobile.classList.add("inactive");
}
loadData();
const button = document.getElementById("lang-button");
const menu = document.getElementById("lang-menu");
const items = document.querySelectorAll(".lang-item");
const dropdown = document.getElementById("lang-dropdown");
function setupLangDropdown(buttonId, menuId, dropdownId, themeToggle) {
const toggle = document.getElementById(themeToggle);
button.textContent = lang;
toggle.addEventListener("change", () => {
document.documentElement.classList.toggle("dark", toggle.checked);
if (toggle.checked) {
setCookie("theme", "dark", 60 * 60 * 24 * 7);
}
else {
setCookie("theme", "light", 60 * 60 * 24 * 7);
}
button.addEventListener("click", () => {
items.forEach(item => {
item.classList.toggle("hidden", item.dataset.lang == lang);
});
menu.classList.toggle("hidden");
dropdown.classList.toggle("show-border");
});
items.forEach(item => {
item.addEventListener("click", () => {
const lang_selected = item.dataset.lang;
const theme = getCookie("theme");
button.textContent = item.textContent;
menu.classList.add("hidden");
dropdown.classList.remove("show-border");
items.forEach(element => {
element.classList.add("hidden");
});
setCookie("lang", lang_selected, "3600");
location.reload();
});
});
document.addEventListener("click", (e) => {
if (!e.target.closest(".lang-dropdown")) {
menu.classList.add("hidden");
dropdown.classList.remove("show-border");
items.forEach(element => {
element.classList.add("hidden");
});
if (theme === "dark") {
document.documentElement.classList.add("dark");
toggle.checked = true;
}
});
function create_navbar_entry(navbar, navar_mobile, title, id, j) {
const button = document.getElementById(buttonId);
const menu = document.getElementById(menuId);
const dropdown = document.getElementById(dropdownId);
const items = menu.querySelectorAll(".lang-item");
button.textContent = lang;
button.addEventListener("click", (e) => {
e.stopPropagation();
items.forEach(item => {
item.classList.toggle("hidden", item.dataset.lang == lang);
});
menu.classList.toggle("hidden");
dropdown.classList.toggle("show-border");
});
items.forEach(item => {
item.addEventListener("click", () => {
const lang_selected = item.dataset.lang;
button.textContent = item.textContent;
menu.classList.add("hidden");
dropdown.classList.remove("show-border");
items.forEach(el => el.classList.add("hidden"));
setCookie("lang", lang_selected, "3600");
location.reload();
});
});
document.addEventListener("click", (e) => {
if (!e.target.closest(`#${dropdownId}`)) {
menu.classList.add("hidden");
dropdown.classList.remove("show-border");
items.forEach(el => el.classList.add("hidden"));
}
});
}
setupLangDropdown("lang-button", "lang-menu", "lang-dropdown", "themeToggle");
setupLangDropdown("lang-button2", "lang-menu2", "lang-dropdown2", "themeToggle2");
function create_navbar_entry(navbar, navbar_mobile_links, title, id, j) {
const navbar_item = document.createElement("li");
navbar_item.className = "navbar-item";
navbar.appendChild(navbar_item);
@@ -296,13 +318,13 @@ function create_navbar_entry(navbar, navar_mobile, title, id, j) {
navbar_link.dataset.target = id;
navbar_item.appendChild(navbar_link);
create_navbar_entry_mobile(navar_mobile, title, id)
create_navbar_entry_mobile(navbar_mobile_links, title, id)
}
function create_navbar_entry_mobile(navar_mobile, title, id) {
function create_navbar_entry_mobile(navbar_mobile_links, title, id) {
const navbar_item = document.createElement("li");
navbar_item.className = "navbar-item-mobile";
navar_mobile.appendChild(navbar_item);
navbar_mobile_links.appendChild(navbar_item);
const navbar_link = document.createElement("a");
navbar_link.className = "nav-link-mobile";
styles/mobile_bar_style.css
+71 -1
View File
@@ -13,12 +13,82 @@
background: var(--bg);
}
#navbar-mobile.inactive {
display: none;
}
@media (min-width: 1001px) {
#navbar-mobile {
display: none;
}
}
#navbar-mobile-links {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.button-mobile {
position: relative;
width: 40px;
height: 40px;
background: var(--surface);
border: none;
margin-top: 20px;
cursor: pointer;
border: 1px solid var(--border);
}
.button-mobile::before {
content: "";
position: absolute;
left: 50%;
top: 30%;
background: var(--muted);
height: 2px;
width: 60%;
transform: translateX(-50%);
}
.button-mobile::after {
content: "";
position: absolute;
left: 50%;
top: 65%;
background: var(--muted);
height: 2px;
width: 60%;
transform: translateX(-50%);
}
.button-mobile:hover::after {
background: var(--text);
}
.button-mobile:hover::before {
background: var(--text);
}
.button-mobile:hover {
width: 40px;
height: 40px;
background: var(--bg2);
}
#button-mobile {
position: fixed;
top: 5px;
left: 5px;
margin-top: 0;
}
#button-mobile.inactive {
display: none;
}
.navbar-item-mobile {
width: 100%;
height: 80px;
@@ -26,7 +96,6 @@
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.navbar-item-mobile:hover {
@@ -41,4 +110,5 @@
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
styles/projects_style.css
+4 -2
View File
@@ -1,17 +1,19 @@
.main-content {
margin-left: var(--nav-w);
--margin-main-content: 100px;
--margin-top: 100px;
}
@media (max-width: 1000px) {
.main-content {
margin-left: var(--nav-mobile-w);
margin-left: 0;
--margin-main-content: 10px;
--margin-top: 30px;
}
}
#introduction {
padding-top: 100px;
padding-top: var(--margin-top);
margin-left: var(--margin-main-content);
margin-bottom: 60px;
margin-right: var(--margin-main-content);
styles/sidebar_style.css
+2 -2
View File
@@ -232,7 +232,7 @@ input:checked+.slider:before {
color: var(--text);
}
#lang-button {
.lang-button {
width: 40px;
height: 30px;
appearance: none;
@@ -249,7 +249,7 @@ input:checked+.slider:before {
font-size: 14px;
}
#lang-button:hover {
.lang-button:hover {
border-color: var(--text);
color: var(--text);
}