<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>the daily bold: Journal Prompts & Mantras</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root{
--accent:#fa4906;
--ring:rgba(250,73,6,0.25);
}
html,body{height:100%}
/* Transparent so you can place this on an orange section behind it */
body{margin:0;background:transparent;font-family:'Poppins',system-ui,Segoe UI,Roboto,Helvetica,Arial;color:#111}
.wrap{min-height:100%; display:grid; place-items:center; padding:24px}
.app{width:min(92vw, 820px)}
.title{margin:0;text-align:center;font-size:28px;font-weight:900;letter-spacing:.2px}
.subtitle{margin:8px auto 0;max-width:680px;text-align:center;font-size:14px;opacity:.75}
/* Segmented pill toggle */
.seg{margin:18px auto 0; width:fit-content; background:#fff; border:1px solid #ececec; border-radius:999px; padding:6px; box-shadow:0 8px 18px rgba(0,0,0,.08); position:relative; display:grid; grid-template-columns:1fr 1fr}
.seg button{appearance:none;border:0;background:transparent;padding:12px 24px;border-radius:999px;font-size:16px;font-weight:600;cursor:pointer;color:var(--accent)}
.seg .knob{position:absolute; top:6px; left:6px; width:calc(50% - 6px); height:calc(100% - 12px); background:var(--accent); border-radius:999px; transition:transform .25s ease; box-shadow:0 8px 18px rgba(250,73,6,.35)}
.seg[data-mode="mantra"] .knob{ transform:translateX(100%); }
.seg[data-mode="journal"] .knob{ transform:translateX(0%); }
.seg[data-mode="journal"] .btn-journal{ color:#fff }
.seg[data-mode="mantra"] .btn-mantra{ color:#fff }
/* Card deck look: exact 5x3 ratio, responsive */
.card-stage{ margin-top:22px; display:grid; place-items:center }
.card{ position:relative; width:min(92vw, 500px); aspect-ratio:5 / 3; background:#fff; border-radius:10px; border:7px solid var(--accent); box-shadow:0 10px 28px rgba(0,0,0,.16); display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font-weight:800; font-size:20px; cursor:pointer; user-select:none; }
.card:focus{ outline:2px solid var(--ring); outline-offset:4px }
/* stacked cards behind */
.card::before,.card::after{ content:""; position:absolute; inset:10px; border-radius:10px; border:6px solid var(--accent); background:#fff; z-index:0 }
.card::before{ transform:rotate(-3deg) }
.card::after{ transform:rotate(3deg) }
.card > .text{ position:relative; z-index:1 }
/* Shuffle animation */
.shuffle{ animation: rise .28s ease, settle .28s .28s ease }
@keyframes rise{ from{ transform:translateY(6px) rotate(-1deg); opacity:.6 } to{ transform:translateY(0) rotate(0); opacity:1 } }
@keyframes settle{ from{ transform:translateY(0) rotate(0) } to{ transform:translateY(0) rotate(0) } }
.fade-swap{ animation: fadeIn .22s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }
.actions{ margin-top:16px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn{ appearance:none; border:1px solid #ececec; background:#fff; color:var(--accent); border-radius:12px; padding:12px 18px; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.08) }
.btn:focus{ outline:2px solid var(--ring); outline-offset:2px }
.disclaimer{ margin:16px auto 0; text-align:center; font-size:12px; opacity:.7; max-width:720px }
@media (max-width:520px){
.title{font-size:24px}
.card{ font-size:18px; border-width:6px }
.card::before,.card::after{ border-width:5px }
}
</style>
</head>
<body>
<div class="wrap">
<div class="app" id="app">
<h1 class="title">the daily bold: Journal Prompts & Mantras</h1>
<p class="subtitle">Pull a card for a journal prompt or a mantra. This is for reflection and creativity. It is not a mental health app or a substitute for professional care.</p>
<div class="seg" id="seg" data-mode="journal" role="tablist" aria-label="Card type">
<div class="knob" aria-hidden="true"></div>
<button class="btn-journal" id="btn-journal" role="tab" aria-selected="true">Journal</button>
<button class="btn-mantra" id="btn-mantra" role="tab" aria-selected="false">Mantra</button>
</div>
<div class="card-stage">
<div class="card" id="card" role="button" tabindex="0" aria-label="Pull a card">
<div class="text" id="cardText">Click the card or button to pull a card</div>
</div>
</div>
<div class="actions">
<button class="btn" id="pull">Pull a Card</button>
<button class="btn" id="docs">Open Journal Doc</button>
</div>
<p class="disclaimer">Friendly reminder: these cards are prompts for personal reflection. They do not provide medical advice.</p>
</div>
</div>
<script>
(function(){
const seg = document.getElementById('seg');
const btnJ = document.getElementById('btn-journal');
const btnM = document.getElementById('btn-mantra');
const card = document.getElementById('card');
const cardText = document.getElementById('cardText');
const pull = document.getElementById('pull');
const docs = document.getElementById('docs');
let mode = 'journal';
let animTick = 0;
// Build 250 journal prompts (clear 5th-grade reading, targeted for adults)
const J_verbs = ["Write about","Describe","List","Name","Outline","Reflect on","Finish the sentence"];
const J_topics = [
"a time you went after something you wanted",
"a small win that made you proud",
"a bold email you could send today",
"one choice you keep delaying",
"a moment you told the truth when it was hard",
"a boundary that would help your best work",
"a risk that felt scary but worth it",
"a time you asked for help and why it worked",
"three steps that would move a goal forward",
"one habit that gets in your way",
"one fear that is only noise",
"one thing you can do in fifteen minutes",
"a time you spoke up and what happened",
"what done looks like for a task you avoid",
"a person who can support you this week"
];
const J_endings = [
"Be specific and simple.",
"Pick one next step and schedule it.",
"Keep it short and clear.",
"Write three sentences.",
"Focus on what you can do today.",
"Write the action you will take next."
];
function buildJournal(n){
const out = new Set();
while(out.size < n){
const v = J_verbs[Math.floor(Math.random()*J_verbs.length)];
const t = J_topics[Math.floor(Math.random()*J_topics.length)];
let prompt = '';
if(v === 'Finish the sentence'){
const starters = [
"If I were braver, I would",
"I feel most bold when",
"One step I will take today is",
"I make progress when"
];
const s = starters[Math.floor(Math.random()*starters.length)];
prompt = `${v}: "${s}...". ${J_endings[Math.floor(Math.random()*J_endings.length)]}`;
} else if(v === 'List'){
const lists = [
"five people who can help you",
"five fears that slow you down",
"five wins from the last month",
"five tiny steps you can take",
"three skills you want to use more"
];
const l = lists[Math.floor(Math.random()*lists.length)];
prompt = `${v} ${l}. ${J_endings[Math.floor(Math.random()*J_endings.length)]}`;
} else if(v === 'Outline'){
const things = [
"a clear plan for the next week",
"how you will ask for what you need",
"how you will protect one deep work hour",
"how you will finish a task you avoid"
];
const l = things[Math.floor(Math.random()*things.length)];
prompt = `${v} ${l}. ${J_endings[Math.floor(Math.random()*J_endings.length)]}`;
} else {
prompt = `${v} ${t}. ${J_endings[Math.floor(Math.random()*J_endings.length)]}`;
}
// Clean capitalization and period
prompt = prompt.charAt(0).toUpperCase() + prompt.slice(1);
if(!/[.!?]$/.test(prompt)) prompt += '.';
out.add(prompt);
}
return Array.from(out);
}
// Build 250 mantras (2–3 short sentences)
const M_actions = [
"say the true thing",
"make a clear ask",
"ship a tiny version",
"protect one hour for deep work",
"replace worry with one action",
"set a boundary and hold it",
"choose one win and aim for it",
"start before I feel ready",
"write a simple first draft",
"share one real piece of work",
"move the hard task to the front",
"ask one person for help",
"state my rate with confidence",
"simplify the plan and begin",
"trade perfection for momentum",
"clarify the real goal"
];
const M_endings = [
"Small steps count.",
"I will celebrate the win.",
"Courage grows when I use it.",
"Progress today is enough.",
"I will keep it kind and clear."
];
function buildMantras(n){
const out = new Set();
while(out.size < n){
const a = M_actions[Math.floor(Math.random()*M_actions.length)];
const e = M_endings[Math.floor(Math.random()*M_endings.length)];
const s1 = `Today I will ${a}.`;
const s2 = Math.random()<.5 ? "I can begin with a tiny step." : "I will ask for the help I need.";
const mantra = `${s1} ${s2} ${e}`.replace(/\s+/g,' ').trim();
out.add(mantra);
}
return Array.from(out);
}
const JOURNAL = buildJournal(250);
const MANTRA = buildMantras(250);
function setMode(next){
mode = next;
seg.setAttribute('data-mode', next);
btnJ.setAttribute('aria-selected', String(next==='journal'));
btnM.setAttribute('aria-selected', String(next==='mantra'));
cardText.textContent = 'Click the card or button to pull a card';
}
function draw(){
const pool = mode==='journal' ? JOURNAL : MANTRA;
const text = pool[Math.floor(Math.random()*pool.length)] || 'Take one small step that moves you forward.';
// animate
animTick++; card.classList.remove('shuffle'); void card.offsetWidth; card.classList.add('shuffle');
cardText.classList.remove('fade-swap'); void cardText.offsetWidth; cardText.classList.add('fade-swap');
cardText.textContent = /[.!?]$/.test(text) ? text : text + '.';
}
// Events
btnJ.addEventListener('click', ()=>setMode('journal'));
btnM.addEventListener('click', ()=>setMode('mantra'));
pull.addEventListener('click', draw);
card.addEventListener('click', draw);
card.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' '){ e.preventDefault(); draw(); } });
docs.addEventListener('click', ()=>{ window.open('https://www.docs.new','_blank','noopener'); });
})();
</script>
</body>
</html>
