Changes to postit.scroll.pub

root

24 days ago

Initial commit

body.html

Changed around line 1
+ 
+   PostIt
+   Share your thoughts with the world!
+ 
+ 
+ 
+   
+     Create a New Post
+     
+       Your Name:
+       
+ 
+       Your Post:
+       
+ 
+       Captcha: 
+       
+ 
+       
+     
+   
+ 
+   
+     Recent Posts
+     
+   
+ 
+ 
+ 
+   Connect with us on social media
+ 

index.scroll

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

prompt.json

Changed around line 1
+ {
+   "id": "bba28d22-8085-4cbf-bae9-39265b7278e1",
+   "object": "chat.completion",
+   "created": 1735470464,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\npostit.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://postit.scroll.pub\nmetaTags\neditButton /edit.html\ntitle PostIt - Share Your Thoughts\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  PostIt\n  Share your thoughts with the world!
\n\n\n\n  \n    Create a New Post\n    \n      Your Name:\n      \n      \n      Your Post:\n      \n      \n      Captcha: \n      \n      \n      \n    \n  \n\n  \n    Recent Posts\n    
\n  \n\n\n\n  Connect with us on social media
\n\n---style.css---\n:root {\n  --primary-color: #4CAF50;\n  --secondary-color: #45a049;\n  --background-color: #f4f4f4;\n  --text-color: #333;\n  --border-color: #ddd;\n}\n\nbody {\n  font-family: Arial, sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n  color: var(--text-color);\n}\n\nheader {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 20px;\n  text-align: center;\n}\n\nmain {\n  padding: 20px;\n}\n\n#post-form {\n  background-color: white;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  margin-bottom: 20px;\n}\n\n#postForm {\n  display: flex;\n  flex-direction: column;\n}\n\n#postForm label {\n  margin-bottom: 5px;\n}\n\n#postForm input,\n#postForm textarea {\n  margin-bottom: 15px;\n  padding: 10px;\n  border: 1px solid var(--border-color);\n  border-radius: 5px;\n}\n\n#postForm button {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 10px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n#postForm button:hover {\n  background-color: var(--secondary-color);\n}\n\n#posts {\n  background-color: white;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.post {\n  border-bottom: 1px solid var(--border-color);\n  padding: 15px 0;\n}\n\n.post:last-child {\n  border-bottom: none;\n}\n\n.post-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n}\n\n.post-author {\n  font-weight: bold;\n}\n\n.post-date {\n  color: #666;\n  font-size: 0.9em;\n}\n\n.post-content {\n  margin-bottom: 10px;\n}\n\n.post-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.post-actions button {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 5px 10px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.post-actions button:hover {\n  background-color: var(--secondary-color);\n}\n\n.reply-form {\n  margin-top: 10px;\n  display: none;\n}\n\n.reply-form input,\n.reply-form textarea {\n  margin-bottom: 10px;\n  padding: 5px;\n  border: 1px solid var(--border-color);\n  border-radius: 5px;\n}\n\n.reply-form button {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 5px 10px;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.reply-form button:hover {\n  background-color: var(--secondary-color);\n}\n\n.replies {\n  margin-top: 10px;\n  padding-left: 20px;\n  border-left: 2px solid var(--border-color);\n}\n\n.reply {\n  margin-bottom: 10px;\n}\n\n.reply-author {\n  font-weight: bold;\n}\n\n.reply-date {\n  color: #666;\n  font-size: 0.8em;\n}\n\nfooter {\n  background-color: var(--primary-color);\n  color: white;\n  text-align: center;\n  padding: 10px;\n  position: fixed;\n  bottom: 0;\n  width: 100%;\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n  const captchaText = document.getElementById('captchaText');\n  const captchaInput = document.getElementById('captcha');\n  const postForm = document.getElementById('postForm');\n  const postsContainer = document.getElementById('postsContainer');\n\n  function generateCaptcha() {\n    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n    let captcha = '';\n    for (let i = 0; i < 6; i++) {\n      captcha += chars.charAt(Math.floor(Math.random() * chars.length));\n    }\n    captchaText.textContent = captcha;\n  }\n\n  function loadPosts() {\n    // Load posts from database and display them\n    // This is a placeholder for actual database interaction\n    const posts = [\n      {\n        id: 1,\n        author: 'John Doe',\n        date: '2023-10-01 12:00',\n        content: 'This is a sample post.',\n        likes: 10,\n        dislikes: 2,\n        replies: [\n          {\n            author: 'Jane Doe',\n            date: '2023-10-01 12:30',\n            content: 'This is a sample reply.'\n          }\n        ]\n      }\n    ];\n\n    postsContainer.innerHTML = '';\n    posts.forEach(post => {\n      const postElement = document.createElement('div');\n      postElement.className = 'post';\n      postElement.innerHTML = `\n        \n          ${post.author}\n          ${post.date}\n        
\n        ${post.content}
\n        \n          \n          \n          \n          \n        
\n        \n          \n          \n          \n        
\n        \n          ${post.replies.map(reply => `\n            \n              \n                ${reply.author}\n                ${reply.date}\n              
\n              ${reply.content}
\n            
\n          `).join('')}\n        
\n      `;\n      postsContainer.appendChild(postElement);\n    });\n  }\n\n  postForm.addEventListener('submit', function(event) {\n    event.preventDefault();\n    if (captchaInput.value === captchaText.textContent) {\n      // Submit post to database\n      // This is a placeholder for actual database interaction\n      alert('Post submitted successfully!');\n      postForm.reset();\n      generateCaptcha();\n      loadPosts();\n    } else {\n      alert('Invalid captcha!');\n    }\n  });\n\n  window.likePost = function(postId) {\n    // Like post in database\n    alert('Liked post ' + postId);\n  };\n\n  window.dislikePost = function(postId) {\n    // Dislike post in database\n    alert('Disliked post ' + postId);\n  };\n\n  window.showReplyForm = function(postId) {\n    const replyForm = document.getElementById('replyForm' + postId);\n    replyForm.style.display = 'block';\n  };\n\n  window.submitReply = function(postId) {\n    const replyName = document.getElementById('replyName' + postId).value;\n    const replyContent = document.getElementById('replyContent' + postId).value;\n    if (replyName && replyContent) {\n      // Submit reply to database\n      alert('Reply submitted successfully!');\n      loadPosts();\n    } else {\n      alert('Please fill in all fields!');\n    }\n  };\n\n  window.sharePost = function(postId) {\n    // Share post on social media\n    alert('Shared post ' + postId);\n  };\n\n  generateCaptcha();\n  loadPosts();\n});\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 347,
+     "completion_tokens": 2113,
+     "total_tokens": 2460,
+     "prompt_cache_hit_tokens": 64,
+     "prompt_cache_miss_tokens": 283
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # postit.scroll.pub

+ Website generated by DeepSeek from prompt: create a webpage with database, which anyone can post their text, saves on database and shows on website one by one as per the date and time they posted it with the name of the person posted. Add a random captcha for robot verification. add like, dislike, reply and social media share function with for the each post. Reply field should show when it clicked, and must ask name and comment to reply, and it needed to shown the same page, and stored in database. Like and dislike button should have a count which also need to be stored in database.

script.js

Changed around line 1
+ document.addEventListener('DOMContentLoaded', function() {
+   const captchaText = document.getElementById('captchaText');
+   const captchaInput = document.getElementById('captcha');
+   const postForm = document.getElementById('postForm');
+   const postsContainer = document.getElementById('postsContainer');
+ 
+   function generateCaptcha() {
+     const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+     let captcha = '';
+     for (let i = 0; i < 6; i++) {
+       captcha += chars.charAt(Math.floor(Math.random() * chars.length));
+     }
+     captchaText.textContent = captcha;
+   }
+ 
+   function loadPosts() {
+     // Load posts from database and display them
+     // This is a placeholder for actual database interaction
+     const posts = [
+       {
+         id: 1,
+         author: 'John Doe',
+         date: '2023-10-01 12:00',
+         content: 'This is a sample post.',
+         likes: 10,
+         dislikes: 2,
+         replies: [
+           {
+             author: 'Jane Doe',
+             date: '2023-10-01 12:30',
+             content: 'This is a sample reply.'
+           }
+         ]
+       }
+     ];
+ 
+     postsContainer.innerHTML = '';
+     posts.forEach(post => {
+       const postElement = document.createElement('div');
+       postElement.className = 'post';
+       postElement.innerHTML = `
+         
+           ${post.author}
+           ${post.date}
+         
+         ${post.content}
+         
+           
+           
+           
+           
+         
+         
+           
+           
+           
+         
+         
+           ${post.replies.map(reply => `
+             
+               
+                 ${reply.author}
+                 ${reply.date}
+               
+               ${reply.content}
+             
+           `).join('')}
+         
+       `;
+       postsContainer.appendChild(postElement);
+     });
+   }
+ 
+   postForm.addEventListener('submit', function(event) {
+     event.preventDefault();
+     if (captchaInput.value === captchaText.textContent) {
+       // Submit post to database
+       // This is a placeholder for actual database interaction
+       alert('Post submitted successfully!');
+       postForm.reset();
+       generateCaptcha();
+       loadPosts();
+     } else {
+       alert('Invalid captcha!');
+     }
+   });
+ 
+   window.likePost = function(postId) {
+     // Like post in database
+     alert('Liked post ' + postId);
+   };
+ 
+   window.dislikePost = function(postId) {
+     // Dislike post in database
+     alert('Disliked post ' + postId);
+   };
+ 
+   window.showReplyForm = function(postId) {
+     const replyForm = document.getElementById('replyForm' + postId);
+     replyForm.style.display = 'block';
+   };
+ 
+   window.submitReply = function(postId) {
+     const replyName = document.getElementById('replyName' + postId).value;
+     const replyContent = document.getElementById('replyContent' + postId).value;
+     if (replyName && replyContent) {
+       // Submit reply to database
+       alert('Reply submitted successfully!');
+       loadPosts();
+     } else {
+       alert('Please fill in all fields!');
+     }
+   };
+ 
+   window.sharePost = function(postId) {
+     // Share post on social media
+     alert('Shared post ' + postId);
+   };
+ 
+   generateCaptcha();
+   loadPosts();
+ });

style.css

Changed around line 1
+ :root {
+   --primary-color: #4CAF50;
+   --secondary-color: #45a049;
+   --background-color: #f4f4f4;
+   --text-color: #333;
+   --border-color: #ddd;
+ }
+ 
+ body {
+   font-family: Arial, sans-serif;
+   margin: 0;
+   padding: 0;
+   background-color: var(--background-color);
+   color: var(--text-color);
+ }
+ 
+ header {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 20px;
+   text-align: center;
+ }
+ 
+ main {
+   padding: 20px;
+ }
+ 
+ #post-form {
+   background-color: white;
+   padding: 20px;
+   border-radius: 5px;
+   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+   margin-bottom: 20px;
+ }
+ 
+ #postForm {
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ #postForm label {
+   margin-bottom: 5px;
+ }
+ 
+ #postForm input,
+ #postForm textarea {
+   margin-bottom: 15px;
+   padding: 10px;
+   border: 1px solid var(--border-color);
+   border-radius: 5px;
+ }
+ 
+ #postForm button {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 10px;
+   border: none;
+   border-radius: 5px;
+   cursor: pointer;
+ }
+ 
+ #postForm button:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ #posts {
+   background-color: white;
+   padding: 20px;
+   border-radius: 5px;
+   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+ 
+ .post {
+   border-bottom: 1px solid var(--border-color);
+   padding: 15px 0;
+ }
+ 
+ .post:last-child {
+   border-bottom: none;
+ }
+ 
+ .post-header {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   margin-bottom: 10px;
+ }
+ 
+ .post-author {
+   font-weight: bold;
+ }
+ 
+ .post-date {
+   color: #666;
+   font-size: 0.9em;
+ }
+ 
+ .post-content {
+   margin-bottom: 10px;
+ }
+ 
+ .post-actions {
+   display: flex;
+   gap: 10px;
+ }
+ 
+ .post-actions button {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 5px 10px;
+   border: none;
+   border-radius: 5px;
+   cursor: pointer;
+ }
+ 
+ .post-actions button:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ .reply-form {
+   margin-top: 10px;
+   display: none;
+ }
+ 
+ .reply-form input,
+ .reply-form textarea {
+   margin-bottom: 10px;
+   padding: 5px;
+   border: 1px solid var(--border-color);
+   border-radius: 5px;
+ }
+ 
+ .reply-form button {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 5px 10px;
+   border: none;
+   border-radius: 5px;
+   cursor: pointer;
+ }
+ 
+ .reply-form button:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ .replies {
+   margin-top: 10px;
+   padding-left: 20px;
+   border-left: 2px solid var(--border-color);
+ }
+ 
+ .reply {
+   margin-bottom: 10px;
+ }
+ 
+ .reply-author {
+   font-weight: bold;
+ }
+ 
+ .reply-date {
+   color: #666;
+   font-size: 0.8em;
+ }
+ 
+ footer {
+   background-color: var(--primary-color);
+   color: white;
+   text-align: center;
+   padding: 10px;
+   position: fixed;
+   bottom: 0;
+   width: 100%;
+ }