add frovy and update style (#1296)
This commit is contained in:
NotSoToothless
+57
-37
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<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">
|
||||
<link rel="icon" type="image/png" href="/images/transparent_toothlessssss.png">
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
.text-accent { color: #F5F5DC; }
|
||||
.text-muted { color: #90EE90; }
|
||||
|
||||
/* ── Serpentine timeline ───────────────────────────────────────── */
|
||||
/* Serpentine timeline */
|
||||
.timeline {
|
||||
position: relative;
|
||||
}
|
||||
@@ -97,8 +97,8 @@
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6rem 2.5rem;
|
||||
}
|
||||
/* The line snakes 3 → 3 → 2: row 1 left→right, row 2 right→left,
|
||||
row 3 left→right, so the connector never crosses itself. */
|
||||
/* The line snakes 3 by 3: row 1 left to right, row 2 right to left,
|
||||
row 3 left to right, so the connector never crosses itself. */
|
||||
.timeline-node:nth-child(1) { grid-area: 1 / 1; }
|
||||
.timeline-node:nth-child(2) { grid-area: 1 / 2; }
|
||||
.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(7) { grid-area: 3 / 1; }
|
||||
.timeline-node:nth-child(8) { grid-area: 3 / 2; }
|
||||
.timeline-node:nth-child(9) { grid-area: 3 / 3; }
|
||||
}
|
||||
|
||||
.timeline-card {
|
||||
@@ -125,7 +126,7 @@
|
||||
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 {
|
||||
position: absolute;
|
||||
top: -1.4rem;
|
||||
@@ -169,7 +170,7 @@
|
||||
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 {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
@@ -195,8 +196,8 @@
|
||||
<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>
|
||||
<p class="text-lg text-white/70 max-w-2xl mx-auto">
|
||||
How <%= botName %> grew from a late-night Discord experiment into the
|
||||
go-to companion for War Thunder Squadron Battles. Follow the line.
|
||||
How <%= botName %> grew from a late-night Discord experiment into a
|
||||
dedicated companion for War Thunder Squadron Battles.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -220,7 +221,7 @@
|
||||
|
||||
<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
|
||||
.timeline-node in order, so you can add or remove milestones freely.
|
||||
-->
|
||||
@@ -234,10 +235,10 @@
|
||||
</div>
|
||||
<h3 class="timeline-title mb-3">Born as SNLK SQB BOT</h3>
|
||||
<p class="timeline-desc">
|
||||
Ordered into existence by ImApollo and first christened
|
||||
<strong class="text-accent">SNLK SQB BOT</strong>. The earliest build is up
|
||||
and running in a rough state within a week — data still fed in by hand — and
|
||||
within weeks of that prototype it's already being shared to other servers.
|
||||
Commissioned by ImApollo and first launched as
|
||||
<strong class="text-accent">SNLK SQB BOT</strong>. The earliest build is running
|
||||
within a week, with match data still entered by hand. Within weeks, the prototype
|
||||
is already being shared with other servers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -249,12 +250,30 @@
|
||||
<div class="pt-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="timeline-index">02 · Rebrand</span>
|
||||
<span class="timeline-date">Late 2024</span>
|
||||
<span class="timeline-date">October 2024</span>
|
||||
</div>
|
||||
<h3 class="timeline-title mb-3">Becoming SREBOT</h3>
|
||||
<p class="timeline-desc">
|
||||
The project outgrows its original name. SNLK SQB BOT is rebranded to
|
||||
<strong class="text-accent">SREBOT</strong> — the identity it still carries today.
|
||||
The project outgrows its original name. SNLK SQB BOT becomes
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,14 +284,14 @@
|
||||
<div class="timeline-marker"><i class="fas fa-robot"></i></div>
|
||||
<div class="pt-3">
|
||||
<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>
|
||||
</div>
|
||||
<h3 class="timeline-title mb-3">Dagor & The First Logs</h3>
|
||||
<p class="timeline-desc">
|
||||
Dagor is introduced and the first automatic log prototypes come online.
|
||||
Parsing really starts to take off, and the earliest scoreboards take shape —
|
||||
no more hand-feeding the data.
|
||||
Dagor is introduced and the second parser is integrated, a much more robust one
|
||||
that SREBOT still uses today. The logging pipeline matures around the parser work,
|
||||
making scoreboards more informative.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -283,8 +302,8 @@
|
||||
<div class="timeline-marker"><i class="fas fa-fire"></i></div>
|
||||
<div class="pt-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="timeline-index">04 · Momentum</span>
|
||||
<span class="timeline-date">Mid 2025</span>
|
||||
<span class="timeline-index">05 · Momentum</span>
|
||||
<span class="timeline-date">July 2025</span>
|
||||
</div>
|
||||
<h3 class="timeline-title mb-3">Word Gets Around</h3>
|
||||
<p class="timeline-desc">
|
||||
@@ -300,14 +319,14 @@
|
||||
<div class="timeline-marker"><i class="fas fa-laptop-code"></i></div>
|
||||
<div class="pt-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="timeline-index">05 · The Website</span>
|
||||
<span class="timeline-date">Mid–Late 2025</span>
|
||||
<span class="timeline-index">06 · Website</span>
|
||||
<span class="timeline-date">August 2025</span>
|
||||
</div>
|
||||
<h3 class="timeline-title mb-3">The Site Goes Live</h3>
|
||||
<p class="timeline-desc">
|
||||
Friendly competition with the Boris bot pushes the developers to raise
|
||||
their game — and the SREBOT website is born, turning stats, scoreboards and
|
||||
replays into something you can actually explore in a browser.
|
||||
their game. The SREBOT website goes live, turning stats, scoreboards, and
|
||||
replays into a browser experience players can explore.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -318,7 +337,7 @@
|
||||
<div class="timeline-marker"><i class="fas fa-handshake"></i></div>
|
||||
<div class="pt-3">
|
||||
<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>
|
||||
</div>
|
||||
<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="pt-3">
|
||||
<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>
|
||||
</div>
|
||||
<h3 class="timeline-title mb-3">Fueling the Future</h3>
|
||||
<p class="timeline-desc">
|
||||
Monetization brings in real income for the first time — funding better
|
||||
servers and letting the project develop new features faster than ever.
|
||||
Monetization brings in real income for the first time, funding better
|
||||
servers and helping new features ship faster.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -353,14 +372,14 @@
|
||||
<div class="timeline-marker"><i class="fas fa-location-dot"></i></div>
|
||||
<div class="pt-3">
|
||||
<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>
|
||||
</div>
|
||||
<h3 class="timeline-title mb-3">Where We Are Now</h3>
|
||||
<p class="timeline-desc">
|
||||
Automated parsing through Spectra, funded development, and a growing
|
||||
community of squadrons — this is where the story stands today. The line
|
||||
doesn't stop here.
|
||||
community of squadrons define the project today. The next chapter is already
|
||||
underway.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -509,7 +528,7 @@
|
||||
if (animating) return;
|
||||
animating = true;
|
||||
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) {
|
||||
if (start === null) start = ts;
|
||||
var p = Math.min((ts - start) / duration, 1);
|
||||
@@ -539,13 +558,14 @@
|
||||
nodes.forEach(function (n) { n.classList.add('is-visible'); });
|
||||
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) {
|
||||
entries.forEach(function (e) {
|
||||
if (e.isIntersecting) { animateDraw(); io.disconnect(); }
|
||||
});
|
||||
}, { threshold: 0.2 });
|
||||
io.observe(timeline);
|
||||
}, { threshold: 0.65, rootMargin: '0px 0px -16% 0px' });
|
||||
io.observe(trigger);
|
||||
}
|
||||
|
||||
// Recompute geometry on resize (layout flips between 1 and 3 columns).
|
||||
|
||||
Reference in New Issue
Block a user