feat: expand SHD.build community platform branding
This commit is contained in:
JB
+31
-3
@@ -1,6 +1,10 @@
|
||||
# SHD.build Design System
|
||||
|
||||
This document defines the visual language for SHD.build. New pages should feel like part of the same tactical data network as the admin dashboard, while public pages may use more space and larger editorial typography.
|
||||
This document defines the visual language for SHD.build, the independent
|
||||
Division Resurgence community for builds, guides, game data, news, and
|
||||
discussion. New pages should feel like part of the same tactical intelligence
|
||||
network as the admin dashboard, while public pages may use more space and larger
|
||||
editorial typography.
|
||||
|
||||
## Design principles
|
||||
|
||||
@@ -64,8 +68,32 @@ widths and becomes a two-column touch-friendly grid on narrow mobile screens.
|
||||
|
||||
The footer repeats the complete SHD brand lockup used by the global header:
|
||||
double-ring SHD mark, white `SHD`, orange `.build`, and the restrained
|
||||
`LOADOUT NETWORK` descriptor. Do not substitute a plain text wordmark or color
|
||||
the complete product name orange.
|
||||
`RESURGENCE COMMUNITY` descriptor. Do not substitute a plain text wordmark or
|
||||
color the complete product name orange.
|
||||
|
||||
### Community platform positioning
|
||||
|
||||
SHD.build is a full Division Resurgence community, not solely a loadout tool.
|
||||
Primary product language and global navigation must represent five durable
|
||||
channels: News, Database, Builds, Guides, and Builder. Loadout-specific terms
|
||||
remain appropriate inside build routes, but the global brand descriptor,
|
||||
homepage metadata, hero, sign-in introduction, and footer describe the broader
|
||||
community platform.
|
||||
|
||||
The homepage uses a community-channel grid to establish this information
|
||||
architecture. Each channel has an operational code, plain-language purpose,
|
||||
and explicit destination. New channels should extend this reusable pattern
|
||||
rather than turning the navigation into an undifferentiated list. Honest
|
||||
launch-state pages may describe planned capability, but must distinguish queued
|
||||
features from live data. Database landing metrics use approved active records,
|
||||
not invented activity counts.
|
||||
|
||||
On desktop the five public destinations remain visible in the global
|
||||
navigation. Mobile navigation numbers destinations dynamically so adding a
|
||||
channel cannot collide with Inbox, Profile, or ISAC codes. Community channel
|
||||
cards collapse from four columns to two and then one; hover color alone never
|
||||
replaces their textual destination labels, focus-visible treatment, or pressed
|
||||
feedback.
|
||||
|
||||
Contact notifications use the mandatory ISAC visual identity because they are
|
||||
operational inbound messages. The notification carries a concise preview and a
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -12,9 +12,11 @@
|
||||
} = $props();
|
||||
|
||||
const links = [
|
||||
{ href: '/builds', label: 'Discover' },
|
||||
{ href: '/builder', label: 'Builder' },
|
||||
{ href: '/guides', label: 'Guides' }
|
||||
{ href: '/news', label: 'News' },
|
||||
{ href: '/database', label: 'Database' },
|
||||
{ href: '/builds', label: 'Builds' },
|
||||
{ href: '/guides', label: 'Guides' },
|
||||
{ href: '/builder', label: 'Builder' }
|
||||
];
|
||||
|
||||
let showCookieNotice = $state(false);
|
||||
@@ -80,7 +82,7 @@
|
||||
|
||||
<header class="site-header">
|
||||
<a class="brand" href="/" aria-label="SHD.build home">
|
||||
<span class="brand-mark"><i></i><b>SHD</b></span><span class="brand-name">SHD<span>.build</span><small>LOADOUT NETWORK</small></span>
|
||||
<span class="brand-mark"><i></i><b>SHD</b></span><span class="brand-name">SHD<span>.build</span><small>RESURGENCE COMMUNITY</small></span>
|
||||
</a>
|
||||
<nav aria-label="Main navigation">
|
||||
{#each links as link}
|
||||
@@ -109,18 +111,18 @@
|
||||
<div class="mobile-nav-layer">
|
||||
<button class="mobile-nav-backdrop" type="button" aria-label="Close navigation" onclick={closeMobileNavigation}></button>
|
||||
<nav id="mobile-navigation" class="mobile-navigation" aria-label="Mobile navigation" bind:this={mobilePanel}>
|
||||
<div class="mobile-nav-heading"><div><span>SHD NETWORK</span><strong>NAVIGATION</strong></div><b>ONLINE</b></div>
|
||||
<div class="mobile-nav-heading"><div><span>SHD COMMUNITY</span><strong>NAVIGATION</strong></div><b>ONLINE</b></div>
|
||||
<a class:active={page.url.pathname === '/'} href="/"><small>00</small><span>Home</span><b>›</b></a>
|
||||
{#each links as link, index}
|
||||
<a class:active={page.url.pathname.startsWith(link.href)} href={link.href}><small>{String(index + 1).padStart(2, '0')}</small><span>{link.label}</span><b>›</b></a>
|
||||
{/each}
|
||||
{#if user}
|
||||
<a class:active={page.url.pathname.startsWith('/account/notifications')} href="/account/notifications"><small>04</small><span>Inbox</span>{#if unreadNotifications}<em>{unreadNotifications > 99 ? '99+' : unreadNotifications}</em>{:else}<b>›</b>{/if}</a>
|
||||
<a class:active={page.url.pathname === '/account'} href="/account"><small>05</small><span>My Profile</span><b>›</b></a>
|
||||
<a class:active={page.url.pathname.startsWith('/account/notifications')} href="/account/notifications"><small>{String(links.length + 1).padStart(2, '0')}</small><span>Inbox</span>{#if unreadNotifications}<em>{unreadNotifications > 99 ? '99+' : unreadNotifications}</em>{:else}<b>›</b>{/if}</a>
|
||||
<a class:active={page.url.pathname === '/account'} href="/account"><small>{String(links.length + 2).padStart(2, '0')}</small><span>My Profile</span><b>›</b></a>
|
||||
{:else}
|
||||
<a class:active={page.url.pathname.startsWith('/sign-in')} href="/sign-in"><small>04</small><span>Sign In</span><b>›</b></a>
|
||||
<a class:active={page.url.pathname.startsWith('/sign-in')} href="/sign-in"><small>{String(links.length + 1).padStart(2, '0')}</small><span>Sign In</span><b>›</b></a>
|
||||
{/if}
|
||||
{#if isacAccess}<a class:active={page.url.pathname.startsWith('/isac')} href="/isac"><small>06</small><span>ISAC</span><b>›</b></a>{/if}
|
||||
{#if isacAccess}<a class:active={page.url.pathname.startsWith('/isac')} href="/isac"><small>{String(links.length + 3).padStart(2, '0')}</small><span>ISAC</span><b>›</b></a>{/if}
|
||||
{#if user}
|
||||
<div class="mobile-agent-state"><span><i></i> AGENT ONLINE</span><strong>{user.displayName}</strong></div>
|
||||
<PendingForm action="/sign-in?/logout">{#snippet children(pending)}<button class="mobile-sign-out" aria-busy={pending} disabled={pending}>{pending ? 'SIGNING OUT…' : 'SIGN OUT →'}</button>{/snippet}</PendingForm>
|
||||
@@ -135,9 +137,9 @@
|
||||
<div>
|
||||
<a class="brand footer-brand" href="/" aria-label="SHD.build home">
|
||||
<span class="brand-mark"><i></i><b>SHD</b></span>
|
||||
<span class="brand-name">SHD<span>.build</span><small>LOADOUT NETWORK</small></span>
|
||||
<span class="brand-name">SHD<span>.build</span><small>RESURGENCE COMMUNITY</small></span>
|
||||
</a>
|
||||
<p>Independent loadout intelligence for the agent community.</p>
|
||||
<p>Independent builds, guides, game data, news, and community intelligence for The Division Resurgence.</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a class="footer-discord" href="https://discord.gg/dhpd33VwQK" target="_blank" rel="noreferrer">
|
||||
|
||||
+12
-3
@@ -5,11 +5,20 @@
|
||||
{ title: 'Status Protocol', author: 'SHD_Warden', mode: 'PVE', rating: 4.7, votes: 76, tags: ['Skill', 'Status', 'Support'], color: '#d36b5c' }
|
||||
];
|
||||
</script>
|
||||
<svelte:head><title>SHD.build — Division Resurgence Loadouts</title><meta name="description" content="Create, optimize, and share loadouts for The Division Resurgence." /></svelte:head>
|
||||
<svelte:head><title>SHD.build — The Division Resurgence Community</title><meta name="description" content="The Division Resurgence community for builds, guides, game data, news, and agent discussion." /></svelte:head>
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="hero-copy"><p class="eyebrow"><span></span> SHD LOADOUT NETWORK</p><h1>BUILD SMARTER.<br /><em>HIT HARDER.</em></h1><p class="lede">Plan every stat. Test every synergy. Share the loadout that gets your agent through the toughest fights in Manhattan.</p><div class="hero-actions"><a class="primary" href="/builder">START A BUILD <span>＋</span></a><a class="secondary" href="/builds">EXPLORE BUILDS ↓</a></div><div class="metrics"><div><strong>2,847</strong><span>PUBLIC BUILDS</span></div><div><strong>14.2K</strong><span>AGENTS</span></div><div><strong>8,931</strong><span>RATINGS</span></div></div></div>
|
||||
<div class="loadout-preview"><div class="scan-lines"></div><div class="preview-top"><span>FEATURED LOADOUT</span><b>01 / 03</b></div><div class="agent"><div class="orbit orbit-one"></div><div class="orbit orbit-two"></div><div class="agent-shape"><span>SHD</span></div>{#each ['MASK','VEST','PACK','GLOVES'] as label,i}<div class="gear-node n-{i}"><small>{label}</small><b>{['42','38','39','6.5%'][i]}</b></div>{/each}</div><div class="preview-name"><small>META // PVE</small><strong>STRIKER CRITICAL RUSH</strong><span>BY AGENTNOVA</span></div></div>
|
||||
<div class="hero-copy"><p class="eyebrow"><span></span> THE DIVISION RESURGENCE COMMUNITY</p><h1>CONNECT.<br /><em>ADAPT. RISE.</em></h1><p class="lede">Build stronger agents, learn from field-tested guides, explore the game database, follow Resurgence news, and share intelligence with the community.</p><div class="hero-actions"><a class="primary" href="/builder">CREATE A BUILD <span>＋</span></a><a class="secondary" href="/news">ENTER THE NETWORK ↓</a></div><div class="metrics community-metrics"><div><strong>BUILD</strong><span>LOADOUT LAB</span></div><div><strong>LEARN</strong><span>FIELD GUIDES</span></div><div><strong>TRACK</strong><span>DATA & NEWS</span></div></div></div>
|
||||
<div class="loadout-preview community-preview"><div class="scan-lines"></div><div class="preview-top"><span>COMMUNITY INTELLIGENCE</span><b>SHD // LIVE</b></div><div class="agent"><div class="orbit orbit-one"></div><div class="orbit orbit-two"></div><div class="agent-shape"><span>SHD</span></div>{#each ['BUILDS','GUIDES','DATA','NEWS'] as label,i}<a href={['/builds','/guides','/database','/news'][i]} class="gear-node n-{i}"><small>{label}</small><b>{['OPTIMIZE','LEARN','REFERENCE','UPDATES'][i]}</b></a>{/each}</div><div class="preview-name"><small>COMMUNITY // ONLINE</small><strong>RESURGENCE INTELLIGENCE HUB</strong><span>BUILT FOR AGENTS</span></div></div>
|
||||
</section>
|
||||
<section class="community-channels">
|
||||
<div class="section-heading"><div><p class="eyebrow"><span></span> COMMUNITY CHANNELS</p><h2>ONE NETWORK. EVERY MISSION.</h2></div><p>SHD.build grows with the community and the game.</p></div>
|
||||
<div class="community-channel-grid">
|
||||
<a href="/news"><small>01 // FIELD REPORTS</small><strong>NEWS & UPDATES</strong><span>Track game announcements, updates, and community reporting.</span><b>OPEN CHANNEL →</b></a>
|
||||
<a href="/database"><small>02 // ISAC ARCHIVE</small><strong>GAME DATABASE</strong><span>Reference attributes, talents, brands, gear, weapons, mods, and protocols.</span><b>QUERY DATABASE →</b></a>
|
||||
<a href="/builds"><small>03 // AGENT LOADOUTS</small><strong>COMMUNITY BUILDS</strong><span>Discover, rate, copy, and discuss configurations from other agents.</span><b>EXPLORE BUILDS →</b></a>
|
||||
<a href="/guides"><small>04 // FIELD MANUAL</small><strong>GUIDES</strong><span>Read detailed play styles, rotations, strategies, and build walkthroughs.</span><b>READ GUIDES →</b></a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="featured"><div class="section-heading"><div><p class="eyebrow"><span></span> FIELD-TESTED</p><h2>FEATURED BUILDS</h2></div><a href="/builds">VIEW ALL BUILDS →</a></div><div class="build-grid">{#each builds as build}<article style={`--build-color:${build.color}`}><div class="card-top"><span>{build.mode}</span><span>★ {build.rating}</span></div><div class="weapon-art"><div></div><span>SHD LOADOUT</span></div><div class="card-body"><p>COMMUNITY BUILD</p><h3>{build.title}</h3><div class="tags">{#each build.tags as tag}<span>{tag}</span>{/each}</div><div class="author"><span class="avatar">{build.author.slice(0,1)}</span><span>BY <strong>{build.author}</strong></span><span>{build.votes} RATINGS</span></div></div></article>{/each}</div></section>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { getDatabase } from '$lib/server/database';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
const registries = [
|
||||
{ key: 'attributes', label: 'Attributes', table: 'stat_attributes', detail: 'Stats, units, source ranges, caps, and calculation types.' },
|
||||
{ key: 'talents', label: 'Talents', table: 'talents', detail: 'Tiered effects, triggers, durations, cooldowns, and stacks.' },
|
||||
{ key: 'brands', label: 'Brand Sets', table: 'brand_sets', detail: 'Two-, three-, and four-piece equipment bonuses.' },
|
||||
{ key: 'gear', label: 'Gear', table: 'gear', detail: 'Equipment slots, base ranges, brands, talents, and tiers.' },
|
||||
{ key: 'weapons', label: 'Weapons', table: 'weapons', detail: 'Weapon families, damage ranges, talents, upgrades, and bonuses.' },
|
||||
{ key: 'weaponmods', label: 'Weapon Mods', table: 'weapon_mods', detail: 'Compatibility, quality rolls, secondary pools, and effects.' },
|
||||
{ key: 'gearmods', label: 'Gear Mods', table: 'gear_mods', detail: 'Primary scaling and secondary attribute pools by quality.' },
|
||||
{ key: 'protocols', label: 'OS Protocols', table: 'os_protocols', detail: 'Primary effects, shared profiles, and unique talents.' },
|
||||
{ key: 'skillchips', label: 'Skill Chips', table: 'skill_chip_sets', detail: 'Quality-scaled set bonuses, rolls, and chip talents.' }
|
||||
] as const;
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
const database = await getDatabase();
|
||||
const counts = await Promise.all(registries.map(async (registry) => {
|
||||
const row = await (await database.prepare(`SELECT COUNT(*) AS count FROM ${registry.table} WHERE active=1`)).get();
|
||||
return { ...registry, count: Number(row?.count ?? 0) };
|
||||
}));
|
||||
return {
|
||||
registries: counts,
|
||||
total: counts.reduce((total, registry) => total + registry.count, 0)
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Game database — SHD.build</title>
|
||||
<meta name="description" content="Community-maintained The Division Resurgence attributes, talents, brands, gear, weapons, mods, protocols, and Skill Chip data."/>
|
||||
</svelte:head>
|
||||
|
||||
<main class="page community-index-page">
|
||||
<header class="catalogue-hero community-index-hero">
|
||||
<div><p class="eyebrow"><span></span> ISAC PUBLIC ARCHIVE</p><h1>GAME<br/><em>DATABASE.</em></h1><p>Community-maintained Resurgence data powering SHD.build tools, loadouts, and reference material.</p></div>
|
||||
<div class="catalogue-count"><strong>{data.total}</strong><span>ACTIVE RECORDS</span><a class="primary" href="/isac">CONTRIBUTE DATA →</a></div>
|
||||
</header>
|
||||
<section class="community-database-intro">
|
||||
<div><span>DATABASE STATUS</span><strong>PUBLIC INDEX ONLINE</strong><small>Detailed public record pages will arrive incrementally. Current counts reflect active, approved data.</small></div>
|
||||
<div><span>DATA STEWARDSHIP</span><strong>COMMUNITY + OVERSIGHT</strong><small>Registered agents can inspect source data and propose verified corrections through ISAC.</small></div>
|
||||
</section>
|
||||
<section class="database-registry-grid">
|
||||
{#each data.registries as registry, index}
|
||||
<article>
|
||||
<header><small>{String(index + 1).padStart(2, '0')} // {registry.key.toUpperCase()}</small><b>{registry.count}</b></header>
|
||||
<h2>{registry.label}</h2>
|
||||
<p>{registry.detail}</p>
|
||||
<span>{registry.count ? 'ACTIVE DATA AVAILABLE' : 'AWAITING CONTRIBUTIONS'}</span>
|
||||
</article>
|
||||
{/each}
|
||||
</section>
|
||||
</main>
|
||||
@@ -0,0 +1,26 @@
|
||||
<svelte:head>
|
||||
<title>News & updates — SHD.build</title>
|
||||
<meta name="description" content="The Division Resurgence game news, update coverage, community reports, and SHD.build development notices."/>
|
||||
</svelte:head>
|
||||
|
||||
<main class="page community-index-page news-page">
|
||||
<header class="catalogue-hero community-index-hero">
|
||||
<div><p class="eyebrow"><span></span> SHD FIELD REPORTS</p><h1>NEWS &<br/><em>UPDATES.</em></h1><p>Game announcements, update intelligence, community reporting, and SHD.build development transmissions.</p></div>
|
||||
<div class="catalogue-count"><strong>FEED</strong><span>EDITORIAL CHANNEL</span><a class="primary" href="/contact?team=admins">SUBMIT A LEAD →</a></div>
|
||||
</header>
|
||||
<section class="news-channel-grid">
|
||||
<article class="news-primary">
|
||||
<div><span>CHANNEL STATUS</span><b>EDITORIAL SYSTEM IN DEVELOPMENT</b></div>
|
||||
<p class="eyebrow"><span></span> TRANSMISSION 00</p>
|
||||
<h2>THE COMMUNITY NEWSROOM IS COMING ONLINE.</h2>
|
||||
<p>SHD.build is expanding beyond loadouts into a complete Resurgence community resource. This channel will cover official announcements, game updates, database changes, community projects, and field reports without presenting speculation as confirmed information.</p>
|
||||
<footer><span>SOURCE POLICY <b>VERIFIABLE</b></span><span>COVERAGE <b>RESURGENCE</b></span><span>STATUS <b>QUEUED</b></span></footer>
|
||||
</article>
|
||||
<aside>
|
||||
<p class="eyebrow">PLANNED FEEDS</p>
|
||||
{#each ['OFFICIAL GAME NEWS','PATCH & DATA UPDATES','COMMUNITY REPORTS','SHD.BUILD DEVELOPMENT'] as channel,index}
|
||||
<div><small>{String(index + 1).padStart(2, '0')}</small><span>{channel}</span><b>QUEUED</b></div>
|
||||
{/each}
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
@@ -49,7 +49,7 @@
|
||||
}
|
||||
</script>
|
||||
<svelte:head><title>Sign in — SHD.build</title></svelte:head>
|
||||
<main class="auth-page"><div class="auth-frame"><section class="auth-intel"><p class="eyebrow"><span></span> SHD IDENTITY NETWORK</p><h1>AGENT<br/><em>ACCESS.</em></h1><p>Authenticate to publish builds, join field discussions, and keep your loadouts synchronized across devices.</p><div class="auth-status"><span><i></i> NETWORK ONLINE</span><span>NODE NYC-01</span></div></section><section class="auth-console"><div class="console-head"><span>SECURE SIGN-IN</span><b>SHD // AUTH</b></div>
|
||||
<main class="auth-page"><div class="auth-frame"><section class="auth-intel"><p class="eyebrow"><span></span> SHD COMMUNITY IDENTITY</p><h1>AGENT<br/><em>ACCESS.</em></h1><p>Authenticate to publish builds and guides, contribute game data, join discussions, and keep your SHD intelligence synchronized.</p><div class="auth-status"><span><i></i> NETWORK ONLINE</span><span>NODE NYC-01</span></div></section><section class="auth-console"><div class="console-head"><span>SECURE SIGN-IN</span><b>SHD // AUTH</b></div>
|
||||
<p class="auth-mode-note">Sign in to an existing account or create one with email, Discord, or local credentials.</p>
|
||||
<button class="primary full passkey-signin" disabled={!passkeySupported || passkeyPending} aria-busy={passkeyPending} onclick={signInWithPasskey}>{passkeyPending ? 'VERIFYING PASSKEY…' : 'SIGN IN WITH A PASSKEY →'}</button>
|
||||
{#if !passkeySupported}<p class="auth-note">This browser does not support passkeys.</p>{/if}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<a href="#disclaimers">09 · DISCLAIMERS</a>
|
||||
</nav>
|
||||
<article class="legal-document">
|
||||
<section id="service"><span>01</span><div><h2>THE SERVICE</h2><p>SHD.build is an independent community loadout, build-guide, and discussion service. By accessing or using it, you agree to these terms. If you do not agree, do not use the service. Features may change, be suspended, or be discontinued as development continues.</p></div></section>
|
||||
<section id="service"><span>01</span><div><h2>THE SERVICE</h2><p>SHD.build is an independent community service for The Division Resurgence, including loadouts, guides, community-maintained game data, news, and discussion. By accessing or using it, you agree to these terms. If you do not agree, do not use the service. Features may change, be suspended, or be discontinued as development continues.</p></div></section>
|
||||
<section id="accounts"><span>02</span><div><h2>ACCOUNTS & SECURITY</h2><p>You are responsible for activity performed through your account and for maintaining control of your authentication methods. You must provide accurate information, may not impersonate another person, and may not attempt to access another account. We may restrict accounts to protect users, enforce these terms, or comply with law.</p><p>Available authentication methods may include passkeys, verified email magic links, local username and password credentials, Discord, and other providers added later. Third-party authentication remains subject to that provider’s terms and privacy practices.</p></div></section>
|
||||
<section id="content"><span>03</span><div><h2>USER CONTENT</h2><p>You retain ownership of original content you submit. You grant SHD.build a non-exclusive, worldwide, royalty-free license to host, reproduce, format, display, and distribute that content as necessary to operate the service. You represent that you have the rights required to post it.</p><p>Builds, guides, and comments may remain available after account deletion under a “Deleted Agent” attribution so community references are not broken. You may not upload unlawful, infringing, malicious, or privacy-invasive content.</p></div></section>
|
||||
<section id="conduct"><span>04</span><div><h2>COMMUNITY CONDUCT</h2><p>Do not harass others; publish illegal or infringing material; distribute malware; evade access restrictions; scrape or overload the service; manipulate ratings; spam; or exploit security vulnerabilities. Community Oversight may remove content, restrict access, or preserve relevant records when reasonably necessary for safety, support, abuse prevention, or legal obligations.</p></div></section>
|
||||
|
||||
Reference in New Issue
Block a user