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
+43 -18
View File
@@ -11,16 +11,16 @@
<body>
<aside class="sidebar">
<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>
<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>
<nav id="navbar">
</nav>
@@ -44,7 +44,7 @@
if (lang == null) {
lang = navigator.language.split("-")[0];
}
if(lang == null){
if (lang != "en" && lang != "de") {
lang = "en";
}
history.scrollRestoration = "manual";
@@ -125,7 +125,7 @@
introduction.appendChild(content_introduction);
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.href = "https://github.com/marvinkrausser";
github_link_introduction.target = "_blank";
@@ -282,24 +282,49 @@
loadData();
const button = document.getElementById("dropdownButton");
const menu = document.getElementById("dropdownMenu");
const button = document.getElementById("lang-button");
const menu = document.getElementById("lang-menu");
const items = document.querySelectorAll(".lang-item");
button.textContent = lang;
// Dropdown öffnen/schließen
button.addEventListener("click", () => {
items.forEach(item => {
if (item.dataset.lang != lang) {
item.classList.toggle("hidden");
}
});
menu.classList.toggle("hidden");
});
// Auswahl verarbeiten
menu.addEventListener("click", (event) => {
const lang_selected = event.target.dataset.lang;
items.forEach(item => {
item.addEventListener("click", () => {
const lang_selected = item.dataset.lang;
if (lang_selected) {
document.cookie = `lang=${lang_selected}; path=/; max-age=3600`;
button.textContent = item.textContent;
menu.classList.add("hidden");
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");
items.forEach(element => {
element.classList.add("hidden");
});
}
});
function setCookie(name, value, maxAge) {
document.cookie = `${name}=${value}; path=/; max-age=${maxAge}`;
}
function getCookie(name) {
const cookies = document.cookie.split("; ");
lang/de.json
+2 -1
View File
@@ -15,7 +15,8 @@
"tags": [
"Python",
"PyTorch",
"CUDA"
"CUDA",
"LaTeX"
],
"github": "https://github.com/MarvinKrausser/pixelcnn",
"blocks": [
lang/en.json
+4 -3
View File
@@ -10,12 +10,13 @@
"content": [
{
"id": "pixelcnn",
"title": "PixelCNN Image Generation",
"title": "PixelCNN Generator",
"description": "Autoregressive deep learning model based on PixelCNN for generative image synthesis using PyTorch.",
"tags": [
"Python",
"PyTorch",
"CUDA"
"CUDA",
"LaTeX"
],
"github": "https://github.com/MarvinKrausser/pixelcnn",
"blocks": [
@@ -26,7 +27,7 @@
},
{
"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",
"links": [
{
main_style.css
+65 -11
View File
@@ -8,6 +8,7 @@
--serif: 'Instrument Serif', Georgia, serif;
--sans: 'DM Sans', system-ui, sans-serif;
--nav-w: 230px;
--font-size: 17px;
}
@media (prefers-color-scheme: dark) {
@@ -35,7 +36,7 @@ span,
li {
color: var(--muted);
line-height: 1.7;
font-size: 15px;
font-size: var(--font-size);
}
h1,
@@ -62,18 +63,64 @@ a {
width: 230px;
}
.hidden {
display: none;
.lang-dropdown {
display: flex;
gap: 3px;
margin-top: 10px;
width: 83px;
}
.dropdown-content {
border: 1px solid #ccc;
background: white;
position: absolute;
.lang-menu {
display: flex;
gap: 3px;
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 {
padding: 36px 32px 28px;
padding: 36px 32px 20px;
border-bottom: 1px solid var(--border);
}
@@ -86,6 +133,7 @@ a {
#sidebar-top-content p {
margin: 0;
pad: 0;
font-size: 13px;
}
#navbar {
@@ -104,7 +152,7 @@ a {
position: relative;
text-decoration: none;
color: var(--muted);
font-size: 0.9rem;
font-size: 13px;
}
.nav-link:hover {
@@ -136,6 +184,7 @@ a {
.nav-link .idx {
color: var(--muted);
font-weight: normal;
font-size: 13px;
}
#sidebar-bottom {
@@ -160,7 +209,7 @@ a {
#introduction {
padding-top: 100px;
margin-left: 60px;
margin-bottom: 150px;
margin-bottom: 60px;
margin-right: 100px;
}
@@ -248,7 +297,8 @@ a {
}
.text-content a {
font-size: 15px;
font-size: var(--font-size);
font-weight: normal;
}
.block-image img {
@@ -277,3 +327,7 @@ a {
margin: 60px;
margin-top: 30px;
}
.hidden {
display: none;
}