mirror of
https://github.com/openswarm-ai/openswarm.git
synced 2026-08-29 19:29:48 +02:00
[eric] onboarding: premium welcome-screen mock (Claude serif skin + Apple polish, warm palette, tiles not a blank box)
This commit is contained in:
ciregenz
@@ -0,0 +1,139 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>OpenSwarm welcome screen (premium skin mock)</title>
|
||||
<!--
|
||||
Static mock of the first onboarding screen in the premium skin:
|
||||
Claude's aesthetic (warm near-black, serif display heading, off-white text, huge whitespace,
|
||||
one centered focal area) + Apple HIG polish (generous rhythm, clean hierarchy, one accent),
|
||||
ending on OUR tiles ("Tap one and watch"), never a blank box.
|
||||
Warm palette from claudeTokens (darkTokens). Real headline font is "Anthropic Sans";
|
||||
the serif display here is a stand-in for Claude's serif display face.
|
||||
-->
|
||||
<style>
|
||||
:root {
|
||||
--bg: #1A1918; /* darkTokens bg.page (warm near-black) */
|
||||
--surface: rgba(250,249,245,0.045);
|
||||
--border: rgba(250,249,245,0.09);
|
||||
--border-hover: rgba(196,99,58,0.55);
|
||||
--white: #FAF9F5; /* text.primary */
|
||||
--muted: #9C9A92; /* text.tertiary */
|
||||
--ghost: rgba(156,154,146,0.6);
|
||||
--accent: #C4633A; /* accent.primary (dark) */
|
||||
--accent-soft: rgba(196,99,58,0.12);
|
||||
--serif: "Tiempos Headline", "Anthropic Serif", Georgia, "Times New Roman", serif;
|
||||
--sans: "Anthropic Sans", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
|
||||
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
/* subtle warm depth glow, Apple-ish hero lighting */
|
||||
background-image: radial-gradient(60% 50% at 50% 0%, rgba(196,99,58,0.10) 0%, transparent 70%);
|
||||
font-family: var(--sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: var(--white);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(680px, 88vw);
|
||||
text-align: center;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-size: 22px; color: var(--accent); margin-bottom: 56px;
|
||||
opacity: 0; animation: rise 700ms var(--ease) 120ms forwards;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--serif);
|
||||
font-weight: 500; font-size: 42px; line-height: 1.12; letter-spacing: -0.01em;
|
||||
color: var(--white);
|
||||
opacity: 0; animation: rise 800ms var(--ease) 260ms forwards;
|
||||
}
|
||||
.sub {
|
||||
margin-top: 16px; font-size: 17px; color: var(--muted); font-weight: 400;
|
||||
letter-spacing: 0.005em;
|
||||
opacity: 0; animation: rise 800ms var(--ease) 400ms forwards;
|
||||
}
|
||||
|
||||
.grid {
|
||||
margin-top: 48px;
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
.tile {
|
||||
text-align: left; padding: 22px 22px; border-radius: 16px;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
|
||||
opacity: 0; animation: rise 760ms var(--ease) forwards;
|
||||
}
|
||||
.tile:nth-child(1) { animation-delay: 560ms; }
|
||||
.tile:nth-child(2) { animation-delay: 640ms; }
|
||||
.tile:nth-child(3) { animation-delay: 720ms; }
|
||||
.tile:nth-child(4) { animation-delay: 800ms; }
|
||||
.tile:hover {
|
||||
background: var(--accent-soft);
|
||||
border-color: var(--border-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.tile .ic { font-size: 24px; display: block; margin-bottom: 12px; }
|
||||
.tile .t { font-size: 17px; font-weight: 550; color: var(--white); letter-spacing: -0.005em; }
|
||||
.tile .d { margin-top: 5px; font-size: 13.5px; color: var(--muted); line-height: 1.35; }
|
||||
|
||||
.surprise {
|
||||
margin-top: 34px; font-size: 15px; color: var(--ghost); cursor: pointer;
|
||||
transition: color 180ms var(--ease);
|
||||
opacity: 0; animation: rise 760ms var(--ease) 940ms forwards;
|
||||
}
|
||||
.surprise:hover { color: var(--white); }
|
||||
|
||||
@keyframes rise {
|
||||
from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
|
||||
to { opacity: 1; transform: translateY(0); filter: blur(0); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="brand">✳</div>
|
||||
<h1>Good evening, Eric.<br/>What should I take off your plate?</h1>
|
||||
<div class="sub">Tap one and watch. I go and do it, not just talk about it.</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="tile">
|
||||
<span class="ic">🔎</span>
|
||||
<div class="t">Find something</div>
|
||||
<div class="d">Prices, options, the best pick, pulled together for you.</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<span class="ic">🧩</span>
|
||||
<div class="t">Build something</div>
|
||||
<div class="d">A tool, a tracker, a little page, built and running.</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<span class="ic">🗂️</span>
|
||||
<div class="t">Handle busywork</div>
|
||||
<div class="d">Messy sheets, inboxes, cleanup, off your plate.</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<span class="ic">🌐</span>
|
||||
<div class="t">Do something online</div>
|
||||
<div class="d">A real browser, going and doing the task for you.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surprise">✨ or surprise me</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user