147 lines
4.3 KiB
HTML
147 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="dark">
|
|
<meta name="theme-color" content="#15141a">
|
|
<title>webl — заметки</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: dark;
|
|
--bg: #15141a;
|
|
--bg-2: #121117;
|
|
--surface: #1e1d24;
|
|
--surface-2: #26252e;
|
|
--surface-3: #302f3a;
|
|
--line: #34333f;
|
|
--line-strong: #4b4a59;
|
|
--ink: #f4f4f6;
|
|
--ink-2: #b8b7c2;
|
|
--ink-3: #8f8e9b;
|
|
--accent: #a78bfa;
|
|
--accent-hover: #bdadff;
|
|
--accent-soft: color-mix(in srgb, var(--accent) 32%, transparent);
|
|
--accent-tint: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
--on-accent: #171224;
|
|
--safe: #4fd6a6;
|
|
--warn: #eec25f;
|
|
--danger: #ff8a75;
|
|
--float: 0 16px 40px -16px rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .25);
|
|
--ease: cubic-bezier(.22, 1, .36, 1);
|
|
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
|
|
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100dvh;
|
|
font: 16px/1.6 var(--sans);
|
|
color: var(--ink);
|
|
background: radial-gradient(760px 380px at 50% -6%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%), var(--bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
letter-spacing: .01em;
|
|
}
|
|
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
|
|
|
|
.wrap {
|
|
width: min(100% - 32px, 880px);
|
|
margin-inline: auto;
|
|
padding-block: clamp(36px, 7vh, 56px) clamp(48px, 9vh, 84px);
|
|
padding-top: 20px
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 8px;
|
|
font: 600 11px/1.4 var(--mono);
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-3);
|
|
}
|
|
.eyebrow--accent { color: var(--accent); }
|
|
|
|
main { display: grid; gap: 18px; margin-top: 1em; }
|
|
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
box-shadow: var(--float);
|
|
padding: clamp(20px, 4vw, 28px);
|
|
}
|
|
.card-head {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card-head h2 { margin: 0; font-size: 1.3rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 7px;
|
|
font: 600 11px/1 var(--mono);
|
|
letter-spacing: .09em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-3);
|
|
}
|
|
textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
|
|
.btn {
|
|
justify-self: start;
|
|
font: 650 15px/1 var(--sans);
|
|
color: var(--on-accent);
|
|
background: var(--accent);
|
|
border: 0;
|
|
border-radius: 12px;
|
|
padding: 12px 22px;
|
|
cursor: pointer;
|
|
transition: background-color .18s var(--ease), transform .18s var(--ease);
|
|
}
|
|
.btn:hover { background: var(--accent-hover); }
|
|
.btn:active { transform: translateY(1px); }
|
|
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
|
|
main { animation: rise .45s var(--ease) .07s both; }
|
|
|
|
@media (max-width: 560px) {
|
|
.card-head { align-items: center; }
|
|
.env-row dt { flex-basis: 100%; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<header class="masthead">
|
|
<div class="eyebrow eyebrow--accent">WebLab <span class="dash">·</span> заметки</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="card" aria-labelledby="compose-title">
|
|
<div class="card-head">
|
|
<div>
|
|
<h2 id="compose-title">Кнопка</h2>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label for="title">Клики</label>
|
|
<div id="clicks">0</div>
|
|
</div>
|
|
<p></p>
|
|
<button class="btn" onclick="
|
|
const el = document.getElementById('clicks')
|
|
el.textContent = parseInt(el.textContent)+1
|
|
">Клик</button>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|