commit 30948bb927adeb1c2ae025172fcac7ece1d90216
Author: root <root@hub.scroll.pub>
Date: 2025-01-04 02:13:06 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..694c42e
--- /dev/null
+++ b/body.html
@@ -0,0 +1,34 @@
+<header>
+ <h1>My Digital Library</h1>
+ <p class="subtitle">A collection of my written works</p>
+</header>
+
+<main>
+ <section class="bookshelf">
+ <div class="shelf">
+ <div class="book" data-pdf="document1.pdf">
+ <div class="spine">
+ <h2>Research Paper 2023</h2>
+ <p class="author">By Me</p>
+ </div>
+ </div>
+ <div class="book" data-pdf="document2.pdf">
+ <div class="spine">
+ <h2>Technical Guide</h2>
+ <p class="author">By Me</p>
+ </div>
+ </div>
+ <div class="book" data-pdf="document3.pdf">
+ <div class="spine">
+ <h2>Essays Collection</h2>
+ <p class="author">By Me</p>
+ </div>
+ </div>
+ </div>
+ <div class="shelf-edge"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Built with passion by me</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..40f848d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://myshelf.scroll.pub
+metaTags
+editButton /edit.html
+title Digital Bookshelf
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..33dccdc
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01QmG5KWFQAYA3ECUGG41gNJ",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a website for your PDF bookshelf. For the domain, I suggest:\n\n---domain---\nmyshelf.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://myshelf.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Digital Bookshelf\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>My Digital Library</h1>\n <p class=\"subtitle\">A collection of my written works</p>\n</header>\n\n<main>\n <section class=\"bookshelf\">\n <div class=\"shelf\">\n <div class=\"book\" data-pdf=\"document1.pdf\">\n <div class=\"spine\">\n <h2>Research Paper 2023</h2>\n <p class=\"author\">By Me</p>\n </div>\n </div>\n <div class=\"book\" data-pdf=\"document2.pdf\">\n <div class=\"spine\">\n <h2>Technical Guide</h2>\n <p class=\"author\">By Me</p>\n </div>\n </div>\n <div class=\"book\" data-pdf=\"document3.pdf\">\n <div class=\"spine\">\n <h2>Essays Collection</h2>\n <p class=\"author\">By Me</p>\n </div>\n </div>\n </div>\n <div class=\"shelf-edge\"></div>\n </section>\n</main>\n\n<footer>\n <p>Built with passion by me</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #e74c3c;\n --wood-color: #8b4513;\n --book-height: 200px;\n --book-depth: 40px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n line-height: 1.6;\n background: #f5f6fa;\n color: var(--primary-color);\n}\n\nheader {\n text-align: center;\n padding: 3rem 1rem;\n background: linear-gradient(135deg, #fff 0%, #f5f6fa 100%);\n box-shadow: 0 2px 15px rgba(0,0,0,0.1);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n color: var(--primary-color);\n}\n\n.subtitle {\n color: #666;\n font-style: italic;\n}\n\n.bookshelf {\n max-width: 1200px;\n margin: 4rem auto;\n padding: 0 2rem;\n perspective: 1000px;\n}\n\n.shelf {\n display: flex;\n gap: 20px;\n padding: 20px;\n background: var(--wood-color);\n border-radius: 5px 5px 0 0;\n transform: rotateX(10deg);\n transform-style: preserve-3d;\n}\n\n.book {\n height: var(--book-height);\n width: var(--book-depth);\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.3s ease;\n cursor: pointer;\n}\n\n.book:hover {\n transform: translateY(-20px) rotateX(-10deg);\n}\n\n.spine {\n position: absolute;\n width: 100%;\n height: 100%;\n background: var(--accent-color);\n padding: 20px 10px;\n writing-mode: vertical-rl;\n text-orientation: mixed;\n color: white;\n text-align: center;\n box-shadow: -2px 0 10px rgba(0,0,0,0.2);\n border-radius: 3px 0 0 3px;\n}\n\n.shelf-edge {\n height: 20px;\n background: linear-gradient(var(--wood-color), #5c2c0d);\n margin-top: -1px;\n transform: rotateX(-90deg);\n transform-origin: top;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n}\n\n@media (max-width: 768px) {\n .shelf {\n flex-wrap: wrap;\n justify-content: center;\n }\n \n .book {\n margin: 10px;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const books = document.querySelectorAll('.book');\n \n books.forEach(book => {\n book.addEventListener('click', () => {\n const pdfFile = book.dataset.pdf;\n if (pdfFile) {\n // In a real implementation, this would trigger the PDF download\n console.log(`Downloading: ${pdfFile}`);\n alert('Download starting...');\n }\n });\n\n // Add 3D hover effect\n book.addEventListener('mousemove', (e) => {\n const rect = book.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n const rotateY = (x / rect.width - 0.5) * 20;\n const rotateX = (y / rect.height - 0.5) * 20;\n \n book.style.transform = `\n translateY(-20px)\n rotateX(${-rotateX}deg)\n rotateY(${rotateY}deg)\n `;\n });\n\n book.addEventListener('mouseleave', () => {\n book.style.transform = '';\n });\n });\n});\n\n---end---\n\nThis creates a beautiful 3D bookshelf with hover effects and smooth animations. The books are displayed with vertical text on their spines and respond to mouse movements with realistic 3D transformations. The design is clean, modern, and fully responsive. The color scheme is professional and the wood texture gives it a realistic feel.\n\nTo use it, you would need to:\n1. Add your actual PDF files to the project\n2. Update the data-pdf attributes in the HTML to match your PDF filenames\n3. Implement the actual download functionality in the JavaScript (currently it just shows an alert)\n\nThe site features:\n- 3D transformed bookshelf with perspective\n- Interactive books with hover effects\n- Responsive design that works on mobile\n- Semantic HTML5 structure\n- Accessible color contrast\n- Smooth animations\n- Professional typography"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 286,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1688
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..7eed9b7
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# myshelf.scroll.pub
+Website generated by Claude from prompt: a website with a bookshelf for downaloadble pdfs i wrote
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5498f45
--- /dev/null
+++ b/script.js
@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const books = document.querySelectorAll('.book');
+
+ books.forEach(book => {
+ book.addEventListener('click', () => {
+ const pdfFile = book.dataset.pdf;
+ if (pdfFile) {
+ // In a real implementation, this would trigger the PDF download
+ console.log(`Downloading: ${pdfFile}`);
+ alert('Download starting...');
+ }
+ });
+
+ // Add 3D hover effect
+ book.addEventListener('mousemove', (e) => {
+ const rect = book.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ const y = e.clientY - rect.top;
+
+ const rotateY = (x / rect.width - 0.5) * 20;
+ const rotateX = (y / rect.height - 0.5) * 20;
+
+ book.style.transform = `
+ translateY(-20px)
+ rotateX(${-rotateX}deg)
+ rotateY(${rotateY}deg)
+ `;
+ });
+
+ book.addEventListener('mouseleave', () => {
+ book.style.transform = '';
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e22366b
--- /dev/null
+++ b/style.css
@@ -0,0 +1,108 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #e74c3c;
+ --wood-color: #8b4513;
+ --book-height: 200px;
+ --book-depth: 40px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ line-height: 1.6;
+ background: #f5f6fa;
+ color: var(--primary-color);
+}
+
+header {
+ text-align: center;
+ padding: 3rem 1rem;
+ background: linear-gradient(135deg, #fff 0%, #f5f6fa 100%);
+ box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ color: var(--primary-color);
+}
+
+.subtitle {
+ color: #666;
+ font-style: italic;
+}
+
+.bookshelf {
+ max-width: 1200px;
+ margin: 4rem auto;
+ padding: 0 2rem;
+ perspective: 1000px;
+}
+
+.shelf {
+ display: flex;
+ gap: 20px;
+ padding: 20px;
+ background: var(--wood-color);
+ border-radius: 5px 5px 0 0;
+ transform: rotateX(10deg);
+ transform-style: preserve-3d;
+}
+
+.book {
+ height: var(--book-height);
+ width: var(--book-depth);
+ position: relative;
+ transform-style: preserve-3d;
+ transition: transform 0.3s ease;
+ cursor: pointer;
+}
+
+.book:hover {
+ transform: translateY(-20px) rotateX(-10deg);
+}
+
+.spine {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: var(--accent-color);
+ padding: 20px 10px;
+ writing-mode: vertical-rl;
+ text-orientation: mixed;
+ color: white;
+ text-align: center;
+ box-shadow: -2px 0 10px rgba(0,0,0,0.2);
+ border-radius: 3px 0 0 3px;
+}
+
+.shelf-edge {
+ height: 20px;
+ background: linear-gradient(var(--wood-color), #5c2c0d);
+ margin-top: -1px;
+ transform: rotateX(-90deg);
+ transform-origin: top;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .shelf {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .book {
+ margin: 10px;
+ }
+}