Changes to chatsphere.scroll.pub

root

15 days ago

Initial commit

body.html

Changed around line 1

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://chatsphere.scroll.pub
+ metaTags
+ editButton /edit.html
+ title ChatSphere - Secure Group Chat
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "53548b58-4928-4280-acec-3ac0f6a780ea",
+   "object": "chat.completion",
+   "created": 1736246692,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nchatsphere.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://chatsphere.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ChatSphere - Secure Group Chat\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  \n    \n  
\n  \n    \n    \n  
\n
\n\n\n  
\n  \n    \n      \n      \n      \n    
\n  
\n
\n---style.css---\n:root {\n  --gradient: linear-gradient(135deg, #6e8efb, #a777e3);\n  --gradient-text: linear-gradient(135deg, #6e8efb, #a777e3);\n  --white: #ffffff;\n  --gray: #f0f0f0;\n  --dark-gray: #cccccc;\n  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nbody {\n  margin: 0;\n  font-family: 'Segoe UI', sans-serif;\n  background: var(--white);\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.5s ease;\n}\n\n#login-container {\n  text-align: center;\n  width: 300px;\n}\n\n.menu-bar select {\n  background: var(--gradient);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  border: none;\n  font-size: 1.2rem;\n  padding: 10px;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.password-container {\n  display: flex;\n  align-items: center;\n}\n\n#password-input {\n  flex: 1;\n  padding: 10px;\n  border: 1px solid var(--dark-gray);\n  border-radius: 20px;\n  margin-right: 10px;\n}\n\n.paper-plane-btn {\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: var(--gradient);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n}\n\n.paper-plane-btn::after {\n  content: '';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background: url('data:image/svg+xml;utf8,') no-repeat center;\n}\n\n.hidden {\n  display: none;\n}\n\n#chat-container {\n  width: 100%;\n  max-width: 800px;\n  height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\n#chat-history {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n.message {\n  margin-bottom: 15px;\n}\n\n.message .username {\n  background: var(--gradient-text);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  font-size: 0.8rem;\n  margin-bottom: 5px;\n}\n\n.message .content {\n  background: var(--gray);\n  padding: 10px;\n  border-radius: 10px;\n  display: inline-block;\n  max-width: 70%;\n}\n\n.message .timestamp {\n  color: var(--dark-gray);\n  font-size: 0.7rem;\n  margin-top: 5px;\n}\n\n#message-input-container {\n  position: fixed;\n  bottom: 0;\n  width: 100%;\n  max-width: 800px;\n  padding: 10px;\n  background: var(--white);\n  box-shadow: var(--shadow);\n}\n\n#input-wrapper {\n  display: flex;\n  align-items: center;\n  background: var(--gray);\n  border-radius: 25px;\n  padding: 5px;\n  transition: all 0.3s ease;\n}\n\n#input-wrapper.active {\n  border-radius: 0;\n  padding: 15px;\n}\n\n#message-input {\n  flex: 1;\n  border: none;\n  background: transparent;\n  padding: 10px;\n  margin: 0 10px;\n}\n\n.file-btn {\n  width: 30px;\n  height: 30px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.file-btn::after {\n  content: '';\n  display: block;\n  width: 20px;\n  height: 20px;\n  background: url('data:image/svg+xml;utf8,') no-repeat center;\n}\n\n@media (max-width: 768px) {\n  #login-container {\n    width: 90%;\n  }\n  \n  .menu-bar select {\n    font-size: 1rem;\n  }\n  \n  #chat-container {\n    max-width: 100%;\n  }\n}\n---script.js---\nconst users = {\n  \"黄春霖-Xiaoiec\": \"xiaoiec123456\",\n  \"梁冠宇\": \"lianggy\",\n  \"苏俊鸿\": \"sujh\"\n};\n\nconst loginContainer = document.getElementById('login-container');\nconst chatContainer = document.getElementById('chat-container');\nconst usernameSelect = document.getElementById('username-select');\nconst passwordInput = document.getElementById('password-input');\nconst loginBtn = document.getElementById('login-btn');\nconst messageInput = document.getElementById('message-input');\nconst sendBtn = document.getElementById('send-btn');\nconst fileUploadBtn = document.getElementById('file-upload-btn');\nconst chatHistory = document.getElementById('chat-history');\n\nlet currentUser = null;\n\nloginBtn.addEventListener('click', () => {\n  const username = usernameSelect.value;\n  const password = passwordInput.value;\n  \n  if (users[username] === password) {\n    currentUser = username;\n    loginContainer.style.opacity = '0';\n    loginContainer.style.transform = 'scale(0.9)';\n    setTimeout(() => {\n      loginContainer.classList.add('hidden');\n      chatContainer.classList.remove('hidden');\n      chatContainer.style.opacity = '1';\n      chatContainer.style.transform = 'scale(1)';\n    }, 300);\n  } else {\n    alert('Invalid username or password');\n  }\n});\n\nmessageInput.addEventListener('focus', () => {\n  document.getElementById('input-wrapper').classList.add('active');\n});\n\nmessageInput.addEventListener('blur', () => {\n  if (messageInput.value === '') {\n    document.getElementById('input-wrapper').classList.remove('active');\n  }\n});\n\nsendBtn.addEventListener('click', () => {\n  const message = messageInput.value.trim();\n  if (message !== '') {\n    sendMessage(message);\n    messageInput.value = '';\n  }\n});\n\nfunction sendMessage(message) {\n  const messageElement = document.createElement('div');\n  messageElement.classList.add('message');\n  \n  const usernameElement = document.createElement('div');\n  usernameElement.classList.add('username');\n  usernameElement.textContent = currentUser;\n  \n  const contentElement = document.createElement('div');\n  contentElement.classList.add('content');\n  contentElement.textContent = message;\n  \n  const timestampElement = document.createElement('div');\n  timestampElement.classList.add('timestamp');\n  timestampElement.textContent = new Date().toLocaleString();\n  \n  messageElement.appendChild(usernameElement);\n  messageElement.appendChild(contentElement);\n  messageElement.appendChild(timestampElement);\n  \n  chatHistory.appendChild(messageElement);\n  chatHistory.scrollTop = chatHistory.scrollHeight;\n}\n\nfileUploadBtn.addEventListener('click', () => {\n  const fileInput = document.createElement('input');\n  fileInput.type = 'file';\n  fileInput.accept = '*';\n  fileInput.style.display = 'none';\n  \n  fileInput.addEventListener('change', (e) => {\n    const file = e.target.files[0];\n    if (file) {\n      uploadFile(file);\n    }\n  });\n  \n  document.body.appendChild(fileInput);\n  fileInput.click();\n  document.body.removeChild(fileInput);\n});\n\nfunction uploadFile(file) {\n  // Implement file upload logic here\n  console.log('Uploading file:', file.name);\n  // Show upload progress\n  // Send file to server\n  // Update chat history with file message\n}\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 791,
+     "completion_tokens": 2141,
+     "total_tokens": 2932,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 791
+   },
+   "system_fingerprint": "fp_3a5770e1b4"
+ }

