Oier Bravo Urtasun
3d52951355
Adopt the "Carved from stone" pixel design (landing/design/) as the apex onboarding page, ported from its React/Babel-via-CDN prototype to static Astro so it works on an offline LAN. Real modded-LAN content replaces the prototype's fictional public-SMP copy. - Vendor web fonts locally (tooling/fetch-fonts.sh -> public/fonts/) so the page renders without the Google Fonts CDN at party time. - Port the design system (main.css: mood/hero/bevels) and split markup into Astro components (Creeper, PixelIcon, CopyChip, ServerListPanel). - site.ts holds language-neutral config + theme knobs (mood/hero/headFont/ dust) that replace the design's in-browser TweaksPanel; LITERALS holds never-translated product/in-game terms. - i18n: English (/), Spanish (/es/), Euskera (/eu/) generated from one [...lang].astro via getStaticPaths; copy lives in src/i18n/ui.ts. Nav has an EN/ES/EU switcher; html lang + hreflang set per page. - Status panel shows a static server-list row + honest stat tiles (no fake live count). Copy + scroll-reveal are the only client JS. Build emits to ../www (gitignored). Euskera strings pending a native review. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
318 lines
11 KiB
Plaintext
318 lines
11 KiB
Plaintext
---
|
|
import { site, LITERALS, HEAD_FONTS } from "../data/site";
|
|
import { ui, LANGS, LANG_LABEL, LANG_PATH, type Lang } from "../i18n/ui";
|
|
import Creeper from "../components/Creeper.astro";
|
|
import PixelIcon from "../components/PixelIcon.astro";
|
|
import CopyChip from "../components/CopyChip.astro";
|
|
import ServerListPanel from "../components/ServerListPanel.astro";
|
|
import "../styles/main.css";
|
|
|
|
// One static page per locale: en at "/", es at "/es/", eu at "/eu/".
|
|
export function getStaticPaths() {
|
|
return [
|
|
{ params: { lang: undefined }, props: { locale: "en" as Lang } },
|
|
{ params: { lang: "es" }, props: { locale: "es" as Lang } },
|
|
{ params: { lang: "eu" }, props: { locale: "eu" as Lang } },
|
|
];
|
|
}
|
|
|
|
const { locale } = Astro.props;
|
|
const t = ui[locale];
|
|
const { theme, launcher } = site;
|
|
const headFont = HEAD_FONTS[theme.headFont] ?? HEAD_FONTS.pixelify;
|
|
const launcherName = launcher.name;
|
|
|
|
// Build-time floating dust bits (index-derived, no runtime RNG).
|
|
const dustBits = Array.from({ length: 16 }, (_, i) => {
|
|
const size = 3 + (i % 3) * 2;
|
|
return {
|
|
left: `${(i * 61) % 100}%`,
|
|
size: `${size}px`,
|
|
bg: i % 4 === 0 ? "var(--gold)" : "var(--accent)",
|
|
opacity: 0.18 + (i % 3) * 0.06,
|
|
anim: `rise ${13 + (i % 7) * 3}s linear ${i * 0.7}s infinite`,
|
|
};
|
|
});
|
|
---
|
|
|
|
<!doctype html>
|
|
<html
|
|
lang={t.htmlLang}
|
|
data-mood={theme.mood}
|
|
data-hero={theme.hero}
|
|
data-head={theme.headFont}
|
|
style={`--font-head: ${headFont}`}
|
|
>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{site.name} — {t.hero.howToJoin}</title>
|
|
<meta name="description" content={`${site.name}: ${t.hero.tagline}`} />
|
|
<link rel="icon" type="image/png" href="/logo.png" />
|
|
<link rel="stylesheet" href="/fonts/fonts.css" />
|
|
{LANGS.map((l) => <link rel="alternate" hreflang={l} href={LANG_PATH[l]} />)}
|
|
</head>
|
|
<body>
|
|
<!-- NAV -->
|
|
<header class="nav">
|
|
<div class="wrap nav-in">
|
|
<a class="brand" href="#top">
|
|
<Creeper />
|
|
<span class="name">ULICRAFT</span>
|
|
</a>
|
|
<nav class="nav-links">
|
|
<a href="#status">{t.nav.status}</a>
|
|
<a href="#features">{t.nav.features}</a>
|
|
<a href="#join">{t.nav.join}</a>
|
|
</nav>
|
|
<span class="nav-spacer"></span>
|
|
<div class="lang-switch" aria-label="Language">
|
|
{LANGS.map((l) => (
|
|
<a href={LANG_PATH[l]} class:list={[l === locale && "on"]} aria-current={l === locale ? "true" : undefined}>{LANG_LABEL[l]}</a>
|
|
))}
|
|
</div>
|
|
<a class="mc-btn primary sm" href="#join">{t.nav.play}</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="top">
|
|
<!-- HERO -->
|
|
<section class="hero">
|
|
{theme.dust && (
|
|
<div class="dust" aria-hidden="true">
|
|
{dustBits.map((b) => (
|
|
<i
|
|
style={`position:absolute;left:${b.left};bottom:-20px;width:${b.size};height:${b.size};background:${b.bg};opacity:${b.opacity};image-rendering:pixelated;animation:${b.anim}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div class="wrap hero-grid">
|
|
<div class="hero-logo">
|
|
<img src="/logo.png" alt={site.name} width="707" height="148" />
|
|
</div>
|
|
<div class="hero-copy">
|
|
<span class="eyebrow">{t.hero.eyebrow} {site.mcVersion}</span>
|
|
<h1 class="hero-tagline">{t.hero.tagline}</h1>
|
|
<p class="hero-sub">{t.hero.sub}</p>
|
|
<div class="hero-ip-row">
|
|
<CopyChip value={site.serverAddress} variant="ip" label={t.hero.copyIp} copiedLabel={t.copied} />
|
|
<a class="mc-btn" href="#join">{t.hero.howToJoin}</a>
|
|
</div>
|
|
<div class="hero-meta">
|
|
<span>Java {site.mcVersion}</span>
|
|
<span class="dot"></span>
|
|
<span>{t.hero.metaModpack}</span>
|
|
<span class="dot"></span>
|
|
<span>{t.hero.metaLan}</span>
|
|
</div>
|
|
</div>
|
|
<div class="hero-status">
|
|
<ServerListPanel
|
|
modded={t.status.modded}
|
|
motd={t.status.motd}
|
|
upTo={t.status.upTo}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- STATUS -->
|
|
<section id="status" class="pad">
|
|
<div class="wrap">
|
|
<div class="sec-head reveal">
|
|
<span class="eyebrow">{t.status.eyebrow}</span>
|
|
<h2 class="section-title">{t.status.title}</h2>
|
|
<p class="lead">{t.status.lead}</p>
|
|
</div>
|
|
<div class="reveal">
|
|
<ServerListPanel
|
|
modded={t.status.modded}
|
|
motd={t.status.motd}
|
|
upTo={t.status.upTo}
|
|
/>
|
|
</div>
|
|
<div class="stat-grid">
|
|
{site.stats.map((s, i) => (
|
|
<div class="tile reveal" style={`transition-delay:${i * 60}ms`}>
|
|
<div class="k">{s.key}</div>
|
|
<div class="l">{t.statLabels[i]}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FEATURES -->
|
|
<section id="features" class="pad" style="background: var(--bg-2)">
|
|
<div class="wrap">
|
|
<div class="sec-head reveal">
|
|
<span class="eyebrow">{t.features.eyebrow}</span>
|
|
<h2 class="section-title">{t.features.title}</h2>
|
|
<p class="lead">{t.features.lead}</p>
|
|
</div>
|
|
<div class="feat-grid">
|
|
{site.features.map((f, i) => (
|
|
<div class="feat reveal" style={`transition-delay:${(i % 2) * 80}ms`}>
|
|
<PixelIcon glyph={f.glyph} gold={f.gold} />
|
|
<div>
|
|
<h3>{t.features.items[i].h}</h3>
|
|
<p>{t.features.items[i].p}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HOW TO JOIN -->
|
|
<section id="join" class="pad">
|
|
<div class="wrap">
|
|
<div class="sec-head reveal">
|
|
<span class="eyebrow">{t.join.eyebrow}</span>
|
|
<h2 class="section-title">{t.join.title}</h2>
|
|
<p class="lead">{t.join.lead}</p>
|
|
</div>
|
|
|
|
<div class="steps">
|
|
<!-- STEP 1 -->
|
|
<div class="step reveal">
|
|
<div class="num">1</div>
|
|
<div class="body">
|
|
<span class="kicker">{t.join.s1.kicker}</span>
|
|
<h3>{t.join.s1.h.replace("{name}", launcherName)}</h3>
|
|
<p>{t.join.s1.p.replace(/\{name\}/g, launcherName)}</p>
|
|
<div class="actions">
|
|
{launcher.downloads.map((d) => (
|
|
<a class="mc-btn sm" href={`${launcher.base}/${d.file}`}>
|
|
{d.os} <span class="hint">· {d.hint}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STEP 2 -->
|
|
<div class="step reveal">
|
|
<div class="num">2</div>
|
|
<div class="body">
|
|
<span class="kicker">{t.join.s2.kicker}</span>
|
|
<h3>{t.join.s2.h}</h3>
|
|
<p>
|
|
{t.join.s2.pa} <strong style="color:var(--text)">{LITERALS.authlib}</strong> {t.join.s2.pb}
|
|
</p>
|
|
<div class="actions" style="margin-bottom:14px">
|
|
<CopyChip value={site.authlibUrl} variant="url" label={t.join.s2.copy} copiedLabel={t.copied} />
|
|
</div>
|
|
<p>
|
|
{t.join.s2.registerPre} <a href={site.authUrl}>{site.authUrl}</a>.
|
|
</p>
|
|
<span class="hint">
|
|
{t.join.s2.caPre} <a href={site.caCertUrl}>{t.join.s2.caLink}</a> {t.join.s2.caPost}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STEP 3 -->
|
|
<div class="step reveal">
|
|
<div class="num">3</div>
|
|
<div class="body">
|
|
<span class="kicker">{t.join.s3.kicker}</span>
|
|
<h3>{t.join.s3.h}</h3>
|
|
<p>{t.join.s3.p}</p>
|
|
<div class="actions">
|
|
<CopyChip value={site.packwizUrl} variant="url" label={t.join.s2.copy} copiedLabel={t.copied} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STEP 4 -->
|
|
<div class="step reveal">
|
|
<div class="num">4</div>
|
|
<div class="body">
|
|
<span class="kicker">{t.join.s4.kicker}</span>
|
|
<h3>{t.join.s4.h}</h3>
|
|
<p>
|
|
{t.join.s4.pa} <kbd>{LITERALS.multiplayer}</kbd> → <kbd>{LITERALS.addServer}</kbd>{t.join.s4.pb}
|
|
</p>
|
|
<div class="actions">
|
|
<CopyChip value={site.serverAddress} variant="ip" label={t.join.s4.copy} copiedLabel={t.copied} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="wrap footer-in">
|
|
<a class="brand" href="#top">
|
|
<Creeper />
|
|
<span class="name">ULICRAFT</span>
|
|
</a>
|
|
<div class="footer-links">
|
|
<a class="mc-btn primary sm" href="#join">{t.footer.join}</a>
|
|
</div>
|
|
<p class="disc">
|
|
{t.footer.disc} {site.name} · {site.baseDomain}
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Copy-to-clipboard for every [data-copy] button (HTTP-LAN safe fallback).
|
|
function copyText(text: string) {
|
|
try {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
navigator.clipboard.writeText(text);
|
|
return;
|
|
}
|
|
} catch {}
|
|
const ta = document.createElement("textarea");
|
|
ta.value = text;
|
|
ta.style.position = "fixed";
|
|
ta.style.opacity = "0";
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
try {
|
|
document.execCommand("copy");
|
|
} catch {}
|
|
document.body.removeChild(ta);
|
|
}
|
|
document.querySelectorAll<HTMLButtonElement>("button[data-copy]").forEach((btn) => {
|
|
let timer: number | undefined;
|
|
btn.addEventListener("click", () => {
|
|
copyText(btn.dataset.copy ?? "");
|
|
const label = btn.dataset.label ?? "Copy";
|
|
btn.textContent = btn.dataset.copied ?? "Copied!";
|
|
btn.classList.add("copied");
|
|
clearTimeout(timer);
|
|
timer = window.setTimeout(() => {
|
|
btn.textContent = label;
|
|
btn.classList.remove("copied");
|
|
}, 1600);
|
|
});
|
|
});
|
|
|
|
// Scroll reveal — visible at rest; .anim added when scrolled into view.
|
|
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
|
|
const els = [...document.querySelectorAll<HTMLElement>(".reveal")];
|
|
const io = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const e of entries) {
|
|
if (e.isIntersecting) {
|
|
e.target.classList.add("anim");
|
|
io.unobserve(e.target);
|
|
}
|
|
}
|
|
},
|
|
{ rootMargin: "0px 0px -10% 0px" }
|
|
);
|
|
els.forEach((el) => io.observe(el));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|