commit 4724195d9a12db6a0c8cbe0c24b43415b8c965f4
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 15:27:45 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..f1a58ce
--- /dev/null
+++ b/body.html
@@ -0,0 +1,62 @@
+<header>
+ <nav>
+ <div class="logo">ShareFlow</div>
+ <div class="nav-links">
+ <a href="#upload">Upload</a>
+ <a href="#pricing">Pricing</a>
+ <a href="#about">About</a>
+ <a href="#login" class="login-btn">Login</a>
+ </div>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <h1>Share Files Securely</h1>
+ <p>Fast, reliable, and secure file sharing platform</p>
+
+ <div class="upload-zone" id="uploadZone">
+ <div class="upload-icon">
+ <i class="upload-arrow"></i>
+ </div>
+ <p>Drag & Drop files here or</p>
+ <button class="select-files-btn">Select Files</button>
+ <input type="file" id="fileInput" multiple hidden>
+ </div>
+
+ <div class="upload-info">
+ <p>Up to 2GB per file - Free account</p>
+ <p>Unlimited speed - Premium account</p>
+ </div>
+ </section>
+
+ <section class="features">
+ <div class="feature-card">
+ <h3>Secure Storage</h3>
+ <p>End-to-end encryption for your files</p>
+ </div>
+ <div class="feature-card">
+ <h3>Fast Transfer</h3>
+ <p>High-speed upload and download</p>
+ </div>
+ <div class="feature-card">
+ <h3>Easy Sharing</h3>
+ <p>Simple link sharing system</p>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="footer-content">
+ <div class="footer-section">
+ <h4>ShareFlow</h4>
+ <p>Professional file sharing made simple</p>
+ </div>
+ <div class="footer-section">
+ <h4>Links</h4>
+ <a href="#terms">Terms</a>
+ <a href="#privacy">Privacy</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..e087b9d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://shareflow.scroll.pub
+metaTags
+editButton /edit.html
+title ShareFlow - Fast & Secure File Sharing
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..e7748c0
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01RDC1pQrfazyNkRN3htZxGi",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a file sharing website with a modern, clean design. For the domain, I suggest:\n\n---domain---\nshareflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://shareflow.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ShareFlow - Fast & Secure File Sharing\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">ShareFlow</div>\n <div class=\"nav-links\">\n <a href=\"#upload\">Upload</a>\n <a href=\"#pricing\">Pricing</a>\n <a href=\"#about\">About</a>\n <a href=\"#login\" class=\"login-btn\">Login</a>\n </div>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <h1>Share Files Securely</h1>\n <p>Fast, reliable, and secure file sharing platform</p>\n \n <div class=\"upload-zone\" id=\"uploadZone\">\n <div class=\"upload-icon\">\n <i class=\"upload-arrow\"></i>\n </div>\n <p>Drag & Drop files here or</p>\n <button class=\"select-files-btn\">Select Files</button>\n <input type=\"file\" id=\"fileInput\" multiple hidden>\n </div>\n \n <div class=\"upload-info\">\n <p>Up to 2GB per file - Free account</p>\n <p>Unlimited speed - Premium account</p>\n </div>\n </section>\n\n <section class=\"features\">\n <div class=\"feature-card\">\n <h3>Secure Storage</h3>\n <p>End-to-end encryption for your files</p>\n </div>\n <div class=\"feature-card\">\n <h3>Fast Transfer</h3>\n <p>High-speed upload and download</p>\n </div>\n <div class=\"feature-card\">\n <h3>Easy Sharing</h3>\n <p>Simple link sharing system</p>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"footer-content\">\n <div class=\"footer-section\">\n <h4>ShareFlow</h4>\n <p>Professional file sharing made simple</p>\n </div>\n <div class=\"footer-section\">\n <h4>Links</h4>\n <a href=\"#terms\">Terms</a>\n <a href=\"#privacy\">Privacy</a>\n <a href=\"#contact\">Contact</a>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2563eb;\n --secondary-color: #1e40af;\n --bg-color: #f8fafc;\n --text-color: #1e293b;\n --accent-color: #3b82f6;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--bg-color);\n}\n\nheader {\n background: white;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n}\n\nnav {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem 2rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--primary-color);\n}\n\n.nav-links a {\n margin-left: 2rem;\n text-decoration: none;\n color: var(--text-color);\n transition: color 0.3s ease;\n}\n\n.nav-links a:hover {\n color: var(--primary-color);\n}\n\n.login-btn {\n background: var(--primary-color);\n color: white !important;\n padding: 0.5rem 1.5rem;\n border-radius: 25px;\n}\n\nmain {\n margin-top: 80px;\n padding: 2rem;\n}\n\n.hero {\n text-align: center;\n padding: 4rem 0;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--primary-color), var(--accent-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.upload-zone {\n max-width: 600px;\n margin: 2rem auto;\n padding: 3rem;\n border: 2px dashed var(--accent-color);\n border-radius: 10px;\n background: white;\n transition: all 0.3s ease;\n cursor: pointer;\n}\n\n.upload-zone:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n}\n\n.upload-icon {\n width: 60px;\n height: 60px;\n margin: 0 auto 1rem;\n border-radius: 50%;\n background: var(--bg-color);\n position: relative;\n}\n\n.upload-arrow {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 30px;\n height: 30px;\n border: solid var(--primary-color);\n border-width: 0 3px 3px 0;\n padding: 3px;\n transform: rotate(-135deg);\n}\n\n.select-files-btn {\n background: var(--primary-color);\n color: white;\n border: none;\n padding: 0.8rem 2rem;\n border-radius: 25px;\n font-size: 1rem;\n cursor: pointer;\n margin-top: 1rem;\n transition: background 0.3s ease;\n}\n\n.select-files-btn:hover {\n background: var(--secondary-color);\n}\n\n.features {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 4rem 0;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n text-align: center;\n transition: transform 0.3s ease;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.feature-card:hover {\n transform: translateY(-10px);\n}\n\nfooter {\n background: white;\n padding: 3rem 2rem;\n margin-top: 4rem;\n}\n\n.footer-content {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n.footer-section h4 {\n color: var(--primary-color);\n margin-bottom: 1rem;\n}\n\n.footer-section a {\n display: block;\n color: var(--text-color);\n text-decoration: none;\n margin-bottom: 0.5rem;\n}\n\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n .nav-links {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n text-align: center;\n }\n \n .nav-links a {\n margin: 0;\n }\n \n .hero h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const uploadZone = document.getElementById('uploadZone');\n const fileInput = document.getElementById('fileInput');\n \n uploadZone.addEventListener('click', () => {\n fileInput.click();\n });\n \n uploadZone.addEventListener('dragover', (e) => {\n e.preventDefault();\n uploadZone.style.borderColor = '#2563eb';\n uploadZone.style.backgroundColor = '#f0f9ff';\n });\n \n uploadZone.addEventListener('dragleave', (e) => {\n e.preventDefault();\n uploadZone.style.borderColor = '#3b82f6';\n uploadZone.style.backgroundColor = 'white';\n });\n \n uploadZone.addEventListener('drop', (e) => {\n e.preventDefault();\n uploadZone.style.borderColor = '#3b82f6';\n uploadZone.style.backgroundColor = 'white';\n \n const files = e.dataTransfer.files;\n handleFiles(files);\n });\n \n fileInput.addEventListener('change', (e) => {\n const files = e.target.files;\n handleFiles(files);\n });\n \n function handleFiles(files) {\n // This is where you would implement file upload logic\n console.log('Files to upload:', files);\n \n // Example feedback to user\n const feedback = document.createElement('div');\n feedback.textContent = `${files.length} file(s) selected for upload`;\n feedback.style.marginTop = '1rem';\n feedback.style.color = '#2563eb';\n \n const existingFeedback = uploadZone.querySelector('div:last-child');\n if (existingFeedback) {\n uploadZone.removeChild(existingFeedback);\n }\n uploadZone.appendChild(feedback);\n }\n});\n\n---end---\n\nThis implementation features:\n\n1. Clean, modern design with smooth animations and transitions\n2. Fully responsive layout\n3. Drag and drop file upload functionality\n4. Accessible semantic HTML structure\n5. Progressive enhancement\n6. Modern CSS with custom properties\n7. Interactive hover effects\n8. Gradient text effects\n9. Card-based feature display\n10. Professional navigation and footer\n11. Clear visual hierarchy\n12. Smooth animations and transitions\n\nThe design is minimal yet engaging, with a focus on user experience and visual appeal. The color scheme is professional and the layout is optimized for both desktop and mobile viewing."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 280,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2751
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..dea89bd
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# shareflow.scroll.pub
+Website generated by Claude from prompt: a file sharing website like turbobit.net
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..5940fda
--- /dev/null
+++ b/script.js
@@ -0,0 +1,51 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const uploadZone = document.getElementById('uploadZone');
+ const fileInput = document.getElementById('fileInput');
+
+ uploadZone.addEventListener('click', () => {
+ fileInput.click();
+ });
+
+ uploadZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ uploadZone.style.borderColor = '#2563eb';
+ uploadZone.style.backgroundColor = '#f0f9ff';
+ });
+
+ uploadZone.addEventListener('dragleave', (e) => {
+ e.preventDefault();
+ uploadZone.style.borderColor = '#3b82f6';
+ uploadZone.style.backgroundColor = 'white';
+ });
+
+ uploadZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ uploadZone.style.borderColor = '#3b82f6';
+ uploadZone.style.backgroundColor = 'white';
+
+ const files = e.dataTransfer.files;
+ handleFiles(files);
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ const files = e.target.files;
+ handleFiles(files);
+ });
+
+ function handleFiles(files) {
+ // This is where you would implement file upload logic
+ console.log('Files to upload:', files);
+
+ // Example feedback to user
+ const feedback = document.createElement('div');
+ feedback.textContent = `${files.length} file(s) selected for upload`;
+ feedback.style.marginTop = '1rem';
+ feedback.style.color = '#2563eb';
+
+ const existingFeedback = uploadZone.querySelector('div:last-child');
+ if (existingFeedback) {
+ uploadZone.removeChild(existingFeedback);
+ }
+ uploadZone.appendChild(feedback);
+ }
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..72ce32f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,204 @@
+:root {
+ --primary-color: #2563eb;
+ --secondary-color: #1e40af;
+ --bg-color: #f8fafc;
+ --text-color: #1e293b;
+ --accent-color: #3b82f6;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background: var(--bg-color);
+}
+
+header {
+ background: white;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 100;
+}
+
+nav {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--primary-color);
+}
+
+.nav-links a {
+ margin-left: 2rem;
+ text-decoration: none;
+ color: var(--text-color);
+ transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+ color: var(--primary-color);
+}
+
+.login-btn {
+ background: var(--primary-color);
+ color: white !important;
+ padding: 0.5rem 1.5rem;
+ border-radius: 25px;
+}
+
+main {
+ margin-top: 80px;
+ padding: 2rem;
+}
+
+.hero {
+ text-align: center;
+ padding: 4rem 0;
+}
+
+.hero h1 {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.upload-zone {
+ max-width: 600px;
+ margin: 2rem auto;
+ padding: 3rem;
+ border: 2px dashed var(--accent-color);
+ border-radius: 10px;
+ background: white;
+ transition: all 0.3s ease;
+ cursor: pointer;
+}
+
+.upload-zone:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+.upload-icon {
+ width: 60px;
+ height: 60px;
+ margin: 0 auto 1rem;
+ border-radius: 50%;
+ background: var(--bg-color);
+ position: relative;
+}
+
+.upload-arrow {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 30px;
+ height: 30px;
+ border: solid var(--primary-color);
+ border-width: 0 3px 3px 0;
+ padding: 3px;
+ transform: rotate(-135deg);
+}
+
+.select-files-btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.8rem 2rem;
+ border-radius: 25px;
+ font-size: 1rem;
+ cursor: pointer;
+ margin-top: 1rem;
+ transition: background 0.3s ease;
+}
+
+.select-files-btn:hover {
+ background: var(--secondary-color);
+}
+
+.features {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 4rem 0;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.feature-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ text-align: center;
+ transition: transform 0.3s ease;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.feature-card:hover {
+ transform: translateY(-10px);
+}
+
+footer {
+ background: white;
+ padding: 3rem 2rem;
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+.footer-section h4 {
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+.footer-section a {
+ display: block;
+ color: var(--text-color);
+ text-decoration: none;
+ margin-bottom: 0.5rem;
+}
+
+@media (max-width: 768px) {
+ nav {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .nav-links {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ text-align: center;
+ }
+
+ .nav-links a {
+ margin: 0;
+ }
+
+ .hero h1 {
+ font-size: 2rem;
+ }
+}