commit 51df34e1488a5a954348d0eb4ca7124a91a81e35
Author: root <root@hub.scroll.pub>
Date: 2025-01-04 05:07:18 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..0b3495b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,51 @@
+<header>
+ <h1>BookVault</h1>
+ <nav>
+ <a href="#add-book">Add Book</a>
+ <a href="#collection">Collection</a>
+ </nav>
+</header>
+
+<main>
+ <section id="search">
+ <input type="text" id="search-input" placeholder="Search by title, ISBN, or author...">
+ <button id="search-btn">Search</button>
+ </section>
+
+ <section id="add-book">
+ <h2>Add a New Book</h2>
+ <form id="book-form">
+ <label for="isbn">ISBN:</label>
+ <input type="text" id="isbn" required>
+
+ <label for="title">Title:</label>
+ <input type="text" id="title" required>
+
+ <label for="author">Author:</label>
+ <input type="text" id="author" required>
+
+ <label for="publisher">Publisher:</label>
+ <input type="text" id="publisher" required>
+
+ <label for="pub-date">Publication Date:</label>
+ <input type="date" id="pub-date" required>
+
+ <label for="cover">Cover Image URL:</label>
+ <input type="url" id="cover">
+
+ <label for="tags">Tags (comma separated):</label>
+ <input type="text" id="tags">
+
+ <button type="submit">Add Book</button>
+ </form>
+ </section>
+
+ <section id="collection">
+ <h2>Your Collection</h2>
+ <div id="books-grid"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Organize your literary world with BookVault</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..f54e642
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://bookvault.scroll.pub
+metaTags
+editButton /edit.html
+title BookVault - Your Personal Book Collection
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..3fd7a46
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<header>\n <h1>BookVault</h1>\n <nav>\n <a href=\"#add-book\">Add Book</a>\n <a href=\"#collection\">Collection</a>\n </nav>\n</header>\n\n<main>\n <section id=\"search\">\n <input type=\"text\" id=\"search-input\" placeholder=\"Search by title, ISBN, or author...\">\n <button id=\"search-btn\">Search</button>\n </section>\n\n <section id=\"add-book\">\n <h2>Add a New Book</h2>\n <form id=\"book-form\">\n <label for=\"isbn\">ISBN:</label>\n <input type=\"text\" id=\"isbn\" required>\n \n <label for=\"title\">Title:</label>\n <input type=\"text\" id=\"title\" required>\n \n <label for=\"author\">Author:</label>\n <input type=\"text\" id=\"author\" required>\n \n <label for=\"publisher\">Publisher:</label>\n <input type=\"text\" id=\"publisher\" required>\n \n <label for=\"pub-date\">Publication Date:</label>\n <input type=\"date\" id=\"pub-date\" required>\n \n <label for=\"cover\">Cover Image URL:</label>\n <input type=\"url\" id=\"cover\">\n \n <label for=\"tags\">Tags (comma separated):</label>\n <input type=\"text\" id=\"tags\">\n \n <button type=\"submit\">Add Book</button>\n </form>\n </section>\n\n <section id=\"collection\">\n <h2>Your Collection</h2>\n <div id=\"books-grid\"></div>\n </section>\n</main>\n\n<footer>\n <p>Organize your literary world with BookVault</p>\n</footer>\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 <img src=\"${book.cover}\" alt=\"${book.title}\" class=\"book-cover\">\n <div class=\"book-info\">\n <h3>${book.title}</h3>\n <p>Author: ${book.author}</p>\n <p>Publisher: ${book.publisher}</p>\n <p>Published: ${new Date(book.pubDate).toLocaleDateString()}</p>\n <div class=\"book-tags\">\n ${book.tags.map(tag => `<span class=\"tag\">${tag}</span>`).join('')}\n </div>\n </div>\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..ab36a46
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..6ee6d4f
--- /dev/null
+++ b/script.js
@@ -0,0 +1,67 @@
+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 = `
+ <img src="${book.cover}" alt="${book.title}" class="book-cover">
+ <div class="book-info">
+ <h3>${book.title}</h3>
+ <p>Author: ${book.author}</p>
+ <p>Publisher: ${book.publisher}</p>
+ <p>Published: ${new Date(book.pubDate).toLocaleDateString()}</p>
+ <div class="book-tags">
+ ${book.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+ </div>
+ </div>
+ `;
+
+ booksGrid.appendChild(bookCard);
+ });
+}
+
+function saveBooks() {
+ localStorage.setItem('books', JSON.stringify(books));
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..153987d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,187 @@
+: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));
+ }
+}
\ No newline at end of file