commit 7fac2dc37e45644ace9d74f15d7e072d77d7724e
Author: root <root@hub.scroll.pub>
Date: 2025-01-08 07:23:34 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..1fb8846
--- /dev/null
+++ b/body.html
@@ -0,0 +1,72 @@
+<header class="header">
+ <div class="container">
+ <h1 class="logo">Chirp</h1>
+ <nav class="nav">
+ <a href="#" class="nav-link">Home</a>
+ <a href="#" class="nav-link">Explore</a>
+ <a href="#" class="nav-link">Notifications</a>
+ <a href="#" class="nav-link">Messages</a>
+ <a href="#" class="nav-link">Profile</a>
+ </nav>
+ <button class="btn-post">Post a Chirp</button>
+ </div>
+</header>
+
+<main class="main">
+ <div class="container">
+ <section class="feed">
+ <article class="chirp">
+ <div class="chirp-header">
+ <img src="avatar1.png" alt="User Avatar" class="avatar">
+ <div class="user-info">
+ <h2 class="username">JohnDoe</h2>
+ <p class="handle">@johndoe</p>
+ </div>
+ </div>
+ <div class="chirp-content">
+ <p>Just had the best coffee ever! ☕ #CoffeeLover #MorningRoutine</p>
+ </div>
+ <div class="chirp-footer">
+ <button class="btn-like">❤️ 12</button>
+ <button class="btn-reply">💬 3</button>
+ <button class="btn-share">🔗</button>
+ </div>
+ </article>
+
+ <article class="chirp">
+ <div class="chirp-header">
+ <img src="avatar2.png" alt="User Avatar" class="avatar">
+ <div class="user-info">
+ <h2 class="username">JaneSmith</h2>
+ <p class="handle">@janesmith</p>
+ </div>
+ </div>
+ <div class="chirp-content">
+ <p>Exploring the city today! 🌆 #Travel #Adventure</p>
+ </div>
+ <div class="chirp-footer">
+ <button class="btn-like">❤️ 25</button>
+ <button class="btn-reply">💬 7</button>
+ <button class="btn-share">🔗</button>
+ </div>
+ </article>
+ </section>
+
+ <aside class="sidebar">
+ <div class="trending">
+ <h3>Trending Now</h3>
+ <ul>
+ <li><a href="#" class="hashtag">#TechNews</a></li>
+ <li><a href="#" class="hashtag">#FitnessGoals</a></li>
+ <li><a href="#" class="hashtag">#Foodie</a></li>
+ </ul>
+ </div>
+ </aside>
+ </div>
+</main>
+
+<footer class="footer">
+ <div class="container">
+ <p>Chirp - Connect with the world, one chirp at a time.</p>
+ </div>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..e74122f
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://chirp.scroll.pub
+metaTags
+editButton /edit.html
+title Chirp - Your Microblogging Haven
+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..e5ef386
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "ad95b690-40d1-42eb-bd82-9d1f9944c4d9",
+ "object": "chat.completion",
+ "created": 1736320775,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nchirp.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://chirp.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Chirp - Your Microblogging Haven\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header class=\"header\">\n <div class=\"container\">\n <h1 class=\"logo\">Chirp</h1>\n <nav class=\"nav\">\n <a href=\"#\" class=\"nav-link\">Home</a>\n <a href=\"#\" class=\"nav-link\">Explore</a>\n <a href=\"#\" class=\"nav-link\">Notifications</a>\n <a href=\"#\" class=\"nav-link\">Messages</a>\n <a href=\"#\" class=\"nav-link\">Profile</a>\n </nav>\n <button class=\"btn-post\">Post a Chirp</button>\n </div>\n</header>\n\n<main class=\"main\">\n <div class=\"container\">\n <section class=\"feed\">\n <article class=\"chirp\">\n <div class=\"chirp-header\">\n <img src=\"avatar1.png\" alt=\"User Avatar\" class=\"avatar\">\n <div class=\"user-info\">\n <h2 class=\"username\">JohnDoe</h2>\n <p class=\"handle\">@johndoe</p>\n </div>\n </div>\n <div class=\"chirp-content\">\n <p>Just had the best coffee ever! ☕ #CoffeeLover #MorningRoutine</p>\n </div>\n <div class=\"chirp-footer\">\n <button class=\"btn-like\">❤️ 12</button>\n <button class=\"btn-reply\">💬 3</button>\n <button class=\"btn-share\">🔗</button>\n </div>\n </article>\n\n <article class=\"chirp\">\n <div class=\"chirp-header\">\n <img src=\"avatar2.png\" alt=\"User Avatar\" class=\"avatar\">\n <div class=\"user-info\">\n <h2 class=\"username\">JaneSmith</h2>\n <p class=\"handle\">@janesmith</p>\n </div>\n </div>\n <div class=\"chirp-content\">\n <p>Exploring the city today! 🌆 #Travel #Adventure</p>\n </div>\n <div class=\"chirp-footer\">\n <button class=\"btn-like\">❤️ 25</button>\n <button class=\"btn-reply\">💬 7</button>\n <button class=\"btn-share\">🔗</button>\n </div>\n </article>\n </section>\n\n <aside class=\"sidebar\">\n <div class=\"trending\">\n <h3>Trending Now</h3>\n <ul>\n <li><a href=\"#\" class=\"hashtag\">#TechNews</a></li>\n <li><a href=\"#\" class=\"hashtag\">#FitnessGoals</a></li>\n <li><a href=\"#\" class=\"hashtag\">#Foodie</a></li>\n </ul>\n </div>\n </aside>\n </div>\n</main>\n\n<footer class=\"footer\">\n <div class=\"container\">\n <p>Chirp - Connect with the world, one chirp at a time.</p>\n </div>\n</footer>\n---style.css---\n:root {\n --primary-color: #1da1f2;\n --secondary-color: #14171a;\n --background-color: #f5f8fa;\n --text-color: #14171a;\n --border-color: #e1e8ed;\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\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n.header {\n background-color: var(--primary-color);\n color: white;\n padding: 20px 0;\n}\n\n.header .logo {\n font-size: 24px;\n font-weight: bold;\n}\n\n.header .nav {\n display: flex;\n gap: 20px;\n}\n\n.header .nav-link {\n color: white;\n text-decoration: none;\n}\n\n.header .btn-post {\n background-color: white;\n color: var(--primary-color);\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n}\n\n.main {\n display: flex;\n gap: 20px;\n padding: 20px 0;\n}\n\n.feed {\n flex: 3;\n}\n\n.sidebar {\n flex: 1;\n}\n\n.chirp {\n background-color: white;\n border: 1px solid var(--border-color);\n border-radius: 10px;\n padding: 20px;\n margin-bottom: 20px;\n}\n\n.chirp-header {\n display: flex;\n align-items: center;\n margin-bottom: 15px;\n}\n\n.avatar {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n margin-right: 10px;\n}\n\n.user-info {\n display: flex;\n flex-direction: column;\n}\n\n.username {\n font-size: 18px;\n font-weight: bold;\n}\n\n.handle {\n font-size: 14px;\n color: #657786;\n}\n\n.chirp-content {\n font-size: 16px;\n margin-bottom: 15px;\n}\n\n.chirp-footer {\n display: flex;\n gap: 15px;\n}\n\n.btn-like, .btn-reply, .btn-share {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n}\n\n.trending {\n background-color: white;\n border: 1px solid var(--border-color);\n border-radius: 10px;\n padding: 20px;\n}\n\n.trending h3 {\n margin-bottom: 15px;\n}\n\n.hashtag {\n color: var(--primary-color);\n text-decoration: none;\n}\n\n.footer {\n text-align: center;\n padding: 20px 0;\n background-color: var(--secondary-color);\n color: white;\n}\n\n@media (max-width: 768px) {\n .main {\n flex-direction: column;\n }\n\n .header .nav {\n flex-direction: column;\n gap: 10px;\n }\n\n .header .btn-post {\n width: 100%;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const chirpFooterButtons = document.querySelectorAll('.chirp-footer button');\n\n chirpFooterButtons.forEach(button => {\n button.addEventListener('click', function() {\n alert(`You clicked on ${this.textContent.trim()}`);\n });\n });\n\n const btnPost = document.querySelector('.btn-post');\n btnPost.addEventListener('click', function() {\n alert('Post a new Chirp!');\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 287,
+ "completion_tokens": 1541,
+ "total_tokens": 1828,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 287
+ },
+ "system_fingerprint": "fp_3a5770e1b4"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..b2e9b83
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# chirp2.scroll.pub
+
+website generated by DeepSeek from prompt: To make a Twitter-like website, it needs to be interactive, with a high UI experience, creative, feature-rich, displaying user avatars and hashtags, user-posted content in an infomercial style, and the whole thing is a sight to behold.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..44b42aa
--- /dev/null
+++ b/script.js
@@ -0,0 +1,14 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const chirpFooterButtons = document.querySelectorAll('.chirp-footer button');
+
+ chirpFooterButtons.forEach(button => {
+ button.addEventListener('click', function() {
+ alert(`You clicked on ${this.textContent.trim()}`);
+ });
+ });
+
+ const btnPost = document.querySelector('.btn-post');
+ btnPost.addEventListener('click', function() {
+ alert('Post a new Chirp!');
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..1f33722
--- /dev/null
+++ b/style.css
@@ -0,0 +1,156 @@
+:root {
+ --primary-color: #1da1f2;
+ --secondary-color: #14171a;
+ --background-color: #f5f8fa;
+ --text-color: #14171a;
+ --border-color: #e1e8ed;
+}
+
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: var(--background-color);
+ color: var(--text-color);
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+.header {
+ background-color: var(--primary-color);
+ color: white;
+ padding: 20px 0;
+}
+
+.header .logo {
+ font-size: 24px;
+ font-weight: bold;
+}
+
+.header .nav {
+ display: flex;
+ gap: 20px;
+}
+
+.header .nav-link {
+ color: white;
+ text-decoration: none;
+}
+
+.header .btn-post {
+ background-color: white;
+ color: var(--primary-color);
+ border: none;
+ padding: 10px 20px;
+ border-radius: 20px;
+ cursor: pointer;
+}
+
+.main {
+ display: flex;
+ gap: 20px;
+ padding: 20px 0;
+}
+
+.feed {
+ flex: 3;
+}
+
+.sidebar {
+ flex: 1;
+}
+
+.chirp {
+ background-color: white;
+ border: 1px solid var(--border-color);
+ border-radius: 10px;
+ padding: 20px;
+ margin-bottom: 20px;
+}
+
+.chirp-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 10px;
+}
+
+.user-info {
+ display: flex;
+ flex-direction: column;
+}
+
+.username {
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.handle {
+ font-size: 14px;
+ color: #657786;
+}
+
+.chirp-content {
+ font-size: 16px;
+ margin-bottom: 15px;
+}
+
+.chirp-footer {
+ display: flex;
+ gap: 15px;
+}
+
+.btn-like, .btn-reply, .btn-share {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+}
+
+.trending {
+ background-color: white;
+ border: 1px solid var(--border-color);
+ border-radius: 10px;
+ padding: 20px;
+}
+
+.trending h3 {
+ margin-bottom: 15px;
+}
+
+.hashtag {
+ color: var(--primary-color);
+ text-decoration: none;
+}
+
+.footer {
+ text-align: center;
+ padding: 20px 0;
+ background-color: var(--secondary-color);
+ color: white;
+}
+
+@media (max-width: 768px) {
+ .main {
+ flex-direction: column;
+ }
+
+ .header .nav {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .header .btn-post {
+ width: 100%;
+ }
+}
\ No newline at end of file