readme.scroll

Changed around line 1

+ # chatsphere.scroll.pub

+ Website generated by DeepSeek from prompt: 请你编写一个聊天网页，这个网页只有三个用户，他们的密码和用户名（{用户名}:{密码}）分别是：{黄春霖-Xiaoiec}:{xiaoiec123456}、{梁冠宇}:{lianggy}、{苏俊鸿}:{sujh}。在网页加载完成时，会显示出一个界面，界面上有： -背景为白色。 -界面中心有一个菜单栏，可以选择用户名。字是蓝紫渐变色（从左上到右下）的。 -菜单栏下方有一个输入框，可以输入密码。 -密码输入框的右侧有一个纸飞机样子的登录按钮，图案是白色的，背景是蓝紫渐变色（从左上到右下）的。当点击了登录按钮，如果用户名和密码匹配，则可以登录，整个网页变成另外一个界面——聊天界面。 -登录界面过渡到聊天界面的具体情况是这样��的：当用户点击登录按钮后，整个登录界面开始逐渐变淡，同时略微缩小。同时，聊天界面开始逐渐变深，同时从略微缩小变大。 -聊天界面的对话历史是可以上下滑动查看的。对话历史保存在服务器上。 -网页下部是一个输入框，用户将在此输入框输入要发送的消息。 -输入框在用户不点击时是一个浮在页面上的圆角100%的圆角矩形。此时为灰色。 -输入框在用户点击后流畅的展开直至整个页面都被输入框覆盖。此时输入框变为白色。右下角出现一个蓝紫渐变色的发送按钮，长得与登录按钮一模一样。登录按钮左侧出现一个具有经典文件logo的上传文件按钮。（所有转变都有流畅的动画） -点击上传文件按钮后，将可以上传任何后缀名的文件（移动端和pc端都要支持！）。当上传文件时，显示上传进度，通过进度条的形式。 -点击发送按钮后，消息将发送到服务器上。同时所有登录中的用户聊天页面都会更新，显示出消息。 -用户没有头像，只有昵称。显示在聊天气泡上部，字体小，字的颜色为蓝紫渐变色。 -聊天气泡下部还有灰色的发送时间，包括了年份、月份、日期、星期几和12小时制的时间。 -发送的文件不支持在线预览。当一条消息包含文件时，将会在聊天气泡底部出现一个文件logo，旁边显示着此文件的文件名（包括后缀名）。点击文件logo来会把文件保存在设备中。 -用户可以对自己的消息进行撤回（不管什么时候发送的消息都可以），撤回后，服务器将删除此消息（如果带有附件的话也一起删除）。 -用户“黄春霖-Xiaoiec”为管理员，可以撤回任何用户的任何消息。

