前言
前端的朋友们,福利来了,今天小编给大家带来了高仿实现ChatGPT页面,模板都是前端前沿技术+部分动画实现。欢迎找我,我将全部html模板代码分享给大家。请注意:这只是一个html静态页面,并未接入chatgpt接口。
全部源码下载:
视频演示
html代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ChatGPT Clone in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts Link For Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script src="script.js" defer></script>
</head>
<body>
<!-- Chats container -->
<div class="chat-container"></div>
<!-- Typing container -->
<div class="typing-container">
<div class="typing-content">
<div class="typing-textarea">
<textarea id="chat-input" spellcheck="false" placeholder="Enter a prompt here" required></textarea>
<span id="send-btn" class="material-symbols-rounded">send</span>
</div>
<div class="typing-controls">
<span id="theme-btn" class="material-symbols-rounded">light_mode</span>
<span id="delete-btn" class="material-symbols-rounded">delete</span>
</div>
</div>
</body>
</html>
结尾语
我是分享好物教程源码的老罗,欢迎关注!