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

added language change button

Browse Source
This commit is contained in:
marvin
2026-04-26 15:43:38 +02:00
parent 28101d0a33
commit 3c8f4ce463
4 changed files with 115 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+44 -19
View File
@@ -11,16 +11,16 @@
<body> <body>
<aside class="sidebar"> <aside class="sidebar">
<div id="sidebar-top"> <div id="sidebar-top">
<div class="dropdown">
<button id="dropdownButton">Sprache</button>
<div id="dropdownMenu" class="dropdown-content hidden">
<div data-lang="de">Deutsch</div>
<div data-lang="en">English</div>
</div>
</div>
<h3 id="sidebar-top-head">Marvin Kraußer</h3> <h3 id="sidebar-top-head">Marvin Kraußer</h3>
<div id="sidebar-top-content"></div> <div id="sidebar-top-content"></div>
<div class="lang-dropdown">
<button id="lang-button">Sprache</button>
<div id="lang-menu" 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> </div>
<nav id="navbar"> <nav id="navbar">
</nav> </nav>
@@ -41,10 +41,10 @@
//document.cookie = "lang=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; //document.cookie = "lang=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
let lang = getCookie("lang"); let lang = getCookie("lang");
console.log(lang); console.log(lang);
if(lang == null){ if (lang == null) {
lang = navigator.language.split("-")[0]; lang = navigator.language.split("-")[0];
} }
if(lang == null){ if (lang != "en" && lang != "de") {
lang = "en"; lang = "en";
} }
history.scrollRestoration = "manual"; history.scrollRestoration = "manual";
@@ -125,7 +125,7 @@
introduction.appendChild(content_introduction); introduction.appendChild(content_introduction);
const github_link_introduction = document.createElement("a"); const github_link_introduction = document.createElement("a");
github_link_introduction.textContent = data.github_desc; github_link_introduction.textContent = "GitHub ↗"
github_link_introduction.className = "text-link introduction"; github_link_introduction.className = "text-link introduction";
github_link_introduction.href = "https://github.com/marvinkrausser"; github_link_introduction.href = "https://github.com/marvinkrausser";
github_link_introduction.target = "_blank"; github_link_introduction.target = "_blank";
@@ -282,24 +282,49 @@
loadData(); loadData();
const button = document.getElementById("dropdownButton"); const button = document.getElementById("lang-button");
const menu = document.getElementById("dropdownMenu"); const menu = document.getElementById("lang-menu");
const items = document.querySelectorAll(".lang-item");
button.textContent = lang;
// Dropdown öffnen/schließen
button.addEventListener("click", () => { button.addEventListener("click", () => {
items.forEach(item => {
if (item.dataset.lang != lang) {
item.classList.toggle("hidden");
}
});
menu.classList.toggle("hidden"); menu.classList.toggle("hidden");
}); });
// Auswahl verarbeiten items.forEach(item => {
menu.addEventListener("click", (event) => { item.addEventListener("click", () => {
const lang_selected = event.target.dataset.lang; const lang_selected = item.dataset.lang;
if (lang_selected) { button.textContent = item.textContent;
document.cookie = `lang=${lang_selected}; path=/; max-age=3600`; menu.classList.add("hidden");
items.forEach(element => {
element.classList.add("hidden");
});
setCookie("lang", lang_selected, "3600");
location.reload(); location.reload();
});
});
document.addEventListener("click", (e) => {
if (!e.target.closest(".lang-dropdown")) {
menu.classList.add("hidden");
items.forEach(element => {
element.classList.add("hidden");
});
} }
}); });
function setCookie(name, value, maxAge) {
document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`;
}
function getCookie(name) { function getCookie(name) {
const cookies = document.cookie.split("; "); const cookies = document.cookie.split("; ");
lang/de.json
+2 -1
View File
@@ -15,7 +15,8 @@
"tags": [ "tags": [
"Python", "Python",
"PyTorch", "PyTorch",
"CUDA" "CUDA",
"LaTeX"
], ],
"github": "https://github.com/MarvinKrausser/pixelcnn", "github": "https://github.com/MarvinKrausser/pixelcnn",
"blocks": [ "blocks": [
lang/en.json
+4 -3
View File
@@ -10,12 +10,13 @@
"content": [ "content": [
{ {
"id": "pixelcnn", "id": "pixelcnn",
"title": "PixelCNN Image Generation", "title": "PixelCNN Generator",
"description": "Autoregressive deep learning model based on PixelCNN for generative image synthesis using PyTorch.", "description": "Autoregressive deep learning model based on PixelCNN for generative image synthesis using PyTorch.",
"tags": [ "tags": [
"Python", "Python",
"PyTorch", "PyTorch",
"CUDA" "CUDA",
"LaTeX"
], ],
"github": "https://github.com/MarvinKrausser/pixelcnn", "github": "https://github.com/MarvinKrausser/pixelcnn",
"blocks": [ "blocks": [
@@ -26,7 +27,7 @@
}, },
{ {
"heading": "Seminar paper", "heading": "Seminar paper",
"text": "A --link-- and --link-- was created alongside the Project.", "text": "A --link-- and --link-- were created alongside the Project.",
"image": "images/seminararbeit.png", "image": "images/seminararbeit.png",
"links": [ "links": [
{ {
main_style.css
+65 -11
View File
@@ -8,6 +8,7 @@
--serif: 'Instrument Serif', Georgia, serif; --serif: 'Instrument Serif', Georgia, serif;
--sans: 'DM Sans', system-ui, sans-serif; --sans: 'DM Sans', system-ui, sans-serif;
--nav-w: 230px; --nav-w: 230px;
--font-size: 17px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@@ -35,7 +36,7 @@ span,
li { li {
color: var(--muted); color: var(--muted);
line-height: 1.7; line-height: 1.7;
font-size: 15px; font-size: var(--font-size);
} }
h1, h1,
@@ -62,18 +63,64 @@ a {
width: 230px; width: 230px;
} }
.hidden { .lang-dropdown {
display: none; display: flex;
gap: 3px;
margin-top: 10px;
width: 83px;
} }
.dropdown-content { .lang-menu {
border: 1px solid #ccc; display: flex;
background: white; gap: 3px;
position: absolute; margin-top: 5px;
}
.lang-item {
cursor: pointer;
background-color: var(--surface);
width: 40px;
height: 20px;
text-align: center;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
}
.lang-item:hover {
border-color: var(--text);
color: var(--text);
}
#lang-button {
width: 40px;
height: 30px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
background-color: var(--surface);
color: var(--muted);
border-radius: 8px;
border: 1px solid var(--border);
padding: 3px 6px;
font-size: 14px;
}
#lang-button:hover {
border-color: var(--text);
color: var(--text);
}
option {
border: 1px solid var(--border);
border-radius: 8px;
} }
#sidebar-top { #sidebar-top {
padding: 36px 32px 28px; padding: 36px 32px 20px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
@@ -86,6 +133,7 @@ a {
#sidebar-top-content p { #sidebar-top-content p {
margin: 0; margin: 0;
pad: 0; pad: 0;
font-size: 13px;
} }
#navbar { #navbar {
@@ -104,7 +152,7 @@ a {
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: var(--muted); color: var(--muted);
font-size: 0.9rem; font-size: 13px;
} }
.nav-link:hover { .nav-link:hover {
@@ -136,6 +184,7 @@ a {
.nav-link .idx { .nav-link .idx {
color: var(--muted); color: var(--muted);
font-weight: normal; font-weight: normal;
font-size: 13px;
} }
#sidebar-bottom { #sidebar-bottom {
@@ -160,7 +209,7 @@ a {
#introduction { #introduction {
padding-top: 100px; padding-top: 100px;
margin-left: 60px; margin-left: 60px;
margin-bottom: 150px; margin-bottom: 60px;
margin-right: 100px; margin-right: 100px;
} }
@@ -248,7 +297,8 @@ a {
} }
.text-content a { .text-content a {
font-size: 15px; font-size: var(--font-size);
font-weight: normal;
} }
.block-image img { .block-image img {
@@ -277,3 +327,7 @@ a {
margin: 60px; margin: 60px;
margin-top: 30px; margin-top: 30px;
} }
.hidden {
display: none;
}