221 lines
8.8 KiB
HTML
221 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>SaaS pages × 3 nav styles · Lattice</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
html, body { margin: 0; padding: 0; height: 100%; background: #f0eee9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
|
||
</style>
|
||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
|
||
<script type="text/babel" src="design-canvas.jsx"></script>
|
||
<script type="text/babel" src="app-chrome.jsx"></script>
|
||
<script type="text/babel" src="page-customer.jsx"></script>
|
||
<script type="text/babel" src="page-dashboard.jsx"></script>
|
||
<script type="text/babel" src="page-admin.jsx"></script>
|
||
<script type="text/babel">
|
||
const { DesignCanvas, DCSection, DCArtboard,
|
||
SidebarChrome, RailChrome, RailItem, RailSectionHeader, TopbarChrome,
|
||
Icon, P } = window;
|
||
|
||
const W = 1440, H = 900;
|
||
|
||
// ── Secondary panel content per page, for the dark rail chrome ─────
|
||
// Companies list — relevant context next to a customer/company page
|
||
const CompaniesPanel = () => (
|
||
<>
|
||
<RailSectionHeader action={<Icon d={P.plus} size={12} />}>
|
||
Pinned
|
||
</RailSectionHeader>
|
||
{[
|
||
["NS", "Northstar Logistics", "Tier 1 · EMEA", "#f6c560", true],
|
||
["HC", "Halcyon", "Renewal Q3", "#a8c8e8"],
|
||
["KS", "Kestrel", "Pilot", "#c8e8a8"],
|
||
].map(([i, n, s, col, active]) => (
|
||
<RailItem key={i} active={active}
|
||
leading={<div style={{
|
||
width: 24, height: 24, borderRadius: 5, background: col,
|
||
display: "flex", alignItems: "center", justifyContent: "center",
|
||
color: "#3a2210", fontSize: 10, fontWeight: 700,
|
||
}}>{i}</div>}
|
||
label={n} sub={s} />
|
||
))}
|
||
|
||
<RailSectionHeader>All companies · 248</RailSectionHeader>
|
||
{[
|
||
["BF","Brooke Foods", "added 2 days", "#e8c8a8"],
|
||
["MV","Moss & Verra", "added 5 days", "#c8a8e8"],
|
||
["TD","Tide Co.", "added a week", "#a8e8c8"],
|
||
["VR","Verra Tech", "added a week", "#e8a87c"],
|
||
["LW","Lowell Works", "added 2 weeks", "#a8c8e8"],
|
||
["OK","Okra Studios", "added 3 weeks", "#e8a8c8"],
|
||
].map(([i, n, s, col]) => (
|
||
<RailItem key={i}
|
||
leading={<div style={{
|
||
width: 24, height: 24, borderRadius: 5, background: col,
|
||
display: "flex", alignItems: "center", justifyContent: "center",
|
||
color: "#3a2210", fontSize: 10, fontWeight: 700,
|
||
}}>{i}</div>}
|
||
label={n} sub={s} />
|
||
))}
|
||
</>
|
||
);
|
||
|
||
// Saved dashboards / reports — context for the dashboard page
|
||
const DashboardsPanel = () => (
|
||
<>
|
||
<RailSectionHeader action={<Icon d={P.plus} size={12} />}>
|
||
My dashboards
|
||
</RailSectionHeader>
|
||
{[
|
||
["Workspace overview", "default", true],
|
||
["Revenue · weekly", "shared by Theo"],
|
||
["Pipeline health", "auto-refresh 5m"],
|
||
["Team performance", "private"],
|
||
].map(([n, s, active]) => (
|
||
<RailItem key={n} active={active}
|
||
leading={<span style={{ color: "#9a9aa6", display: "flex" }}>
|
||
<Icon d={P.bar} size={14} />
|
||
</span>}
|
||
label={n} sub={s} />
|
||
))}
|
||
|
||
<RailSectionHeader>Shared with me</RailSectionHeader>
|
||
{[
|
||
["Q2 board review", "from Mira"],
|
||
["Marketing funnel", "from Devi"],
|
||
["Customer success", "from Sun"],
|
||
["Churn watch", "from Theo"],
|
||
].map(([n, s]) => (
|
||
<RailItem key={n}
|
||
leading={<span style={{ color: "#9a9aa6", display: "flex" }}>
|
||
<Icon d={P.bar} size={14} />
|
||
</span>}
|
||
label={n} sub={s} />
|
||
))}
|
||
</>
|
||
);
|
||
|
||
// Settings tree — context for the admin page
|
||
const SettingsPanel = () => (
|
||
<>
|
||
<RailSectionHeader>Workspace</RailSectionHeader>
|
||
{[
|
||
["General", P.settings],
|
||
["Members", P.people, true],
|
||
["Roles", P.check],
|
||
["Teams", P.people],
|
||
["Integrations", P.workflow],
|
||
["Billing", P.target],
|
||
["API & Webhooks", P.workflow],
|
||
["Audit log", P.doc],
|
||
].map(([n, ico, active]) => (
|
||
<RailItem key={n} active={active}
|
||
leading={<span style={{
|
||
color: active ? "#fff" : "#9a9aa6", display: "flex",
|
||
}}><Icon d={ico} size={14} /></span>}
|
||
label={n} />
|
||
))}
|
||
<RailSectionHeader>Personal</RailSectionHeader>
|
||
{[
|
||
["Profile", P.people],
|
||
["Notifications", P.bell],
|
||
["Sessions", P.target],
|
||
].map(([n, ico]) => (
|
||
<RailItem key={n}
|
||
leading={<span style={{ color: "#9a9aa6", display: "flex" }}>
|
||
<Icon d={ico} size={14} />
|
||
</span>}
|
||
label={n} />
|
||
))}
|
||
</>
|
||
);
|
||
|
||
// Tabs per page for the dark top bar
|
||
const customerTabs = ["Overview", "Activity", "People", "Notes", "Files"];
|
||
const dashboardTabs = ["Overview", "Reports", "Goals", "Anomalies", "Custom"];
|
||
const adminTabs = ["General", "Members", "Roles", "Integrations", "Billing", "API"];
|
||
|
||
function App() {
|
||
return (
|
||
<DesignCanvas>
|
||
<DCSection
|
||
id="customer"
|
||
title="Customer / company page"
|
||
subtitle="A CRM record — same content, three nav shells."
|
||
>
|
||
<DCArtboard id="cust-sidebar" label="Sidebar nav" width={W} height={H}>
|
||
<SidebarChrome active="companies"><CustomerBody theme="light"/></SidebarChrome>
|
||
</DCArtboard>
|
||
<DCArtboard id="cust-rail" label="Icon rail + secondary" width={W} height={H}>
|
||
<RailChrome active="companies" secondary={<CompaniesPanel/>}>
|
||
<CustomerBody theme="dark"/>
|
||
</RailChrome>
|
||
</DCArtboard>
|
||
<DCArtboard id="cust-topbar" label="Top horizontal + ⌘K" width={W} height={H}>
|
||
<TopbarChrome tabs={customerTabs} activeTab="Activity"
|
||
breadcrumb="northstar-logistics">
|
||
<CustomerBody theme="light"/>
|
||
</TopbarChrome>
|
||
</DCArtboard>
|
||
</DCSection>
|
||
|
||
<DCSection
|
||
id="dashboard"
|
||
title="Dashboard page"
|
||
subtitle="KPIs, time-series, funnel and activity."
|
||
>
|
||
<DCArtboard id="dash-sidebar" label="Sidebar nav" width={W} height={H}>
|
||
<SidebarChrome active="home"><DashboardBody theme="light"/></SidebarChrome>
|
||
</DCArtboard>
|
||
<DCArtboard id="dash-rail" label="Icon rail + secondary" width={W} height={H}>
|
||
<RailChrome active="home" secondary={<DashboardsPanel/>}>
|
||
<DashboardBody theme="dark"/>
|
||
</RailChrome>
|
||
</DCArtboard>
|
||
<DCArtboard id="dash-topbar" label="Top horizontal + ⌘K" width={W} height={H}>
|
||
<TopbarChrome tabs={dashboardTabs} activeTab="Overview"
|
||
breadcrumb="dashboard">
|
||
<DashboardBody theme="light"/>
|
||
</TopbarChrome>
|
||
</DCArtboard>
|
||
</DCSection>
|
||
|
||
<DCSection
|
||
id="admin"
|
||
title="Admin page"
|
||
subtitle="Workspace settings → Members table."
|
||
>
|
||
<DCArtboard id="admin-sidebar" label="Sidebar nav" width={W} height={H}>
|
||
<SidebarChrome active="settings"><AdminBody theme="light"/></SidebarChrome>
|
||
</DCArtboard>
|
||
<DCArtboard id="admin-rail" label="Icon rail + secondary" width={W} height={H}>
|
||
<RailChrome active="settings" secondary={<SettingsPanel/>}>
|
||
<AdminBody theme="dark"/>
|
||
</RailChrome>
|
||
</DCArtboard>
|
||
<DCArtboard id="admin-topbar" label="Top horizontal + ⌘K" width={W} height={H}>
|
||
<TopbarChrome tabs={adminTabs} activeTab="Members"
|
||
breadcrumb="settings">
|
||
<AdminBody theme="light"/>
|
||
</TopbarChrome>
|
||
</DCArtboard>
|
||
</DCSection>
|
||
</DesignCanvas>
|
||
);
|
||
}
|
||
|
||
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||
</script>
|
||
</body>
|
||
</html>
|