commit b8bc4af273bc69e2b66897bc8b1e9da704515b4e

Author: ffff:12.186.22.250 <ffff:12.186.22.250@hub.scroll.pub> Date: 2025-01-02 21:49:29 +0000 Subject: created untitled.scroll diff --git a/untitled.scroll b/untitled.scroll new file mode 100644 index 0000000..e69de29

commit 75d35fd9d8a1c252321e0c0334334da4b1ed4364

Author: root <root@hub.scroll.pub> Date: 2025-01-02 21:47:02 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..530a739 --- /dev/null +++ b/body.html @@ -0,0 +1,34 @@ +<header> + <nav> + <button id="theme-toggle" aria-label="Toggle theme"> + <svg viewBox="0 0 24 24" class="theme-icon"> + <path class="sun" d="M12 3v2m0 14v2M5.3 5.3l1.4 1.4m10.6 10.6l1.4 1.4M3 12h2m14 0h2M5.3 18.7l1.4-1.4m10.6-10.6l1.4-1.4"/> + </svg> + </button> + <div id="stats-toggle" aria-label="Toggle statistics"> + <svg viewBox="0 0 24 24"><path d="M3 3v18h18v-2H5V3z"/><path d="M7 10h2v8H7zm4-4h2v12h-2zm4 6h2v6h-2z"/></svg> + </div> + </nav> +</header> + +<main> + <div id="editor-container"> + <div id="editor" contenteditable="true" aria-label="Text editor" role="textbox"></div> + </div> + + <aside id="stats-panel" class="hidden"> + <h2>Statistics</h2> + <ul> + <li>Words: <span id="word-count">0</span></li> + <li>Characters: <span id="char-count">0</span></li> + <li>Sentences: <span id="sentence-count">0</span></li> + <li>Paragraphs: <span id="paragraph-count">0</span></li> + <li>Reading Time: <span id="reading-time">0 min</span></li> + <li>Speaking Time: <span id="speaking-time">0 min</span></li> + <li>Average Word Length: <span id="avg-word-length">0</span></li> + <li>Longest Word: <span id="longest-word">-</span></li> + <li>Most Used Word: <span id="most-used-word">-</span></li> + <li>Unique Words: <span id="unique-words">0</span></li> + </ul> + </aside> +</main> diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..a73bc79 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://write.scroll.pub +metaTags +editButton /edit.html +title Scribe - A Beautiful Writing Experience +style.css +body.html +script.js diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..58b8679 --- /dev/null +++ b/prompt.json @@ -0,0 +1,20 @@ +{ + "id": "msg_015txfJoPaXBzVqoX2P8euwb", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ + { + "type": "text", + "text": "I'll create a minimal yet powerful writing tool. For the domain, I suggest:\n\n---domain---\nwrite.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://write.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Scribe - A Beautiful Writing Experience\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <button id=\"theme-toggle\" aria-label=\"Toggle theme\">\n <svg viewBox=\"0 0 24 24\" class=\"theme-icon\">\n <path class=\"sun\" d=\"M12 3v2m0 14v2M5.3 5.3l1.4 1.4m10.6 10.6l1.4 1.4M3 12h2m14 0h2M5.3 18.7l1.4-1.4m10.6-10.6l1.4-1.4\"/>\n </svg>\n </button>\n <div id=\"stats-toggle\" aria-label=\"Toggle statistics\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 3v18h18v-2H5V3z\"/><path d=\"M7 10h2v8H7zm4-4h2v12h-2zm4 6h2v6h-2z\"/></svg>\n </div>\n </nav>\n</header>\n\n<main>\n <div id=\"editor-container\">\n <div id=\"editor\" contenteditable=\"true\" aria-label=\"Text editor\" role=\"textbox\"></div>\n </div>\n \n <aside id=\"stats-panel\" class=\"hidden\">\n <h2>Statistics</h2>\n <ul>\n <li>Words: <span id=\"word-count\">0</span></li>\n <li>Characters: <span id=\"char-count\">0</span></li>\n <li>Sentences: <span id=\"sentence-count\">0</span></li>\n <li>Paragraphs: <span id=\"paragraph-count\">0</span></li>\n <li>Reading Time: <span id=\"reading-time\">0 min</span></li>\n <li>Speaking Time: <span id=\"speaking-time\">0 min</span></li>\n <li>Average Word Length: <span id=\"avg-word-length\">0</span></li>\n <li>Longest Word: <span id=\"longest-word\">-</span></li>\n <li>Most Used Word: <span id=\"most-used-word\">-</span></li>\n <li>Unique Words: <span id=\"unique-words\">0</span></li>\n </ul>\n </aside>\n</main>\n\n---style.css---\n:root {\n --bg-light: #ffffff;\n --text-light: #1a1a1a;\n --accent-light: #3b82f6;\n --surface-light: #f3f4f6;\n \n --bg-dark: #1a1a1a;\n --text-dark: #ffffff;\n --accent-dark: #60a5fa;\n --surface-dark: #2d2d2d;\n \n --transition: 0.3s ease;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--bg-light);\n color: var(--text-light);\n transition: background var(--transition), color var(--transition);\n}\n\nbody.dark-theme {\n background: var(--bg-dark);\n color: var(--text-dark);\n}\n\nheader {\n position: fixed;\n top: 0;\n width: 100%;\n padding: 1rem;\n background: inherit;\n backdrop-filter: blur(10px);\n z-index: 100;\n}\n\nnav {\n display: flex;\n justify-content: flex-end;\n gap: 1rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nbutton, #stats-toggle {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 50%;\n transition: background var(--transition);\n}\n\nbutton:hover, #stats-toggle:hover {\n background: var(--surface-light);\n}\n\n.dark-theme button:hover, .dark-theme #stats-toggle:hover {\n background: var(--surface-dark);\n}\n\nsvg {\n width: 24px;\n height: 24px;\n fill: currentColor;\n}\n\nmain {\n display: flex;\n min-height: 100vh;\n padding-top: 4rem;\n}\n\n#editor-container {\n flex: 1;\n max-width: 800px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n#editor {\n min-height: 70vh;\n outline: none;\n font-size: 1.2rem;\n line-height: 1.6;\n}\n\n#editor:empty::before {\n content: 'Start writing...';\n color: #666;\n}\n\n#stats-panel {\n width: 300px;\n padding: 2rem;\n background: var(--surface-light);\n transition: transform var(--transition), background var(--transition);\n}\n\n.dark-theme #stats-panel {\n background: var(--surface-dark);\n}\n\n#stats-panel.hidden {\n transform: translateX(100%);\n}\n\n#stats-panel h2 {\n margin-top: 0;\n font-size: 1.5rem;\n}\n\n#stats-panel ul {\n list-style: none;\n padding: 0;\n}\n\n#stats-panel li {\n margin: 1rem 0;\n display: flex;\n justify-content: space-between;\n}\n\n@media (max-width: 768px) {\n #stats-panel {\n position: fixed;\n right: 0;\n top: 0;\n height: 100vh;\n z-index: 99;\n }\n \n #editor-container {\n padding: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const editor = document.getElementById('editor');\n const themeToggle = document.getElementById('theme-toggle');\n const statsToggle = document.getElementById('stats-toggle');\n const statsPanel = document.getElementById('stats-panel');\n \n // Load saved content\n editor.innerHTML = localStorage.getItem('content') || '';\n \n // Load saved theme\n if (localStorage.getItem('theme') === 'dark') {\n document.body.classList.add('dark-theme');\n }\n \n // Theme toggle\n themeToggle.addEventListener('click', () => {\n document.body.classList.toggle('dark-theme');\n localStorage.setItem('theme', \n document.body.classList.contains('dark-theme') ? 'dark' : 'light'\n );\n });\n \n // Stats toggle\n statsToggle.addEventListener('click', () => {\n statsPanel.classList.toggle('hidden');\n });\n \n // Save content\n let saveTimeout;\n editor.addEventListener('input', () => {\n clearTimeout(saveTimeout);\n saveTimeout = setTimeout(() => {\n localStorage.setItem('content', editor.innerHTML);\n updateStats();\n }, 500);\n });\n \n function updateStats() {\n const text = editor.innerText;\n const words = text.trim().split(/\\s+/).filter(word => word.length > 0);\n const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0);\n const paragraphs = text.split('\\n').filter(para => para.trim().length > 0);\n \n // Word frequency\n const wordFreq = {};\n words.forEach(word => {\n wordFreq[word.toLowerCase()] = (wordFreq[word.toLowerCase()] || 0) + 1;\n });\n \n const mostUsed = Object.entries(wordFreq)\n .sort((a, b) => b[1] - a[1])[0];\n \n // Update stats\n document.getElementById('word-count').textContent = words.length;\n document.getElementById('char-count').textContent = text.length;\n document.getElementById('sentence-count').textContent = sentences.length;\n document.getElementById('paragraph-count').textContent = paragraphs.length;\n document.getElementById('reading-time').textContent = \n `${Math.ceil(words.length / 200)} min`;\n document.getElementById('speaking-time').textContent = \n `${Math.ceil(words.length / 130)} min`;\n document.getElementById('avg-word-length').textContent = \n (words.join('').length / words.length || 0).toFixed(1);\n document.getElementById('longest-word').textContent = \n words.reduce((a, b) => a.length > b.length ? a : b, '');\n document.getElementById('most-used-word').textContent = \n mostUsed ? `${mostUsed[0]} (${mostUsed[1]}x)` : '-';\n document.getElementById('unique-words').textContent = \n Object.keys(wordFreq).length;\n }\n \n // Initial stats update\n updateStats();\n});\n\n---end---\n\nThis creates a beautiful, distraction-free writing environment with:\n- Dark/light theme toggle with smooth transitions\n- Local storage saving\n- Collapsible stats panel with 10 different metrics\n- Responsive design\n- Clean, minimal interface\n- Gorgeous typography and spacing\n- Smooth animations and transitions\n- Accessibility features\n- Blur effects and modern styling\n\nThe stats include word count, character count, sentences, paragraphs, reading time, speaking time, average word length, longest word, most used word, and unique word count." + } + ], + "stop_reason": "end_turn", + "stop_sequence": null, + "usage": { + "input_tokens": 323, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2522 + } +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..b75e593 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# write.scroll.pub +Website generated by Claude from prompt: an amazing and beautiful tool for writers. dark mode and light mode. saves stuff to local storage. shows you cool stats as you writer, like number of words, and 10 other interesting stats. distraction free. minimal. goergoues though. \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2bb9c83 --- /dev/null +++ b/script.js @@ -0,0 +1,74 @@ +document.addEventListener('DOMContentLoaded', () => { + const editor = document.getElementById('editor'); + const themeToggle = document.getElementById('theme-toggle'); + const statsToggle = document.getElementById('stats-toggle'); + const statsPanel = document.getElementById('stats-panel'); + + // Load saved content + editor.innerHTML = localStorage.getItem('content') || ''; + + // Load saved theme + if (localStorage.getItem('theme') === 'dark') { + document.body.classList.add('dark-theme'); + } + + // Theme toggle + themeToggle.addEventListener('click', () => { + document.body.classList.toggle('dark-theme'); + localStorage.setItem('theme', + document.body.classList.contains('dark-theme') ? 'dark' : 'light' + ); + }); + + // Stats toggle + statsToggle.addEventListener('click', () => { + statsPanel.classList.toggle('hidden'); + }); + + // Save content + let saveTimeout; + editor.addEventListener('input', () => { + clearTimeout(saveTimeout); + saveTimeout = setTimeout(() => { + localStorage.setItem('content', editor.innerHTML); + updateStats(); + }, 500); + }); + + function updateStats() { + const text = editor.innerText; + const words = text.trim().split(/\s+/).filter(word => word.length > 0); + const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0); + const paragraphs = text.split('\n').filter(para => para.trim().length > 0); + + // Word frequency + const wordFreq = {}; + words.forEach(word => { + wordFreq[word.toLowerCase()] = (wordFreq[word.toLowerCase()] || 0) + 1; + }); + + const mostUsed = Object.entries(wordFreq) + .sort((a, b) => b[1] - a[1])[0]; + + // Update stats + document.getElementById('word-count').textContent = words.length; + document.getElementById('char-count').textContent = text.length; + document.getElementById('sentence-count').textContent = sentences.length; + document.getElementById('paragraph-count').textContent = paragraphs.length; + document.getElementById('reading-time').textContent = + `${Math.ceil(words.length / 200)} min`; + document.getElementById('speaking-time').textContent = + `${Math.ceil(words.length / 130)} min`; + document.getElementById('avg-word-length').textContent = + (words.join('').length / words.length || 0).toFixed(1); + document.getElementById('longest-word').textContent = + words.reduce((a, b) => a.length > b.length ? a : b, ''); + document.getElementById('most-used-word').textContent = + mostUsed ? `${mostUsed[0]} (${mostUsed[1]}x)` : '-'; + document.getElementById('unique-words').textContent = + Object.keys(wordFreq).length; + } + + // Initial stats update + updateStats(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..267731b --- /dev/null +++ b/style.css @@ -0,0 +1,138 @@ +:root { + --bg-light: #ffffff; + --text-light: #1a1a1a; + --accent-light: #3b82f6; + --surface-light: #f3f4f6; + + --bg-dark: #1a1a1a; + --text-dark: #ffffff; + --accent-dark: #60a5fa; + --surface-dark: #2d2d2d; + + --transition: 0.3s ease; +} + +body { + margin: 0; + padding: 0; + font-family: system-ui, -apple-system, sans-serif; + background: var(--bg-light); + color: var(--text-light); + transition: background var(--transition), color var(--transition); +} + +body.dark-theme { + background: var(--bg-dark); + color: var(--text-dark); +} + +header { + position: fixed; + top: 0; + width: 100%; + padding: 1rem; + background: inherit; + backdrop-filter: blur(10px); + z-index: 100; +} + +nav { + display: flex; + justify-content: flex-end; + gap: 1rem; + max-width: 1200px; + margin: 0 auto; +} + +button, #stats-toggle { + background: none; + border: none; + cursor: pointer; + padding: 0.5rem; + border-radius: 50%; + transition: background var(--transition); +} + +button:hover, #stats-toggle:hover { + background: var(--surface-light); +} + +.dark-theme button:hover, .dark-theme #stats-toggle:hover { + background: var(--surface-dark); +} + +svg { + width: 24px; + height: 24px; + fill: currentColor; +} + +main { + display: flex; + min-height: 100vh; + padding-top: 4rem; +} + +#editor-container { + flex: 1; + max-width: 800px; + margin: 0 auto; + padding: 2rem; +} + +#editor { + min-height: 70vh; + outline: none; + font-size: 1.2rem; + line-height: 1.6; +} + +#editor:empty::before { + content: 'Start writing...'; + color: #666; +} + +#stats-panel { + width: 300px; + padding: 2rem; + background: var(--surface-light); + transition: transform var(--transition), background var(--transition); +} + +.dark-theme #stats-panel { + background: var(--surface-dark); +} + +#stats-panel.hidden { + transform: translateX(100%); +} + +#stats-panel h2 { + margin-top: 0; + font-size: 1.5rem; +} + +#stats-panel ul { + list-style: none; + padding: 0; +} + +#stats-panel li { + margin: 1rem 0; + display: flex; + justify-content: space-between; +} + +@media (max-width: 768px) { + #stats-panel { + position: fixed; + right: 0; + top: 0; + height: 100vh; + z-index: 99; + } + + #editor-container { + padding: 1rem; + } +}