Build a Meditation Dashboard
Create a calming web page with breathing exercises, a to-do list, and a journal using code.
Prompt
Generate a complete, single-file HTML5/CSS3/JS application called 'meditation'. The app is a minimalist mindfulness dashboard with a 'Zen' aesthetic (use soft beige/earth tones and serif fonts).
The application should contain the following components:
Layout & Navigation:
A side menu (on the right) with text buttons for navigation. On mobile, this menu moves to the top.
A 'Dark Mode' toggle and a 'Fullscreen' button in the bottom left.
A smooth fade-in animation when switching between sections.
Sections & Functionality:
Quote: Show random mindfulness quotes (e.g., from Thich Nhat Hanh or Marcus Aurelius) upon loading.
Tasks: A minimalist to-do list (max 5 items) with the ability to prioritize, drag & drop, and delete tasks.
Breathe: An interactive breathing exercise (4-4-4-4 box breathing). Use a circle that visually expands and contracts with CSS transitions. Add an adjustable timer.
S.T.I.L.: An interactive guide based on the RAIN method (Signal, Allow, Inspect, Release) in an accordion-style layout.
Release: An input field where the user can type thoughts. Pressing "Enter" causes the text to float up and fade (animate), after which the field is emptied.
Notes: A Notion-style editor with editable content. Implement a slash menu (/) that appears when typing a slash to choose text formatting (bold, italic).
Design Details:
Light Color Palette: Background #f4f1ea, Text #3e3b39.
Dark Color Palette: Background #2c2a26, Text #dcd8cf.
Use a modern serif font (such as Georgia) for the text and sans-serif (Arial/Helvetica) for the interface elements.
No external libraries; write all logic in pure vanilla JavaScript and all styling in the <style> tag.