commit ca82416743b77e034f1e376b63396b8217dfb958
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 15:40:08 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..18d6a46
--- /dev/null
+++ b/body.html
@@ -0,0 +1,41 @@
+<header>
+ <nav>
+ <div class="logo">Chirp</div>
+ <div class="nav-links">
+ <a href="#home" class="active">Home</a>
+ <a href="#explore">Explore</a>
+ <a href="#notifications">Notifications</a>
+ <a href="#messages">Messages</a>
+ </div>
+ <button class="profile-btn" aria-label="Profile">
+ <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E" alt="Profile">
+ </button>
+ </nav>
+</header>
+
+<main>
+ <div class="compose">
+ <img class="avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='%23ddd' cx='12' cy='12' r='12'/%3E%3C/svg%3E" alt="Your avatar">
+ <div class="compose-input">
+ <textarea placeholder="What's happening?" aria-label="Compose new post"></textarea>
+ <div class="compose-actions">
+ <button class="post-btn">Post</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="feed" aria-label="Post feed">
+ <!-- Posts will be dynamically inserted here -->
+ </div>
+</main>
+
+<aside class="trends">
+ <h2>Trending</h2>
+ <div class="trend-items">
+ <div class="trend-item">
+ <span class="category">Trending in Technology</span>
+ <h3>#WebDev</h3>
+ <span class="posts">10.5K posts</span>
+ </div>
+ </div>
+</aside>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..a12cab1
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://chirp.scroll.pub
+metaTags
+editButton /edit.html
+title Chirp - Share Your Thoughts
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..c79fdde
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01SBWC2csuCyKP2QqLLUGTLk",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help create a Twitter clone website. For the domain, I suggest:\n\n---domain---\nchirp.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://chirp.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Chirp - Share Your Thoughts\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav>\n <div class=\"logo\">Chirp</div>\n <div class=\"nav-links\">\n <a href=\"#home\" class=\"active\">Home</a>\n <a href=\"#explore\">Explore</a>\n <a href=\"#notifications\">Notifications</a>\n <a href=\"#messages\">Messages</a>\n </div>\n <button class=\"profile-btn\" aria-label=\"Profile\">\n <img src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E\" alt=\"Profile\">\n </button>\n </nav>\n</header>\n\n<main>\n <div class=\"compose\">\n <img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='%23ddd' cx='12' cy='12' r='12'/%3E%3C/svg%3E\" alt=\"Your avatar\">\n <div class=\"compose-input\">\n <textarea placeholder=\"What's happening?\" aria-label=\"Compose new post\"></textarea>\n <div class=\"compose-actions\">\n <button class=\"post-btn\">Post</button>\n </div>\n </div>\n </div>\n\n <div class=\"feed\" aria-label=\"Post feed\">\n <!-- Posts will be dynamically inserted here -->\n </div>\n</main>\n\n<aside class=\"trends\">\n <h2>Trending</h2>\n <div class=\"trend-items\">\n <div class=\"trend-item\">\n <span class=\"category\">Trending in Technology</span>\n <h3>#WebDev</h3>\n <span class=\"posts\">10.5K posts</span>\n </div>\n </div>\n</aside>\n\n---style.css---\n:root {\n --primary-color: #1da1f2;\n --bg-color: #15202b;\n --text-color: #fff;\n --border-color: #38444d;\n --hover-color: #192734;\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 background-color: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n position: fixed;\n top: 0;\n width: 100%;\n background-color: rgba(21, 32, 43, 0.95);\n backdrop-filter: blur(8px);\n border-bottom: 1px solid var(--border-color);\n z-index: 100;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n max-width: 1200px;\n margin: 0 auto;\n padding: 1rem;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--primary-color);\n}\n\n.nav-links {\n display: flex;\n gap: 2rem;\n}\n\n.nav-links a {\n color: var(--text-color);\n text-decoration: none;\n padding: 0.5rem;\n border-radius: 9999px;\n transition: background-color 0.2s;\n}\n\n.nav-links a:hover {\n background-color: var(--hover-color);\n}\n\n.nav-links a.active {\n font-weight: bold;\n}\n\n.profile-btn {\n background: none;\n border: none;\n cursor: pointer;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.profile-btn img {\n width: 100%;\n height: 100%;\n}\n\nmain {\n max-width: 600px;\n margin: 80px auto 0;\n padding: 1rem;\n}\n\n.compose {\n display: flex;\n gap: 1rem;\n padding: 1rem;\n border-bottom: 1px solid var(--border-color);\n}\n\n.avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n}\n\n.compose-input {\n flex: 1;\n}\n\ntextarea {\n width: 100%;\n min-height: 100px;\n background: transparent;\n border: none;\n color: var(--text-color);\n font-size: 1.2rem;\n resize: none;\n padding: 0.5rem;\n}\n\ntextarea:focus {\n outline: none;\n}\n\n.compose-actions {\n display: flex;\n justify-content: flex-end;\n margin-top: 1rem;\n}\n\n.post-btn {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 0.5rem 1.5rem;\n border-radius: 9999px;\n font-weight: bold;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.post-btn:hover {\n background-color: #1a91da;\n}\n\n.trends {\n position: fixed;\n right: 0;\n top: 80px;\n width: 350px;\n background-color: #192734;\n border-radius: 15px;\n margin: 1rem;\n padding: 1rem;\n}\n\n.trend-items {\n margin-top: 1rem;\n}\n\n.trend-item {\n padding: 1rem;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.trend-item:hover {\n background-color: var(--hover-color);\n}\n\n.category {\n font-size: 0.9rem;\n color: #8899a6;\n}\n\n.trend-item h3 {\n margin: 0.2rem 0;\n}\n\n.posts {\n font-size: 0.9rem;\n color: #8899a6;\n}\n\n@media (max-width: 1020px) {\n .trends {\n display: none;\n }\n}\n\n@media (max-width: 600px) {\n .nav-links {\n display: none;\n }\n \n main {\n margin-top: 60px;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const textarea = document.querySelector('textarea');\n const postBtn = document.querySelector('.post-btn');\n const feed = document.querySelector('.feed');\n\n // Auto-resize textarea\n textarea.addEventListener('input', function() {\n this.style.height = 'auto';\n this.style.height = this.scrollHeight + 'px';\n });\n\n // Handle post creation\n postBtn.addEventListener('click', () => {\n const content = textarea.value.trim();\n if (content) {\n createPost(content);\n textarea.value = '';\n textarea.style.height = 'auto';\n }\n });\n\n function createPost(content) {\n const post = document.createElement('article');\n post.className = 'post';\n post.innerHTML = `\n <img class=\"avatar\" src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='%23ddd' cx='12' cy='12' r='12'/%3E%3C/svg%3E\" alt=\"User avatar\">\n <div class=\"post-content\">\n <div class=\"post-header\">\n <span class=\"username\">User</span>\n <span class=\"handle\">@user</span>\n <span class=\"timestamp\">${new Date().toLocaleString()}</span>\n </div>\n <p>${content}</p>\n <div class=\"post-actions\">\n <button aria-label=\"Reply\">💬 0</button>\n <button aria-label=\"Repost\">🔁 0</button>\n <button aria-label=\"Like\">❤️ 0</button>\n </div>\n </div>\n `;\n \n feed.insertBefore(post, feed.firstChild);\n }\n\n // Add some initial posts\n const samplePosts = [\n \"Just learned about semantic HTML! #WebDev\",\n \"Working on a new project using vanilla JavaScript 🚀\",\n \"CSS Grid is amazing for layouts!\"\n ];\n\n samplePosts.forEach(post => createPost(post));\n});\n\n---end---\n\nThis implementation creates a modern, responsive Twitter clone with key features like:\n- Fixed header with navigation\n- Compose new posts with auto-resizing textarea\n- Dynamic post feed\n- Trending sidebar (hidden on mobile)\n- Responsive design that works on all screen sizes\n- Smooth animations and transitions\n- Accessible markup with ARIA labels\n- Clean, semantic HTML5 structure\n- Modern CSS with CSS variables\n- Pure JavaScript for interactivity\n\nThe design uses a dark theme similar to Twitter's with a clean, professional look. All icons and avatars are created using SVG data URLs to avoid external dependencies."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 272,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2608
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..1e0824b
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# chirp1.scroll.pub
+Website generated by Claude from prompt: twitter clone
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e1081e5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const textarea = document.querySelector('textarea');
+ const postBtn = document.querySelector('.post-btn');
+ const feed = document.querySelector('.feed');
+
+ // Auto-resize textarea
+ textarea.addEventListener('input', function() {
+ this.style.height = 'auto';
+ this.style.height = this.scrollHeight + 'px';
+ });
+
+ // Handle post creation
+ postBtn.addEventListener('click', () => {
+ const content = textarea.value.trim();
+ if (content) {
+ createPost(content);
+ textarea.value = '';
+ textarea.style.height = 'auto';
+ }
+ });
+
+ function createPost(content) {
+ const post = document.createElement('article');
+ post.className = 'post';
+ post.innerHTML = `
+ <img class="avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle fill='%23ddd' cx='12' cy='12' r='12'/%3E%3C/svg%3E" alt="User avatar">
+ <div class="post-content">
+ <div class="post-header">
+ <span class="username">User</span>
+ <span class="handle">@user</span>
+ <span class="timestamp">${new Date().toLocaleString()}</span>
+ </div>
+ <p>${content}</p>
+ <div class="post-actions">
+ <button aria-label="Reply">💬 0</button>
+ <button aria-label="Repost">🔁 0</button>
+ <button aria-label="Like">❤️ 0</button>
+ </div>
+ </div>
+ `;
+
+ feed.insertBefore(post, feed.firstChild);
+ }
+
+ // Add some initial posts
+ const samplePosts = [
+ "Just learned about semantic HTML! #WebDev",
+ "Working on a new project using vanilla JavaScript 🚀",
+ "CSS Grid is amazing for layouts!"
+ ];
+
+ samplePosts.forEach(post => createPost(post));
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..db409c6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,195 @@
+:root {
+ --primary-color: #1da1f2;
+ --bg-color: #15202b;
+ --text-color: #fff;
+ --border-color: #38444d;
+ --hover-color: #192734;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background-color: rgba(21, 32, 43, 0.95);
+ backdrop-filter: blur(8px);
+ border-bottom: 1px solid var(--border-color);
+ z-index: 100;
+}
+
+nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem;
+}
+
+.logo {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: var(--primary-color);
+}
+
+.nav-links {
+ display: flex;
+ gap: 2rem;
+}
+
+.nav-links a {
+ color: var(--text-color);
+ text-decoration: none;
+ padding: 0.5rem;
+ border-radius: 9999px;
+ transition: background-color 0.2s;
+}
+
+.nav-links a:hover {
+ background-color: var(--hover-color);
+}
+
+.nav-links a.active {
+ font-weight: bold;
+}
+
+.profile-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ overflow: hidden;
+}
+
+.profile-btn img {
+ width: 100%;
+ height: 100%;
+}
+
+main {
+ max-width: 600px;
+ margin: 80px auto 0;
+ padding: 1rem;
+}
+
+.compose {
+ display: flex;
+ gap: 1rem;
+ padding: 1rem;
+ border-bottom: 1px solid var(--border-color);
+}
+
+.avatar {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+}
+
+.compose-input {
+ flex: 1;
+}
+
+textarea {
+ width: 100%;
+ min-height: 100px;
+ background: transparent;
+ border: none;
+ color: var(--text-color);
+ font-size: 1.2rem;
+ resize: none;
+ padding: 0.5rem;
+}
+
+textarea:focus {
+ outline: none;
+}
+
+.compose-actions {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1rem;
+}
+
+.post-btn {
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.5rem 1.5rem;
+ border-radius: 9999px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.post-btn:hover {
+ background-color: #1a91da;
+}
+
+.trends {
+ position: fixed;
+ right: 0;
+ top: 80px;
+ width: 350px;
+ background-color: #192734;
+ border-radius: 15px;
+ margin: 1rem;
+ padding: 1rem;
+}
+
+.trend-items {
+ margin-top: 1rem;
+}
+
+.trend-item {
+ padding: 1rem;
+ cursor: pointer;
+ transition: background-color 0.2s;
+}
+
+.trend-item:hover {
+ background-color: var(--hover-color);
+}
+
+.category {
+ font-size: 0.9rem;
+ color: #8899a6;
+}
+
+.trend-item h3 {
+ margin: 0.2rem 0;
+}
+
+.posts {
+ font-size: 0.9rem;
+ color: #8899a6;
+}
+
+@media (max-width: 1020px) {
+ .trends {
+ display: none;
+ }
+}
+
+@media (max-width: 600px) {
+ .nav-links {
+ display: none;
+ }
+
+ main {
+ margin-top: 60px;
+ }
+}