-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
93 lines (79 loc) · 3.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html manifest="springle.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Springle Chat</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="header">
<h2 class="room-title" id="room-title">Public Room</h2>
<h1><span class="icon"><img src="images/app-icon-64.png" height="40" /></span> <span class="part-1">Springle</span> <span class="part-2"> Chat</span></h1>
</header>
<div id="chat-nickname-form" class="chat-nickname-form">
<label for="nickname">Enter nickname: </label>
<br />
<input type="text" id="nickname" class="nick-form"/>
<br />
<label for="chatroom" class="chatroom-label">Join/create chat room: </label>
<br/>
<input type="text" id="chatroom" class="nick-form" placeholder="Public Room"/>
<br/>
<button id="nickname-submit" class="button nick-form">Start Chatting</button>
<br/><br/>
<label for="room-share-url"><i>Share this link to invite someone to this chat room</i>: </label>
<br />
<input type="text" id="room-share-url" class="nick-form room-share-url" readonly="readonly" />
<br/>
<br/>
<br/>
<div>
<button id="install-btn" class="button-3 hide">Install as app</button>
<div id="install-status"></div>
</div>
</div>
<div id="loading-message" class="loading-msg hide">
<img src="images/cloud.gif" alt="loading.." />
<br />
<p>Please wait <span id="loading-timer">5 seconds</span> while we connect you to the server.</p>
</div>
<div id="chat-container" class="chat-container hide">
<div id="chat-main-stage" class="chat-main-stage">
<div id="message-log-area" class="message-log-area">
<div class="message-area-padding"></div>
<div class="talk-bubble-set">
<div class="name"><img src="images/smiley-smile.png" class="welcome-smiley" /></div>
<div class="bubble">
<span class="msg-text bubble-alt">
Hello <span id="welcome-message-user-name"></span>, welcome to chat.
</span>
</div>
</div>
</div>
<div class="chatter-list-sidebar">
<div class="title">People online now</div>
<div id="chatter-list" class="chatter-list">
</div>
</div>
</div>
<div class="chat-bottom-area">
<div id="is-typig-status" class="is-typig-status hide">Someone is typing..</div>
<a href="javascript:;" id="clear-log-link" class="clear-log-link">Clear log</a>
</div>
<div id="send-msg" class="send-msg">
<textarea id="msg-box" class="msg-box"></textarea>
<span id="send-btn" class="send-btn button">SEND</span>
<div id="connection-lost-message" class="connection-lost-message hide">
Connection has been lost. Please wait while we retry.
<img src="images/loader.gif" alt="[Please wait..]" />
</div>
</div>
</div>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/chat_client.js"></script>
<script src="js/install.js"></script>
<!-- Lets preload some images here-->
<img src="images/smiley-smile.png" alt="smiley1" class="hide" />
<audio id="chat-notification-sound" src="sounds/new-message.ogg" preload="auto"></audio>
</body>
</html>