diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css index 18ea7c7..8b421c9 100644 --- a/public/s/css/f0ck.css +++ b/public/s/css/f0ck.css @@ -3306,59 +3306,150 @@ input#s_avatar { background: var(--nav-border-color); margin: 5px 0; } + /* Nav Left Group - Flexbox for dropdown + links */ .nav-left-group { - display: flex; - align-items: center; - gap: 15px; - flex-wrap: wrap; + display: flex; + align-items: center; + gap: 15px; + flex-wrap: wrap; } .nav-links { - display: flex; - align-items: center; - gap: 12px; + display: flex; + align-items: center; + gap: 12px; } .nav-links a { - color: var(--white); - text-decoration: none; - font-size: 14px; - opacity: 0.8; - transition: opacity 0.2s; + color: var(--white); + text-decoration: none; + font-size: 14px; + opacity: 0.8; + transition: opacity 0.2s; } .nav-links a:hover { - opacity: 1; + opacity: 1; } .nav-links svg { - vertical-align: middle; + vertical-align: middle; } /* Mobile responsive navbar */ @media (max-width: 600px) { - .navbar { - flex-wrap: wrap; - gap: 10px; - } - - .nav-left-group { - order: 2; - width: 100%; - justify-content: space-between; - } - - .nav-links { - gap: 8px; - } - - .nav-user-btn { - padding: 4px 8px; - font-size: 12px; - } - - .nav-links a { - font-size: 12px; - } + .navbar { + flex-wrap: wrap; + gap: 10px; + } + + .nav-left-group { + order: 2; + width: 100%; + justify-content: space-between; + } + + .nav-links { + gap: 8px; + } + + .nav-user-btn { + padding: 4px 8px; + font-size: 12px; + } + + .nav-links a { + font-size: 12px; + } } + +/* Login Modal */ +#login-modal { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.85); + /* Semi-transparent black backdrop */ + z-index: 99999; + display: flex; + /* Hidden by default via inline style usually, or JS toggles class */ + justify-content: center; + align-items: center; + padding: 20px; + backdrop-filter: blur(5px); +} + +.login-modal-content { + background: var(--bg); + border: 1px solid var(--accent); + border-radius: 8px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + max-width: 400px; + width: 100%; + position: relative; + text-align: center; +} + +.login-modal-content .login-form { + display: flex; + flex-direction: column; + gap: 15px; + background: transparent; + /* Override default login-form bg if needed */ +} + +.login-modal-content .login-image { + max-width: 100%; + margin-bottom: 1rem; + border-radius: 4px; +} + +.login-modal-content input[type="text"], +.login-modal-content input[type="password"] { + width: 100%; + padding: 10px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid var(--nav-border-color); + color: var(--white); + font-family: var(--font); +} + +.login-modal-content input:focus { + border-color: var(--accent); + outline: none; +} + +.login-modal-content button[type="submit"] { + background: var(--accent); + color: var(--black); + border: none; + padding: 10px; + font-weight: bold; + cursor: pointer; + font-family: var(--font); + margin-top: 10px; +} + +.login-modal-content button[type="submit"]:hover { + filter: brightness(1.1); +} + +#login-modal-close { + position: absolute; + top: 10px; + right: 15px; + background: none; + border: none; + color: var(--white); + font-size: 1.5rem; + cursor: pointer; + opacity: 0.7; +} + +#login-modal-close:hover { + opacity: 1; + color: var(--accent); +} \ No newline at end of file diff --git a/public/s/js/f0ck.js b/public/s/js/f0ck.js index 75c7b05..a37f270 100644 --- a/public/s/js/f0ck.js +++ b/public/s/js/f0ck.js @@ -9,17 +9,64 @@ window.requestAnimFrame = (function () { (() => { let video; - // User dropdown toggle + // User & Visitor dropdown toggle const userToggle = document.getElementById('nav-user-toggle'); const userMenu = document.getElementById('nav-user-menu'); + const visitorToggle = document.getElementById('nav-visitor-toggle'); + const visitorMenu = document.getElementById('nav-visitor-menu'); + if (userToggle && userMenu) { userToggle.addEventListener('click', (e) => { e.stopPropagation(); userMenu.classList.toggle('show'); }); - document.addEventListener('click', (e) => { - if (!userMenu.contains(e.target) && !userToggle.contains(e.target)) { - userMenu.classList.remove('show'); + } + + if (visitorToggle && visitorMenu) { + visitorToggle.addEventListener('click', (e) => { + e.stopPropagation(); + visitorMenu.classList.toggle('show'); + }); + } + + document.addEventListener('click', (e) => { + if (userMenu && !userMenu.contains(e.target) && userToggle && !userToggle.contains(e.target)) { + userMenu.classList.remove('show'); + } + if (visitorMenu && !visitorMenu.contains(e.target) && visitorToggle && !visitorToggle.contains(e.target)) { + visitorMenu.classList.remove('show'); + } + }); + + // Login Modal Logic + const loginBtn = document.getElementById('nav-login-btn'); + const loginModal = document.getElementById('login-modal'); + const loginClose = document.getElementById('login-modal-close'); + + if (loginBtn && loginModal) { + loginBtn.addEventListener('click', (e) => { + e.preventDefault(); + loginModal.style.display = 'flex'; + // Close dropdown + if (visitorMenu) visitorMenu.classList.remove('show'); + }); + + if (loginClose) { + loginClose.addEventListener('click', () => { + loginModal.style.display = 'none'; + }); + } + + loginModal.addEventListener('click', (e) => { + if (e.target === loginModal) { + loginModal.style.display = 'none'; + } + }); + + // Handle ESC key to close + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && loginModal.style.display === 'flex') { + loginModal.style.display = 'none'; } }); } diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html index 4154bf9..724edfb 100644 --- a/views/snippets/navbar.html +++ b/views/snippets/navbar.html @@ -15,13 +15,13 @@ admin @endif settings + about
logout
tags - about @if(!/^\/\d$/.test(url.pathname)) @@ -53,10 +53,19 @@ w0bm.com -
-
    +
    +
    + + +
    +
    tags - about @if(!/^\/\d$/.test(url.pathname)) @@ -71,7 +80,7 @@ -
+
@if(typeof hidePagination === 'undefined' || !hidePagination) @@ -84,5 +93,20 @@ @endif +@endif -@endif \ No newline at end of file + + \ No newline at end of file