257 lines
No EOL
8.3 KiB
HTML
257 lines
No EOL
8.3 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<style>
|
||
body {
|
||
background-color: white; /* Ensure the iframe has a white background */
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!DOCTYPE html>
|
||
<html lang="en" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Signal UI – Orange Accent</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<style>
|
||
:root {
|
||
/* Page & surface */
|
||
--page: #F6F4F5;
|
||
--page-accent: #ECE6E8;
|
||
--surface: #FFFFFF;
|
||
--surface-alt: #F1EDF0;
|
||
--surface-strong: #E1D5DA;
|
||
--text: #252428;
|
||
--muted: #6F6A74;
|
||
--border: #D3C6CC;
|
||
|
||
/* Primary action – pastel orange */
|
||
--primary: #FFAA66;
|
||
--primary-hover: #FF8C33;
|
||
|
||
/* Secondary, accent and status colors (unchanged) */
|
||
--secondary: #E4D6DD;
|
||
--secondary-hover: #D5C3CC;
|
||
--accent-soft: #B5828C;
|
||
--accent-soft-alt: #8E6A73;
|
||
--success: #5E8C76;
|
||
--danger: #A65A66;
|
||
--focus: rgba(255,170,102,0.35);
|
||
|
||
--shadow-soft: 0 18px 40px rgba(18, 12, 16, 0.18);
|
||
|
||
/* Fonts */
|
||
--font-body: "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont,
|
||
"Segoe UI", sans-serif;
|
||
--font-ui: "Lexend", system-ui, -apple-system, BlinkMacSystemFont,
|
||
"Segoe UI", sans-serif;
|
||
}
|
||
|
||
html[data-theme="dark"] {
|
||
--page: #040506;
|
||
--page-accent: #0B0C10;
|
||
--surface: #121218;
|
||
--surface-alt: #1C1B24;
|
||
--surface-strong: #2B2733;
|
||
--text: #F5F3F6;
|
||
--muted: #BBB1C2;
|
||
--border: #443C4A;
|
||
/* Dark‑theme orange hues */
|
||
--primary: #FFCC99;
|
||
--primary-hover: #FFB266;
|
||
--secondary: #3C3240;
|
||
--secondary-hover: #4A3E4F;
|
||
--accent-soft: #C492A0;
|
||
--accent-soft-alt: #9A6F7E;
|
||
--success: #7FA891;
|
||
--danger: #C77783;
|
||
--focus: rgba(255,204,153,0.55);
|
||
|
||
--shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.55);
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
font-family: var(--font-body);
|
||
background: radial-gradient(circle at top left,
|
||
var(--page-accent), var(--page));
|
||
color: var(--text);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 32px 16px;
|
||
}
|
||
|
||
.shell { /* unchanged layout styles */ }
|
||
/* ... all other styles from the original example ... */
|
||
|
||
/* Primary button – now uses orange */
|
||
.primary-btn {
|
||
border: none;
|
||
border-radius: 999px;
|
||
padding: 9px 20px;
|
||
font-family: var(--font-ui);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
background: radial-gradient(circle at 0% 0%,
|
||
#FFEFF5, var(--primary));
|
||
color: #FDF7FA;
|
||
box-shadow: 0 14px 28px rgba(43, 21, 35, 0.6);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition:
|
||
transform 120ms ease-out,
|
||
box-shadow 120ms ease-out,
|
||
background 120ms ease-out;
|
||
}
|
||
|
||
.primary-btn:hover {
|
||
background: radial-gradient(circle at 0% 0%,
|
||
#FFE3F0, var(--primary-hover));
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 18px 36px rgba(43, 21, 35, 0.7);
|
||
}
|
||
|
||
.primary-btn:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 10px 20px rgba(43, 21, 35, 0.7);
|
||
}
|
||
|
||
/* Rest of the stylesheet remains unchanged */
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="shell" aria-label="Signal login">
|
||
<section class="brand">
|
||
<!-- same markup as original -->
|
||
<header>
|
||
<div class="brand-mark">
|
||
<div class="brand-sigil" aria-hidden="true"><span></span></div>
|
||
<div>
|
||
<div class="brand-name">Signal</div>
|
||
<div class="brand-system">Orange Accent</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div>
|
||
<h1 class="headline">Less noise. One clear <span>signal</span>.</h1>
|
||
<p class="lede">
|
||
A calm system with a single orange accent for next actions.
|
||
Designed for longer sessions, focused work and distraction‑aware sign‑in.
|
||
</p>
|
||
<div class="pill-row" aria-label="System traits">
|
||
<div class="pill"><span class="pill-dot"></span>Private by design</div>
|
||
<div class="pill"><span class="pill-dot"></span>Accessible</div>
|
||
<div class="pill"><span class="pill-dot"></span>Distraction‑aware</div>
|
||
</div>
|
||
<ul class="points" aria-label="Design principles">
|
||
<li><span aria-hidden="true"></span><div>Clear visual hierarchy and predictable navigation.</div></li>
|
||
<li><span aria-hidden="true"></span><div>Low‑noise colours tuned for longer, calmer sessions.</div></li>
|
||
<li><span aria-hidden="true"></span><div>Readable typography with generous spacing and line height.</div></li>
|
||
</ul>
|
||
<p class="notice">
|
||
<strong>Signal</strong> keeps one primary path per screen and avoids surplus decisions near the main action.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section aria-label="Sign‑in" class="form-card">
|
||
<header class="form-header">
|
||
<div>
|
||
<h2 class="form-title">Sign in</h2>
|
||
<p class="form-subtitle">Continue to your distraction‑aware workspace.</p>
|
||
</div>
|
||
<div class="state-pill" aria-hidden="true">Session is private</div>
|
||
</header>
|
||
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label class="field-label" for="email">Email</label>
|
||
<div class="input-shell">
|
||
<div class="input-icon" aria-hidden="true"></div>
|
||
<input id="email" name="email" type="email"
|
||
autocomplete="email"
|
||
placeholder="you@example.org" required />
|
||
</div>
|
||
<p class="field-hint">Use the address you registered with this space.</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="field-label" for="password">Password</label>
|
||
<div class="input-shell">
|
||
<div class="input-icon" aria-hidden="true"></div>
|
||
<input id="password" name="password" type="password"
|
||
autocomplete="current-password"
|
||
placeholder="••••••••" required />
|
||
</div>
|
||
<p class="field-hint">We never show passwords in plain text.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="actions-row">
|
||
<button class="primary-btn" type="submit">
|
||
<span aria-hidden="true"></span>
|
||
<span>Begin focused session</span>
|
||
</button>
|
||
<button class="ghost-link" type="button">Forgot your password?</button>
|
||
</div>
|
||
|
||
<div class="meta-row">
|
||
<div>By signing in, you agree to the terms and privacy policy.</div>
|
||
<div><a href="#">Review data use</a></div>
|
||
</div>
|
||
|
||
<div class="toggle-row" aria-label="Appearance">
|
||
<span>Appearance</span>
|
||
<div class="theme-toggle" role="radiogroup" aria-label="Theme">
|
||
<button type="button" data-theme="light"
|
||
data-active="true" aria-checked="true" role="radio">
|
||
Light
|
||
</button>
|
||
<button type="button" data-theme="dark"
|
||
aria-checked="false" role="radio">
|
||
Dark
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
const html = document.documentElement;
|
||
const buttons = document.querySelectorAll('.theme-toggle button');
|
||
|
||
buttons.forEach((btn) => {
|
||
btn.addEventListener('click', () => {
|
||
const theme = btn.getAttribute('data-theme');
|
||
html.setAttribute('data-theme', theme);
|
||
buttons.forEach((b) => {
|
||
const active = b === btn;
|
||
b.dataset.active = active ? 'true' : 'false';
|
||
b.setAttribute('aria-checked', active ? 'true' : 'false');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
<script>
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|