SRETSS/SREBOT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update nav (#1236)

Browse Source
This commit is contained in:
NotSoToothless
2026-05-14 14:41:54 -07:00
committed by GitHub
parent 6e66d23313
commit 5afaabaa11
1 changed files with 105 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/views/partials/nav.ejs
+103 -3
View File
@@ -1,16 +1,100 @@
<style>
#langDropdown .hidden-dropdown { display: none; }
#langDropdown.open .hidden-dropdown { display: block; }
/* Bot product switcher */
#botSwitcher .switcher-panel {
opacity: 0;
transform: translateY(-8px) scale(0.97);
pointer-events: none;
transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.3,1);
}
#botSwitcher.open .switcher-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
#botSwitcher .switcher-chevron { transition: transform 220ms ease; color: rgba(255,255,255,0.35); }
#botSwitcher.open .switcher-chevron { transform: rotate(180deg); color: #90EE90; }
#botSwitcher .switcher-trigger:hover .switcher-chevron { color: #90EE90; }
.switcher-row {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
transition: background-color 160ms ease;
text-decoration: none;
}
.switcher-row::before {
content: "";
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 2px;
border-radius: 0 2px 2px 0;
background: transparent;
transition: background 180ms ease;
}
.switcher-row:hover { background: rgba(255,255,255,0.035); }
.switcher-row.is-current::before { background: #90EE90; }
.switcher-row.is-tss:hover::before { background: #ff9d00; }
.switcher-row.is-tss:hover .switcher-arrow { transform: translate(2px,-2px); color: #ff9d00; }
.switcher-arrow { transition: transform 180ms ease, color 180ms ease; color: rgba(255,255,255,0.25); }
.switcher-glyph-sre {
background: radial-gradient(circle at 30% 30%, rgba(144,238,144,0.22), rgba(144,238,144,0.06) 60%, transparent 70%);
border: 1px solid rgba(144,238,144,0.35);
box-shadow: inset 0 0 12px rgba(144,238,144,0.08);
}
.switcher-glyph-tss {
background: radial-gradient(circle at 30% 30%, rgba(255,157,0,0.22), rgba(255,157,0,0.06) 60%, transparent 70%);
border: 1px solid rgba(255,157,0,0.35);
box-shadow: inset 0 0 12px rgba(255,157,0,0.08);
color: #ff9d00;
}
</style>
<!-- Navigation Bar -->
<nav class="fixed top-0 left-0 right-0 bg-[#1E1E1E]/98 backdrop-blur-md border-b border-white/5" style="z-index: 1000;">
<div class="w-full px-6 lg:px-8">
<div class="flex items-center h-16">
<!-- Left: Logo anchored -->
<a href="/" class="flex items-center space-x-3 flex-shrink-0">
<!-- Left: Product switcher -->
<div class="relative flex-shrink-0" id="botSwitcher">
<button type="button" onclick="document.getElementById('botSwitcher').classList.toggle('open')" class="switcher-trigger flex items-center space-x-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#90EE90]/40 rounded-md -ml-1 pl-1 pr-2 py-1" aria-haspopup="menu" aria-label="Switch bot">
<img src="/images/toothless_server.gif" alt="<%= botName %>" class="h-8 w-auto" width="32" height="32">
<span class="text-lg font-semibold"><span class="text-[#90EE90]">Toothless</span> <span class="text-accent">SREBOT</span></span>
<span class="text-lg font-semibold whitespace-nowrap"><span class="text-[#90EE90]">Toothless</span> <span class="text-accent">SREBOT</span></span>
<i class="fas fa-chevron-down switcher-chevron text-[10px] ml-0.5"></i>
</button>
<div class="switcher-panel absolute left-0 top-full mt-2 w-[300px] bg-[#171717] border border-white/10 rounded-xl shadow-2xl shadow-black/60 overflow-hidden" style="z-index: 200;" role="menu">
<div class="px-4 pt-3 pb-1.5 text-[10px] uppercase tracking-[0.18em] text-white/35 font-semibold">Switch bot</div>
<a href="/" class="switcher-row is-current" role="menuitem">
<span class="switcher-glyph-sre flex items-center justify-center w-9 h-9 rounded-lg flex-shrink-0 overflow-hidden">
<img src="/images/toothless_face.webp" alt="" class="h-6 w-6 object-contain" onerror="this.onerror=null;this.src='/images/toothless_server.gif'">
</span>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-white">Toothless SREBOT</span>
<span class="text-[9px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded-sm bg-[#90EE90]/15 text-[#90EE90]">Current</span>
</div>
<div class="text-[11px] text-white/40 mt-0.5">Squadron Ratings &amp; analytics</div>
</div>
</a>
<a href="https://tss.pawjob.us" class="switcher-row is-tss" role="menuitem">
<span class="switcher-glyph-tss flex items-center justify-center w-9 h-9 rounded-lg flex-shrink-0">
<i class="fas fa-chart-line text-sm"></i>
</span>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="text-sm font-semibold text-white">Toothless&rsquo; TSS Bot</span>
<i class="switcher-arrow fas fa-arrow-up-right-from-square text-[9px]"></i>
</div>
<div class="text-[11px] text-white/40 mt-0.5">Tournament Skill Score tracker</div>
</div>
</a>
<div class="px-4 py-2 border-t border-white/5 bg-white/[0.015] flex items-center justify-between text-[10px] text-white/30">
<span class="font-mono tracking-wider">pawjob.us</span>
<span class="flex items-center gap-1"><span class="inline-block w-1.5 h-1.5 rounded-full bg-[#90EE90] shadow-[0_0_6px_#90EE90]"></span>online</span>
</div>
</div>
</div>
<!-- Center: Nav links -->
<div class="hidden lg:flex items-center justify-center flex-1 space-x-6">
<% const navLinks = [
@@ -100,3 +184,19 @@
</div>
</div>
</nav>
<script>
(function(){
var sw = document.getElementById('botSwitcher');
if (!sw) return;
document.addEventListener('click', function(e){
if (sw.classList.contains('open') && !sw.contains(e.target)) {
sw.classList.remove('open');
}
});
document.addEventListener('keydown', function(e){
if (e.key === 'Escape' && sw.classList.contains('open')) {
sw.classList.remove('open');
}
});
})();
</script>