adding login page to navbar
This commit is contained in:
x
@@ -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);
|
||||
}
|
||||
@@ -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';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -15,13 +15,13 @@
|
||||
<a href="/admin">admin</a>
|
||||
@endif
|
||||
<a href="/settings">settings</a>
|
||||
<a href="/about">about</a>
|
||||
<div class="nav-user-divider"></div>
|
||||
<a href="/logout">logout</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="/tags">tags</a>
|
||||
<a href="/about">about</a>
|
||||
@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"
|
||||
fill="currentColor" viewBox="0 0 16 16">
|
||||
@@ -53,10 +53,19 @@
|
||||
<!-- not logged in -->
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
|
||||
<div class="navigation-links-guest">
|
||||
<ol>
|
||||
<div class="nav-left-group">
|
||||
<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="/about">about</a>
|
||||
@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"
|
||||
fill="currentColor" viewBox="0 0 16 16">
|
||||
@@ -71,7 +80,7 @@
|
||||
<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" />
|
||||
</svg></a>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<!-- show pagination only for tags and main page -->
|
||||
@if(typeof hidePagination === 'undefined' || !hidePagination)
|
||||
@@ -84,5 +93,20 @@
|
||||
</div>
|
||||
@endif
|
||||
</nav>
|
||||
@endif
|
||||
|
||||
@endif
|
||||
<!-- Login Modal -->
|
||||
<div id="login-modal" style="display: none;">
|
||||
<div class="login-modal-content">
|
||||
<button id="login-modal-close">×</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>
|
||||
Reference in New Issue
Block a user