+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+

+ buildHtml

+ baseUrl https://shareflow.scroll.pub

+ metaTags

+ title "ShareFlow - Fast & Secure File Sharing"

+ description "Share files securely with crypto payments. Fast downloads, encrypted storage, and premium features."

+ keywords "file sharing, crypto payments, secure storage, fast downloads"

+ editButton /edit.html

+ title ShareFlow

+ style.css

+ body.html

+ script.js

+ {

+ "id": "msg_01PargYioLw5kuhiCaLLE894",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "For a file sharing website with crypto payments, I suggest the domain name:\n\n---domain---\nshareflow.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://shareflow.scroll.pub\nmetaTags\n title \"ShareFlow - Fast & Secure File Sharing\"\n description \"Share files securely with crypto payments. Fast downloads, encrypted storage, and premium features.\"\n keywords \"file sharing, crypto payments, secure storage, fast downloads\"\neditButton /edit.html\ntitle ShareFlow\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n

\n

\n ShareFlow\n \n

\n

\n\n

\n

\n

\n

Share Files Securely with Crypto Payments

\n

Fast downloads, encrypted storage, and premium features for content creators

\n

\n Get Started\n View Plans\n

\n

\n

\n\n

\n

\n

Why Choose ShareFlow

\n

\n

\n

🔒

\n

Secure Storage

\n

End-to-end encryption keeps your files safe

\n

\n

\n

⚡

\n

Fast Downloads

\n

High-speed servers worldwide

\n

\n

\n

💎

\n

Crypto Payments

\n

Accept payments in major cryptocurrencies

\n

\n

\n

📊

\n

Analytics

\n

Track downloads and earnings

\n

\n

\n

\n

\n

\n\n\n\n---style.css---\n:root {\n --primary: #4f46e5;\n --primary-dark: #4338ca;\n --text: #1f2937;\n --text-light: #6b7280;\n --bg: #ffffff;\n --bg-alt: #f3f4f6;\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 color: var(--text);\n line-height: 1.5;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1rem;\n}\n\n/* Header */\n.nav-header {\n padding: 1rem 0;\n background: var(--bg);\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n position: sticky;\n top: 0;\n z-index: 100;\n}\n\n.nav-header .container {\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);\n text-decoration: none;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n list-style: none;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n}\n\n.btn {\n display: inline-block;\n padding: 0.5rem 1rem;\n border-radius: 0.375rem;\n text-decoration: none;\n transition: all 0.2s;\n}\n\n.btn-primary {\n background: var(--primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--primary-dark);\n}\n\n.btn-outline {\n border: 1px solid var(--primary);\n color: var(--primary);\n}\n\n.btn-outline:hover {\n background: var(--primary);\n color: white;\n}\n\n.btn-large {\n padding: 0.75rem 1.5rem;\n font-size: 1.125rem;\n}\n\n/* Hero */\n.hero {\n padding: 6rem 0;\n background: linear-gradient(to bottom right, var(--primary), var(--primary-dark));\n color: white;\n text-align: center;\n}\n\n.hero h1 {\n font-size: 3rem;\n margin-bottom: 1rem;\n}\n\n.hero .lead {\n font-size: 1.25rem;\n margin-bottom: 2rem;\n opacity: 0.9;\n}\n\n.cta-buttons {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\n/* Features */\n.features {\n padding: 6rem 0;\n background: var(--bg-alt);\n}\n\n.features h2 {\n text-align: center;\n margin-bottom: 3rem;\n font-size: 2rem;\n}\n\n.feature-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n}\n\n.feature-card {\n background: white;\n padding: 2rem;\n border-radius: 0.5rem;\n text-align: center;\n transition: transform 0.2s;\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n}\n\n.feature-card .icon {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n/* Footer */\nfooter {\n background: var(--bg-alt);\n padding: 4rem 0;\n}\n\n.footer-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n}\n\n.footer-col h4 {\n margin-bottom: 1rem;\n}\n\n.footer-col ul {\n list-style: none;\n}\n\n.footer-col a {\n color: var(--text-light);\n text-decoration: none;\n line-height: 2;\n}\n\n/* Mobile Responsive */\n.mobile-menu {\n display: none;\n}\n\n@media (max-width: 768px) {\n .mobile-menu {\n display: block;\n font-size: 1.5rem;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .nav-links {\n display: none;\n }\n\n .nav-links.active {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n padding: 1rem;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n\n .hero h1 {\n font-size: 2rem;\n }\n\n .cta-buttons {\n flex-direction: column;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Mobile menu toggle\n const mobileMenu = document.querySelector('.mobile-menu');\n const navLinks = document.querySelector('.nav-links');\n\n mobileMenu.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n });\n\n // Close mobile menu when clicking outside\n document.addEventListener('click', (e) => {\n if (!e.target.closest('nav')) {\n navLinks.classList.remove('active');\n }\n });\n\n // Smooth scroll for anchor links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n});\n\n---end---\n\nThis provides a clean, modern, and responsive landing page for the file sharing website. The design uses a professional color scheme with a gradient hero section and feature cards that subtly animate on hover. The layout is fully responsive and includes a mobile menu. The CSS uses modern features like CSS variables and grid/flexbox for layouts. The JavaScript handles the mobile menu functionality and smooth scrolling."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 315,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 2629

+ }

+ }

