Last 10 Commits for ircchat.scroll.pub

commit a0c04271ff9259ec37d7da7c9bed01af2b1a496d Author: root <root@hub.scroll.pub> Date: 2024-12-27 20:36:30 +0000 Subject: Initial commit diff --git a/.log.txt b/.log.txt new file mode 100644 index 0000000..7b7cfb1 --- /dev/null +++ b/.log.txt @@ -0,0 +1,3 @@ +read ircchat.scroll.pub https://hub.scroll.pub/edit.html?folderName=ircchat.scroll.pub 1735331783309 ::ffff:148.71.18.163 0.0 200 Chrome.120 WindowsNT.10.0 +read ircchat.scroll.pub https://hub.scroll.pub/ls.json?folderName=ircchat.scroll.pub 1735331784719 ::ffff:148.71.18.163 0.0 200 Chrome.120 WindowsNT.10.0 +read ircchat.scroll.pub https://hub.scroll.pub/readFile.htm?folderName=ircchat.scroll.pub&filePath=ircchat.scroll.pub%2Findex.scroll 1735331784902 ::ffff:148.71.18.163 0.0 200 Chrome.120 WindowsNT.10.0 diff --git a/.stats.json b/.stats.json new file mode 100644 index 0000000..cde4e2d --- /dev/null +++ b/.stats.json @@ -0,0 +1,21 @@ +{ + "files": [ + "body.html", + "index.scroll", + "prompt.json", + "readme.scroll", + "script.js", + "style.css" + ], + "hasSslCert": false, + "stats": { + "folder": "ircchat.scroll.pub", + "folderLink": "http://ircchat.scroll.pub", + "created": "2024-12-27T20:36:22.000Z", + "revised": "2024-12-27T20:36:22.000Z", + "files": 6, + "mb": 1, + "revisions": 1, + "hash": "680da57d1e" + } +} \ No newline at end of file diff --git a/body.html b/body.html index 4ebd7f4..cf4d6c7 100644 --- a/body.html +++ b/body.html @@ -1,34 +1,36 @@ <header> - <h1>IRCChat</h1> - <p>Your modern, sleek IRC client</p> + <nav class="top-nav"> + <div class="logo">WebIRC</div> + <div class="connection-status" id="connectionStatus">Disconnected</div> + </nav> </header> -<main> - <section id="connection"> - <h2>Connect to Server</h2> - <form id="connect-form"> - <label for="server">Server:</label> - <input type="text" id="server" name="server" placeholder="irc.example.com" required> - - <label for="port">Port:</label> - <input type="number" id="port" name="port" value="6667" required> - - <label for="nickname">Nickname:</label> - <input type="text" id="nickname" name="nickname" placeholder="YourNickname" required> - - <button type="submit">Connect</button> - </form> - </section> +<main class="container"> + <aside class="sidebar"> + <div class="server-info"> + <input type="text" id="serverInput" placeholder="IRC Server" value="irc.libera.chat"> + <input type="text" id="nickInput" placeholder="Nickname"> + <button id="connectButton">Connect</button> + </div> + <div class="channel-list" id="channelList"> + <h3>Channels</h3> + <div class="channels" id="channels"></div> + </div> + <div class="user-list" id="userList"> + <h3>Users</h3> + <div class="users" id="users"></div> + </div> + </aside> - <section id="chat" class="hidden"> - <div id="chat-window"></div> - <form id="message-form"> - <input type="text" id="message-input" placeholder="Type your message here..." required> - <button type="submit">Send</button> - </form> + <section class="chat-area"> + <div class="messages" id="messages"></div> + <div class="input-area"> + <input type="text" id="messageInput" placeholder="Type your message..."> + <button id="sendButton">Send</button> + </div> </section> </main> <footer> - <p>Enjoy seamless IRC communication with IRCChat</p> -</footer> \ No newline at end of file + <p>Built with modern web technologies</p> +</footer> diff --git a/index.html b/index.html new file mode 100644 index 0000000..e98557a --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>IRCChat - Modern IRC Client</title> + <script>/* This HTML was generated by 📜 Scroll v164.7.0. https://scroll.pub */</script> + <style>@media print {.doNotPrint {display: none !important;}}</style> + <link rel="canonical" href="https://ircchat.scroll.pub/index.html"> + <meta name="viewport" content="width=device-width,initial-scale=1"> + <meta name="description" content=""> + <meta name="generator" content="Scroll v164.7.0"> + <meta property="og:title" content="IRCChat - Modern IRC Client"> + <meta property="og:description" content=""> + <meta property="og:image" content=""> + + <link rel="source" type="application/git" title="Source Code Repository" href="index.scroll"> + + <meta name="twitter:card" content="summary_large_image"> +</head> +<body> +<style>.abstractIconButtonParser {position:absolute;top:0.25rem; }.abstractIconButtonParser svg {fill: rgba(204,204,204,.8);width:1.875rem;height:1.875rem; padding: 0 7px;} .abstractIconButtonParser:hover svg{fill: #333;}</style><a href="/edit.html" class="doNotPrint abstractIconButtonParser" style="right:2rem;"><svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z"/></svg></a> +<link rel="stylesheet" type="text/css" href="style.css"> +<header> + <h1>IRCChat</h1> + <p>Your modern, sleek IRC client</p> +</header> + +<main> + <section id="connection"> + <h2>Connect to Server</h2> + <form id="connect-form"> + <label for="server">Server:</label> + <input type="text" id="server" name="server" placeholder="irc.example.com" required> + + <label for="port">Port:</label> + <input type="number" id="port" name="port" value="6667" required> + + <label for="nickname">Nickname:</label> + <input type="text" id="nickname" name="nickname" placeholder="YourNickname" required> + + <button type="submit">Connect</button> + </form> + </section> + + <section id="chat" class="hidden"> + <div id="chat-window"></div> + <form id="message-form"> + <input type="text" id="message-input" placeholder="Type your message here..." required> + <button type="submit">Send</button> + </form> + </section> +</main> + +<footer> + <p>Enjoy seamless IRC communication with IRCChat</p> +</footer> +<script src="script.js"></script> +</body> +</html> \ No newline at end of file diff --git a/index.scroll b/index.scroll index 89250ff..fd5ded9 100644 --- a/index.scroll +++ b/index.scroll @@ -2,7 +2,7 @@ buildHtml baseUrl https://ircchat.scroll.pub metaTags editButton /edit.html -title IRCChat - Modern IRC Client +title WebIRC - Modern IRC Client style.css body.html -script.js \ No newline at end of file +script.js diff --git a/prompt.json b/prompt.json index 193212e..c887c0f 100644 --- a/prompt.json +++ b/prompt.json @@ -1,25 +1,20 @@ { - "id": "fcda42be-7b1d-4ef8-b1a0-5514fe5e74a0", - "object": "chat.completion", - "created": 1735331767, - "model": "deepseek-chat", - "choices": [ + "id": "msg_01PrboDopW2xfrSwXzHQbmTM", + "type": "message", + "role": "assistant", + "model": "claude-3-5-sonnet-20241022", + "content": [ { - "index": 0, - "message": { - "role": "assistant", - "content": "---domain---\nircchat.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://ircchat.scroll.pub\nmetaTags\neditButton /edit.html\ntitle IRCChat - Modern IRC Client\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>IRCChat</h1>\n <p>Your modern, sleek IRC client</p>\n</header>\n\n<main>\n <section id=\"connection\">\n <h2>Connect to Server</h2>\n <form id=\"connect-form\">\n <label for=\"server\">Server:</label>\n <input type=\"text\" id=\"server\" name=\"server\" placeholder=\"irc.example.com\" required>\n \n <label for=\"port\">Port:</label>\n <input type=\"number\" id=\"port\" name=\"port\" value=\"6667\" required>\n \n <label for=\"nickname\">Nickname:</label>\n <input type=\"text\" id=\"nickname\" name=\"nickname\" placeholder=\"YourNickname\" required>\n \n <button type=\"submit\">Connect</button>\n </form>\n </section>\n\n <section id=\"chat\" class=\"hidden\">\n <div id=\"chat-window\"></div>\n <form id=\"message-form\">\n <input type=\"text\" id=\"message-input\" placeholder=\"Type your message here...\" required>\n <button type=\"submit\">Send</button>\n </form>\n </section>\n</main>\n\n<footer>\n <p>Enjoy seamless IRC communication with IRCChat</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #3498db;\n --secondary-color: #2ecc71;\n --background-color: #f4f4f4;\n --text-color: #333;\n --border-color: #ddd;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nheader p {\n margin: 0.5rem 0 0;\n font-size: 1.2rem;\n}\n\nmain {\n padding: 2rem;\n max-width: 800px;\n margin: 0 auto;\n}\n\nsection {\n background-color: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\nh2 {\n color: var(--primary-color);\n margin-top: 0;\n}\n\nform {\n display: grid;\n gap: 1rem;\n}\n\nlabel {\n font-weight: bold;\n}\n\ninput, button {\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n font-size: 1rem;\n}\n\nbutton {\n background-color: var(--primary-color);\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n#chat-window {\n height: 300px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n padding: 1rem;\n overflow-y: auto;\n margin-bottom: 1rem;\n background-color: #f9f9f9;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n header h1 {\n font-size: 2rem;\n }\n\n header p {\n font-size: 1rem;\n }\n\n main {\n padding: 1rem;\n }\n\n section {\n padding: 1rem;\n }\n}\n---script.js---\ndocument.getElementById('connect-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const server = document.getElementById('server').value;\n const port = document.getElementById('port').value;\n const nickname = document.getElementById('nickname').value;\n \n // Simulate connection\n setTimeout(() => {\n document.getElementById('connection').classList.add('hidden');\n document.getElementById('chat').classList.remove('hidden');\n document.getElementById('chat-window').innerHTML = `<p>Connected to ${server}:${port} as ${nickname}</p>`;\n }, 1000);\n});\n\ndocument.getElementById('message-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const message = document.getElementById('message-input').value;\n const chatWindow = document.getElementById('chat-window');\n \n chatWindow.innerHTML += `<p><strong>You:</strong> ${message}</p>`;\n chatWindow.scrollTop = chatWindow.scrollHeight;\n \n document.getElementById('message-input').value = '';\n});\n---end---" - }, - "logprobs": null, - "finish_reason": "stop" + "type": "text", + "text": "I'll help create a modern IRC web client. For the domain, I suggest:\n\n---domain---\nircchat.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://ircchat.scroll.pub\nmetaTags\neditButton /edit.html\ntitle WebIRC - Modern IRC Client\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <nav class=\"top-nav\">\n <div class=\"logo\">WebIRC</div>\n <div class=\"connection-status\" id=\"connectionStatus\">Disconnected</div>\n </nav>\n</header>\n\n<main class=\"container\">\n <aside class=\"sidebar\">\n <div class=\"server-info\">\n <input type=\"text\" id=\"serverInput\" placeholder=\"IRC Server\" value=\"irc.libera.chat\">\n <input type=\"text\" id=\"nickInput\" placeholder=\"Nickname\">\n <button id=\"connectButton\">Connect</button>\n </div>\n <div class=\"channel-list\" id=\"channelList\">\n <h3>Channels</h3>\n <div class=\"channels\" id=\"channels\"></div>\n </div>\n <div class=\"user-list\" id=\"userList\">\n <h3>Users</h3>\n <div class=\"users\" id=\"users\"></div>\n </div>\n </aside>\n\n <section class=\"chat-area\">\n <div class=\"messages\" id=\"messages\"></div>\n <div class=\"input-area\">\n <input type=\"text\" id=\"messageInput\" placeholder=\"Type your message...\">\n <button id=\"sendButton\">Send</button>\n </div>\n </section>\n</main>\n\n<footer>\n <p>Built with modern web technologies</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #34495e;\n --accent-color: #3498db;\n --text-color: #ecf0f1;\n --border-color: #465669;\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, Oxygen, Ubuntu, sans-serif;\n background: var(--primary-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\n.top-nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 2rem;\n background: var(--secondary-color);\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n color: var(--accent-color);\n}\n\n.connection-status {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n background: #e74c3c;\n font-size: 0.9rem;\n}\n\n.connection-status.connected {\n background: #2ecc71;\n}\n\n.container {\n display: grid;\n grid-template-columns: 250px 1fr;\n height: calc(100vh - 120px);\n gap: 1rem;\n padding: 1rem;\n}\n\n.sidebar {\n background: var(--secondary-color);\n border-radius: 8px;\n padding: 1rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput[type=\"text\"] {\n width: 100%;\n padding: 0.8rem;\n margin: 0.5rem 0;\n border: none;\n border-radius: 4px;\n background: var(--primary-color);\n color: var(--text-color);\n}\n\nbutton {\n width: 100%;\n padding: 0.8rem;\n border: none;\n border-radius: 4px;\n background: var(--accent-color);\n color: white;\n cursor: pointer;\n transition: background 0.3s ease;\n}\n\nbutton:hover {\n background: #2980b9;\n}\n\n.chat-area {\n background: var(--secondary-color);\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n}\n\n.messages {\n flex-grow: 1;\n padding: 1rem;\n overflow-y: auto;\n}\n\n.input-area {\n display: flex;\n gap: 0.5rem;\n padding: 1rem;\n}\n\n.input-area input {\n flex-grow: 1;\n}\n\n.input-area button {\n width: auto;\n padding: 0.8rem 1.5rem;\n}\n\n.channel-list, .user-list {\n background: var(--primary-color);\n border-radius: 4px;\n padding: 0.5rem;\n}\n\nh3 {\n margin-bottom: 0.5rem;\n font-size: 1rem;\n color: var(--accent-color);\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--secondary-color);\n}\n\n@media (max-width: 768px) {\n .container {\n grid-template-columns: 1fr;\n }\n \n .sidebar {\n height: auto;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const connectButton = document.getElementById('connectButton');\n const sendButton = document.getElementById('sendButton');\n const messageInput = document.getElementById('messageInput');\n const messages = document.getElementById('messages');\n const connectionStatus = document.getElementById('connectionStatus');\n const serverInput = document.getElementById('serverInput');\n const nickInput = document.getElementById('nickInput');\n\n let websocket = null;\n\n connectButton.addEventListener('click', () => {\n if (websocket && websocket.readyState === WebSocket.OPEN) {\n websocket.close();\n connectButton.textContent = 'Connect';\n connectionStatus.textContent = 'Disconnected';\n connectionStatus.classList.remove('connected');\n return;\n }\n\n const server = serverInput.value;\n const nickname = nickInput.value;\n\n if (!server || !nickname) {\n addMessage('System', 'Please enter server and nickname');\n return;\n }\n\n // In a real implementation, we would connect to an IRC server here\n // This is a mock implementation for demonstration\n mockConnect(server, nickname);\n });\n\n sendButton.addEventListener('click', sendMessage);\n messageInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') sendMessage();\n });\n\n function sendMessage() {\n if (!messageInput.value.trim()) return;\n \n if (websocket && websocket.readyState === WebSocket.OPEN) {\n addMessage(nickInput.value, messageInput.value);\n messageInput.value = '';\n } else {\n addMessage('System', 'Not connected to server');\n }\n }\n\n function addMessage(sender, text) {\n const messageDiv = document.createElement('div');\n messageDiv.innerHTML = `<strong>${sender}:</strong> ${text}`;\n messages.appendChild(messageDiv);\n messages.scrollTop = messages.scrollHeight;\n }\n\n function mockConnect(server, nickname) {\n connectButton.textContent = 'Disconnect';\n connectionStatus.textContent = 'Connected';\n connectionStatus.classList.add('connected');\n addMessage('System', `Connected to ${server} as ${nickname}`);\n \n // Mock WebSocket connection\n websocket = {\n readyState: WebSocket.OPEN,\n close: function() {\n this.readyState = WebSocket.CLOSED;\n addMessage('System', 'Disconnected from server');\n }\n };\n }\n});\n\n---end---\n\nThis implementation provides a modern, responsive IRC client interface with a clean design. Key features include:\n\n1. Server connection management\n2. Channel and user lists\n3. Message input and display\n4. Responsive design for mobile devices\n5. Modern color scheme and UI elements\n6. Clean, semantic HTML structure\n7. Extensive CSS styling with CSS variables\n8. Mock functionality for demonstration purposes\n\nNote that this is a frontend-only implementation. In a real-world scenario, you would need to implement proper WebSocket connections to IRC servers, handle IRC protocols, and manage real-time communications. The current implementation includes mock functionality to demonstrate the UI/UX." } ], + "stop_reason": "end_turn", + "stop_sequence": null, "usage": { - "prompt_tokens": 263, - "completion_tokens": 1167, - "total_tokens": 1430, - "prompt_cache_hit_tokens": 0, - "prompt_cache_miss_tokens": 263 - }, - "system_fingerprint": "fp_f1afce2943" + "input_tokens": 300, + "cache_creation_input_tokens": 0, + "cache_read_input_tokens": 0, + "output_tokens": 2187 + } } \ No newline at end of file diff --git a/readme.scroll b/readme.scroll index abb4744..392a5e4 100644 --- a/readme.scroll +++ b/readme.scroll @@ -1,2 +1,2 @@ # ircchat.scroll.pub -Website generated by DeepSeek from prompt: Build a mirc clone that allows you to connect to servers and has all the normal functionalities needed for IRC use. Make it sleek and modern \ No newline at end of file +Website generated by Claude from prompt: Build a mirc clone that allows you to connect to servers and has all the normal functionalities needed for IRC use. Make it sleek and modern \ No newline at end of file diff --git a/script.js b/script.js index b372ee9..3daf0e8 100644 --- a/script.js +++ b/script.js @@ -1,26 +1,72 @@ -document.getElementById('connect-form').addEventListener('submit', function(e) { - e.preventDefault(); - - const server = document.getElementById('server').value; - const port = document.getElementById('port').value; - const nickname = document.getElementById('nickname').value; - - // Simulate connection - setTimeout(() => { - document.getElementById('connection').classList.add('hidden'); - document.getElementById('chat').classList.remove('hidden'); - document.getElementById('chat-window').innerHTML = `<p>Connected to ${server}:${port} as ${nickname}</p>`; - }, 1000); -}); +document.addEventListener('DOMContentLoaded', () => { + const connectButton = document.getElementById('connectButton'); + const sendButton = document.getElementById('sendButton'); + const messageInput = document.getElementById('messageInput'); + const messages = document.getElementById('messages'); + const connectionStatus = document.getElementById('connectionStatus'); + const serverInput = document.getElementById('serverInput'); + const nickInput = document.getElementById('nickInput'); + + let websocket = null; + + connectButton.addEventListener('click', () => { + if (websocket && websocket.readyState === WebSocket.OPEN) { + websocket.close(); + connectButton.textContent = 'Connect'; + connectionStatus.textContent = 'Disconnected'; + connectionStatus.classList.remove('connected'); + return; + } + + const server = serverInput.value; + const nickname = nickInput.value; + + if (!server || !nickname) { + addMessage('System', 'Please enter server and nickname'); + return; + } -document.getElementById('message-form').addEventListener('submit', function(e) { - e.preventDefault(); - - const message = document.getElementById('message-input').value; - const chatWindow = document.getElementById('chat-window'); - - chatWindow.innerHTML += `<p><strong>You:</strong> ${message}</p>`; - chatWindow.scrollTop = chatWindow.scrollHeight; - - document.getElementById('message-input').value = ''; -}); \ No newline at end of file + // In a real implementation, we would connect to an IRC server here + // This is a mock implementation for demonstration + mockConnect(server, nickname); + }); + + sendButton.addEventListener('click', sendMessage); + messageInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') sendMessage(); + }); + + function sendMessage() { + if (!messageInput.value.trim()) return; + + if (websocket && websocket.readyState === WebSocket.OPEN) { + addMessage(nickInput.value, messageInput.value); + messageInput.value = ''; + } else { + addMessage('System', 'Not connected to server'); + } + } + + function addMessage(sender, text) { + const messageDiv = document.createElement('div'); + messageDiv.innerHTML = `<strong>${sender}:</strong> ${text}`; + messages.appendChild(messageDiv); + messages.scrollTop = messages.scrollHeight; + } + + function mockConnect(server, nickname) { + connectButton.textContent = 'Disconnect'; + connectionStatus.textContent = 'Connected'; + connectionStatus.classList.add('connected'); + addMessage('System', `Connected to ${server} as ${nickname}`); + + // Mock WebSocket connection + websocket = { + readyState: WebSocket.OPEN, + close: function() { + this.readyState = WebSocket.CLOSED; + addMessage('System', 'Disconnected from server'); + } + }; + } +}); diff --git a/style.css b/style.css index ad34b22..28879e9 100644 --- a/style.css +++ b/style.css @@ -1,120 +1,144 @@ :root { - --primary-color: #3498db; - --secondary-color: #2ecc71; - --background-color: #f4f4f4; - --text-color: #333; - --border-color: #ddd; + --primary-color: #2c3e50; + --secondary-color: #34495e; + --accent-color: #3498db; + --text-color: #ecf0f1; + --border-color: #465669; } -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +* { margin: 0; padding: 0; - background-color: var(--background-color); - color: var(--text-color); - line-height: 1.6; -} - -header { - background-color: var(--primary-color); - color: white; - padding: 2rem; - text-align: center; + box-sizing: border-box; } -header h1 { - margin: 0; - font-size: 2.5rem; +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + background: var(--primary-color); + color: var(--text-color); + line-height: 1.6; } -header p { - margin: 0.5rem 0 0; - font-size: 1.2rem; +.top-nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 2rem; + background: var(--secondary-color); + box-shadow: 0 2px 5px rgba(0,0,0,0.2); } -main { - padding: 2rem; - max-width: 800px; - margin: 0 auto; +.logo { + font-size: 1.5rem; + font-weight: bold; + color: var(--accent-color); } -section { - background-color: white; - padding: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-bottom: 2rem; +.connection-status { + padding: 0.5rem 1rem; + border-radius: 20px; + background: #e74c3c; + font-size: 0.9rem; } -h2 { - color: var(--primary-color); - margin-top: 0; +.connection-status.connected { + background: #2ecc71; } -form { +.container { display: grid; + grid-template-columns: 250px 1fr; + height: calc(100vh - 120px); gap: 1rem; + padding: 1rem; } -label { - font-weight: bold; +.sidebar { + background: var(--secondary-color); + border-radius: 8px; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; } -input, button { - padding: 0.5rem; - border: 1px solid var(--border-color); +input[type="text"] { + width: 100%; + padding: 0.8rem; + margin: 0.5rem 0; + border: none; border-radius: 4px; - font-size: 1rem; + background: var(--primary-color); + color: var(--text-color); } button { - background-color: var(--primary-color); - color: white; + width: 100%; + padding: 0.8rem; border: none; + border-radius: 4px; + background: var(--accent-color); + color: white; cursor: pointer; - transition: background-color 0.3s ease; + transition: background 0.3s ease; } button:hover { - background-color: #2980b9; + background: #2980b9; } -#chat-window { - height: 300px; - border: 1px solid var(--border-color); - border-radius: 4px; +.chat-area { + background: var(--secondary-color); + border-radius: 8px; + display: flex; + flex-direction: column; +} + +.messages { + flex-grow: 1; padding: 1rem; overflow-y: auto; - margin-bottom: 1rem; - background-color: #f9f9f9; } -.hidden { - display: none; +.input-area { + display: flex; + gap: 0.5rem; + padding: 1rem; +} + +.input-area input { + flex-grow: 1; +} + +.input-area button { + width: auto; + padding: 0.8rem 1.5rem; +} + +.channel-list, .user-list { + background: var(--primary-color); + border-radius: 4px; + padding: 0.5rem; +} + +h3 { + margin-bottom: 0.5rem; + font-size: 1rem; + color: var(--accent-color); } footer { text-align: center; padding: 1rem; - background-color: var(--primary-color); - color: white; - margin-top: 2rem; + background: var(--secondary-color); } -@media (max-width: 600px) { - header h1 { - font-size: 2rem; +@media (max-width: 768px) { + .container { + grid-template-columns: 1fr; } - - header p { - font-size: 1rem; - } - - main { - padding: 1rem; + + .sidebar { + height: auto; } - - section { - padding: 1rem; - } -} \ No newline at end of file +}

