NotSoToothless
203 lines
16 KiB
Plaintext
203 lines
16 KiB
Plaintext
<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: 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 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 & 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’ 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 = [
|
|
{ href: '/', key: 'home' },
|
|
{ href: '/squadrons', key: 'squadrons' },
|
|
{ href: '/leaderboard/players', key: 'leaderboards' },
|
|
{ href: '/analytics', key: 'analytics' },
|
|
{ href: '/docs', key: 'docs' },
|
|
]; %>
|
|
<% navLinks.forEach(link => { %>
|
|
<% if (typeof activePage !== 'undefined' && activePage === link.key) { %>
|
|
<a href="<%= link.href %>" class="text-accent transition-colors text-sm font-medium border-b-2 border-accent pb-1"><%= t('nav.' + link.key) %></a>
|
|
<% } else { %>
|
|
<a href="<%= link.href %>" class="text-muted hover:text-accent transition-colors text-sm font-medium"><%= t('nav.' + link.key) %></a>
|
|
<% } %>
|
|
<% }); %>
|
|
<a href="/premium" class="<%= typeof activePage !== 'undefined' && activePage === 'premium' ? 'nav-premium transition-colors text-sm font-medium border-b-2 border-[#ffd700] pb-1' : 'nav-premium transition-colors text-sm font-medium' %>"><%= t('nav.premium') %></a>
|
|
<a href="/support" class="nav-rainbow transition-colors text-sm font-medium flex items-center">
|
|
<i class="fas fa-life-ring mr-1.5 text-xs"></i>
|
|
<%= t('nav.support') %>
|
|
</a>
|
|
<a href="https://ko-fi.com/notsotoothless" target="_blank" rel="noopener noreferrer" class="nav-donate transition-colors text-sm font-medium flex items-center">
|
|
<i class="fas fa-heart mr-1.5 text-xs"></i>
|
|
<%= t('nav.donate') %>
|
|
</a>
|
|
</div>
|
|
<!-- Right: Language toggle + Discord -->
|
|
<div class="hidden lg:flex items-center space-x-6 flex-shrink-0">
|
|
<div class="relative" id="langDropdown">
|
|
<button onclick="document.getElementById('langDropdown').classList.toggle('open')" class="flex items-center gap-3 px-3 py-1.5 text-sm font-medium rounded-md border transition-colors" style="border-color: rgba(144,238,144,0.2); color: #90EE90;">
|
|
<span id="langCurrent"><%= lang === 'en' ? 'ENG' : lang === 'ru' ? 'РУС' : lang === 'fr' ? 'FRA' : lang === 'it' ? 'ITA' : lang === 'uk' ? 'УКР' : lang === 'de' ? 'DEU' : lang === 'es' ? 'ESP' : lang === 'pl' ? 'POL' : lang === 'cs' ? 'CES' : '简中' %></span>
|
|
<i class="fas fa-chevron-down text-[10px] opacity-60"></i>
|
|
</button>
|
|
<div class="absolute right-0 top-full mt-1 min-w-[170px] bg-[#2A2A2A] border border-white/10 rounded-lg shadow-xl overflow-hidden hidden-dropdown" style="z-index: 100;">
|
|
<button onclick="switchLanguage('en')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'en' ? 'text-[#90EE90]' : 'text-white/70' %>">ENG <span class="text-white/30 ml-1">English</span></button>
|
|
<button onclick="switchLanguage('ru')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'ru' ? 'text-[#90EE90]' : 'text-white/70' %>">РУС <span class="text-white/30 ml-1">Русский</span></button>
|
|
<button onclick="switchLanguage('fr')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'fr' ? 'text-[#90EE90]' : 'text-white/70' %>">FRA <span class="text-white/30 ml-1">Français</span></button>
|
|
<button onclick="switchLanguage('it')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'it' ? 'text-[#90EE90]' : 'text-white/70' %>">ITA <span class="text-white/30 ml-1">Italiano</span></button>
|
|
<button onclick="switchLanguage('uk')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'uk' ? 'text-[#90EE90]' : 'text-white/70' %>">УКР <span class="text-white/30 ml-1">Українська</span></button>
|
|
<button onclick="switchLanguage('de')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'de' ? 'text-[#90EE90]' : 'text-white/70' %>">DEU <span class="text-white/30 ml-1">Deutsch</span></button>
|
|
<button onclick="switchLanguage('es')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'es' ? 'text-[#90EE90]' : 'text-white/70' %>">ESP <span class="text-white/30 ml-1">Español</span></button>
|
|
<button onclick="switchLanguage('pl')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'pl' ? 'text-[#90EE90]' : 'text-white/70' %>">POL <span class="text-white/30 ml-1">Polski</span></button>
|
|
<button onclick="switchLanguage('cs')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'cs' ? 'text-[#90EE90]' : 'text-white/70' %>">CES <span class="text-white/30 ml-1">Čeština</span></button>
|
|
<button onclick="switchLanguage('zh-CN')" class="lang-option w-full text-left px-3 py-2 text-sm hover:bg-white/5 transition-colors <%= lang === 'zh-CN' ? 'text-[#90EE90]' : 'text-white/70' %>">简中 <span class="text-white/30 ml-1">简体中文</span></button>
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary px-4 py-2 rounded-lg text-sm font-bold inline-flex items-center" id="inviteBtn">
|
|
<i class="fab fa-discord mr-2"></i><%= t('nav.addToDiscord') %>
|
|
</button>
|
|
</div>
|
|
<button class="lg:hidden text-accent" id="mobileMenuBtn">
|
|
<i class="fas fa-bars text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="hidden lg:hidden border-t border-white/5 bg-[#1E1E1E]/98" id="mobileMenu">
|
|
<div class="px-6 py-4 space-y-2">
|
|
<% navLinks.forEach(link => { %>
|
|
<% if (typeof activePage !== 'undefined' && activePage === link.key) { %>
|
|
<a href="<%= link.href %>" class="block px-4 py-2 text-accent bg-white/5 rounded-md"><%= t('nav.' + link.key) %></a>
|
|
<% } else { %>
|
|
<a href="<%= link.href %>" class="block px-4 py-2 text-muted hover:bg-white/5 rounded-md"><%= t('nav.' + link.key) %></a>
|
|
<% } %>
|
|
<% }); %>
|
|
<a href="/premium" class="block px-4 py-2 nav-premium <%= typeof activePage !== 'undefined' && activePage === 'premium' ? 'bg-white/5' : 'hover:bg-white/5' %> rounded-md"><%= t('nav.premium') %></a>
|
|
<a href="/support" class="block px-4 py-2 nav-rainbow hover:bg-white/5 rounded-md">
|
|
<i class="fas fa-life-ring mr-2"></i><%= t('nav.support') %>
|
|
</a>
|
|
<a href="https://ko-fi.com/notsotoothless" target="_blank" rel="noopener noreferrer" class="block px-4 py-2 nav-donate hover:bg-white/5 rounded-md">
|
|
<i class="fas fa-heart mr-2"></i><%= t('nav.donate') %>
|
|
</a>
|
|
<button class="block w-full px-4 py-2 btn-primary font-semibold rounded-md text-center" id="inviteBtnMobile">
|
|
<i class="fab fa-discord mr-2"></i><%= t('nav.addToDiscord') %>
|
|
</button>
|
|
<div class="border border-white/10 rounded-md overflow-hidden">
|
|
<button onclick="switchLanguage('en')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'en' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ENG — English</button>
|
|
<button onclick="switchLanguage('ru')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'ru' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">РУС — Русский</button>
|
|
<button onclick="switchLanguage('fr')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'fr' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">FRA — Français</button>
|
|
<button onclick="switchLanguage('it')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'it' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ITA — Italiano</button>
|
|
<button onclick="switchLanguage('uk')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'uk' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">УКР — Українська</button>
|
|
<button onclick="switchLanguage('de')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'de' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">DEU — Deutsch</button>
|
|
<button onclick="switchLanguage('es')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'es' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">ESP — Español</button>
|
|
<button onclick="switchLanguage('pl')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'pl' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">POL — Polski</button>
|
|
<button onclick="switchLanguage('cs')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'cs' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">CES — Čeština</button>
|
|
<button onclick="switchLanguage('zh-CN')" class="block w-full text-left px-4 py-2 text-sm transition-colors <%= lang === 'zh-CN' ? 'bg-[rgba(144,238,144,0.15)] text-[#90EE90]' : 'text-white/50 hover:bg-white/5' %>">简中 — 简体中文</button>
|
|
</div>
|
|
</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>
|