commit 09a9fa8c601cf49b899344767d69943ae6f100b6
Author: root <root@hub.scroll.pub>
Date: 2025-01-02 20:14:50 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..6496795
--- /dev/null
+++ b/body.html
@@ -0,0 +1,24 @@
+<main>
+ <div class="chat-container">
+ <div id="assistant" class="assistant hidden">
+ <div class="assistant-bubble">
+ <div class="assistant-content">
+ <p id="assistant-text">Hi! I'm Clippy 2.0. How can I help you today?</p>
+ </div>
+ <div class="assistant-input">
+ <input type="text" id="user-input" placeholder="Type your message..." aria-label="Chat input">
+ <button id="send-btn" aria-label="Send message">Send</button>
+ </div>
+ </div>
+ <div class="assistant-character">
+ <div class="eye-l"></div>
+ <div class="eye-r"></div>
+ <div class="body"></div>
+ <div class="tail"></div>
+ </div>
+ </div>
+ </div>
+ <button id="toggle-assistant" aria-label="Toggle assistant">
+ <span class="icon">💬</span>
+ </button>
+</main>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..3f0edcd
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://clipchat.scroll.pub
+metaTags
+editButton /edit.html
+title ClipChat - Your Friendly Web Assistant
+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..c735fab
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01FuFUqNf23eYaaZG1Z9aGhU",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a fun and interactive website with a Clippy-like chat assistant.\n\n---domain---\nclipchat.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://clipchat.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ClipChat - Your Friendly Web Assistant\nstyle.css\nbody.html\nscript.js\n---body.html---\n<main>\n <div class=\"chat-container\">\n <div id=\"assistant\" class=\"assistant hidden\">\n <div class=\"assistant-bubble\">\n <div class=\"assistant-content\">\n <p id=\"assistant-text\">Hi! I'm Clippy 2.0. How can I help you today?</p>\n </div>\n <div class=\"assistant-input\">\n <input type=\"text\" id=\"user-input\" placeholder=\"Type your message...\" aria-label=\"Chat input\">\n <button id=\"send-btn\" aria-label=\"Send message\">Send</button>\n </div>\n </div>\n <div class=\"assistant-character\">\n <div class=\"eye-l\"></div>\n <div class=\"eye-r\"></div>\n <div class=\"body\"></div>\n <div class=\"tail\"></div>\n </div>\n </div>\n </div>\n <button id=\"toggle-assistant\" aria-label=\"Toggle assistant\">\n <span class=\"icon\">💬</span>\n </button>\n</main>\n---style.css---\n:root {\n --primary: #4a90e2;\n --background: #f5f7fa;\n --text: #2c3e50;\n --shadow: rgba(0, 0, 0, 0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n min-height: 100vh;\n}\n\n.chat-container {\n position: fixed;\n bottom: 80px;\n right: 20px;\n z-index: 1000;\n}\n\n.assistant {\n display: flex;\n align-items: flex-end;\n transform-origin: bottom right;\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.assistant.hidden {\n transform: scale(0);\n opacity: 0;\n}\n\n.assistant-bubble {\n background: white;\n border-radius: 20px;\n padding: 20px;\n margin-right: 15px;\n box-shadow: 0 10px 25px var(--shadow);\n width: 300px;\n}\n\n.assistant-content {\n margin-bottom: 15px;\n}\n\n.assistant-input {\n display: flex;\n gap: 10px;\n}\n\n#user-input {\n flex: 1;\n padding: 8px 12px;\n border: 2px solid var(--primary);\n border-radius: 20px;\n outline: none;\n font-size: 14px;\n}\n\n#send-btn {\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 20px;\n padding: 8px 15px;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n#send-btn:hover {\n transform: scale(1.05);\n}\n\n.assistant-character {\n position: relative;\n width: 60px;\n height: 80px;\n}\n\n.body {\n position: absolute;\n bottom: 0;\n width: 40px;\n height: 60px;\n background: var(--primary);\n border-radius: 20px;\n transform: skew(-10deg);\n}\n\n.eye-l, .eye-r {\n position: absolute;\n width: 8px;\n height: 8px;\n background: white;\n border-radius: 50%;\n top: 20px;\n animation: blink 3s infinite;\n}\n\n.eye-l {\n left: 10px;\n}\n\n.eye-r {\n left: 25px;\n}\n\n.tail {\n position: absolute;\n bottom: 10px;\n left: -5px;\n width: 20px;\n height: 20px;\n background: var(--primary);\n border-radius: 50%;\n animation: wiggle 2s infinite;\n}\n\n#toggle-assistant {\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: var(--primary);\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n box-shadow: 0 5px 15px var(--shadow);\n transition: transform 0.3s;\n z-index: 1001;\n}\n\n#toggle-assistant:hover {\n transform: scale(1.1);\n}\n\n@keyframes blink {\n 0%, 90%, 100% { transform: scaleY(1); }\n 95% { transform: scaleY(0); }\n}\n\n@keyframes wiggle {\n 0%, 100% { transform: rotate(0deg); }\n 50% { transform: rotate(-15deg); }\n}\n\n@media (max-width: 480px) {\n .assistant-bubble {\n width: calc(100vw - 100px);\n }\n \n .chat-container {\n right: 10px;\n left: 10px;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const assistant = document.getElementById('assistant');\n const toggleBtn = document.getElementById('toggle-assistant');\n const sendBtn = document.getElementById('send-btn');\n const userInput = document.getElementById('user-input');\n const assistantText = document.getElementById('assistant-text');\n\n const responses = [\n \"I see you're trying to have a conversation! Need any help?\",\n \"That's interesting! Tell me more about it.\",\n \"I'm here to assist you, even though I'm not the original Clippy!\",\n \"Have you tried turning it off and on again? Just kidding!\",\n \"That's a great question! Let me think about it...\",\n \"I'm not as annoying as the original Clippy, I promise!\",\n ];\n\n toggleBtn.addEventListener('click', () => {\n assistant.classList.toggle('hidden');\n });\n\n const sendMessage = () => {\n const message = userInput.value.trim();\n if (message) {\n const response = responses[Math.floor(Math.random() * responses.length)];\n assistantText.textContent = response;\n userInput.value = '';\n }\n };\n\n sendBtn.addEventListener('click', sendMessage);\n userInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n sendMessage();\n }\n });\n\n // Animate character periodically\n setInterval(() => {\n const character = document.querySelector('.assistant-character');\n character.style.transform = 'translateY(-5px)';\n setTimeout(() => {\n character.style.transform = 'translateY(0)';\n }, 200);\n }, 5000);\n});\n---end---\n\nThis creates a delightful chat interface with a modern, animated assistant character. Features include:\n\n1. Smooth animations and transitions\n2. Responsive design that works on all devices\n3. Cute animated character with blinking eyes and wiggling tail\n4. Clean, accessible interface with proper ARIA labels\n5. Modern styling with CSS variables\n6. Simple but engaging interaction system\n7. Floating chat bubble design\n8. Toggle button to show/hide the assistant\n\nThe character design is minimal but charming, with subtle animations that make it feel alive. The color scheme is professional yet friendly, and the entire interface follows modern web design principles while maintaining simplicity."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 284,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2068
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..3162287
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# clipchat.scroll.pub
+Website generated by Claude from prompt: a website iwht a clippy like popup that i can chat to
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f0fe72d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,45 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const assistant = document.getElementById('assistant');
+ const toggleBtn = document.getElementById('toggle-assistant');
+ const sendBtn = document.getElementById('send-btn');
+ const userInput = document.getElementById('user-input');
+ const assistantText = document.getElementById('assistant-text');
+
+ const responses = [
+ "I see you're trying to have a conversation! Need any help?",
+ "That's interesting! Tell me more about it.",
+ "I'm here to assist you, even though I'm not the original Clippy!",
+ "Have you tried turning it off and on again? Just kidding!",
+ "That's a great question! Let me think about it...",
+ "I'm not as annoying as the original Clippy, I promise!",
+ ];
+
+ toggleBtn.addEventListener('click', () => {
+ assistant.classList.toggle('hidden');
+ });
+
+ const sendMessage = () => {
+ const message = userInput.value.trim();
+ if (message) {
+ const response = responses[Math.floor(Math.random() * responses.length)];
+ assistantText.textContent = response;
+ userInput.value = '';
+ }
+ };
+
+ sendBtn.addEventListener('click', sendMessage);
+ userInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ sendMessage();
+ }
+ });
+
+ // Animate character periodically
+ setInterval(() => {
+ const character = document.querySelector('.assistant-character');
+ character.style.transform = 'translateY(-5px)';
+ setTimeout(() => {
+ character.style.transform = 'translateY(0)';
+ }, 200);
+ }, 5000);
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..445aabc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,167 @@
+:root {
+ --primary: #4a90e2;
+ --background: #f5f7fa;
+ --text: #2c3e50;
+ --shadow: rgba(0, 0, 0, 0.1);
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ background: var(--background);
+ color: var(--text);
+ line-height: 1.6;
+ min-height: 100vh;
+}
+
+.chat-container {
+ position: fixed;
+ bottom: 80px;
+ right: 20px;
+ z-index: 1000;
+}
+
+.assistant {
+ display: flex;
+ align-items: flex-end;
+ transform-origin: bottom right;
+ transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.assistant.hidden {
+ transform: scale(0);
+ opacity: 0;
+}
+
+.assistant-bubble {
+ background: white;
+ border-radius: 20px;
+ padding: 20px;
+ margin-right: 15px;
+ box-shadow: 0 10px 25px var(--shadow);
+ width: 300px;
+}
+
+.assistant-content {
+ margin-bottom: 15px;
+}
+
+.assistant-input {
+ display: flex;
+ gap: 10px;
+}
+
+#user-input {
+ flex: 1;
+ padding: 8px 12px;
+ border: 2px solid var(--primary);
+ border-radius: 20px;
+ outline: none;
+ font-size: 14px;
+}
+
+#send-btn {
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 20px;
+ padding: 8px 15px;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+#send-btn:hover {
+ transform: scale(1.05);
+}
+
+.assistant-character {
+ position: relative;
+ width: 60px;
+ height: 80px;
+}
+
+.body {
+ position: absolute;
+ bottom: 0;
+ width: 40px;
+ height: 60px;
+ background: var(--primary);
+ border-radius: 20px;
+ transform: skew(-10deg);
+}
+
+.eye-l, .eye-r {
+ position: absolute;
+ width: 8px;
+ height: 8px;
+ background: white;
+ border-radius: 50%;
+ top: 20px;
+ animation: blink 3s infinite;
+}
+
+.eye-l {
+ left: 10px;
+}
+
+.eye-r {
+ left: 25px;
+}
+
+.tail {
+ position: absolute;
+ bottom: 10px;
+ left: -5px;
+ width: 20px;
+ height: 20px;
+ background: var(--primary);
+ border-radius: 50%;
+ animation: wiggle 2s infinite;
+}
+
+#toggle-assistant {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: var(--primary);
+ border: none;
+ color: white;
+ font-size: 24px;
+ cursor: pointer;
+ box-shadow: 0 5px 15px var(--shadow);
+ transition: transform 0.3s;
+ z-index: 1001;
+}
+
+#toggle-assistant:hover {
+ transform: scale(1.1);
+}
+
+@keyframes blink {
+ 0%, 90%, 100% { transform: scaleY(1); }
+ 95% { transform: scaleY(0); }
+}
+
+@keyframes wiggle {
+ 0%, 100% { transform: rotate(0deg); }
+ 50% { transform: rotate(-15deg); }
+}
+
+@media (max-width: 480px) {
+ .assistant-bubble {
+ width: calc(100vw - 100px);
+ }
+
+ .chat-container {
+ right: 10px;
+ left: 10px;
+ }
+}
\ No newline at end of file