commit 680da57d1e217c15263a89d91ea3e9ac96edbe1a Author: root <root@hub.scroll.pub> Date: 2024-12-27 20:36:22 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..4ebd7f4 --- /dev/null +++ b/body.html @@ -0,0 +1,34 @@ +<header> + <h1>IRCChat</h1> + <p>Your modern, sleek IRC client</p> +</header> + +<main> + <section id="connection"> + <h2>Connect to Server</h2> + <form id="connect-form"> + <label for="server">Server:</label> + <input type="text" id="server" name="server" placeholder="irc.example.com" required> + + <label for="port">Port:</label> + <input type="number" id="port" name="port" value="6667" required> + + <label for="nickname">Nickname:</label> + <input type="text" id="nickname" name="nickname" placeholder="YourNickname" required> + + <button type="submit">Connect</button> + </form> + </section> + + <section id="chat" class="hidden"> + <div id="chat-window"></div> + <form id="message-form"> + <input type="text" id="message-input" placeholder="Type your message here..." required> + <button type="submit">Send</button> + </form> + </section> +</main> + +<footer> + <p>Enjoy seamless IRC communication with IRCChat</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..89250ff --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://ircchat.scroll.pub +metaTags +editButton /edit.html +title IRCChat - Modern IRC Client +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..193212e --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "fcda42be-7b1d-4ef8-b1a0-5514fe5e74a0", + "object": "chat.completion", + "created": 1735331767, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nircchat.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://ircchat.scroll.pub\nmetaTags\neditButton /edit.html\ntitle IRCChat - Modern IRC Client\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>IRCChat</h1>\n <p>Your modern, sleek IRC client</p>\n</header>\n\n<main>\n <section id=\"connection\">\n <h2>Connect to Server</h2>\n <form id=\"connect-form\">\n <label for=\"server\">Server:</label>\n <input type=\"text\" id=\"server\" name=\"server\" placeholder=\"irc.example.com\" required>\n \n <label for=\"port\">Port:</label>\n <input type=\"number\" id=\"port\" name=\"port\" value=\"6667\" required>\n \n <label for=\"nickname\">Nickname:</label>\n <input type=\"text\" id=\"nickname\" name=\"nickname\" placeholder=\"YourNickname\" required>\n \n <button type=\"submit\">Connect</button>\n </form>\n </section>\n\n <section id=\"chat\" class=\"hidden\">\n <div id=\"chat-window\"></div>\n <form id=\"message-form\">\n <input type=\"text\" id=\"message-input\" placeholder=\"Type your message here...\" required>\n <button type=\"submit\">Send</button>\n </form>\n </section>\n</main>\n\n<footer>\n <p>Enjoy seamless IRC communication with IRCChat</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #3498db;\n --secondary-color: #2ecc71;\n --background-color: #f4f4f4;\n --text-color: #333;\n --border-color: #ddd;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nheader p {\n margin: 0.5rem 0 0;\n font-size: 1.2rem;\n}\n\nmain {\n padding: 2rem;\n max-width: 800px;\n margin: 0 auto;\n}\n\nsection {\n background-color: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\nh2 {\n color: var(--primary-color);\n margin-top: 0;\n}\n\nform {\n display: grid;\n gap: 1rem;\n}\n\nlabel {\n font-weight: bold;\n}\n\ninput, button {\n padding: 0.5rem;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n font-size: 1rem;\n}\n\nbutton {\n background-color: var(--primary-color);\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: #2980b9;\n}\n\n#chat-window {\n height: 300px;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n padding: 1rem;\n overflow-y: auto;\n margin-bottom: 1rem;\n background-color: #f9f9f9;\n}\n\n.hidden {\n display: none;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n\n@media (max-width: 600px) {\n header h1 {\n font-size: 2rem;\n }\n\n header p {\n font-size: 1rem;\n }\n\n main {\n padding: 1rem;\n }\n\n section {\n padding: 1rem;\n }\n}\n---script.js---\ndocument.getElementById('connect-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const server = document.getElementById('server').value;\n const port = document.getElementById('port').value;\n const nickname = document.getElementById('nickname').value;\n \n // Simulate connection\n setTimeout(() => {\n document.getElementById('connection').classList.add('hidden');\n document.getElementById('chat').classList.remove('hidden');\n document.getElementById('chat-window').innerHTML = `<p>Connected to ${server}:${port} as ${nickname}</p>`;\n }, 1000);\n});\n\ndocument.getElementById('message-form').addEventListener('submit', function(e) {\n e.preventDefault();\n \n const message = document.getElementById('message-input').value;\n const chatWindow = document.getElementById('chat-window');\n \n chatWindow.innerHTML += `<p><strong>You:</strong> ${message}</p>`;\n chatWindow.scrollTop = chatWindow.scrollHeight;\n \n document.getElementById('message-input').value = '';\n});\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 263, + "completion_tokens": 1167, + "total_tokens": 1430, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 263 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..abb4744 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# ircchat.scroll.pub +Website generated by DeepSeek from prompt: Build a mirc clone that allows you to connect to servers and has all the normal functionalities needed for IRC use. Make it sleek and modern \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b372ee9 --- /dev/null +++ b/script.js @@ -0,0 +1,26 @@ +document.getElementById('connect-form').addEventListener('submit', function(e) { + e.preventDefault(); + + const server = document.getElementById('server').value; + const port = document.getElementById('port').value; + const nickname = document.getElementById('nickname').value; + + // Simulate connection + setTimeout(() => { + document.getElementById('connection').classList.add('hidden'); + document.getElementById('chat').classList.remove('hidden'); + document.getElementById('chat-window').innerHTML = `<p>Connected to ${server}:${port} as ${nickname}</p>`; + }, 1000); +}); + +document.getElementById('message-form').addEventListener('submit', function(e) { + e.preventDefault(); + + const message = document.getElementById('message-input').value; + const chatWindow = document.getElementById('chat-window'); + + chatWindow.innerHTML += `<p><strong>You:</strong> ${message}</p>`; + chatWindow.scrollTop = chatWindow.scrollHeight; + + document.getElementById('message-input').value = ''; +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ad34b22 --- /dev/null +++ b/style.css @@ -0,0 +1,120 @@ +:root { + --primary-color: #3498db; + --secondary-color: #2ecc71; + --background-color: #f4f4f4; + --text-color: #333; + --border-color: #ddd; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.6; +} + +header { + background-color: var(--primary-color); + color: white; + padding: 2rem; + text-align: center; +} + +header h1 { + margin: 0; + font-size: 2.5rem; +} + +header p { + margin: 0.5rem 0 0; + font-size: 1.2rem; +} + +main { + padding: 2rem; + max-width: 800px; + margin: 0 auto; +} + +section { + background-color: white; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; +} + +h2 { + color: var(--primary-color); + margin-top: 0; +} + +form { + display: grid; + gap: 1rem; +} + +label { + font-weight: bold; +} + +input, button { + padding: 0.5rem; + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 1rem; +} + +button { + background-color: var(--primary-color); + color: white; + border: none; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #2980b9; +} + +#chat-window { + height: 300px; + border: 1px solid var(--border-color); + border-radius: 4px; + padding: 1rem; + overflow-y: auto; + margin-bottom: 1rem; + background-color: #f9f9f9; +} + +.hidden { + display: none; +} + +footer { + text-align: center; + padding: 1rem; + background-color: var(--primary-color); + color: white; + margin-top: 2rem; +} + +@media (max-width: 600px) { + header h1 { + font-size: 2rem; + } + + header p { + font-size: 1rem; + } + + main { + padding: 1rem; + } + + section { + padding: 1rem; + } +} \ No newline at end of file