+ # shareflow1.scroll.pub

+ Website generated by Claude from prompt: a file sharing website like turbobit.net, using nextjs pages route with typescript and tailwind css, supabase auth, and crypto payment gateway. Include homepage, sign in and signup page, pro for subscription

+ document.addEventListener('DOMContentLoaded', () => {

+ // Mobile menu toggle

+ const mobileMenu = document.querySelector('.mobile-menu');

+ const navLinks = document.querySelector('.nav-links');

+

+ mobileMenu.addEventListener('click', () => {

+ navLinks.classList.toggle('active');

+ });

+

+ // Close mobile menu when clicking outside

+ document.addEventListener('click', (e) => {

+ if (!e.target.closest('nav')) {

+ navLinks.classList.remove('active');

+ }

+ });

+

+ // Smooth scroll for anchor links

+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {

+ anchor.addEventListener('click', function (e) {

+ e.preventDefault();

+ document.querySelector(this.getAttribute('href')).scrollIntoView({

+ behavior: 'smooth'

+ });

+ });

+ });

+ });

+ :root {

+ --primary: #4f46e5;

+ --primary-dark: #4338ca;

+ --text: #1f2937;

+ --text-light: #6b7280;

+ --bg: #ffffff;

+ --bg-alt: #f3f4f6;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ font-family: system-ui, -apple-system, sans-serif;

+ color: var(--text);

+ line-height: 1.5;

+ }

+

+ .container {

+ max-width: 1200px;

+ margin: 0 auto;

+ padding: 0 1rem;

+ }

+

+ /* Header */

+ .nav-header {

+ padding: 1rem 0;

+ background: var(--bg);

+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);

+ position: sticky;

+ top: 0;

+ z-index: 100;

+ }

+

+ .nav-header .container {

+ display: flex;

+ justify-content: space-between;

+ align-items: center;

+ }

+

+ .logo {

+ font-size: 1.5rem;

+ font-weight: 700;

+ color: var(--primary);

+ text-decoration: none;

+ }

+

+ .nav-links {

+ display: flex;

+ gap: 2rem;

+ list-style: none;

+ }

+

+ .nav-links a {

+ text-decoration: none;

+ color: var(--text);

+ }

+

+ .btn {

+ display: inline-block;

+ padding: 0.5rem 1rem;

+ border-radius: 0.375rem;

+ text-decoration: none;

+ transition: all 0.2s;

+ }

+

+ .btn-primary {

+ background: var(--primary);

+ color: white;

+ }

+

+ .btn-primary:hover {

+ background: var(--primary-dark);

+ }

+

+ .btn-outline {

+ border: 1px solid var(--primary);

+ color: var(--primary);

+ }

+

+ .btn-outline:hover {

+ background: var(--primary);

+ color: white;

+ }

+

+ .btn-large {

+ padding: 0.75rem 1.5rem;

+ font-size: 1.125rem;

+ }

+

+ /* Hero */

+ .hero {

+ padding: 6rem 0;

+ background: linear-gradient(to bottom right, var(--primary), var(--primary-dark));

+ color: white;

+ text-align: center;

+ }

+

+ .hero h1 {

+ font-size: 3rem;

+ margin-bottom: 1rem;

+ }

+

+ .hero .lead {

+ font-size: 1.25rem;

+ margin-bottom: 2rem;

+ opacity: 0.9;

+ }

+

+ .cta-buttons {

+ display: flex;

+ gap: 1rem;

+ justify-content: center;

+ }

+

+ /* Features */

+ .features {

+ padding: 6rem 0;

+ background: var(--bg-alt);

+ }

+

+ .features h2 {

+ text-align: center;

+ margin-bottom: 3rem;

+ font-size: 2rem;

+ }

+

+ .feature-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

+ gap: 2rem;

+ }

+

+ .feature-card {

+ background: white;

+ padding: 2rem;

+ border-radius: 0.5rem;

+ text-align: center;

+ transition: transform 0.2s;

+ }

+

+ .feature-card:hover {

+ transform: translateY(-5px);

+ }

+

+ .feature-card .icon {

+ font-size: 2.5rem;

+ margin-bottom: 1rem;

+ }

+

+ /* Footer */

+ footer {

+ background: var(--bg-alt);

+ padding: 4rem 0;

+ }

+

+ .footer-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

+ gap: 2rem;

+ }

+

+ .footer-col h4 {

+ margin-bottom: 1rem;

+ }

+

+ .footer-col ul {

+ list-style: none;

+ }

+

+ .footer-col a {

+ color: var(--text-light);

+ text-decoration: none;

+ line-height: 2;

+ }

+

+ /* Mobile Responsive */

+ .mobile-menu {

+ display: none;

+ }

+

+ @media (max-width: 768px) {

+ .mobile-menu {

+ display: block;

+ font-size: 1.5rem;

+ background: none;

+ border: none;

+ cursor: pointer;

+ }

+

+ .nav-links {

+ display: none;

+ }

+

+ .nav-links.active {

+ display: flex;

+ flex-direction: column;

+ position: absolute;

+ top: 100%;

+ left: 0;

+ right: 0;

+ background: white;

+ padding: 1rem;

+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);

+ }

+

+ .hero h1 {

+ font-size: 2rem;

+ }

+

+ .cta-buttons {

+ flex-direction: column;

+ }

+ }