commit 16789c1d889d39d747a9c0d5e4b73a08abc5efdf
Author: root <root@hub.scroll.pub>
Date: 2025-01-01 18:40:02 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..809eff8
--- /dev/null
+++ b/body.html
@@ -0,0 +1,36 @@
+<main class="container">
+ <header>
+ <div class="avatar-container">
+ <div class="avatar"></div>
+ </div>
+ <h1>@username</h1>
+ <p class="bio">Digital Creator & Web Developer</p>
+ </header>
+
+ <section class="links">
+ <a href="#" class="link-card" data-type="portfolio">
+ <span class="icon">🎨</span>
+ <span class="text">Portfolio</span>
+ </a>
+ <a href="#" class="link-card" data-type="youtube">
+ <span class="icon">📺</span>
+ <span class="text">YouTube Channel</span>
+ </a>
+ <a href="#" class="link-card" data-type="twitter">
+ <span class="icon">🐦</span>
+ <span class="text">Twitter</span>
+ </a>
+ <a href="#" class="link-card" data-type="instagram">
+ <span class="icon">📸</span>
+ <span class="text">Instagram</span>
+ </a>
+ <a href="#" class="link-card" data-type="blog">
+ <span class="icon">✍️</span>
+ <span class="text">Blog</span>
+ </a>
+ </section>
+
+ <footer>
+ <p>Made with 💖 by @username</p>
+ </footer>
+</main>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..9d195c2
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,12 @@
+buildHtml
+baseUrl https://links.scroll.pub
+metaTags
+ title Connect with Me | Digital Hub
+ description Your central hub for all professional and social media links
+ author Digital Creator
+ image /images/avatar.jpg
+editButton /edit.html
+title Connect with Me
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..7c6de7c
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_017N2mywuHRDKryRAfRtNErg",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a beautiful and modern \"link in bio\" page.\n\n---domain---\nlinks.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://links.scroll.pub\nmetaTags\n title Connect with Me | Digital Hub\n description Your central hub for all professional and social media links\n author Digital Creator\n image /images/avatar.jpg\neditButton /edit.html\ntitle Connect with Me\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"container\">\n <header>\n <div class=\"avatar-container\">\n <div class=\"avatar\"></div>\n </div>\n <h1>@username</h1>\n <p class=\"bio\">Digital Creator & Web Developer</p>\n </header>\n\n <section class=\"links\">\n <a href=\"#\" class=\"link-card\" data-type=\"portfolio\">\n <span class=\"icon\">🎨</span>\n <span class=\"text\">Portfolio</span>\n </a>\n <a href=\"#\" class=\"link-card\" data-type=\"youtube\">\n <span class=\"icon\">📺</span>\n <span class=\"text\">YouTube Channel</span>\n </a>\n <a href=\"#\" class=\"link-card\" data-type=\"twitter\">\n <span class=\"icon\">🐦</span>\n <span class=\"text\">Twitter</span>\n </a>\n <a href=\"#\" class=\"link-card\" data-type=\"instagram\">\n <span class=\"icon\">📸</span>\n <span class=\"text\">Instagram</span>\n </a>\n <a href=\"#\" class=\"link-card\" data-type=\"blog\">\n <span class=\"icon\">✍️</span>\n <span class=\"text\">Blog</span>\n </a>\n </section>\n\n <footer>\n <p>Made with 💖 by @username</p>\n </footer>\n</main>\n\n---style.css---\n:root {\n --primary-color: #6366f1;\n --secondary-color: #818cf8;\n --bg-color: #f8fafc;\n --text-color: #1e293b;\n --card-bg: #ffffff;\n --animation-speed: 0.3s;\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 background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.container {\n max-width: 680px;\n margin: 0 auto;\n padding: 2rem 1rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 3rem;\n}\n\n.avatar-container {\n width: 120px;\n height: 120px;\n margin: 0 auto 1.5rem;\n position: relative;\n}\n\n.avatar {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);\n}\n\nh1 {\n font-size: 1.75rem;\n margin-bottom: 0.5rem;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.bio {\n color: #64748b;\n font-size: 1.1rem;\n}\n\n.links {\n display: grid;\n gap: 1rem;\n}\n\n.link-card {\n display: flex;\n align-items: center;\n padding: 1rem 1.5rem;\n background: var(--card-bg);\n border-radius: 12px;\n text-decoration: none;\n color: var(--text-color);\n transition: transform var(--animation-speed), box-shadow var(--animation-speed);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n.link-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);\n}\n\n.link-card .icon {\n font-size: 1.5rem;\n margin-right: 1rem;\n}\n\n.link-card .text {\n font-weight: 500;\n}\n\nfooter {\n margin-top: 3rem;\n text-align: center;\n color: #64748b;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --bg-color: #0f172a;\n --text-color: #e2e8f0;\n --card-bg: #1e293b;\n }\n}\n\n@media (max-width: 480px) {\n .container {\n padding: 1.5rem 1rem;\n }\n \n .avatar-container {\n width: 100px;\n height: 100px;\n }\n\n h1 {\n font-size: 1.5rem;\n }\n\n .bio {\n font-size: 1rem;\n }\n\n .link-card {\n padding: 0.875rem 1.25rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Add entrance animation to links\n const links = document.querySelectorAll('.link-card');\n links.forEach((link, index) => {\n link.style.opacity = '0';\n link.style.transform = 'translateY(20px)';\n setTimeout(() => {\n link.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n link.style.opacity = '1';\n link.style.transform = 'translateY(0)';\n }, 100 * index);\n });\n\n // Add click animation\n links.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n this.style.transform = 'scale(0.95)';\n setTimeout(() => {\n window.location.href = this.href;\n }, 200);\n });\n });\n});\n\n---end---\n\nThis creates a beautiful, responsive \"link in bio\" page with:\n\n1. Smooth animations and transitions\n2. Dark mode support\n3. Gradient effects\n4. Modern card-based design\n5. Responsive layout\n6. Accessibility features\n7. SEO optimization\n8. Interactive hover and click effects\n9. Clean, semantic HTML\n10. Progressive enhancement\n\nThe design is minimal yet sophisticated, with careful attention to typography, spacing, and visual hierarchy. The animations are subtle and enhance the user experience without being distracting."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1774
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a396372
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# links1.scroll.pub
+Website generated by Claude from prompt: link in bio page
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a08aaed
--- /dev/null
+++ b/script.js
@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', () => {
+ // Add entrance animation to links
+ const links = document.querySelectorAll('.link-card');
+ links.forEach((link, index) => {
+ link.style.opacity = '0';
+ link.style.transform = 'translateY(20px)';
+ setTimeout(() => {
+ link.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ link.style.opacity = '1';
+ link.style.transform = 'translateY(0)';
+ }, 100 * index);
+ });
+
+ // Add click animation
+ links.forEach(link => {
+ link.addEventListener('click', function(e) {
+ e.preventDefault();
+ this.style.transform = 'scale(0.95)';
+ setTimeout(() => {
+ window.location.href = this.href;
+ }, 200);
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6f5a635
--- /dev/null
+++ b/style.css
@@ -0,0 +1,128 @@
+:root {
+ --primary-color: #6366f1;
+ --secondary-color: #818cf8;
+ --bg-color: #f8fafc;
+ --text-color: #1e293b;
+ --card-bg: #ffffff;
+ --animation-speed: 0.3s;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+.container {
+ max-width: 680px;
+ margin: 0 auto;
+ padding: 2rem 1rem;
+}
+
+header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.avatar-container {
+ width: 120px;
+ height: 120px;
+ margin: 0 auto 1.5rem;
+ position: relative;
+}
+
+.avatar {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
+}
+
+h1 {
+ font-size: 1.75rem;
+ margin-bottom: 0.5rem;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.bio {
+ color: #64748b;
+ font-size: 1.1rem;
+}
+
+.links {
+ display: grid;
+ gap: 1rem;
+}
+
+.link-card {
+ display: flex;
+ align-items: center;
+ padding: 1rem 1.5rem;
+ background: var(--card-bg);
+ border-radius: 12px;
+ text-decoration: none;
+ color: var(--text-color);
+ transition: transform var(--animation-speed), box-shadow var(--animation-speed);
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+.link-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+}
+
+.link-card .icon {
+ font-size: 1.5rem;
+ margin-right: 1rem;
+}
+
+.link-card .text {
+ font-weight: 500;
+}
+
+footer {
+ margin-top: 3rem;
+ text-align: center;
+ color: #64748b;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg-color: #0f172a;
+ --text-color: #e2e8f0;
+ --card-bg: #1e293b;
+ }
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 1.5rem 1rem;
+ }
+
+ .avatar-container {
+ width: 100px;
+ height: 100px;
+ }
+
+ h1 {
+ font-size: 1.5rem;
+ }
+
+ .bio {
+ font-size: 1rem;
+ }
+
+ .link-card {
+ padding: 0.875rem 1.25rem;
+ }
+}