Changes to bookvault.scroll.pub

root

18 days ago

Initial commit

body.html

Changed around line 1
+ 
+   BookVault
+   
+     Add Book
+     Collection
+   
+ 
+ 
+ 
+   
+     
+     
+   
+ 
+   
+     Add a New Book
+     
+       ISBN:
+       
+ 
+       Title:
+       
+ 
+       Author:
+       
+ 
+       Publisher:
+       
+ 
+       Publication Date:
+       
+ 
+       Cover Image URL:
+       
+ 
+       Tags (comma separated):
+       
+ 
+       
+     
+   
+ 
+   
+     Your Collection
+     
+   
+ 
+ 
+ 
+   Organize your literary world with BookVault
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://bookvault.scroll.pub
+ metaTags
+ editButton /edit.html
+ title BookVault - Your Personal Book Collection
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "df29dced-4475-422a-a8a8-798a2f7febf4",
+   "object": "chat.completion",
+   "created": 1735967209,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nbookvault.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://bookvault.scroll.pub\nmetaTags\neditButton /edit.html\ntitle BookVault - Your Personal Book Collection\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  BookVault\n  \n    Add Book\n    Collection\n  \n\n\n\n  \n    \n    \n  \n\n  \n    Add a New Book\n    \n      ISBN:\n      \n      \n      Title:\n      \n      \n      Author:\n      \n      \n      Publisher:\n      \n      \n      Publication Date:\n      \n      \n      Cover Image URL:\n      \n      \n      Tags (comma separated):\n      \n      \n      \n    \n  \n\n  \n    Your Collection\n    
\n  \n\n\n\n  Organize your literary world with BookVault
\n\n---style.css---\n:root {\n  --primary-color: #2c3e50;\n  --secondary-color: #34495e;\n  --accent-color: #3498db;\n  --text-color: #ecf0f1;\n  --background-color: #f5f6fa;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Segoe UI', sans-serif;\n  line-height: 1.6;\n  color: var(--primary-color);\n  background-color: var(--background-color);\n  padding: 20px;\n}\n\nheader {\n  background: var(--primary-color);\n  color: var(--text-color);\n  padding: 20px 0;\n  text-align: center;\n  margin-bottom: 30px;\n}\n\nheader h1 {\n  font-size: 2.5rem;\n  margin-bottom: 10px;\n}\n\nnav {\n  display: flex;\n  justify-content: center;\n  gap: 20px;\n}\n\nnav a {\n  color: var(--text-color);\n  text-decoration: none;\n  font-weight: bold;\n  transition: color 0.3s;\n}\n\nnav a:hover {\n  color: var(--accent-color);\n}\n\n#search {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 30px;\n}\n\n#search-input {\n  flex: 1;\n  padding: 10px;\n  border: 2px solid var(--secondary-color);\n  border-radius: 5px;\n}\n\n#search-btn {\n  background: var(--accent-color);\n  color: var(--text-color);\n  border: none;\n  padding: 10px 20px;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background 0.3s;\n}\n\n#search-btn:hover {\n  background: #2980b9;\n}\n\n#add-book {\n  background: white;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n  margin-bottom: 30px;\n}\n\n#book-form {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 15px;\n}\n\n#book-form label {\n  font-weight: bold;\n}\n\n#book-form input {\n  padding: 8px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n#book-form button {\n  grid-column: span 2;\n  background: var(--accent-color);\n  color: var(--text-color);\n  border: none;\n  padding: 10px;\n  border-radius: 5px;\n  cursor: pointer;\n  transition: background 0.3s;\n}\n\n#book-form button:hover {\n  background: #2980b9;\n}\n\n#collection {\n  background: white;\n  padding: 20px;\n  border-radius: 10px;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n#books-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 20px;\n}\n\n.book-card {\n  background: var(--background-color);\n  padding: 15px;\n  border-radius: 8px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n  transition: transform 0.3s;\n}\n\n.book-card:hover {\n  transform: translateY(-5px);\n}\n\n.book-cover {\n  width: 100%;\n  height: auto;\n  border-radius: 5px;\n  margin-bottom: 10px;\n}\n\n.book-info {\n  font-size: 0.9rem;\n}\n\n.book-tags {\n  margin-top: 10px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px;\n}\n\n.tag {\n  background: var(--accent-color);\n  color: var(--text-color);\n  padding: 3px 8px;\n  border-radius: 12px;\n  font-size: 0.8rem;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 30px;\n  padding: 20px;\n  background: var(--primary-color);\n  color: var(--text-color);\n  border-radius: 10px;\n}\n\n@media (max-width: 768px) {\n  #book-form {\n    grid-template-columns: 1fr;\n  }\n  \n  #books-grid {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  }\n}\n---script.js---\nlet books = [];\n\n// Load books from localStorage\nif (localStorage.getItem('books')) {\n  books = JSON.parse(localStorage.getItem('books'));\n  displayBooks();\n}\n\n// Form submission\ndocument.getElementById('book-form').addEventListener('submit', function(e) {\n  e.preventDefault();\n  \n  const newBook = {\n    isbn: document.getElementById('isbn').value,\n    title: document.getElementById('title').value,\n    author: document.getElementById('author').value,\n    publisher: document.getElementById('publisher').value,\n    pubDate: document.getElementById('pub-date').value,\n    cover: document.getElementById('cover').value || 'https://via.placeholder.com/150x200',\n    tags: document.getElementById('tags').value.split(',').map(tag => tag.trim())\n  };\n  \n  books.push(newBook);\n  saveBooks();\n  displayBooks();\n  this.reset();\n});\n\n// Search functionality\ndocument.getElementById('search-btn').addEventListener('click', function() {\n  const query = document.getElementById('search-input').value.toLowerCase();\n  const filteredBooks = books.filter(book => \n    book.title.toLowerCase().includes(query) ||\n    book.isbn.includes(query) ||\n    book.author.toLowerCase().includes(query)\n  );\n  displayBooks(filteredBooks);\n});\n\nfunction displayBooks(booksToDisplay = books) {\n  const booksGrid = document.getElementById('books-grid');\n  booksGrid.innerHTML = '';\n  \n  booksToDisplay.forEach(book => {\n    const bookCard = document.createElement('div');\n    bookCard.className = 'book-card';\n    \n    bookCard.innerHTML = `\n      \n      \n        ${book.title}\n        Author: ${book.author}
\n        Publisher: ${book.publisher}
\n        Published: ${new Date(book.pubDate).toLocaleDateString()}
\n        \n          ${book.tags.map(tag => `${tag}`).join('')}\n        
\n      
\n    `;\n    \n    booksGrid.appendChild(bookCard);\n  });\n}\n\nfunction saveBooks() {\n  localStorage.setItem('books', JSON.stringify(books));\n}\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 293,
+     "completion_tokens": 1961,
+     "total_tokens": 2254,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 293
+   },
+   "system_fingerprint": "fp_3a5770e1b4"
+ }

readme.scroll

Changed around line 1

+ # bookvault.scroll.pub

+ Website generated by DeepSeek from prompt: I need a simple book information collection website for my personal book list collection. It can save the book's ISBN, author, publisher, publication time, and book cover image, and support book type tags. It has a simple search function and supports searching by book title, ISBN, author as keywords.

script.js

Changed around line 1
+ let books = [];
+ 
+ // Load books from localStorage
+ if (localStorage.getItem('books')) {
+   books = JSON.parse(localStorage.getItem('books'));
+   displayBooks();
+ }
+ 
+ // Form submission
+ document.getElementById('book-form').addEventListener('submit', function(e) {
+   e.preventDefault();
+ 
+   const newBook = {
+     isbn: document.getElementById('isbn').value,
+     title: document.getElementById('title').value,
+     author: document.getElementById('author').value,
+     publisher: document.getElementById('publisher').value,
+     pubDate: document.getElementById('pub-date').value,
+     cover: document.getElementById('cover').value || 'https://via.placeholder.com/150x200',
+     tags: document.getElementById('tags').value.split(',').map(tag => tag.trim())
+   };
+ 
+   books.push(newBook);
+   saveBooks();
+   displayBooks();
+   this.reset();
+ });
+ 
+ // Search functionality
+ document.getElementById('search-btn').addEventListener('click', function() {
+   const query = document.getElementById('search-input').value.toLowerCase();
+   const filteredBooks = books.filter(book =>
+     book.title.toLowerCase().includes(query) ||
+     book.isbn.includes(query) ||
+     book.author.toLowerCase().includes(query)
+   );
+   displayBooks(filteredBooks);
+ });
+ 
+ function displayBooks(booksToDisplay = books) {
+   const booksGrid = document.getElementById('books-grid');
+   booksGrid.innerHTML = '';
+ 
+   booksToDisplay.forEach(book => {
+     const bookCard = document.createElement('div');
+     bookCard.className = 'book-card';
+ 
+     bookCard.innerHTML = `
+       
+       
+         ${book.title}
+         Author: ${book.author}
+         Publisher: ${book.publisher}
+         Published: ${new Date(book.pubDate).toLocaleDateString()}
+         
+           ${book.tags.map(tag => `${tag}`).join('')}
+         
+       
+     `;
+ 
+     booksGrid.appendChild(bookCard);
+   });
+ }
+ 
+ function saveBooks() {
+   localStorage.setItem('books', JSON.stringify(books));
+ }

style.css

Changed around line 1
+ :root {
+   --primary-color: #2c3e50;
+   --secondary-color: #34495e;
+   --accent-color: #3498db;
+   --text-color: #ecf0f1;
+   --background-color: #f5f6fa;
+ }
+ 
+ * {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', sans-serif;
+   line-height: 1.6;
+   color: var(--primary-color);
+   background-color: var(--background-color);
+   padding: 20px;
+ }
+ 
+ header {
+   background: var(--primary-color);
+   color: var(--text-color);
+   padding: 20px 0;
+   text-align: center;
+   margin-bottom: 30px;
+ }
+ 
+ header h1 {
+   font-size: 2.5rem;
+   margin-bottom: 10px;
+ }
+ 
+ nav {
+   display: flex;
+   justify-content: center;
+   gap: 20px;
+ }
+ 
+ nav a {
+   color: var(--text-color);
+   text-decoration: none;
+   font-weight: bold;
+   transition: color 0.3s;
+ }
+ 
+ nav a:hover {
+   color: var(--accent-color);
+ }
+ 
+ #search {
+   display: flex;
+   gap: 10px;
+   margin-bottom: 30px;
+ }
+ 
+ #search-input {
+   flex: 1;
+   padding: 10px;
+   border: 2px solid var(--secondary-color);
+   border-radius: 5px;
+ }
+ 
+ #search-btn {
+   background: var(--accent-color);
+   color: var(--text-color);
+   border: none;
+   padding: 10px 20px;
+   border-radius: 5px;
+   cursor: pointer;
+   transition: background 0.3s;
+ }
+ 
+ #search-btn:hover {
+   background: #2980b9;
+ }
+ 
+ #add-book {
+   background: white;
+   padding: 20px;
+   border-radius: 10px;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+   margin-bottom: 30px;
+ }
+ 
+ #book-form {
+   display: grid;
+   grid-template-columns: repeat(2, 1fr);
+   gap: 15px;
+ }
+ 
+ #book-form label {
+   font-weight: bold;
+ }
+ 
+ #book-form input {
+   padding: 8px;
+   border: 1px solid #ddd;
+   border-radius: 4px;
+ }
+ 
+ #book-form button {
+   grid-column: span 2;
+   background: var(--accent-color);
+   color: var(--text-color);
+   border: none;
+   padding: 10px;
+   border-radius: 5px;
+   cursor: pointer;
+   transition: background 0.3s;
+ }
+ 
+ #book-form button:hover {
+   background: #2980b9;
+ }
+ 
+ #collection {
+   background: white;
+   padding: 20px;
+   border-radius: 10px;
+   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ }
+ 
+ #books-grid {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+   gap: 20px;
+ }
+ 
+ .book-card {
+   background: var(--background-color);
+   padding: 15px;
+   border-radius: 8px;
+   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+   transition: transform 0.3s;
+ }
+ 
+ .book-card:hover {
+   transform: translateY(-5px);
+ }
+ 
+ .book-cover {
+   width: 100%;
+   height: auto;
+   border-radius: 5px;
+   margin-bottom: 10px;
+ }
+ 
+ .book-info {
+   font-size: 0.9rem;
+ }
+ 
+ .book-tags {
+   margin-top: 10px;
+   display: flex;
+   flex-wrap: wrap;
+   gap: 5px;
+ }
+ 
+ .tag {
+   background: var(--accent-color);
+   color: var(--text-color);
+   padding: 3px 8px;
+   border-radius: 12px;
+   font-size: 0.8rem;
+ }
+ 
+ footer {
+   text-align: center;
+   margin-top: 30px;
+   padding: 20px;
+   background: var(--primary-color);
+   color: var(--text-color);
+   border-radius: 10px;
+ }
+ 
+ @media (max-width: 768px) {
+   #book-form {
+     grid-template-columns: 1fr;
+   }
+ 
+   #books-grid {
+     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+   }
+ }