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

add frovy and update style (#1296)

Browse Source
This commit is contained in:
NotSoToothless
2026-06-04 13:31:12 -07:00
committed by GitHub
parent 67c821e501
commit 66e5a5e068
1 changed files with 57 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/views/timeline.ejs
+57 -37
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Timeline - <%= botName %></title> <title>Timeline - <%= botName %></title>
<meta name="description" content="The history of <%= botName %> — from a Discord side-project to the best War Thunder Squadron Battles bot."> <meta name="description" content="The history of <%= botName %>, from a Discord side project to a War Thunder Squadron Battles companion used across the community.">
<meta name="theme-color" content="#90EE90"> <meta name="theme-color" content="#90EE90">
<link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png"> <link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">
@@ -43,7 +43,7 @@
.text-accent { color: #F5F5DC; } .text-accent { color: #F5F5DC; }
.text-muted { color: #90EE90; } .text-muted { color: #90EE90; }
/* ── Serpentine timeline ───────────────────────────────────────── */ /* Serpentine timeline */
.timeline { .timeline {
position: relative; position: relative;
} }
@@ -97,8 +97,8 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 6rem 2.5rem; gap: 6rem 2.5rem;
} }
/* The line snakes 3 → 3 → 2: row 1 left→right, row 2 right→left, /* The line snakes 3 by 3: row 1 left to right, row 2 right to left,
row 3 left→right, so the connector never crosses itself. */ row 3 left to right, so the connector never crosses itself. */
.timeline-node:nth-child(1) { grid-area: 1 / 1; } .timeline-node:nth-child(1) { grid-area: 1 / 1; }
.timeline-node:nth-child(2) { grid-area: 1 / 2; } .timeline-node:nth-child(2) { grid-area: 1 / 2; }
.timeline-node:nth-child(3) { grid-area: 1 / 3; } .timeline-node:nth-child(3) { grid-area: 1 / 3; }
@@ -107,6 +107,7 @@
.timeline-node:nth-child(6) { grid-area: 2 / 1; } .timeline-node:nth-child(6) { grid-area: 2 / 1; }
.timeline-node:nth-child(7) { grid-area: 3 / 1; } .timeline-node:nth-child(7) { grid-area: 3 / 1; }
.timeline-node:nth-child(8) { grid-area: 3 / 2; } .timeline-node:nth-child(8) { grid-area: 3 / 2; }
.timeline-node:nth-child(9) { grid-area: 3 / 3; }
} }
.timeline-card { .timeline-card {
@@ -125,7 +126,7 @@
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
} }
/* Node marker — the dot that the line threads through */ /* Node marker: the dot that the line threads through */
.timeline-marker { .timeline-marker {
position: absolute; position: absolute;
top: -1.4rem; top: -1.4rem;
@@ -169,7 +170,7 @@
font-size: 0.95rem; font-size: 0.95rem;
} }
/* Reveal animation — staggered as the line draws past each node */ /* Reveal animation, staggered as the line draws past each node */
.timeline-node { .timeline-node {
opacity: 0; opacity: 0;
transform: translateY(28px); transform: translateY(28px);
@@ -195,8 +196,8 @@
<p class="text-muted text-sm font-semibold tracking-[0.25em] uppercase mb-4">Our Story</p> <p class="text-muted text-sm font-semibold tracking-[0.25em] uppercase mb-4">Our Story</p>
<h1 class="text-4xl lg:text-6xl font-extrabold mb-5 gradient-text">The Timeline</h1> <h1 class="text-4xl lg:text-6xl font-extrabold mb-5 gradient-text">The Timeline</h1>
<p class="text-lg text-white/70 max-w-2xl mx-auto"> <p class="text-lg text-white/70 max-w-2xl mx-auto">
How <%= botName %> grew from a late-night Discord experiment into the How <%= botName %> grew from a late-night Discord experiment into a
go-to companion for War Thunder Squadron Battles. Follow the line. dedicated companion for War Thunder Squadron Battles.
</p> </p>
</div> </div>
</section> </section>
@@ -220,7 +221,7 @@
<div class="timeline-grid"> <div class="timeline-grid">
<!-- <!--
EDITABLE STARTER CONTENT — swap the dates / copy below for the real EDITABLE STARTER CONTENT: swap the dates / copy below for the real
project history. The serpentine line auto-routes through every project history. The serpentine line auto-routes through every
.timeline-node in order, so you can add or remove milestones freely. .timeline-node in order, so you can add or remove milestones freely.
--> -->
@@ -234,10 +235,10 @@
</div> </div>
<h3 class="timeline-title mb-3">Born as SNLK SQB BOT</h3> <h3 class="timeline-title mb-3">Born as SNLK SQB BOT</h3>
<p class="timeline-desc"> <p class="timeline-desc">
Ordered into existence by ImApollo and first christened Commissioned by ImApollo and first launched as
<strong class="text-accent">SNLK SQB BOT</strong>. The earliest build is up <strong class="text-accent">SNLK SQB BOT</strong>. The earliest build is running
and running in a rough state within a week — data still fed in by hand — and within a week, with match data still entered by hand. Within weeks, the prototype
within weeks of that prototype it's already being shared to other servers. is already being shared with other servers.
</p> </p>
</div> </div>
</div> </div>
@@ -249,12 +250,30 @@
<div class="pt-3"> <div class="pt-3">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="timeline-index">02 · Rebrand</span> <span class="timeline-index">02 · Rebrand</span>
<span class="timeline-date">Late 2024</span> <span class="timeline-date">October 2024</span>
</div> </div>
<h3 class="timeline-title mb-3">Becoming SREBOT</h3> <h3 class="timeline-title mb-3">Becoming SREBOT</h3>
<p class="timeline-desc"> <p class="timeline-desc">
The project outgrows its original name. SNLK SQB BOT is rebranded to The project outgrows its original name. SNLK SQB BOT becomes
<strong class="text-accent">SREBOT</strong> — the identity it still carries today. <strong class="text-accent">SREBOT</strong>, the identity it still carries today.
</p>
</div>
</div>
</article>
<article class="timeline-node">
<div class="timeline-card">
<div class="timeline-marker"><i class="fas fa-file-code"></i></div>
<div class="pt-3">
<div class="flex items-center justify-between mb-2">
<span class="timeline-index">03 · Parser</span>
<span class="timeline-date">January 2025</span>
</div>
<h3 class="timeline-title mb-3">Frovy Opens the Door</h3>
<p class="timeline-desc">
Frovy shows us the first parser and gives SREBOT a real path toward automatic
scoreboards. He had also figured out how to request clandata and receive
immediate point updates, even if he kept the method from us for months.
</p> </p>
</div> </div>
</div> </div>
@@ -265,14 +284,14 @@
<div class="timeline-marker"><i class="fas fa-robot"></i></div> <div class="timeline-marker"><i class="fas fa-robot"></i></div>
<div class="pt-3"> <div class="pt-3">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="timeline-index">03 · Automation</span> <span class="timeline-index">04 · Logs</span>
<span class="timeline-date">March 13, 2025</span> <span class="timeline-date">March 13, 2025</span>
</div> </div>
<h3 class="timeline-title mb-3">Dagor &amp; The First Logs</h3> <h3 class="timeline-title mb-3">Dagor &amp; The First Logs</h3>
<p class="timeline-desc"> <p class="timeline-desc">
Dagor is introduced and the first automatic log prototypes come online. Dagor is introduced and the second parser is integrated, a much more robust one
Parsing really starts to take off, and the earliest scoreboards take shape — that SREBOT still uses today. The logging pipeline matures around the parser work,
no more hand-feeding the data. making scoreboards more informative.
</p> </p>
</div> </div>
</div> </div>
@@ -283,8 +302,8 @@
<div class="timeline-marker"><i class="fas fa-fire"></i></div> <div class="timeline-marker"><i class="fas fa-fire"></i></div>
<div class="pt-3"> <div class="pt-3">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="timeline-index">04 · Momentum</span> <span class="timeline-index">05 · Momentum</span>
<span class="timeline-date">Mid 2025</span> <span class="timeline-date">July 2025</span>
</div> </div>
<h3 class="timeline-title mb-3">Word Gets Around</h3> <h3 class="timeline-title mb-3">Word Gets Around</h3>
<p class="timeline-desc"> <p class="timeline-desc">
@@ -300,14 +319,14 @@
<div class="timeline-marker"><i class="fas fa-laptop-code"></i></div> <div class="timeline-marker"><i class="fas fa-laptop-code"></i></div>
<div class="pt-3"> <div class="pt-3">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="timeline-index">05 · The Website</span> <span class="timeline-index">06 · Website</span>
<span class="timeline-date">Mid–Late 2025</span> <span class="timeline-date">August 2025</span>
</div> </div>
<h3 class="timeline-title mb-3">The Site Goes Live</h3> <h3 class="timeline-title mb-3">The Site Goes Live</h3>
<p class="timeline-desc"> <p class="timeline-desc">
Friendly competition with the Boris bot pushes the developers to raise Friendly competition with the Boris bot pushes the developers to raise
their game — and the SREBOT website is born, turning stats, scoreboards and their game. The SREBOT website goes live, turning stats, scoreboards, and
replays into something you can actually explore in a browser. replays into a browser experience players can explore.
</p> </p>
</div> </div>
</div> </div>
@@ -318,7 +337,7 @@
<div class="timeline-marker"><i class="fas fa-handshake"></i></div> <div class="timeline-marker"><i class="fas fa-handshake"></i></div>
<div class="pt-3"> <div class="pt-3">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="timeline-index">06 · Partnership</span> <span class="timeline-index">07 · Partnership</span>
<span class="timeline-date">January 2026</span> <span class="timeline-date">January 2026</span>
</div> </div>
<h3 class="timeline-title mb-3">Teaming Up with Spectra</h3> <h3 class="timeline-title mb-3">Teaming Up with Spectra</h3>
@@ -336,13 +355,13 @@
<div class="timeline-marker"><i class="fas fa-coins"></i></div> <div class="timeline-marker"><i class="fas fa-coins"></i></div>
<div class="pt-3"> <div class="pt-3">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="timeline-index">07 · Monetization</span> <span class="timeline-index">08 · Monetization</span>
<span class="timeline-date">April 2026</span> <span class="timeline-date">April 2026</span>
</div> </div>
<h3 class="timeline-title mb-3">Fueling the Future</h3> <h3 class="timeline-title mb-3">Fueling the Future</h3>
<p class="timeline-desc"> <p class="timeline-desc">
Monetization brings in real income for the first time — funding better Monetization brings in real income for the first time, funding better
servers and letting the project develop new features faster than ever. servers and helping new features ship faster.
</p> </p>
</div> </div>
</div> </div>
@@ -353,14 +372,14 @@
<div class="timeline-marker"><i class="fas fa-location-dot"></i></div> <div class="timeline-marker"><i class="fas fa-location-dot"></i></div>
<div class="pt-3"> <div class="pt-3">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="timeline-index">08 · Today</span> <span class="timeline-index">09 · Today</span>
<span class="timeline-date">Now</span> <span class="timeline-date">Now</span>
</div> </div>
<h3 class="timeline-title mb-3">Where We Are Now</h3> <h3 class="timeline-title mb-3">Where We Are Now</h3>
<p class="timeline-desc"> <p class="timeline-desc">
Automated parsing through Spectra, funded development, and a growing Automated parsing through Spectra, funded development, and a growing
community of squadrons — this is where the story stands today. The line community of squadrons define the project today. The next chapter is already
doesn't stop here. underway.
</p> </p>
</div> </div>
</div> </div>
@@ -509,7 +528,7 @@
if (animating) return; if (animating) return;
animating = true; animating = true;
var start = null; var start = null;
var duration = 2600; // ms for the line to travel the whole serpentine var duration = 7200; // ms for the line to travel the whole serpentine
function step(ts) { function step(ts) {
if (start === null) start = ts; if (start === null) start = ts;
var p = Math.min((ts - start) / duration, 1); var p = Math.min((ts - start) / duration, 1);
@@ -539,13 +558,14 @@
nodes.forEach(function (n) { n.classList.add('is-visible'); }); nodes.forEach(function (n) { n.classList.add('is-visible'); });
return; return;
} }
// Start drawing once the timeline scrolls into view. // Start drawing only after the user has scrolled into the timeline.
var trigger = nodes[0] || timeline;
var io = new IntersectionObserver(function (entries) { var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) { entries.forEach(function (e) {
if (e.isIntersecting) { animateDraw(); io.disconnect(); } if (e.isIntersecting) { animateDraw(); io.disconnect(); }
}); });
}, { threshold: 0.2 }); }, { threshold: 0.65, rootMargin: '0px 0px -16% 0px' });
io.observe(timeline); io.observe(trigger);
} }
// Recompute geometry on resize (layout flips between 1 and 3 columns). // Recompute geometry on resize (layout flips between 1 and 3 columns).