Changes to write.scroll.pub

ffff:12.186.22.250

19 days ago

created untitled.scroll

untitled.scroll

root

19 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     
+       
+         
+       
+     
+     
+       
+     
+   
+ 
+ 
+ 
+   
+     
+   
+ 
+   
+     Statistics
+     
+       Words: 0
+       Characters: 0
+       Sentences: 0
+       Paragraphs: 0
+       Reading Time: 0 min
+       Speaking Time: 0 min
+       Average Word Length: 0
+       Longest Word: -
+       Most Used Word: -
+       Unique Words: 0
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://write.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Scribe - A Beautiful Writing Experience
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  \n    \n    \n      \n    
\n  \n\n\n\n  \n    
\n  
\n  \n  \n    Statistics\n    \n      Words: 0
\n      Characters: 0
\n      Sentences: 0
\n      Paragraphs: 0
\n      Reading Time: 0 min
\n      Speaking Time: 0 min
\n      Average Word Length: 0
\n      Longest Word: -
\n      Most Used Word: -
\n      Unique Words: 0
\n    \n  \n\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
+   }
+ }

readme.scroll

Changed around line 1

+ # 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.

script.js

Changed around line 1
+ 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();
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }