fabolous005/engler-labs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 10 Wiki Activity

major refactoring + iframe introduction

Browse Source
This commit is contained in:
fabolous005 2025-03-03 23:12:19 +01:00
parent bcd5579927
commit ba1b10450f
4 changed files with 90 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Rocket.toml
View File

@ -3,7 +3,8 @@ template_dir = "static/html"
ip_header = "Proxy-Real-IP" ip_header = "Proxy-Real-IP"
[debug] [debug]
address = "127.0.0.1" # address = "127.0.0.1"
address = "192.168.2.169"
port = 8000 port = 8000
[release] [release]

27
static/css/styles.css
View File

@ -11,7 +11,8 @@ body {
.navbar { .navbar {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
/*padding: 1rem;*/ padding-left: 5px;
padding-right: 7px;
position: relative; position: relative;
z-index: 1000; z-index: 1000;
} }
@ -23,9 +24,9 @@ body {
} }
.logo { .logo {
width: 4%; width: 5%;
height: 4%; height: 5%;
margin-left: 5px; margin-top: 2px;
} }
.nav-links { .nav-links {
@ -39,6 +40,7 @@ body {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
font-size: 1.3rem; font-size: 1.3rem;
cursor: pointer;
} }
.nav-toggle { .nav-toggle {
@ -48,6 +50,14 @@ body {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
margin: 20px;
}
.iframe-container {
width: 100%;
height: 100vh;
border: none;
display: block;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -69,16 +79,21 @@ body {
.nav-toggle { .nav-toggle {
display: flex; display: flex;
margin-right: 10px;
} }
.nav-links li { .nav-links li {
text-align: center; text-align: center;
padding: 1rem 0; margin-bottom: 1rem;
} }
.nav-links a { .nav-links a {
display: block; display: block;
width: 100%; width: 100%;
padding: 1rem 0;
} }
.logo {
width: 10%;
height: 10%;
}
} }

25
static/html/index.html.tera
View File

@ -3,26 +3,35 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar</title> <title>Engler-Labs</title>
<link rel="stylesheet" href="/static/css/styles.css"> <link rel="stylesheet" href="/static/css/styles.css">
<link rel="icon" href="/static/icons/logo.svg" type="image/svg+xml">
</head> </head>
<body> <body>
<script src="/static/js/scripts.js"></script>
<nav class="navbar"> <nav class="navbar">
<div class="navbar-container"> <div class="navbar-container">
<div class="logo"> <div class="logo">
<a href="#"><img src="/static/icons/logo.svg" alt="Logo" aria-hidden="true"></a> <a href="#"><img src="/static/icons/logo.svg" alt="Logo" aria-hidden="true"></a>
</div> </div>
<button class="nav-toggle" aria-label="toggle navigation"> <button id="nav-toggle" class="nav-toggle" aria-label="toggle navigation">
<img src="/static/icons/menu.svg" alt="Menu icon"> <img src="/static/icons/menu.svg" alt="Menu icon">
</button> </button>
<ul class="nav-links"> <ul id="nav-links" class="nav-links">
<li><a href="#home">Home</a></li> <li><a onclick="clearIframe()">Home</a></li>
<li><a href="#about">About</a></li> <li><a href="https://git.engler-labs.root64.de">Gitea</a></li>
<li><a href="#services">Services</a></li> <li><a onclick="loadIframe('https://git.engler-labs.root64.de')">Gitea2</a></li>
<li><a href="#contact">Contact</a></li> {% if local %}
<li><a href="https://music.engler-labs.root64.de">Music</a></li>
<li><a onclick="loadIframe('https://music.engler-labs.root64.de')">Music2</a></li>
<li><a href="https://health.engler-labs.root64.de">Health</a></li>
<li><a onclick="loadIframe('https://health.engler-labs.root64.de')">Health2</a></li>
<li><a href="https://adguard.engler-labs.root64.de">AdGuard</a></li>
<li><a onclick="loadIframe('https://adguard.engler-labs.root64.de')">AdGuard2</a></li>
{% endif %}
</ul> </ul>
</div> </div>
</nav> </nav>
<script src="/static/js/scripts.js"></script> <div id="iframe-wrapper"></div>
</body> </body>
</html> </html>

56
static/js/scripts.js
View File

@ -1,8 +1,52 @@
document.addEventListener('DOMContentLoaded', () => { function loadIframe(url) {
const navToggle = document.querySelector('.nav-toggle'); const iframeWrapper = document.getElementById("iframe-wrapper");
const navLinks = document.querySelector('.nav-links'); iframeWrapper.innerHTML = "";
navToggle.addEventListener('click', () => { const iframe = document.createElement("iframe");
navLinks.classList.toggle('active'); iframe.src = url;
}); iframe.className = "iframe-container";
iframeWrapper.appendChild(iframe);
iframe.addEventListener("load", function() {
try {
iframe.contentWindow.document.addEventListener("click", function() {
window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
});
} catch (error) {
console.warn("Cross-origin iframe: Cannot access iframe content.");
}
});
const navLinks = document.getElementById('nav-links');
navLinks.classList.remove('active');
}
function clearIframe() {
document.getElementById("iframe-wrapper").innerHTML = "";
const navLinks = document.getElementById('nav-links');
navLinks.classList.remove('active');
}
document.addEventListener('DOMContentLoaded', () => {
//const navToggle = document.querySelector('.nav-toggle');
//const navLinks = document.querySelector('.nav-links');
//
//navToggle.addEventListener('click', () => {
// navLinks.classList.toggle('active');
//});
document.addEventListener("click", function (event) {
const navLinks = document.getElementById("nav-links");
const toggleButton = document.getElementById("nav-toggle");
if (navLinks.classList.contains("active")) {
if (!navLinks.contains(event.target) && !toggleButton.contains(event.target)) {
navLinks.classList.remove("expanded");
}
}
const button = event.target.closest("button");
if (button && button.className === "nav-toggle") {
navLinks.classList.toggle('active');
}
});
}); });