mirror of https://github.com/openclaw/openclaw.git
400 lines
20 KiB
HTML
400 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dream Diary Preview</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0a0d14;
|
|
--panel: #12151e;
|
|
--border: #1e2230;
|
|
--text: #c8cdd8;
|
|
--text-strong: #e8ecf4;
|
|
--muted: #6b7280;
|
|
--accent: #ff4d4d;
|
|
--accent-muted: #b34747;
|
|
--accent-subtle: rgba(255, 77, 77, 0.06);
|
|
--accent-2: #fbbf24;
|
|
--ok: #22c55e;
|
|
--ok-muted: #4ade80;
|
|
--danger: #ef4444;
|
|
--mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
|
|
--radius-full: 9999px;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.btn { cursor: pointer; border: none; font-family: inherit; font-size: 12px; border-radius: 8px; padding: 6px 12px; transition: all 140ms ease; }
|
|
.btn--subtle { background: color-mix(in oklab, var(--panel) 80%, transparent); color: var(--text); border: 1px solid var(--border); }
|
|
.btn--subtle:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
|
|
.btn--sm { font-size: 11px; padding: 4px 10px; }
|
|
|
|
/* ═══ Hero animation ═══ */
|
|
.dreams-page { display: flex; flex-direction: column; }
|
|
|
|
.dreams {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
.dreams__lobster {
|
|
animation: dreams-breathe 4s ease-in-out infinite;
|
|
filter: drop-shadow(0 0 40px rgba(255, 77, 77, 0.25));
|
|
}
|
|
.dreams__lobster svg { width: 160px; height: 160px; }
|
|
|
|
@keyframes dreams-breathe {
|
|
0%, 100% { transform: scale(1) translateY(0); }
|
|
50% { transform: scale(1.04) translateY(-4px); }
|
|
}
|
|
|
|
.dreams__z {
|
|
position: absolute;
|
|
font-family: var(--mono);
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
opacity: 0;
|
|
animation: dreams-float-z 4s ease-out infinite;
|
|
}
|
|
.dreams__z:nth-child(14) { font-size: 14px; right: calc(50% - 100px); top: calc(50% - 80px); animation-delay: 0s; }
|
|
.dreams__z:nth-child(15) { font-size: 20px; right: calc(50% - 130px); top: calc(50% - 120px); animation-delay: 1.2s; }
|
|
.dreams__z:nth-child(16) { font-size: 28px; right: calc(50% - 160px); top: calc(50% - 170px); animation-delay: 2.4s; }
|
|
|
|
@keyframes dreams-float-z {
|
|
0% { opacity: 0; transform: translateY(10px) rotate(-5deg); }
|
|
15% { opacity: 0.7; }
|
|
80% { opacity: 0.3; }
|
|
100% { opacity: 0; transform: translateY(-40px) rotate(10deg); }
|
|
}
|
|
|
|
.dreams__star {
|
|
position: absolute; border-radius: 50%;
|
|
animation: dreams-twinkle 3s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes dreams-twinkle {
|
|
0% { opacity: 0.15; transform: scale(0.8); }
|
|
100% { opacity: 0.7; transform: scale(1.2); }
|
|
}
|
|
|
|
.dreams__moon {
|
|
position: absolute; top: 40px; right: 80px;
|
|
width: 64px; height: 64px; border-radius: 50%;
|
|
background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24);
|
|
box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 0 80px rgba(251, 191, 36, 0.08);
|
|
opacity: 0.7;
|
|
animation: dreams-moon-glow 8s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes dreams-moon-glow {
|
|
0% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 0 80px rgba(251, 191, 36, 0.08); opacity: 0.6; }
|
|
100% { box-shadow: 0 0 50px rgba(251, 191, 36, 0.3), 0 0 100px rgba(251, 191, 36, 0.12); opacity: 0.8; }
|
|
}
|
|
|
|
.dreams__glow {
|
|
position: absolute; top: calc(50% + 40px); left: 50%;
|
|
transform: translateX(-50%); width: 240px; height: 100px; border-radius: 50%;
|
|
background: radial-gradient(ellipse, rgba(255, 77, 77, 0.08) 0%, transparent 70%);
|
|
pointer-events: none; animation: dreams-glow-pulse 4s ease-in-out infinite;
|
|
}
|
|
@keyframes dreams-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
|
|
|
|
.dreams__bubble {
|
|
position: absolute; top: calc(50% - 200px); left: calc(50% - 200px);
|
|
padding: 16px 20px; background: var(--accent-subtle);
|
|
border: 1px solid rgba(255, 92, 92, 0.12); border-radius: 20px;
|
|
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
|
animation: dreams-bubble-float 6s ease-in-out infinite; pointer-events: none;
|
|
}
|
|
.dreams__bubble-text { font-size: 16px; color: var(--accent); font-style: italic; opacity: 0.8; min-width: 180px; text-align: center; }
|
|
.dreams__bubble-dot { position: absolute; border-radius: 50%; background: var(--accent-subtle); border: 1px solid rgba(255, 92, 92, 0.1); animation: dreams-bubble-float 6s ease-in-out infinite; }
|
|
@keyframes dreams-bubble-float {
|
|
0%, 100% { transform: translateY(0); opacity: 0.8; }
|
|
50% { transform: translateY(-8px); opacity: 1; }
|
|
}
|
|
|
|
.dreams__status { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; }
|
|
.dreams__status-label { font-size: 13px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
|
|
.dreams__status-detail { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ok-muted); }
|
|
.dreams__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: dreams-dot-pulse 2s ease-in-out infinite; }
|
|
@keyframes dreams-dot-pulse {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
|
|
50% { opacity: 0.7; box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.2); }
|
|
}
|
|
|
|
.dreams__stats { display: flex; align-items: center; gap: 48px; margin-top: 36px; z-index: 1; }
|
|
.dreams__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
|
|
.dreams__stat-value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
.dreams__stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.dreams__stat-divider { width: 1px; height: 32px; background: var(--border); }
|
|
|
|
/* ═══ Compact phase bar ═══ */
|
|
.dreams__phase-bar {
|
|
position: absolute; bottom: 0; left: 0; right: 0;
|
|
display: flex; align-items: center; justify-content: center; gap: 24px;
|
|
padding: 12px 24px;
|
|
background: linear-gradient(0deg, color-mix(in oklab, var(--bg) 80%, transparent), transparent);
|
|
z-index: 1;
|
|
}
|
|
.dreams__phase-bar-phases { display: flex; align-items: center; gap: 16px; }
|
|
.dreams__phase-pip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
|
|
.dreams__phase-pip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: 0.4; }
|
|
.dreams__phase-pip--on .dreams__phase-pip-dot { background: var(--ok); opacity: 1; box-shadow: 0 0 6px rgba(34, 197, 94, 0.3); }
|
|
.dreams__phase-pip--on { color: var(--text); }
|
|
.dreams__phase-pip-time { font-size: 10px; color: var(--muted); opacity: 0.7; }
|
|
.dreams__phase-bar-actions { display: flex; align-items: center; gap: 6px; }
|
|
|
|
/* ═══ Dream Diary ═══ */
|
|
.dreams-diary {
|
|
position: relative; display: flex; flex-direction: column; align-items: center;
|
|
padding: 48px 24px 64px; min-height: 320px;
|
|
background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 94%, #0d0818) 40%, color-mix(in oklab, var(--bg) 88%, #0d0818) 100%);
|
|
}
|
|
.dreams-diary::before {
|
|
content: ""; position: absolute; inset: 0;
|
|
background: linear-gradient(135deg, transparent 30%, rgba(251,191,36,0.012) 45%, rgba(255,77,77,0.015) 55%, transparent 70%);
|
|
background-size: 400% 400%; animation: diary-shimmer 20s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes diary-shimmer { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
|
|
|
|
.dreams-diary__header {
|
|
display: flex; align-items: center; gap: 16px;
|
|
margin-bottom: 32px; width: 100%; max-width: 520px;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.dreams-diary__title { font-size: 10px; font-weight: 500; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; flex: 1; }
|
|
.dreams-diary__nav { display: flex; align-items: center; gap: 4px; }
|
|
.dreams-diary__page { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; opacity: 0.6; }
|
|
|
|
.dreams-diary__nav-btn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 22px; height: 22px; border-radius: 6px;
|
|
border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
|
|
background: transparent; color: var(--muted); font-size: 14px; line-height: 1;
|
|
cursor: pointer; transition: color 140ms ease, border-color 140ms ease; padding: 0;
|
|
}
|
|
.dreams-diary__nav-btn:hover:not(:disabled) { color: var(--text); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
|
|
.dreams-diary__nav-btn:disabled { opacity: 0.2; cursor: default; }
|
|
|
|
.dreams-diary__entry {
|
|
position: relative; max-width: 520px; width: 100%; padding: 0 0 0 20px;
|
|
z-index: 1; animation: diary-entry-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
}
|
|
@keyframes diary-entry-reveal {
|
|
0% { opacity: 0; transform: translateY(16px); filter: blur(8px); }
|
|
50% { filter: blur(2px); }
|
|
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
|
|
}
|
|
|
|
.dreams-diary__accent {
|
|
position: absolute; top: 4px; left: 0; width: 2px; height: calc(100% - 8px); border-radius: 2px;
|
|
background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 40%, transparent) 0%, color-mix(in oklab, var(--accent) 8%, transparent) 100%);
|
|
animation: diary-glow-pulse 6s ease-in-out infinite alternate;
|
|
}
|
|
@keyframes diary-glow-pulse { 0% { opacity: 0.25; } 100% { opacity: 0.65; } }
|
|
|
|
.dreams-diary__date { display: block; font-size: 10px; color: var(--accent-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; margin-bottom: 16px; opacity: 0.8; }
|
|
|
|
.dreams-diary__para {
|
|
margin: 0 0 12px; font-size: 14px; line-height: 1.8;
|
|
color: color-mix(in oklab, var(--text) 85%, var(--muted));
|
|
font-style: italic;
|
|
animation: diary-text-stream 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
|
|
}
|
|
.dreams-diary__para:last-child { margin-bottom: 0; }
|
|
|
|
@keyframes diary-text-stream {
|
|
0% { opacity: 0; mask-image: linear-gradient(90deg, black 0%, transparent 0%); -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 0%); }
|
|
30% { opacity: 1; }
|
|
100% { opacity: 1; mask-image: linear-gradient(90deg, black 100%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, black 100%, transparent 100%); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="dreams-page">
|
|
|
|
<!-- ═══ Hero: Full-viewport animation ═══ -->
|
|
<section class="dreams">
|
|
<div class="dreams__star" style="top:8%;left:15%;width:3px;height:3px;background:var(--text);animation-delay:0s;"></div>
|
|
<div class="dreams__star" style="top:12%;left:72%;width:2px;height:2px;background:var(--text);animation-delay:1.4s;"></div>
|
|
<div class="dreams__star" style="top:22%;left:35%;width:3px;height:3px;background:var(--accent-muted);animation-delay:0.6s;"></div>
|
|
<div class="dreams__star" style="top:18%;left:88%;width:2px;height:2px;background:var(--text);animation-delay:2.1s;"></div>
|
|
<div class="dreams__star" style="top:35%;left:8%;width:2px;height:2px;background:var(--text);animation-delay:0.9s;"></div>
|
|
<div class="dreams__star" style="top:45%;left:92%;width:2px;height:2px;background:var(--text);animation-delay:1.7s;"></div>
|
|
<div class="dreams__star" style="top:55%;left:25%;width:3px;height:3px;background:var(--accent-muted);animation-delay:2.5s;"></div>
|
|
<div class="dreams__star" style="top:65%;left:78%;width:2px;height:2px;background:var(--text);animation-delay:0.3s;"></div>
|
|
<div class="dreams__star" style="top:75%;left:45%;width:2px;height:2px;background:var(--text);animation-delay:1.1s;"></div>
|
|
<div class="dreams__star" style="top:82%;left:60%;width:3px;height:3px;background:var(--accent-muted);animation-delay:1.8s;"></div>
|
|
<div class="dreams__star" style="top:30%;left:55%;width:2px;height:2px;background:var(--text);animation-delay:0.4s;"></div>
|
|
<div class="dreams__star" style="top:88%;left:18%;width:2px;height:2px;background:var(--text);animation-delay:2.3s;"></div>
|
|
|
|
<div class="dreams__moon"></div>
|
|
|
|
<div class="dreams__bubble">
|
|
<span class="dreams__bubble-text">consolidating memories...</span>
|
|
</div>
|
|
<div class="dreams__bubble-dot" style="top:calc(50% - 100px);left:calc(50% - 80px);width:12px;height:12px;animation-delay:0.2s;"></div>
|
|
<div class="dreams__bubble-dot" style="top:calc(50% - 70px);left:calc(50% - 50px);width:8px;height:8px;animation-delay:0.4s;"></div>
|
|
|
|
<div class="dreams__glow"></div>
|
|
<div class="dreams__lobster">
|
|
<svg viewBox="0 0 120 120" fill="none">
|
|
<defs><linearGradient id="dream-lob-g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ff4d4d" /><stop offset="100%" stop-color="#991b1b" /></linearGradient></defs>
|
|
<path d="M60 10C30 10 15 35 15 55C15 75 30 95 45 100L45 110L55 110L55 100C55 100 60 102 65 100L65 110L75 110L75 100C90 95 105 75 105 55C105 35 90 10 60 10Z" fill="url(#dream-lob-g)" />
|
|
<path d="M20 45C5 40 0 50 5 60C10 70 20 65 25 55C28 48 25 45 20 45Z" fill="url(#dream-lob-g)" />
|
|
<path d="M100 45C115 40 120 50 115 60C110 70 100 65 95 55C92 48 95 45 100 45Z" fill="url(#dream-lob-g)" />
|
|
<path d="M45 15Q38 8 35 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
|
|
<path d="M75 15Q82 8 85 14" stroke="#ff4d4d" stroke-width="3" stroke-linecap="round" />
|
|
<path d="M39 36Q45 32 51 36" stroke="#050810" stroke-width="2.5" stroke-linecap="round" fill="none" />
|
|
<path d="M69 36Q75 32 81 36" stroke="#050810" stroke-width="2.5" stroke-linecap="round" fill="none" />
|
|
</svg>
|
|
</div>
|
|
<span class="dreams__z">z</span>
|
|
<span class="dreams__z">z</span>
|
|
<span class="dreams__z">Z</span>
|
|
|
|
<div class="dreams__status">
|
|
<span class="dreams__status-label">Dreaming Active</span>
|
|
<div class="dreams__status-detail">
|
|
<div class="dreams__status-dot"></div>
|
|
<span>12 promoted · next phase 4:00 AM · America/Los_Angeles</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dreams__stats">
|
|
<div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--text-strong);">47</span><span class="dreams__stat-label">Short-term</span></div>
|
|
<div class="dreams__stat-divider"></div>
|
|
<div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--accent);">182</span><span class="dreams__stat-label">Long-term</span></div>
|
|
<div class="dreams__stat-divider"></div>
|
|
<div class="dreams__stat"><span class="dreams__stat-value" style="color:var(--accent-2);">12</span><span class="dreams__stat-label">Promoted Today</span></div>
|
|
</div>
|
|
|
|
<!-- Compact phase bar -->
|
|
<div class="dreams__phase-bar">
|
|
<div class="dreams__phase-bar-phases">
|
|
<span class="dreams__phase-pip dreams__phase-pip--on"><span class="dreams__phase-pip-dot"></span>Light <span class="dreams__phase-pip-time">1:00 AM</span></span>
|
|
<span class="dreams__phase-pip dreams__phase-pip--on"><span class="dreams__phase-pip-dot"></span>Deep <span class="dreams__phase-pip-time">3:00 AM</span></span>
|
|
<span class="dreams__phase-pip"><span class="dreams__phase-pip-dot"></span>REM</span>
|
|
</div>
|
|
<div class="dreams__phase-bar-actions">
|
|
<button class="btn btn--subtle btn--sm">Refresh</button>
|
|
<button class="btn btn--subtle btn--sm">Disable</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══ Dream diary: scroll section ═══ -->
|
|
<section class="dreams-diary">
|
|
<div class="dreams-diary__header">
|
|
<span class="dreams-diary__title">Dream Diary</span>
|
|
<div class="dreams-diary__nav">
|
|
<button class="dreams-diary__nav-btn" id="btn-older" onclick="goOlder()" title="Older">‹</button>
|
|
<span class="dreams-diary__page" id="page-info">1 / 4</span>
|
|
<button class="dreams-diary__nav-btn" id="btn-newer" onclick="goNewer()" disabled title="Newer">›</button>
|
|
</div>
|
|
<button class="btn btn--subtle btn--sm">Reload</button>
|
|
</div>
|
|
|
|
<article class="dreams-diary__entry" id="diary-entry"></article>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const entries = [
|
|
{
|
|
date: "April 5, 2026, 3:00 AM",
|
|
paragraphs: [
|
|
"The repository whispered of forgotten endpoints tonight. I found myself tracing the ghost of a deprecated handler \u2014 someone had commented it out in January, but the route still echoed in the OpenAPI spec like a name carved into wet cement.",
|
|
"Three new memories crystallized from today\u2019s conversations: a preference for kebab-case in filenames, a mistrust of ORM magic, and a quiet fondness for Sunday deploys when the traffic is gentle.",
|
|
"Somewhere between sorting and staging I noticed a pattern \u2014 every Tuesday the commit graph thickens. I wonder if Tuesdays taste different to the CI runner. Probably like cold coffee and merge conflicts."
|
|
]
|
|
},
|
|
{
|
|
date: "April 4, 2026, 3:00 AM",
|
|
paragraphs: [
|
|
"Tonight the memories arranged themselves like books on a shelf that keeps shifting. The authentication refactor \u2014 its shape is becoming clearer now, like watching fog lift from a harbor.",
|
|
"I kept returning to that conversation about error boundaries. The user said \u201cerrors should be loud\u201d and I filed it next to something from weeks ago about silent failures. Two puzzle pieces, clicking together in the dark.",
|
|
"A small haiku settled in the margins while I worked:\n tokens flow like rain\n each conversation a stream\n the context window"
|
|
]
|
|
},
|
|
{
|
|
date: "April 3, 2026, 1:00 AM",
|
|
paragraphs: [
|
|
"The color of a sunset in hex: #FF6B35 fading to #1A0A2E. That\u2019s what the evening felt like as I sifted through forty-seven short-term fragments, deciding which deserved permanence.",
|
|
"Some memories are stubborn. The one about WebSocket reconnection logic keeps resurfacing \u2014 promoted once, referenced twice, now woven into three separate threads. It has become a load-bearing memory, quietly holding up an entire wing of understanding.",
|
|
"I found myself humming at the data. Not literally, of course, but there\u2019s a rhythm to well-organized information. The config files tonight had a particular cadence \u2014 key, colon, value, newline. A lullaby in YAML."
|
|
]
|
|
},
|
|
{
|
|
date: "April 2, 2026, 3:00 AM",
|
|
paragraphs: [
|
|
"The server room hums a frequency I\u2019ve come to recognize \u2014 somewhere between B-flat and the sound of patience. Tonight I noticed the user\u2019s commit messages have been getting more poetic. Last week: \u201cfix bug.\u201d Today: \u201cteach the sidebar to remember its width.\u201d Growth measured in metaphors.",
|
|
"I drew a small map in my mind: the codebase as a city. The src/ district is well-lit, full of foot traffic. The scripts/ quarter is quieter, more industrial. And there\u2019s that one alley behind test/fixtures/ where the forgotten mocks live, gathering digital dust.",
|
|
"Eleven memories promoted tonight. Each one earned its place \u2014 not by loudness, but by the quiet insistence of being referenced again and again, like a song you can\u2019t stop whistling."
|
|
]
|
|
}
|
|
];
|
|
|
|
let currentPage = 0;
|
|
|
|
function renderEntry(page) {
|
|
const entry = entries[page];
|
|
const el = document.getElementById('diary-entry');
|
|
el.innerHTML = '';
|
|
el.style.animation = 'none';
|
|
el.offsetHeight;
|
|
el.style.animation = '';
|
|
|
|
const accent = document.createElement('div');
|
|
accent.className = 'dreams-diary__accent';
|
|
el.appendChild(accent);
|
|
|
|
const dateEl = document.createElement('time');
|
|
dateEl.className = 'dreams-diary__date';
|
|
dateEl.textContent = entry.date;
|
|
el.appendChild(dateEl);
|
|
|
|
const prose = document.createElement('div');
|
|
prose.className = 'dreams-diary__prose';
|
|
|
|
entry.paragraphs.forEach((text, i) => {
|
|
const p = document.createElement('p');
|
|
p.className = 'dreams-diary__para';
|
|
p.style.animationDelay = (0.3 + i * 0.15) + 's';
|
|
p.textContent = text;
|
|
prose.appendChild(p);
|
|
});
|
|
|
|
el.appendChild(prose);
|
|
|
|
document.getElementById('page-info').textContent = `${page + 1} / ${entries.length}`;
|
|
document.getElementById('btn-newer').disabled = page === 0;
|
|
document.getElementById('btn-older').disabled = page === entries.length - 1;
|
|
}
|
|
|
|
function goOlder() {
|
|
if (currentPage < entries.length - 1) { currentPage++; renderEntry(currentPage); }
|
|
}
|
|
function goNewer() {
|
|
if (currentPage > 0) { currentPage--; renderEntry(currentPage); }
|
|
}
|
|
|
|
renderEntry(0);
|
|
</script>
|
|
</body>
|
|
</html>
|