commit b47fdfc7dccb76feb64e523796913f79435d6523
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 11:08:17 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..dd6d805
--- /dev/null
+++ b/body.html
@@ -0,0 +1,31 @@
+<header>
+ <h1>PostIt</h1>
+ <p>Share your thoughts with the world!</p>
+</header>
+
+<main>
+ <section id="post-form">
+ <h2>Create a New Post</h2>
+ <form id="postForm">
+ <label for="name">Your Name:</label>
+ <input type="text" id="name" name="name" required>
+
+ <label for="post">Your Post:</label>
+ <textarea id="post" name="post" required></textarea>
+
+ <label for="captcha">Captcha: <span id="captchaText"></span></label>
+ <input type="text" id="captcha" name="captcha" required>
+
+ <button type="submit">Post</button>
+ </form>
+ </section>
+
+ <section id="posts">
+ <h2>Recent Posts</h2>
+ <div id="postsContainer"></div>
+ </section>
+</main>
+
+<footer>
+ <p>Connect with us on social media</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..5a178ee
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://postit.scroll.pub
+metaTags
+editButton /edit.html
+title PostIt - Share Your Thoughts
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..fd6d424
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "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<header>\n <h1>PostIt</h1>\n <p>Share your thoughts with the world!</p>\n</header>\n\n<main>\n <section id=\"post-form\">\n <h2>Create a New Post</h2>\n <form id=\"postForm\">\n <label for=\"name\">Your Name:</label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n \n <label for=\"post\">Your Post:</label>\n <textarea id=\"post\" name=\"post\" required></textarea>\n \n <label for=\"captcha\">Captcha: <span id=\"captchaText\"></span></label>\n <input type=\"text\" id=\"captcha\" name=\"captcha\" required>\n \n <button type=\"submit\">Post</button>\n </form>\n </section>\n\n <section id=\"posts\">\n <h2>Recent Posts</h2>\n <div id=\"postsContainer\"></div>\n </section>\n</main>\n\n<footer>\n <p>Connect with us on social media</p>\n</footer>\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 <div class=\"post-header\">\n <span class=\"post-author\">${post.author}</span>\n <span class=\"post-date\">${post.date}</span>\n </div>\n <div class=\"post-content\">${post.content}</div>\n <div class=\"post-actions\">\n <button onclick=\"likePost(${post.id})\">Like (${post.likes})</button>\n <button onclick=\"dislikePost(${post.id})\">Dislike (${post.dislikes})</button>\n <button onclick=\"showReplyForm(${post.id})\">Reply</button>\n <button onclick=\"sharePost(${post.id})\">Share</button>\n </div>\n <div id=\"replyForm${post.id}\" class=\"reply-form\">\n <input type=\"text\" id=\"replyName${post.id}\" placeholder=\"Your Name\" required>\n <textarea id=\"replyContent${post.id}\" placeholder=\"Your Reply\" required></textarea>\n <button onclick=\"submitReply(${post.id})\">Submit Reply</button>\n </div>\n <div class=\"replies\">\n ${post.replies.map(reply => `\n <div class=\"reply\">\n <div class=\"reply-header\">\n <span class=\"reply-author\">${reply.author}</span>\n <span class=\"reply-date\">${reply.date}</span>\n </div>\n <div class=\"reply-content\">${reply.content}</div>\n </div>\n `).join('')}\n </div>\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"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..c1faec6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..be30bdb
--- /dev/null
+++ b/script.js
@@ -0,0 +1,122 @@
+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 = `
+ <div class="post-header">
+ <span class="post-author">${post.author}</span>
+ <span class="post-date">${post.date}</span>
+ </div>
+ <div class="post-content">${post.content}</div>
+ <div class="post-actions">
+ <button onclick="likePost(${post.id})">Like (${post.likes})</button>
+ <button onclick="dislikePost(${post.id})">Dislike (${post.dislikes})</button>
+ <button onclick="showReplyForm(${post.id})">Reply</button>
+ <button onclick="sharePost(${post.id})">Share</button>
+ </div>
+ <div id="replyForm${post.id}" class="reply-form">
+ <input type="text" id="replyName${post.id}" placeholder="Your Name" required>
+ <textarea id="replyContent${post.id}" placeholder="Your Reply" required></textarea>
+ <button onclick="submitReply(${post.id})">Submit Reply</button>
+ </div>
+ <div class="replies">
+ ${post.replies.map(reply => `
+ <div class="reply">
+ <div class="reply-header">
+ <span class="reply-author">${reply.author}</span>
+ <span class="reply-date">${reply.date}</span>
+ </div>
+ <div class="reply-content">${reply.content}</div>
+ </div>
+ `).join('')}
+ </div>
+ `;
+ 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();
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4a93c3a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,173 @@
+: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%;
+}
\ No newline at end of file