frotting (#1237)
This commit is contained in:
NotSoToothless
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
+150
-55
@@ -2,55 +2,157 @@
|
||||
#langDropdown .hidden-dropdown { display: none; }
|
||||
#langDropdown.open .hidden-dropdown { display: block; }
|
||||
|
||||
/* Bot product switcher */
|
||||
/* Bot product switcher — horizontal slider */
|
||||
#botSwitcher .switcher-panel {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px) scale(0.97);
|
||||
width: 0;
|
||||
max-width: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.9,.3,1);
|
||||
transition: width 320ms cubic-bezier(.2,.9,.25,1), max-width 320ms cubic-bezier(.2,.9,.25,1), opacity 220ms ease 40ms;
|
||||
}
|
||||
#botSwitcher.open .switcher-panel {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
width: 440px;
|
||||
max-width: 440px;
|
||||
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-chevron { transition: transform 280ms cubic-bezier(.2,.9,.25,1); color: rgba(255,255,255,0.35); }
|
||||
#botSwitcher.open .switcher-chevron { transform: rotate(-90deg); color: #90EE90; }
|
||||
#botSwitcher .switcher-trigger:hover .switcher-chevron { color: #90EE90; }
|
||||
.switcher-row {
|
||||
|
||||
.switcher-card {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
transform: translateX(0);
|
||||
opacity: 0;
|
||||
transition: opacity 380ms ease 120ms, transform 380ms cubic-bezier(.2,.9,.25,1) 120ms, filter 220ms ease;
|
||||
}
|
||||
#botSwitcher.open .switcher-card { opacity: 1; transform: translateX(0); }
|
||||
#botSwitcher .switcher-card.card-tss { transform: translateX(-14px); }
|
||||
#botSwitcher .switcher-card.card-sre { transform: translateX(14px); }
|
||||
.switcher-card-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
transition: background-color 160ms ease;
|
||||
text-decoration: none;
|
||||
padding: 10px 12px;
|
||||
transition: background-color 200ms ease;
|
||||
}
|
||||
.switcher-row::before {
|
||||
content: "";
|
||||
.switcher-card.card-tss .switcher-card-inner { flex-direction: row; }
|
||||
.switcher-card.card-sre .switcher-card-inner { flex-direction: row-reverse; }
|
||||
.switcher-card:hover .switcher-card-inner { background: rgba(255,255,255,0.04); }
|
||||
.switcher-card.card-tss:hover { filter: drop-shadow(0 0 14px rgba(255,157,0,0.18)); }
|
||||
.switcher-card.card-sre:hover { filter: drop-shadow(0 0 14px rgba(144,238,144,0.18)); }
|
||||
|
||||
.switcher-pfp {
|
||||
flex: 0 0 auto;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 14px;
|
||||
object-fit: cover;
|
||||
transition: transform 320ms cubic-bezier(.2,.9,.25,1), box-shadow 320ms ease;
|
||||
}
|
||||
.switcher-card.card-tss .switcher-pfp {
|
||||
box-shadow: 0 0 0 1px rgba(255,157,0,0.35), 0 0 18px -4px rgba(255,157,0,0.45);
|
||||
}
|
||||
.switcher-card.card-sre .switcher-pfp {
|
||||
box-shadow: 0 0 0 1px rgba(144,238,144,0.35), 0 0 18px -4px rgba(144,238,144,0.45);
|
||||
}
|
||||
.switcher-card.card-tss:hover .switcher-pfp { transform: scale(1.05) rotate(-2deg); }
|
||||
.switcher-card.card-sre:hover .switcher-pfp { transform: scale(1.05) rotate(2deg); }
|
||||
|
||||
.switcher-text {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.switcher-card.card-tss .switcher-text { text-align: left; }
|
||||
.switcher-card.card-sre .switcher-text { text-align: right; }
|
||||
.switcher-title {
|
||||
font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
.switcher-card.card-tss .switcher-title {
|
||||
background: linear-gradient(95deg,#ff9d00,#ffd28a 70%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.switcher-card.card-sre .switcher-title {
|
||||
background: linear-gradient(265deg,#90EE90,#d8ffd8 70%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.switcher-sub {
|
||||
margin-top: 6px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.switcher-card.card-tss .switcher-pip,
|
||||
.switcher-card.card-sre .switcher-pip {
|
||||
display: inline-block;
|
||||
width: 5px; height: 5px;
|
||||
border-radius: 999px;
|
||||
vertical-align: middle;
|
||||
margin: 0 6px;
|
||||
}
|
||||
.switcher-card.card-tss .switcher-pip { background: #ff9d00; box-shadow: 0 0 6px #ff9d00; }
|
||||
.switcher-card.card-sre .switcher-pip { background: #90EE90; box-shadow: 0 0 6px #90EE90; }
|
||||
|
||||
.switcher-divider {
|
||||
flex: 0 0 1px;
|
||||
align-self: stretch;
|
||||
margin: 14px 0;
|
||||
background: linear-gradient(180deg,transparent,rgba(255,255,255,0.12) 30%,rgba(255,255,255,0.12) 70%,transparent);
|
||||
position: relative;
|
||||
}
|
||||
.switcher-divider::after {
|
||||
content: "↔";
|
||||
position: absolute;
|
||||
left: 0; top: 8px; bottom: 8px;
|
||||
width: 2px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: transparent;
|
||||
transition: background 180ms ease;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 999px;
|
||||
background: #171717;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
color: rgba(255,255,255,0.55);
|
||||
font-size: 11px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-family: ui-sans-serif, system-ui;
|
||||
}
|
||||
.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;
|
||||
|
||||
.switcher-current-pin {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
font-size: 8px;
|
||||
letter-spacing: 0.18em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(144,238,144,0.14);
|
||||
color: #90EE90;
|
||||
border: 1px solid rgba(144,238,144,0.28);
|
||||
}
|
||||
.switcher-card.card-sre .switcher-current-pin { right: 12px; }
|
||||
</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;">
|
||||
@@ -63,35 +165,28 @@
|
||||
<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 class="switcher-panel absolute left-0 top-full mt-2 bg-[#141414] border border-white/10 rounded-2xl shadow-2xl shadow-black/70" style="z-index: 200;" role="menu" aria-label="Bot switcher">
|
||||
<div class="flex items-stretch h-[88px] w-[440px]">
|
||||
<a href="https://tss.pawjob.us" class="switcher-card card-tss" role="menuitem" aria-label="Switch to Toothless TSS Bot">
|
||||
<div class="switcher-card-inner">
|
||||
<div class="switcher-text">
|
||||
<span class="switcher-title">TSS</span>
|
||||
<span class="switcher-sub"><span class="switcher-pip"></span>tss bot</span>
|
||||
</div>
|
||||
<div class="text-[11px] text-white/40 mt-0.5">Squadron Ratings & analytics</div>
|
||||
<img src="/images/light_fury_match.jpg" alt="Light Fury" class="switcher-pfp" width="56" height="56">
|
||||
</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 class="switcher-divider" aria-hidden="true"></div>
|
||||
<a href="/" class="switcher-card card-sre" role="menuitem" aria-current="page" aria-label="Toothless SREBOT (current)">
|
||||
<span class="switcher-current-pin">Here</span>
|
||||
<div class="switcher-card-inner">
|
||||
<div class="switcher-text">
|
||||
<span class="switcher-title">SRE</span>
|
||||
<span class="switcher-sub">srebot<span class="switcher-pip"></span></span>
|
||||
</div>
|
||||
<div class="text-[11px] text-white/40 mt-0.5">Tournament Skill Score tracker</div>
|
||||
<img src="/images/toothless_match.jpg" alt="Toothless" class="switcher-pfp" width="56" height="56">
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user