diff --git a/Rocket.toml b/Rocket.toml index cc67c7d..fc2d547 100644 --- a/Rocket.toml +++ b/Rocket.toml @@ -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] diff --git a/static/css/styles.css b/static/css/styles.css index b142c9e..d7be41b 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -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%; + } } diff --git a/static/html/index.html.tera b/static/html/index.html.tera index 803c86a..de5ac38 100644 --- a/static/html/index.html.tera +++ b/static/html/index.html.tera @@ -3,26 +3,35 @@ - Responsive Navbar + Engler-Labs + + - +
diff --git a/static/js/scripts.js b/static/js/scripts.js index 2a2dd27..84599ca 100644 --- a/static/js/scripts.js +++ b/static/js/scripts.js @@ -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'); + } + }); });