Changes to chirp1.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   
+     Chirp
+     
+       Home
+       Explore
+       Notifications
+       Messages
+     
+     
+       
+     
+   
+ 
+ 
+ 
+   
+     
+     
+       
+       
+         
+       
+     
+   
+ 
+   
+     
+   
+ 
+ 
+ 
+   Trending
+   
+     
+       Trending in Technology
+       #WebDev
+       10.5K posts
+     
+   
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://chirp.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Chirp - Share Your Thoughts
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "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\n  \n    Chirp
\n    \n      Home\n      Explore\n      Notifications\n      Messages\n    
\n    \n  \n\n\n\n  \n    \n    \n      \n      \n        \n      
\n    
\n  
\n\n  \n    \n  
\n\n\n\n  Trending\n  \n    \n      Trending in Technology\n      #WebDev\n      10.5K posts\n    
\n  
\n\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      \n      \n        \n          User\n          @user\n          ${new Date().toLocaleString()}\n        
\n        ${content}
\n        \n          \n          \n          \n        
\n      
\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
+   }
+ }

readme.scroll

Changed around line 1

+ # chirp1.scroll.pub

+ Website generated by Claude from prompt: twitter clone

script.js

Changed around line 1
+ 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 = `
+       
+       
+         
+           User
+           @user
+           ${new Date().toLocaleString()}
+         
+         ${content}
+         
+           
+           
+           
+         
+       
+     `;
+ 
+     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));
+ });

style.css

Changed around line 1
+ :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;
+   }
+ }