script.js

Changed around line 1
+ const users = {
+   "黄春霖-Xiaoiec": "xiaoiec123456",
+   "梁冠宇": "lianggy",
+   "苏俊鸿": "sujh"
+ };
+ 
+ const loginContainer = document.getElementById('login-container');
+ const chatContainer = document.getElementById('chat-container');
+ const usernameSelect = document.getElementById('username-select');
+ const passwordInput = document.getElementById('password-input');
+ const loginBtn = document.getElementById('login-btn');
+ const messageInput = document.getElementById('message-input');
+ const sendBtn = document.getElementById('send-btn');
+ const fileUploadBtn = document.getElementById('file-upload-btn');
+ const chatHistory = document.getElementById('chat-history');
+ 
+ let currentUser = null;
+ 
+ loginBtn.addEventListener('click', () => {
+   const username = usernameSelect.value;
+   const password = passwordInput.value;
+ 
+   if (users[username] === password) {
+     currentUser = username;
+     loginContainer.style.opacity = '0';
+     loginContainer.style.transform = 'scale(0.9)';
+     setTimeout(() => {
+       loginContainer.classList.add('hidden');
+       chatContainer.classList.remove('hidden');
+       chatContainer.style.opacity = '1';
+       chatContainer.style.transform = 'scale(1)';
+     }, 300);
+   } else {
+     alert('Invalid username or password');
+   }
+ });
+ 
+ messageInput.addEventListener('focus', () => {
+   document.getElementById('input-wrapper').classList.add('active');
+ });
+ 
+ messageInput.addEventListener('blur', () => {
+   if (messageInput.value === '') {
+     document.getElementById('input-wrapper').classList.remove('active');
+   }
+ });
+ 
+ sendBtn.addEventListener('click', () => {
+   const message = messageInput.value.trim();
+   if (message !== '') {
+     sendMessage(message);
+     messageInput.value = '';
+   }
+ });
+ 
+ function sendMessage(message) {
+   const messageElement = document.createElement('div');
+   messageElement.classList.add('message');
+ 
+   const usernameElement = document.createElement('div');
+   usernameElement.classList.add('username');
+   usernameElement.textContent = currentUser;
+ 
+   const contentElement = document.createElement('div');
+   contentElement.classList.add('content');
+   contentElement.textContent = message;
+ 
+   const timestampElement = document.createElement('div');
+   timestampElement.classList.add('timestamp');
+   timestampElement.textContent = new Date().toLocaleString();
+ 
+   messageElement.appendChild(usernameElement);
+   messageElement.appendChild(contentElement);
+   messageElement.appendChild(timestampElement);
+ 
+   chatHistory.appendChild(messageElement);
+   chatHistory.scrollTop = chatHistory.scrollHeight;
+ }
+ 
+ fileUploadBtn.addEventListener('click', () => {
+   const fileInput = document.createElement('input');
+   fileInput.type = 'file';
+   fileInput.accept = '*';
+   fileInput.style.display = 'none';
+ 
+   fileInput.addEventListener('change', (e) => {
+     const file = e.target.files[0];
+     if (file) {
+       uploadFile(file);
+     }
+   });
+ 
+   document.body.appendChild(fileInput);
+   fileInput.click();
+   document.body.removeChild(fileInput);
+ });
+ 
+ function uploadFile(file) {
+   // Implement file upload logic here
+   console.log('Uploading file:', file.name);
+   // Show upload progress
+   // Send file to server
+   // Update chat history with file message
+ }

