前端聊天室页面开发(赛博朋克科技风,内含源码)

        肝了一天,经过各种处理美化,肝出来了一个赛博朋克科技风的前端页面,用的原生三件套html+css+javascript开发的,本来想是加点功能调用一下gpt接口,但是基本都需要webscoket通信,可惜我js学的不是很深入,捣鼓半天还是放弃了,如果有感兴趣一起做点日常生活用的小demo的小伙伴也可以联系我,有觉得页面还不错想要源码的小伙伴,我把源码放在下面啦,记得点赞收藏哦。

1-indexl.html

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聊天页面</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="page-container"><div class="chat-container"><div class="chat-header"><h1>ai聊天室</h1></div><div class="chat-messages message-container" id="chatMessages"><!-- 消息将在这里动态添加 --></div><div class="user-info">当前用户: 我</div><form class="chat-input" id="chatForm"><input type="text" id="messageInput" placeholder="输入消息..." required><button type="submit">发送</button></form></div><div class="divider"></div><div class="text-container"><div id="textContent" class="text-content">这里是初始的长文本内容。点击左侧的消息可以更新这里的内容。</div></div></div><script src="script.js"></script>
</body>
</html>

2-styles.css

body {font-family: '隶书';  margin: 0;padding: 0;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */color: #7ee2ff;height: 100vh;overflow: hidden;background-image : url('./1.jpg');  /* 背景图片不重复 */  background-repeat: no-repeat;  /* 背景图片居中显示 */  background-position: center;  /* 背景图片覆盖整个元素 */  background-size: cover;  
}.page-container {display: flex;height: 100vh;}.chat-container {width: 50%;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */display: flex;flex-direction: column;box-shadow: 0 0 20px rgba(126, 226, 255, 0.3);}.divider {width: 2px;background-color: #7ee2ff;box-shadow: 0 0 10px #7ee2ff;
}.text-container {width: 50%;padding: 20px;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */overflow-y: auto;display: flex;flex-direction: column;will-change: transform;backface-visibility: hidden;}.text-content {font-size: 18px;line-height: 1.6;white-space: pre-wrap;word-wrap: break-word;color: #7ee2ff;text-shadow: 0 0 5px #7ee2ff;
}.chat-header {background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 *//* color: #ff00ff; */padding: 15px;text-align: center;box-shadow: 0 2px 4px rgba(126, 226, 255, 0.3);
}.chat-header h1 {margin: 0;font-size: 24px;font-weight: 700;letter-spacing: 2px;text-transform: uppercase;
}.chat-messages {flex-grow: 1;overflow-y: auto;padding: 15px;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 *//* background-image: linear-gradient(to bottom, #141c2b 0%, #0a0e17 100%); */will-change: transform;backface-visibility: hidden;
}.message-container {display: flex;flex-direction: column;
}.user-info {padding: 10px 15px;background-color: rgba(20, 28, 43, 0.7); /* 使用半透明背景 */color: #d3d3d3;font-weight: bold;text-align: center;box-shadow: 0 -2px 4px rgba(126, 226, 255, 0.3);border-bottom: 1px solid #7ee2ff;
}.message {display: inline-block;margin-bottom: 15px;padding: 10px 15px;max-width: 60%;transition: all 0.2s ease;cursor: pointer;word-wrap: break-word;position: relative;font-size: 18px;box-shadow: 0 0 5px rgba(126, 226, 255, 0.3);
}.message.sent {background-color: rgba(30, 44, 74, 0.8);color: #7ee2ff;border-radius: 20px 0px 20px 20px;align-self: flex-end;margin-left: auto;border: 1px solid rgba(126, 226, 255, 0.3);
}.message.received {background-color: rgba(20, 28, 43, 0.8);color: #ff00ff;border-radius:  0px 20px 20px 20px;border: 1px solid rgba(255, 0, 255, 0.3);
}.message:hover {transform: translateY(-2px);box-shadow: 0 2px 10px rgba(126, 226, 255, 0.5);
}.chat-input {display: flex;padding: 15px;background-color: rgba(26, 26, 26, 0.8);box-shadow: 0 -2px 10px rgba(126, 226, 255, 0.1);
}.chat-input input {flex-grow: 1;padding: 10px 15px;border: 1px solid rgba(126, 226, 255, 0.3);border-radius: 20px;background-color: rgba(10, 14, 23, 0.8);color: #7ee2ff;margin-right: 10px;font-family: 'Orbitron', sans-serif;transition: all 0.2s ease;
}.chat-input input:focus {outline: none;border-color: #7ee2ff;box-shadow: 0 0 5px rgba(126, 226, 255, 0.5);
}.chat-input button {padding: 10px 20px;background-color: rgba(30, 44, 74, 0.8);color: #7ee2ff;border: 1px solid rgba(126, 226, 255, 0.3);border-radius: 20px;cursor: pointer;transition: all 0.2s ease;font-family: 'Orbitron', sans-serif;text-transform: uppercase;
}.chat-input button:hover {background-color: rgba(126, 226, 255, 0.2);color: #7ee2ff;box-shadow: 0 0 10px rgba(126, 226, 255, 0.5);
}/* 自定义滚动条 */
::-webkit-scrollbar {width: 8px;
}::-webkit-scrollbar-track {background: #0a0e17;
}::-webkit-scrollbar-thumb {background: linear-gradient(to bottom, #7ee2ff, #ff00ff);border-radius: 4px;
}::-webkit-scrollbar-thumb:hover {background: linear-gradient(to bottom, #7ee2ff, #ff00ff);
}/* 添加霓虹灯效果 */
* {box-sizing: border-box;
}@media (prefers-reduced-motion: reduce) {* {animation: none !important;transition: none !important;}
}

3-script.js

document.addEventListener('DOMContentLoaded', () => {const chatForm = document.getElementById('chatForm');const messageInput = document.getElementById('messageInput');const chatMessages = document.getElementById('chatMessages');const textContent = document.getElementById('textContent');chatForm.addEventListener('submit', (e) => {e.preventDefault();const message = messageInput.value.trim();if (message) {addMessage(message, 'sent');messageInput.value = '';// 模拟接收到的消息setTimeout(() => {addMessage('这是一条自动回复的消息。', 'received');}, 1000);}});function addMessage(text, type) {const messageElement = document.createElement('div');messageElement.classList.add('message', type);messageElement.textContent = text;// 添加点击事件messageElement.addEventListener('click', () => {updateTextContent(text);});const messageContainer = document.createElement('div');messageContainer.classList.add('message-container');messageContainer.appendChild(messageElement);chatMessages.appendChild(messageContainer);chatMessages.scrollTop = chatMessages.scrollHeight;}function updateTextContent(text) {textContent.textContent = text;}// 添加一些初始消息addMessage("你好!欢迎来到炫酷聊天室。", "received");addMessage("这是一个示例消息。", "sent");addMessage("点击任何消息可以在右侧查看完整内容。", "received");// messageInput.addEventListener('input', function() {//     const maxLength = Math.floor(chatMessages.offsetWidth * 0.6);//     if (this.value.length > maxLength) {//         this.value = this.value.slice(0, maxLength);//     }// });
});

背景图片图片:1.jpg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/461756.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TMDOG的Gin学习笔记_01——初识Gin框架

TMDOG的Gin学习笔记_01——初识Gin框架 博客地址&#xff1a;[TMDOG的博客](https://blog.tmdog114514.icu) 作者自述&#xff1a; 停更太久了&#xff0c;是因为开学了课太多了&#xff0c;并且我一直在准备上篇文章的内容正在coding&#xff0c;就先搁置了更新博客QAQ&…

wsl2.0(windows linux子系统)使用流程

1.什么是wsl wsl指的是windows的linux子系统&#xff0c;最初是wsl1.0&#xff0c;靠windows内核来模拟linux内核&#xff0c;并不运行真正的linux内核&#xff0c;所以有时会有兼容性的问题。 而wsl2.0是基于windows自带的虚拟机功能hyper-v的&#xff0c;它会把设备上的每个…

计算机网络:网络层 —— IPv4 数据报的首部格式

文章目录 IPv4数据报的首部格式IPv4数据报分片生存时间 TTL字段协议字段首部检验和字段 IPv4数据报的首部格式 IPv4 数据报的首部格式及其内容是实现 IPv4 协议各种功能的基础。 在 TCP/IP 标准中&#xff0c;各种数据格式常常以32比特(即4字节)为单位来描述 固定部分&#x…

vue3学习记录-nextTick

vue3学习记录-nextTick 1. 案例场景2. 使用方法2.1 回调方式2.2 async&#xff0c;await 3.原理 1. 案例场景 聊天框实现输入内容&#xff0c;滚动条默认滚到最底部。 <template><div class"chat_box"><div class"chat_list" ref"chat…

Facebook群控策略详解

Facebook群控早在前几年就很火爆了&#xff0c;对于做Facebook营销或者电商的跨境选手来说&#xff0c;这是个不错的提高效率扩大增长的办法。具体来说&#xff0c;Facebook群控是一种通过同时管理多个Facebook账户进行自动化推广活动的方法&#xff0c;它可以实现自动发布帖子…

【私聊记录】最近在忙什么啊?听说你在学人工智能?

小舒&#xff1a;哎&#xff0c;你最近在忙什么啊&#xff1f; 小元&#xff1a;我在学习人工智能呢。 小舒&#xff1a;人工智能&#xff1f;难不难学啊&#xff1f; 小元&#xff1a;不难&#xff0c;找到正确的学习姿势就不难了&#xff01; 小舒&#xff1a;那你为什么想学…

BLE 协议之 L2CAP

目录 一、简介二、L2CAP Protocol 架构1、逻辑信道划分2、信道模式3、设计思想4、帧结构4.1 面向连接信道 B-frame4.2 无连接数据信道包 G-frame4.3 重传/流量控制/流传输模式下的面向连接的信道 S-frame、I-frame4.4 面向连接的通道分为 LE 信用流控模式和增强型信用流控模式 …

『 Linux 』网络传输层 - TCP(二)

文章目录 TCP六个标志位TCP的连接三次握手 四次挥手为什么是三次握手和四次挥手 重传机制 TCP六个标志位 在TCP协议报文的报头中存在一个用于标志TCP报文类型的标志位(不考虑保留标志位),这些标志位以比特位选项的方式存在,即对应标志位为0则表示为假,对应标志位为1则为真; SYN…

安科瑞AMB400分布式光纤测温系统解决方案--远程监控、预警,预防电气火灾

安科瑞戴婷 可找我Acrel-Fanny 安科瑞AMB400电缆分布式光纤测温具有多方面的特点和优势&#xff1a; 工作原理&#xff1a; 基于拉曼散射效应。激光器产生大功率的光脉冲&#xff0c;光在光纤中传播时会产生散射。携带有温度信息的拉曼散射光返回光路耦合器&#xff0c;耦…

Raspberry Pi 树莓派产品系列说明

系列文章目录 前言 随着我们产品线的不断扩展&#xff0c;要了解所有不同的 Raspberry Pi 板可能会让人感到困惑。以下是 Raspberry Pi 型号的高级分类&#xff0c;包括我们的旗舰系列、Zero 系列、计算模块系列和 Pico 微控制器。 Raspberry Pi 电脑分为几个不同的系列&#x…

电阻电容电感为什么通常是10、22、47这些数

电阻电容电感为什么通常是10、22、47这些数 优先数的来源优先数的优点&#xff1a;E24和E96的来源 我们在选择电阻时&#xff0c;经常看到的阻值是33Ohm&#xff0c;4.7KOhm&#xff0c;1KOhm&#xff0c;680Ohm.基本上是以这几个数字开头。 同时在选择电容时&#xff0c;经常看…

以「JIMUMETA元宇宙体验馆」为例,探讨有哪些元宇宙场景?

让我们以「JIMUMETA元宇宙体验馆」为例&#xff0c;深入探讨元宇宙场景中提供的产品与服务。该体验馆由视创云展精心打造&#xff0c;集成了企业主展馆、元宇宙虚拟活动分会场、品牌展示分会场、线上论坛会场以及会议室接待会客等多重功能&#xff0c;旨在全方位满足企业发布会…

在MacOS玩RPG游戏 - RPGViewerPlus

背景知识 由于我一直使用Mac电脑&#xff0c;所以一直对Mac如何玩RPGMV/RPGMZ游戏的方式有进一步的想法。 网上能给出的方案都是自行启动一个HTTP服务进行&#xff0c;进行服务加载。这个方法有效&#xff0c;但兼容性较差。涉及到自定义功能模块的游戏&#xff0c;都会有报错…

使用Scrapy框架爬取博客信息

随着网络的发展&#xff0c;越来越多有价值的信息存储在网络上。使用爬虫技术可以从这些信息源中提取出有用的数据。本文将介绍如何使用Python中的Scrapy框架来爬取博客站点上的文章标题、作者以及阅读数&#xff0c;并将其保存到JSON文件中。 一、项目背景 Scrapy是一个快速…

【Java Web】使用JDBC操作数据库(含代码示例)

文章目录 JDBC主要组成部分访问数据库步骤数据库交互StatementPreparedStatementSQL注入攻击 演示示例单查询多查询返回记录数 JDBC&#xff08;Java Database Connectivity&#xff09;是Java中用于执行SQL语句的标准API&#xff0c;它提供了一种统一的方式来访问各种关系型数…

[CUDA] atomic函数闭坑技巧

文章目录 1. 尽量减少atomic的使用频率2. 小心atomic的不规则读数 cuda atomic函数使用时的一些注意事项 1. 尽量减少atomic的使用频率 由于atomic会增加threads之间的同步性&#xff0c;所以在有选择性的atomic操作时&#xff0c;可以考虑用if(condition) atomic&#xff1b;…

开源全站第一个nextron项目--NextTalk:一款集成chatgpt的实时聊天工具

NextTalk 简介 该项目是一个基于Nextron(NextJSElectron)的桌面端实时聊天工具。 但由于使用了NextJS中的ssr及api route功能&#xff0c;该程序只能在开发环境运行。 关于生产版本&#xff1a;我将其网页端部分分离&#xff0c;并用Pake将其打包成桌面端&#xff0c;生产体…

河南高校大数据实验室建设案例分享

泰迪智能科技在与中国各地高校的合作中积累了丰富的经验&#xff0c;尤其是在大数据和人工智能领域。过去多年里与河南省内多所高校在大数据领域进行了积极的探索和建设&#xff0c;形成了一系列具有特色的大数据实验室。这些实验室不仅促进了高校内部的科研创新&#xff0c;也…

Kafka自动生产消息软件

点击下载《Kafka服务端(含Zookeeper)一键自启软件》 点击下载《kafka客户端生产者消费者kafka可视化工具&#xff08;可生产和消费消息&#xff09;》 点击下载《Kafka自动生产消息软件》 1. 前言 在软件开发过程中&#xff0c;Kafka常被用作消息队列来处理特定的业务功能。为…

龙迅#LT8668EX显示器图像处理芯片 适用于HDMI1.4+VGA转4PORT LVDS,支持4K30HZ分辨率,可做OSD菜单亮度调节!

1. 一般说明 LT8668EX 是 Lontium 的第二代 LCD 控制器&#xff0c;基于 ClearEdge 技术&#xff0c;支持 VGA 接口和 HDMI 接口&#xff0c;符合 HDMI 1.4 规范。它可以支持带 HDMI 接口的双模 DP。为了向后兼容&#xff0c;该 LCD 控制器还包括一个高性能模拟接口&#xff0…