commit 5183de6eadb1ddb4a2a7d1911f4cbd03f7c3fbce
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 18:12:28 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..66d9378
--- /dev/null
+++ b/body.html
@@ -0,0 +1,83 @@
+<header>
+ <nav class="container">
+ <div class="logo">
+ <h1>Linkly</h1>
+ </div>
+ <div class="nav-links">
+ <a href="#features">Features</a>
+ <a href="#analytics">Analytics</a>
+ <a href="#pricing">Pricing</a>
+ <button class="btn-secondary">Login</button>
+ <button class="btn-primary">Get Started</button>
+ </div>
+ <button class="mobile-menu" aria-label="Toggle menu">
+ <span></span><span></span><span></span>
+ </button>
+ </nav>
+</header>
+
+<main>
+ <section class="hero">
+ <div class="container">
+ <h2>Transform Your Links into<br><span class="gradient-text">Powerful Insights</span></h2>
+ <p>Create branded short links and track their performance with enterprise-grade analytics.</p>
+ <div class="cta-group">
+ <button class="btn-primary">Start For Free</button>
+ <button class="btn-secondary">See Demo</button>
+ </div>
+ </div>
+ </section>
+
+ <section id="features" class="features">
+ <div class="container">
+ <h3>Why Choose Linkly</h3>
+ <div class="feature-grid">
+ <div class="feature-card">
+ <div class="icon">🔗</div>
+ <h4>Custom Domains</h4>
+ <p>Use your own domain for branded short links</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">📊</div>
+ <h4>Rich Analytics</h4>
+ <p>Track clicks, locations, and devices in real-time</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">🚀</div>
+ <h4>Fast Redirects</h4>
+ <p>Lightning-fast redirects with global CDN</p>
+ </div>
+ <div class="feature-card">
+ <div class="icon">🔒</div>
+ <h4>Enterprise Security</h4>
+ <p>Advanced security and access controls</p>
+ </div>
+ </div>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <div class="container">
+ <div class="footer-grid">
+ <div class="footer-col">
+ <h5>Product</h5>
+ <a href="#features">Features</a>
+ <a href="#analytics">Analytics</a>
+ <a href="#pricing">Pricing</a>
+ </div>
+ <div class="footer-col">
+ <h5>Company</h5>
+ <a href="#about">About</a>
+ <a href="#blog">Blog</a>
+ <a href="#careers">Careers</a>
+ </div>
+ <div class="footer-col">
+ <h5>Resources</h5>
+ <a href="#docs">Documentation</a>
+ <a href="#help">Help Center</a>
+ <a href="#api">API</a>
+ </div>
+ </div>
+ </div>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5d70bfd
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,14 @@
+buildHtml
+baseUrl https://linkly.scroll.pub
+metaTags
+ title "Linkly - Modern Link Management Platform"
+ description "Create and manage short links with your custom domain. Get powerful analytics and insights for your marketing campaigns."
+ keywords "link management, url shortener, link analytics, marketing tools"
+ author "Linkly"
+ ogTitle "Linkly - Professional Link Management"
+ ogDescription "Transform your links into powerful marketing tools with custom domains and advanced analytics."
+editButton /edit.html
+title Linkly - Modern Link Management Platform
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..fc4eff7
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01AjPRoaWrTpAWZAr559yN2p",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create this link management platform. For the domain, I suggest:\n\n---domain---\nlinkly.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://linkly.scroll.pub\nmetaTags\n title \"Linkly - Modern Link Management Platform\"\n description \"Create and manage short links with your custom domain. Get powerful analytics and insights for your marketing campaigns.\"\n keywords \"link management, url shortener, link analytics, marketing tools\"\n author \"Linkly\"\n ogTitle \"Linkly - Professional Link Management\"\n ogDescription \"Transform your links into powerful marketing tools with custom domains and advanced analytics.\"\neditButton /edit.html\ntitle Linkly - Modern Link Management Platform\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"container\">\n <div class=\"logo\">\n <h1>Linkly</h1>\n </div>\n <div class=\"nav-links\">\n <a href=\"#features\">Features</a>\n <a href=\"#analytics\">Analytics</a>\n <a href=\"#pricing\">Pricing</a>\n <button class=\"btn-secondary\">Login</button>\n <button class=\"btn-primary\">Get Started</button>\n </div>\n <button class=\"mobile-menu\" aria-label=\"Toggle menu\">\n <span></span><span></span><span></span>\n </button>\n </nav>\n</header>\n\n<main>\n <section class=\"hero\">\n <div class=\"container\">\n <h2>Transform Your Links into<br><span class=\"gradient-text\">Powerful Insights</span></h2>\n <p>Create branded short links and track their performance with enterprise-grade analytics.</p>\n <div class=\"cta-group\">\n <button class=\"btn-primary\">Start For Free</button>\n <button class=\"btn-secondary\">See Demo</button>\n </div>\n </div>\n </section>\n\n <section id=\"features\" class=\"features\">\n <div class=\"container\">\n <h3>Why Choose Linkly</h3>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"icon\">🔗</div>\n <h4>Custom Domains</h4>\n <p>Use your own domain for branded short links</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">📊</div>\n <h4>Rich Analytics</h4>\n <p>Track clicks, locations, and devices in real-time</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">🚀</div>\n <h4>Fast Redirects</h4>\n <p>Lightning-fast redirects with global CDN</p>\n </div>\n <div class=\"feature-card\">\n <div class=\"icon\">🔒</div>\n <h4>Enterprise Security</h4>\n <p>Advanced security and access controls</p>\n </div>\n </div>\n </div>\n </section>\n</main>\n\n<footer>\n <div class=\"container\">\n <div class=\"footer-grid\">\n <div class=\"footer-col\">\n <h5>Product</h5>\n <a href=\"#features\">Features</a>\n <a href=\"#analytics\">Analytics</a>\n <a href=\"#pricing\">Pricing</a>\n </div>\n <div class=\"footer-col\">\n <h5>Company</h5>\n <a href=\"#about\">About</a>\n <a href=\"#blog\">Blog</a>\n <a href=\"#careers\">Careers</a>\n </div>\n <div class=\"footer-col\">\n <h5>Resources</h5>\n <a href=\"#docs\">Documentation</a>\n <a href=\"#help\">Help Center</a>\n <a href=\"#api\">API</a>\n </div>\n </div>\n </div>\n</footer>\n\n---style.css---\n:root {\n --primary: #4f46e5;\n --primary-dark: #4338ca;\n --secondary: #f4f4f5;\n --text: #18181b;\n --text-light: #71717a;\n --background: #ffffff;\n --radius: 8px;\n --transition: all 0.3s ease;\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 color: var(--text);\n line-height: 1.6;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 1.5rem;\n}\n\n/* Header & Navigation */\nheader {\n padding: 1.5rem 0;\n background: var(--background);\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo h1 {\n font-size: 1.8rem;\n background: linear-gradient(135deg, var(--primary), #8b5cf6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n align-items: center;\n}\n\n.nav-links a {\n text-decoration: none;\n color: var(--text);\n font-weight: 500;\n transition: var(--transition);\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n/* Buttons */\n.btn-primary, .btn-secondary {\n padding: 0.75rem 1.5rem;\n border-radius: var(--radius);\n font-weight: 600;\n cursor: pointer;\n transition: var(--transition);\n border: none;\n}\n\n.btn-primary {\n background: var(--primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--primary-dark);\n transform: translateY(-2px);\n}\n\n.btn-secondary {\n background: var(--secondary);\n color: var(--text);\n}\n\n.btn-secondary:hover {\n background: #e4e4e7;\n transform: translateY(-2px);\n}\n\n/* Hero Section */\n.hero {\n padding: 8rem 0 5rem;\n text-align: center;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n}\n\n.hero h2 {\n font-size: 3.5rem;\n line-height: 1.2;\n margin-bottom: 1.5rem;\n}\n\n.gradient-text {\n background: linear-gradient(135deg, var(--primary), #8b5cf6);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.hero p {\n font-size: 1.25rem;\n color: var(--text-light);\n margin-bottom: 2rem;\n}\n\n.cta-group {\n display: flex;\n gap: 1rem;\n justify-content: center;\n}\n\n/* Features Section */\n.features {\n padding: 5rem 0;\n}\n\n.features h3 {\n text-align: center;\n font-size: 2.5rem;\n margin-bottom: 3rem;\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 padding: 2rem;\n border-radius: var(--radius);\n background: white;\n box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);\n transition: var(--transition);\n}\n\n.feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);\n}\n\n.feature-card .icon {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n.feature-card h4 {\n margin-bottom: 0.5rem;\n}\n\n/* Footer */\nfooter {\n background: #f8fafc;\n padding: 4rem 0;\n margin-top: 4rem;\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 h5 {\n font-size: 1.1rem;\n margin-bottom: 1rem;\n}\n\n.footer-col a {\n display: block;\n color: var(--text-light);\n text-decoration: none;\n margin-bottom: 0.5rem;\n transition: var(--transition);\n}\n\n.footer-col a:hover {\n color: var(--primary);\n}\n\n/* Mobile Menu */\n.mobile-menu {\n display: none;\n flex-direction: column;\n gap: 6px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 4px;\n}\n\n.mobile-menu span {\n width: 24px;\n height: 2px;\n background: var(--text);\n transition: var(--transition);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .mobile-menu {\n display: flex;\n }\n \n .hero h2 {\n font-size: 2.5rem;\n }\n \n .feature-grid {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 480px) {\n .hero h2 {\n font-size: 2rem;\n }\n \n .cta-group {\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.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';\n mobileMenu.classList.toggle('active');\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 // Header scroll effect\n let lastScroll = 0;\n const header = document.querySelector('header');\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n \n if (currentScroll <= 0) {\n header.classList.remove('scroll-up');\n return;\n }\n \n if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-up');\n header.classList.add('scroll-down');\n } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) {\n header.classList.remove('scroll-down');\n header.classList.add('scroll-up');\n }\n lastScroll = currentScroll;\n });\n});\n\n---end---\n\nThis implementation creates a modern, responsive link management platform website with smooth animations, gradient effects, and a professional design. The site features:\n\n1. Fixed header with gradient logo\n2. Hero section with gradient text and CTA buttons\n3. Features grid with hover effects\n4. Mobile-responsive design\n5. Smooth scroll behavior\n6. Header scroll effects\n7. Mobile menu toggle\n8. Beautiful gradient effects and shadows\n9. Accessible semantic HTML\n10. Clean, modular CSS with variables\n11. Performance-optimized JavaScript\n\nThe design is minimal yet sophisticated, using a modern color scheme and subtle animations to create an engaging user experience while maintaining professionalism."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 311,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 3203
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..cdde5e2
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# linkly.scroll.pub
+Website generated by Claude from prompt: a link management platform. ink management platform for modern marketing teams. With Dub.co, you can create short links using your own custom domain and get world-class analytics on your links' performance.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..81466ea
--- /dev/null
+++ b/script.js
@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Mobile menu toggle
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+
+ mobileMenu.addEventListener('click', () => {
+ navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+ mobileMenu.classList.toggle('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'
+ });
+ });
+ });
+
+ // Header scroll effect
+ let lastScroll = 0;
+ const header = document.querySelector('header');
+
+ window.addEventListener('scroll', () => {
+ const currentScroll = window.pageYOffset;
+
+ if (currentScroll <= 0) {
+ header.classList.remove('scroll-up');
+ return;
+ }
+
+ if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) {
+ header.classList.remove('scroll-up');
+ header.classList.add('scroll-down');
+ } else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) {
+ header.classList.remove('scroll-down');
+ header.classList.add('scroll-up');
+ }
+ lastScroll = currentScroll;
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..bce2715
--- /dev/null
+++ b/style.css
@@ -0,0 +1,246 @@
+:root {
+ --primary: #4f46e5;
+ --primary-dark: #4338ca;
+ --secondary: #f4f4f5;
+ --text: #18181b;
+ --text-light: #71717a;
+ --background: #ffffff;
+ --radius: 8px;
+ --transition: all 0.3s ease;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ color: var(--text);
+ line-height: 1.6;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1.5rem;
+}
+
+/* Header & Navigation */
+header {
+ padding: 1.5rem 0;
+ background: var(--background);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ z-index: 100;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo h1 {
+ font-size: 1.8rem;
+ background: linear-gradient(135deg, var(--primary), #8b5cf6);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+ align-items: center;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: var(--text);
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.nav-links a:hover {
+ color: var(--primary);
+}
+
+/* Buttons */
+.btn-primary, .btn-secondary {
+ padding: 0.75rem 1.5rem;
+ border-radius: var(--radius);
+ font-weight: 600;
+ cursor: pointer;
+ transition: var(--transition);
+ border: none;
+}
+
+.btn-primary {
+ background: var(--primary);
+ color: white;
+}
+
+.btn-primary:hover {
+ background: var(--primary-dark);
+ transform: translateY(-2px);
+}
+
+.btn-secondary {
+ background: var(--secondary);
+ color: var(--text);
+}
+
+.btn-secondary:hover {
+ background: #e4e4e7;
+ transform: translateY(-2px);
+}
+
+/* Hero Section */
+.hero {
+ padding: 8rem 0 5rem;
+ text-align: center;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.hero h2 {
+ font-size: 3.5rem;
+ line-height: 1.2;
+ margin-bottom: 1.5rem;
+}
+
+.gradient-text {
+ background: linear-gradient(135deg, var(--primary), #8b5cf6);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.hero p {
+ font-size: 1.25rem;
+ color: var(--text-light);
+ margin-bottom: 2rem;
+}
+
+.cta-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+}
+
+/* Features Section */
+.features {
+ padding: 5rem 0;
+}
+
+.features h3 {
+ text-align: center;
+ font-size: 2.5rem;
+ margin-bottom: 3rem;
+}
+
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+.feature-card {
+ padding: 2rem;
+ border-radius: var(--radius);
+ background: white;
+ box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+ transition: var(--transition);
+}
+
+.feature-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
+}
+
+.feature-card .icon {
+ font-size: 2rem;
+ margin-bottom: 1rem;
+}
+
+.feature-card h4 {
+ margin-bottom: 0.5rem;
+}
+
+/* Footer */
+footer {
+ background: #f8fafc;
+ padding: 4rem 0;
+ margin-top: 4rem;
+}
+
+.footer-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+}
+
+.footer-col h5 {
+ font-size: 1.1rem;
+ margin-bottom: 1rem;
+}
+
+.footer-col a {
+ display: block;
+ color: var(--text-light);
+ text-decoration: none;
+ margin-bottom: 0.5rem;
+ transition: var(--transition);
+}
+
+.footer-col a:hover {
+ color: var(--primary);
+}
+
+/* Mobile Menu */
+.mobile-menu {
+ display: none;
+ flex-direction: column;
+ gap: 6px;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 4px;
+}
+
+.mobile-menu span {
+ width: 24px;
+ height: 2px;
+ background: var(--text);
+ transition: var(--transition);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .mobile-menu {
+ display: flex;
+ }
+
+ .hero h2 {
+ font-size: 2.5rem;
+ }
+
+ .feature-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 480px) {
+ .hero h2 {
+ font-size: 2rem;
+ }
+
+ .cta-group {
+ flex-direction: column;
+ }
+}