Changes to quicknote.scroll.pub

root

22 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     QuickNote
+     
+   
+ 
+ 
+ 
+   
+     
+       
+     
+   
+ 
+   
+     
+       
+       
+     
+ 
+     
+       
+     
+   
+ 
+ 
+ 
+   Built with passion by QuickNote Team
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://quicknote.scroll.pub
+ metaTags
+ editButton /edit.html
+ title QuickNote - Smart Local Note Taking
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "msg_01Q6Vn6Vj6vHifz7ysUiP1uf",
+   "type": "message",
+   "role": "assistant",
+   "model": "claude-3-5-sonnet-20241022",
+   "content": [
+     {
+       "type": "text",
+       "text": "Here's a clean note-taking website implementation:\n\n---domain---\nquicknote.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://quicknote.scroll.pub\nmetaTags\neditButton /edit.html\ntitle QuickNote - Smart Local Note Taking\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n  \n    QuickNote
\n    \n  \n\n\n\n  \n    \n      \n    
\n  \n  \n  \n    \n      \n      \n    
\n    \n    \n      \n    
\n  \n\n\n\n  Built with passion by QuickNote Team
\n\n\n---style.css---\n:root {\n  --primary-color: #2d3436;\n  --secondary-color: #0984e3;\n  --bg-color: #f5f6fa;\n  --text-color: #2d3436;\n  --sidebar-width: 250px;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: system-ui, -apple-system, sans-serif;\n  background: var(--bg-color);\n  color: var(--text-color);\n  line-height: 1.6;\n}\n\nheader {\n  background: white;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  position: fixed;\n  width: 100%;\n  z-index: 100;\n}\n\nnav {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem 2rem;\n  max-width: 1400px;\n  margin: 0 auto;\n}\n\n.logo {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: var(--secondary-color);\n}\n\nmain {\n  display: flex;\n  padding-top: 4rem;\n  min-height: calc(100vh - 8rem);\n}\n\n.sidebar {\n  width: var(--sidebar-width);\n  background: white;\n  padding: 1rem;\n  border-right: 1px solid #ddd;\n  position: fixed;\n  height: calc(100vh - 4rem);\n  overflow-y: auto;\n}\n\n.content {\n  flex: 1;\n  margin-left: var(--sidebar-width);\n  padding: 2rem;\n}\n\n.toolbar {\n  margin-bottom: 2rem;\n  display: flex;\n  gap: 1rem;\n}\n\nbutton {\n  background: var(--secondary-color);\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\nbutton:hover {\n  opacity: 0.9;\n}\n\nselect {\n  padding: 0.5rem;\n  border-radius: 4px;\n  border: 1px solid #ddd;\n}\n\n.editor {\n  background: white;\n  padding: 2rem;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  min-height: 500px;\n}\n\n.block {\n  margin-bottom: 1rem;\n  padding: 1rem;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\nfooter {\n  text-align: center;\n  padding: 2rem;\n  background: white;\n  border-top: 1px solid #ddd;\n}\n\n@media (max-width: 768px) {\n  .sidebar {\n    transform: translateX(-100%);\n    transition: transform 0.3s;\n  }\n  \n  .content {\n    margin-left: 0;\n  }\n  \n  .sidebar.active {\n    transform: translateX(0);\n  }\n}\n\n---script.js---\nclass NotesApp {\n  constructor() {\n    this.pages = JSON.parse(localStorage.getItem('pages')) || [];\n    this.currentPage = null;\n    this.init();\n  }\n\n  init() {\n    this.bindElements();\n    this.bindEvents();\n    this.renderPagesList();\n  }\n\n  bindElements() {\n    this.newPageBtn = document.getElementById('newPageBtn');\n    this.pagesList = document.getElementById('pagesList');\n    this.editor = document.getElementById('editor');\n    this.blockType = document.getElementById('blockType');\n    this.addBlockBtn = document.getElementById('addBlockBtn');\n  }\n\n  bindEvents() {\n    this.newPageBtn.addEventListener('click', () => this.createNewPage());\n    this.addBlockBtn.addEventListener('click', () => this.addBlock());\n  }\n\n  createNewPage() {\n    const page = {\n      id: Date.now(),\n      title: 'Untitled Page',\n      blocks: []\n    };\n    this.pages.push(page);\n    this.savePagesToStorage();\n    this.renderPagesList();\n    this.setCurrentPage(page);\n  }\n\n  setCurrentPage(page) {\n    this.currentPage = page;\n    this.renderEditor();\n  }\n\n  addBlock() {\n    if (!this.currentPage) return;\n    \n    const block = {\n      id: Date.now(),\n      type: this.blockType.value,\n      content: ''\n    };\n    \n    this.currentPage.blocks.push(block);\n    this.savePagesToStorage();\n    this.renderEditor();\n  }\n\n  renderPagesList() {\n    this.pagesList.innerHTML = this.pages.map(page => `\n      \n        ${page.title}\n      
\n    `).join('');\n  }\n\n  renderEditor() {\n    if (!this.currentPage) {\n      this.editor.innerHTML = 'Select or create a page
';\n      return;\n    }\n\n    this.editor.innerHTML = this.currentPage.blocks.map(block => `\n      \n        ${this.renderBlock(block)}\n      
\n    `).join('');\n  }\n\n  renderBlock(block) {\n    switch(block.type) {\n      case 'text':\n        return `${block.content}
`;\n      case 'heading':\n        return `${block.content}`;\n      case 'list':\n        return `${block.content}`;\n      case 'table':\n        return `${block.content}
`;\n      case 'code':\n        return `${block.content}`;\n      default:\n        return '';\n    }\n  }\n\n  savePagesToStorage() {\n    localStorage.setItem('pages', JSON.stringify(this.pages));\n  }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  window.notesApp = new NotesApp();\n});\n\n---end---\n\nThis implementation creates a clean, modern note-taking app with the following features:\n\n1. Local storage for saving notes\n2. Multiple page support\n3. Different block types (text, headings, lists, tables, code)\n4. Clean and responsive design\n5. Sidebar navigation\n6. Modern UI with smooth animations\n7. Accessibility-friendly markup\n8. Mobile-responsive layout\n\nThe design is minimal yet professional, with a focus on usability and performance. The color scheme is modern and easy on the eyes, with careful attention to spacing and typography.\n\nThe JavaScript implementation uses a class-based approach for better organization and maintainability. All data is stored in the browser's localStorage, making it completely client-side with no server requirements.\n\nThe CSS includes modern features like CSS variables, flexbox layouts, and smooth transitions. The responsive design ensures the app works well on both desktop and mobile devices."
+     }
+   ],
+   "stop_reason": "end_turn",
+   "stop_sequence": null,
+   "usage": {
+     "input_tokens": 314,
+     "cache_creation_input_tokens": 0,
+     "cache_read_input_tokens": 0,
+     "output_tokens": 2220
+   }
+ }

readme.scroll

Changed around line 1

+ # quicknote.scroll.pub

+ Website generated by Claude from prompt: I want a website that can take notes, it performs like notion, can create a page which contains different kinds of data, especially data stored in db and be shown in different format. The note data should be saved locally

script.js

Changed around line 1
+ class NotesApp {
+   constructor() {
+     this.pages = JSON.parse(localStorage.getItem('pages')) || [];
+     this.currentPage = null;
+     this.init();
+   }
+ 
+   init() {
+     this.bindElements();
+     this.bindEvents();
+     this.renderPagesList();
+   }
+ 
+   bindElements() {
+     this.newPageBtn = document.getElementById('newPageBtn');
+     this.pagesList = document.getElementById('pagesList');
+     this.editor = document.getElementById('editor');
+     this.blockType = document.getElementById('blockType');
+     this.addBlockBtn = document.getElementById('addBlockBtn');
+   }
+ 
+   bindEvents() {
+     this.newPageBtn.addEventListener('click', () => this.createNewPage());
+     this.addBlockBtn.addEventListener('click', () => this.addBlock());
+   }
+ 
+   createNewPage() {
+     const page = {
+       id: Date.now(),
+       title: 'Untitled Page',
+       blocks: []
+     };
+     this.pages.push(page);
+     this.savePagesToStorage();
+     this.renderPagesList();
+     this.setCurrentPage(page);
+   }
+ 
+   setCurrentPage(page) {
+     this.currentPage = page;
+     this.renderEditor();
+   }
+ 
+   addBlock() {
+     if (!this.currentPage) return;
+ 
+     const block = {
+       id: Date.now(),
+       type: this.blockType.value,
+       content: ''
+     };
+ 
+     this.currentPage.blocks.push(block);
+     this.savePagesToStorage();
+     this.renderEditor();
+   }
+ 
+   renderPagesList() {
+     this.pagesList.innerHTML = this.pages.map(page => `
+       
+         ${page.title}
+       
+     `).join('');
+   }
+ 
+   renderEditor() {
+     if (!this.currentPage) {
+       this.editor.innerHTML = 'Select or create a page
';
+       return;
+     }
+ 
+     this.editor.innerHTML = this.currentPage.blocks.map(block => `
+       
+         ${this.renderBlock(block)}
+       
+     `).join('');
+   }
+ 
+   renderBlock(block) {
+     switch(block.type) {
+       case 'text':
+         return `${block.content}
`;
+       case 'heading':
+         return `${block.content}`;
+       case 'list':
+         return `${block.content}`;
+       case 'table':
+         return `${block.content}
`;
+       case 'code':
+         return `${block.content}`;
+       default:
+         return '';
+     }
+   }
+ 
+   savePagesToStorage() {
+     localStorage.setItem('pages', JSON.stringify(this.pages));
+   }
+ }
+ 
+ document.addEventListener('DOMContentLoaded', () => {
+   window.notesApp = new NotesApp();
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #2d3436;
+   --secondary-color: #0984e3;
+   --bg-color: #f5f6fa;
+   --text-color: #2d3436;
+   --sidebar-width: 250px;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: system-ui, -apple-system, sans-serif;
+   background: var(--bg-color);
+   color: var(--text-color);
+   line-height: 1.6;
+ }
+ 
+ header {
+   background: white;
+   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+   position: fixed;
+   width: 100%;
+   z-index: 100;
+ }
+ 
+ nav {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 1rem 2rem;
+   max-width: 1400px;
+   margin: 0 auto;
+ }
+ 
+ .logo {
+   font-size: 1.5rem;
+   font-weight: bold;
+   color: var(--secondary-color);
+ }
+ 
+ main {
+   display: flex;
+   padding-top: 4rem;
+   min-height: calc(100vh - 8rem);
+ }
+ 
+ .sidebar {
+   width: var(--sidebar-width);
+   background: white;
+   padding: 1rem;
+   border-right: 1px solid #ddd;
+   position: fixed;
+   height: calc(100vh - 4rem);
+   overflow-y: auto;
+ }
+ 
+ .content {
+   flex: 1;
+   margin-left: var(--sidebar-width);
+   padding: 2rem;
+ }
+ 
+ .toolbar {
+   margin-bottom: 2rem;
+   display: flex;
+   gap: 1rem;
+ }
+ 
+ button {
+   background: var(--secondary-color);
+   color: white;
+   border: none;
+   padding: 0.5rem 1rem;
+   border-radius: 4px;
+   cursor: pointer;
+   transition: opacity 0.2s;
+ }
+ 
+ button:hover {
+   opacity: 0.9;
+ }
+ 
+ select {
+   padding: 0.5rem;
+   border-radius: 4px;
+   border: 1px solid #ddd;
+ }
+ 
+ .editor {
+   background: white;
+   padding: 2rem;
+   border-radius: 8px;
+   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+   min-height: 500px;
+ }
+ 
+ .block {
+   margin-bottom: 1rem;
+   padding: 1rem;
+   border: 1px solid #ddd;
+   border-radius: 4px;
+ }
+ 
+ footer {
+   text-align: center;
+   padding: 2rem;
+   background: white;
+   border-top: 1px solid #ddd;
+ }
+ 
+ @media (max-width: 768px) {
+   .sidebar {
+     transform: translateX(-100%);
+     transition: transform 0.3s;
+   }
+ 
+   .content {
+     margin-left: 0;
+   }
+ 
+   .sidebar.active {
+     transform: translateX(0);
+   }
+ }