GPT SVIP 手机模板 - 使用 Bootstrap 和 Font Awesome 实现人性化界面
<html>
<head>
<link rel='stylesheet' href='https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
body {
font-family: '微软雅黑', sans-serif;
background-color: #f5f5f5;
}
#sticky-header {
position: fixed;
top: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#sticky-header h4 a {
color: #333;
font-size: 24px;
font-weight: bold;
text-decoration: none;
}
#edit_grents {
height: 10px;
}
#chat-gpt-input {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
resize: none;
}
#chatgpt-response {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
resize: none;
}
button {
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-right: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.btn-buykey {
background-color: #007bff;
color: #fff;
}
.btn-grants {
background-color: #28a745;
color: #fff;
}
.btn-save {
background-color: #ffc107;
color: #fff;
}
.btn-answer {
background-color: #dc3545;
color: #fff;
}
</style>
</head>
<body>
<header id='sticky-header'>
<div class='container'>
<div class='row'>
<div class='col-12'>
<div class='text-center'>
<div class='logo'>
<h4>
<a href='index.html'>GPT SVIP</a>
</h4>
</div>
</div>
</div>
</div>
</div>
</header>
<div class='container mt-5'>
<div class='row'>
<div class='col-md-8'>
<div class='card'>
<div class='card-body'>
<div class='form-group'>
<div id='edit_grents'></div>
<p>
<span>SVIP用户免广告且每天可用300次问答</span>
</p>
<div class='form-group'>
<input id='edit_openaikey' placeholder='sk-xxxxxxxxxxxxxxxxxx' class='form-control'></input>
<button id='btn_buykey' onclick='buykey()' autocomplete='off' class='btn btn-buykey' href='#'>购买Key</button>
<button id='btn_grants' onclick='viewGrants()' autocomplete='off' class='btn btn-grants' href='#'>查看费用</button>
</div>
<br>
<textarea class='form-control' id='chat-gpt-input' placeholder='输入描述，提示：如需要连续同一个话题，请不要删除提问的问题' rows='3'></textarea>
</div>
</div>
<div class='card-footer'>
<div class='form-group'>
<button id='answer' onclick='callCHATGPT()' autocomplete='off' class='btn btn-answer' href='#'>回答</button>
<button onclick='save()' autocomplete='off' class='btn btn-save' href='#'>保存</button>
</div>
</div>
</div>
</div>
<div class='col-md-4'>
<div class='card'>
<div class='card-body'>
<div class='form-group'>
<label></label>
<textarea class='form-control' id='chatgpt-response' placeholder='长途访问，请耐心等待回答 Ai生成它很快，但是由于网络问题我们需要等待，通常内容越长等待越久 如果长时间没反应请刷新页面重试' rows='26'></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/ksoh 著作权归作者所有。请勿转载和采集!