style.css

Changed around line 1
+ :root {
+   --gradient: linear-gradient(135deg, #6e8efb, #a777e3);
+   --gradient-text: linear-gradient(135deg, #6e8efb, #a777e3);
+   --white: #ffffff;
+   --gray: #f0f0f0;
+   --dark-gray: #cccccc;
+   --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ body {
+   margin: 0;
+   font-family: 'Segoe UI', sans-serif;
+   background: var(--white);
+   min-height: 100vh;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   transition: all 0.5s ease;
+ }
+ 
+ #login-container {
+   text-align: center;
+   width: 300px;
+ }
+ 
+ .menu-bar select {
+   background: var(--gradient);
+   -webkit-background-clip: text;
+   background-clip: text;
+   -webkit-text-fill-color: transparent;
+   border: none;
+   font-size: 1.2rem;
+   padding: 10px;
+   width: 100%;
+   margin-bottom: 20px;
+ }
+ 
+ .password-container {
+   display: flex;
+   align-items: center;
+ }
+ 
+ #password-input {
+   flex: 1;
+   padding: 10px;
+   border: 1px solid var(--dark-gray);
+   border-radius: 20px;
+   margin-right: 10px;
+ }
+ 
+ .paper-plane-btn {
+   width: 40px;
+   height: 40px;
+   border: none;
+   background: var(--gradient);
+   border-radius: 50%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   cursor: pointer;
+   transition: transform 0.2s ease;
+ }
+ 
+ .paper-plane-btn::after {
+   content: '';
+   display: block;
+   width: 20px;
+   height: 20px;
+   background: url('data:image/svg+xml;utf8,') no-repeat center;
+ }
+ 
+ .hidden {
+   display: none;
+ }
+ 
+ #chat-container {
+   width: 100%;
+   max-width: 800px;
+   height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ #chat-history {
+   flex: 1;
+   overflow-y: auto;
+   padding: 20px;
+ }
+ 
+ .message {
+   margin-bottom: 15px;
+ }
+ 
+ .message .username {
+   background: var(--gradient-text);
+   -webkit-background-clip: text;
+   background-clip: text;
+   -webkit-text-fill-color: transparent;
+   font-size: 0.8rem;
+   margin-bottom: 5px;
+ }
+ 
+ .message .content {
+   background: var(--gray);
+   padding: 10px;
+   border-radius: 10px;
+   display: inline-block;
+   max-width: 70%;
+ }
+ 
+ .message .timestamp {
+   color: var(--dark-gray);
+   font-size: 0.7rem;
+   margin-top: 5px;
+ }
+ 
+ #message-input-container {
+   position: fixed;
+   bottom: 0;
+   width: 100%;
+   max-width: 800px;
+   padding: 10px;
+   background: var(--white);
+   box-shadow: var(--shadow);
+ }
+ 
+ #input-wrapper {
+   display: flex;
+   align-items: center;
+   background: var(--gray);
+   border-radius: 25px;
+   padding: 5px;
+   transition: all 0.3s ease;
+ }
+ 
+ #input-wrapper.active {
+   border-radius: 0;
+   padding: 15px;
+ }
+ 
+ #message-input {
+   flex: 1;
+   border: none;
+   background: transparent;
+   padding: 10px;
+   margin: 0 10px;
+ }
+ 
+ .file-btn {
+   width: 30px;
+   height: 30px;
+   border: none;
+   background: transparent;
+   cursor: pointer;
+   margin-right: 10px;
+ }
+ 
+ .file-btn::after {
+   content: '';
+   display: block;
+   width: 20px;
+   height: 20px;
+   background: url('data:image/svg+xml;utf8,') no-repeat center;
+ }
+ 
+ @media (max-width: 768px) {
+   #login-container {
+     width: 90%;
+   }
+ 
+   .menu-bar select {
+     font-size: 1rem;
+   }
+ 
+   #chat-container {
+     max-width: 100%;
+   }
+ }