38 lines
2.2 KiB
HTML
38 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RKLLM Chat</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; background-color: #333; color: #fff; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
|
|
.chat-container { width: 95%; height: 95%; background-color: #444; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
|
|
.messages { flex: 1; padding: 20px; flex-direction: column; overflow-y: auto; }
|
|
.message { flex: 1; padding: 10px; max-width: 60%; margin: 5px; border-radius: 5px; background-color: #333; }
|
|
.selected { background-color: #343; }
|
|
.message:hover { background-color: #353; }
|
|
.clearfix { clear: both; display: table; margin:5px 0; }
|
|
.input-area { display: flex; }
|
|
.input-box { flex: 1; padding: 10px; background-color: #555; border: none; resize: vertical; color: #fff; height:fit-content;}
|
|
.send-btn { padding: 10px 20px; background-color: #666; border: none; cursor: pointer; transition: background-color 0.3s ease;}
|
|
.send-btn:hover { background-color: #777; }
|
|
.abort-btn { padding: 10px 20px; background-color: #511; border: none; cursor: pointer; transition: background-color 0.3s ease; }
|
|
.abort-btn:hover { background-color: #711; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chat-container">
|
|
<textarea class="input-box" id="systemMessage" style="max-height:20px;" placeholder="Change the system directions here."></textarea>
|
|
<div class="messages" id="messages"></div>
|
|
<div class="input-area">
|
|
<textarea class="input-box" id="messageInput" placeholder="Type your message here..."></textarea>
|
|
<button class="send-btn" onclick="sendMessage()">Send</button>
|
|
<button class="abort-btn" onclick="sendAbort()">Abort</button>
|
|
</div>
|
|
</div>
|
|
<script src="stmd.js"></script>
|
|
<script src="highlight.min.js"></script>
|
|
<script src="v2.js"></script>
|
|
<link rel="stylesheet" href="atom-one-dark.min.css">
|
|
</body>
|
|
</html>
|