webl/page.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">&middot;</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>