Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
101 lines (100 sloc) 4.52 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Lichat-JS Client Library</title>
<link rel="stylesheet" type="text/css" href="lichat.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body class="light">
<noscript>
JavaScript is required for this to work. Sorry!
</noscript>
<div class="status" style="display:none"></div>
<form class="login" action="#">
<h1>Log In to Lichat</h1>
<div><label>Username</label>
<input type="text" name="username" maxlength="32" placeholder="My Name" required autofocus />
</div>
<div><label>Password<span style="font-size:0.5em;display:block">Only required for registered users</span></label>
<input type="password" name="password" placeholder="" />
</div>
<div><label>Server Hostname</label>
<input type="text" name="hostname" value="localhost" required />
</div>
<div><label>Server Port</label>
<input type="number" name="port" min="1" max="65535" value="1114" placeholder="1114" required />
</div>
<div><label>Channel</label>
<input type="text" name="channel" value="" maxlength="32" />
</div>
<div><label>Theme</label>
<select name="theme"><option value="light">Light</option><option value="dark">Dark</option></select>
</div>
<input type="submit" value="Connect" />
</form>
<main class="chat" style="display:none">
<div class="channels">
<h2>Channels</h2>
<div class="lichat-channel-list">
</div>
</div>
<div class="chat-area">
<nav class="menu">
<a data-action="create" title="Create a new channel">Create</a>
<a data-action="join" title="Join a channel">Join</a>
<a data-action="leave" title="Leave this channel">Leave</a>
<a data-action="channels" title="Toggle the channel list">Channels</a>
<a data-action="users" title="Toggle the user list">Users</a>
<a data-action="settings" title="Change some options">Settings</a>
<a data-action="about" title="About Lichat-JS">About</a>
</nav>
<div class="lichat-output">
</div>
<div class="input-area">
<textarea class="lichat-input"></textarea>
<div class="lichat-extra">
<div class="emote-list"></div>
<input type="button" id="emotes" name="emotes" />
<label for="emotes" title="Add an emote"><i class="fa fa-smile-o" aria-hidden="true"></i></label>
<input type="file" id="file" name="file" />
<label for="file" title="Send a file"><i class="fa fa-paperclip" aria-hidden="true"></i></label>
</div>
<input type="submit" value="Send" />
</div>
</div>
<div class="users">
<h2>Users</h2>
<div class="lichat-user-list">
</div>
</div>
<audio class="lichat-notify">
<source src="notify.mp3" type="audio/mp3"/>
</audio>
</main>
<div class="settings popup">
<h3>Settings</h3>
<div><label>Notifications</label><input type="checkbox" name="notifyBy" value="desktop"/></div>
<div><label>Sounds</label><input type="checkbox" name="notifyBy" value="sound"/></div>
<div><label>Volume</label><input type="range" name="volume" min="0.0" max="1.0" step="0.1" /></div>
<button>Ok</button>
</div>
<div class="about popup">
<h3>This is Lichat-JS, a JavaScript client for Lichat.</h3>
<p>
Lichat is a light-weight, text-based chat protocol. It is aimed at mid-sized group chats, with many simplifications and improvements over alternative protocols such as IRC and XMPP.
</p>
<p>
Lichat and Lichat-JS are developed and maintained by the Shirakumo collective. You can find more information on the following websites:
</p>
<ul>
<li><a href="http://shirakumo.org" target="_blank">http://shirakumo.org</a></li>
<li><a href="http://shirakumo.org/projects/lichat-protocol" target="_blank">http://shirakumo.org/projects/lichat-protocol</a></li>
<li><a href="http://shirakumo.org/projects/lichat-js" target="_blank">http://shirakumo.org/projects/lichat-js</a></li>
</ul>
<button>Ok</button>
</div>
<script type="text/javascript" src="lichat.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>