major refactoring + iframe introduction
This commit is contained in:
parent
bcd5579927
commit
ba1b10450f
@ -3,7 +3,8 @@ template_dir = "static/html"
|
||||
ip_header = "Proxy-Real-IP"
|
||||
|
||||
[debug]
|
||||
address = "127.0.0.1"
|
||||
# address = "127.0.0.1"
|
||||
address = "192.168.2.169"
|
||||
port = 8000
|
||||
|
||||
[release]
|
||||
|
||||
@ -11,7 +11,8 @@ body {
|
||||
.navbar {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
/*padding: 1rem;*/
|
||||
padding-left: 5px;
|
||||
padding-right: 7px;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
@ -23,9 +24,9 @@ body {
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 4%;
|
||||
height: 4%;
|
||||
margin-left: 5px;
|
||||
width: 5%;
|
||||
height: 5%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@ -39,6 +40,7 @@ body {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
@ -48,6 +50,14 @@ body {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.iframe-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@ -69,16 +79,21 @@ body {
|
||||
|
||||
.nav-toggle {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 10%;
|
||||
height: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,26 +3,35 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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="icon" href="/static/icons/logo.svg" type="image/svg+xml">
|
||||
</head>
|
||||
<body>
|
||||
<script src="/static/js/scripts.js"></script>
|
||||
<nav class="navbar">
|
||||
<div class="navbar-container">
|
||||
<div class="logo">
|
||||
<a href="#"><img src="/static/icons/logo.svg" alt="Logo" aria-hidden="true"></a>
|
||||
</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">
|
||||
</button>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
<ul id="nav-links" class="nav-links">
|
||||
<li><a onclick="clearIframe()">Home</a></li>
|
||||
<li><a href="https://git.engler-labs.root64.de">Gitea</a></li>
|
||||
<li><a onclick="loadIframe('https://git.engler-labs.root64.de')">Gitea2</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>
|
||||
</div>
|
||||
</nav>
|
||||
<script src="/static/js/scripts.js"></script>
|
||||
<div id="iframe-wrapper"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,52 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
function loadIframe(url) {
|
||||
const iframeWrapper = document.getElementById("iframe-wrapper");
|
||||
iframeWrapper.innerHTML = "";
|
||||
|
||||
navToggle.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('active');
|
||||
});
|
||||
const iframe = document.createElement("iframe");
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user