w0bm/f0bm
4
0
Fork 1
Code Pull Requests Activity

adding login page to navbar

Browse Source
This commit is contained in:
x
2026-01-24 13:37:13 +01:00
parent 8397d4ed3f
commit 111f06ed42
3 changed files with 209 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
public/s/css/f0ck.css
View File

@@ -3306,59 +3306,150 @@ input#s_avatar {
background: var(--nav-border-color); background: var(--nav-border-color);
margin: 5px 0; margin: 5px 0;
} }
/* Nav Left Group - Flexbox for dropdown + links */ /* Nav Left Group - Flexbox for dropdown + links */
.nav-left-group { .nav-left-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 15px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.nav-links { .nav-links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.nav-links a { .nav-links a {
color: var(--white); color: var(--white);
text-decoration: none; text-decoration: none;
font-size: 14px; font-size: 14px;
opacity: 0.8; opacity: 0.8;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.nav-links a:hover { .nav-links a:hover {
opacity: 1; opacity: 1;
} }
.nav-links svg { .nav-links svg {
vertical-align: middle; vertical-align: middle;
} }
/* Mobile responsive navbar */ /* Mobile responsive navbar */
@media (max-width: 600px) { @media (max-width: 600px) {
.navbar { .navbar {
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
} }
.nav-left-group { .nav-left-group {
order: 2; order: 2;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
} }
.nav-links { .nav-links {
gap: 8px; gap: 8px;
} }
.nav-user-btn { .nav-user-btn {
padding: 4px 8px; padding: 4px 8px;
font-size: 12px; font-size: 12px;
} }
.nav-links a { .nav-links a {
font-size: 12px; 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);
}

55
public/s/js/f0ck.js
View File

@@ -9,17 +9,64 @@ window.requestAnimFrame = (function () {
(() => { (() => {
let video; let video;
// User dropdown toggle // User & Visitor dropdown toggle
const userToggle = document.getElementById('nav-user-toggle'); const userToggle = document.getElementById('nav-user-toggle');
const userMenu = document.getElementById('nav-user-menu'); const userMenu = document.getElementById('nav-user-menu');
const visitorToggle = document.getElementById('nav-visitor-toggle');
const visitorMenu = document.getElementById('nav-visitor-menu');
if (userToggle && userMenu) { if (userToggle && userMenu) {
userToggle.addEventListener('click', (e) => { userToggle.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
userMenu.classList.toggle('show'); 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';
} }
}); });
} }

36
views/snippets/navbar.html
View File

@@ -15,13 +15,13 @@
<a href="/admin">admin</a> <a href="/admin">admin</a>
@endif @endif
<a href="/settings">settings</a> <a href="/settings">settings</a>
<a href="/about">about</a>
<div class="nav-user-divider"></div> <div class="nav-user-divider"></div>
<a href="/logout">logout</a> <a href="/logout">logout</a>
</div> </div>
</div> </div>
<div class="nav-links"> <div class="nav-links">
<a href="/tags">tags</a> <a href="/tags">tags</a>
<a href="/about">about</a>
@if(!/^\/\d$/.test(url.pathname)) @if(!/^\/\d$/.test(url.pathname))
<a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" <a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
fill="currentColor" viewBox="0 0 16 16"> fill="currentColor" viewBox="0 0 16 16">
@@ -53,10 +53,19 @@
<!-- not logged in --> <!-- not logged in -->
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a> <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
<div class="navigation-links-guest"> <div class="nav-left-group">
<ol> <div class="nav-user-dropdown">
<button class="nav-user-btn" id="nav-visitor-toggle">
Not logged in ▾
</button>
<div class="nav-user-menu" id="nav-visitor-menu">
<a href="#" id="nav-login-btn">Login</a>
<div class="nav-user-divider"></div>
<a href="/about">about</a>
</div>
</div>
<div class="nav-links">
<a href="/tags">tags</a> <a href="/tags">tags</a>
<a href="/about">about</a>
@if(!/^\/\d$/.test(url.pathname)) @if(!/^\/\d$/.test(url.pathname))
<a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" <a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
fill="currentColor" viewBox="0 0 16 16"> fill="currentColor" viewBox="0 0 16 16">
@@ -71,7 +80,7 @@
<path <path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg></a> </svg></a>
</ol> </div>
</div> </div>
<!-- show pagination only for tags and main page --> <!-- show pagination only for tags and main page -->
@if(typeof hidePagination === 'undefined' || !hidePagination) @if(typeof hidePagination === 'undefined' || !hidePagination)
@@ -84,5 +93,20 @@
</div> </div>
@endif @endif
</nav> </nav>
@endif
@endif <!-- Login Modal -->
<div id="login-modal" style="display: none;">
<div class="login-modal-content">
<button id="login-modal-close">&times;</button>
<form class="login-form" method="post" action="/login">
<img class="login-image" src="/s/img/w0bm_mosh_banner_by_marderchen.gif" alt="Login Banner">
<input type="text" name="username" placeholder="Username" autocomplete="off" required />
<input type="password" name="password" placeholder="Password" autocomplete="off" required />
<p style="text-align: left; font-size: 0.9em; margin: 0;"><input type="checkbox" id="kmsi-modal" name="kmsi" />
<label for="kmsi-modal">Stay signed in</label>
</p>
<button type="submit">Login</button>
</form>
</div>
</div>