snippets.scroll.pub

Prompt: website

Agent: claude

Model: claude-3-5-sonnet-20241022

User prompt

Crée une application web inspiré de macOS Notes, avec : Volet gauche (Sidebar) : Style minimaliste Apple (bordures légères, coins arrondis, padding généreux). Liste verticale des snippets (nom + aperçu sur 2 lignes). Bouton + Nouveau snippet en haut (icône "+" avec libellé). États visuels : Hover, Selected (couleur d’accent type bleu macOS). Volet droit principal : Barre d'outils supérieure : Titre du snippet (éditable). Bouton Play (icône ▶️ style macOS, couleur verte au hover). Sélecteur de langage (JS/TS/Markdown). Éditeur de code : Style VS Code (thème sombre par défaut, numéros de ligne, highlight de syntaxe). Tabulation : 2 espaces, police MonoLisa ou Fira Code. Console de sortie : Section en bas avec onglets "Console" / "Résultat". Style terminal (fond noir, texte vert/rouge pour erreurs). Détails visuels : Palette de couleurs : Gris clair (#F5F5F7) / Noir (#1E1E1E), accent bleu (#007AFF). Espacements : 16px entre les volets, 8px entre les éléments. Typographie : SF Pro Display pour l'UI, monospace pour le code. Icônes : Style Apple (lignes fines, remplissage au hover).

System prompt

You are an expert web developer. Create a website based on this request: "Crée une application web inspiré de macOS Notes, avec : Volet gauche (Sidebar) : Style minimaliste Apple (bordures légères, coins arrondis, padding généreux). Liste verticale des snippets (nom + aperçu sur 2 lignes). Bouton + Nouveau snippet en haut (icône "+" avec libellé). États visuels : Hover, Selected (couleur d’accent type bleu macOS). Volet droit principal : Barre d'outils supérieure : Titre du snippet (éditable). Bouton Play (icône ▶️ style macOS, couleur verte au hover). Sélecteur de langage (JS/TS/Markdown). Éditeur de code : Style VS Code (thème sombre par défaut, numéros de ligne, highlight de syntaxe). Tabulation : 2 espaces, police MonoLisa ou Fira Code. Console de sortie : Section en bas avec onglets "Console" / "Résultat". Style terminal (fond noir, texte vert/rouge pour erreurs). Détails visuels : Palette de couleurs : Gris clair (#F5F5F7) / Noir (#1E1E1E), accent bleu (#007AFF). Espacements : 16px entre les volets, 8px entre les éléments. Typographie : SF Pro Display pour l'UI, monospace pour le code. Icônes : Style Apple (lignes fines, remplissage au hover)."

Requirements:

As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.

For example:

Write Better with Scroll

The extendible markup language that makes source beautiful and compiles to anything

Get Started

Why Scroll?

Simple Syntax

Like Markdown, but more powerful. No parentheses needed.

🧩

Extendible

Build your own custom parsers.

🎨

Beautiful Output

Create stunning documents with minimal effort.

🚀

Fast & Light

Built on the efficient PPS Stack.

See It In Action


First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:

---domain---

(domainscroll.pub here)

---index.scroll---

(Title here)

(body content here. no blank lines please.)

---style.css---

(CSS content here)

---script.js---

(JavaScript content here)

---end---