vybe/client/index.html

80 lines
2.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vybe</title>
<style>
* {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
sans-serif;
}
body {
background: #171719;
color: #d8d8d8;
}
.hidden {
display: none;
}
#msginput {
margin-top: 15px;
}
.message {
margin-bottom: 5px;
}
#loadmore {
margin-bottom: 10px;
}
.channel {
font-weight: normal;
}
</style>
</head>
<body>
<div id="register" class="hidden">
<h1>welcome to vybe</h1>
<h3>this site is in beta</h3>
<p>
to get started, you'll need to set up an account. we use public key
cryptography for security, rather than passwords. in this early beta
version your keys are stored in your browser storage only.
</p>
<form id="registerform">
<label for="name">name/username</label>
<input type="text" id="name" />
<button id="submit" type="submit">generate keys & register</button>
</form>
</div>
<div id="chat" class="hidden">
<h1>vybe</h1>
<h3 class="thread">
current thread: <strong id="threadname">meow</strong>
<button id="change">change thread</button>
</h3>
<h3>messages will appear below as they are sent</h3>
<button id="loadmore">load more messages</button>
<div id="messages"></div>
<form id="msginput">
<input type="text" placeholder="write a message..." id="msg" />
<button type="submit" class="hidden" id="sendmsg"></button>
</form>
</div>
<div id="threads" class="hidden">
<h1>threads</h1>
<h3>create thread</h3>
<form id="createthread">
<label for="newthreadname">thread name</label>
<input type="text" id="newthreadname" />
<button id="submitthread" type="submit">create</button>
</form>
<h3>choose existing thread</h3>
<div id="threadlist">loading...</div>
</div>
<script src="/openpgp.min.js"></script>
<script src="/chat.js"></script>
<script src="/socket.io.min.v4.6.1.js"></script>
</body>
</html>