-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
204 lines (173 loc) · 7.68 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!doctype html>
<!--
* Copyright (C) 2014-2015 Regents of the University of California.
* @author: Dustin O'Hara <[email protected]>
* @author: Zhehao Wang <[email protected]>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
* A copy of the GNU Lesser General Public License is in the file COPYING.
-->
<!--
* This work uses Material Design Lite under Apache License v2; available as MaterialDesignLite-license.txt in this repository.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="NDN Chat">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NDN Chat</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!--
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
-->
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="NDN Chat">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/material.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--white mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title" id="userInfo"></span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li id="openShowCertDialogBtn" class="mdl-menu__item">Show certificate</li>
<li id="openInstallCertDialogBtn" class="mdl-menu__item">Install signed certificate</li>
<li id="srcAndInstructionLink" class="mdl-menu__item"><a href="https://github.com/zhehaowang/icn-tutorial-app" target="_blank">Source and instruction</a></li>
<li id="certRequestLink" class="mdl-menu__item"><a href="http://memoria.ndn.ucla.edu:5000" target="_blank">Certificate request site</a></li>
<li id="showSyncTreeDialogBtn" class="mdl-menu__item">Show sync tree</li>
</ul>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
<h5>UCLA/REMAP</h5>
<div class="demo-avatar-dropdown">
<div class="mdl-layout-spacer"></div>
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i>
<span class="visuallyhidden">Accounts</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item">[email protected]</li>
<li class="mdl-menu__item">[email protected]</li>
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
</ul>
</div>
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<h6 class="mdl-navigation__link title" id = "chan-title">CHANNELS</h6>
<p class="mdl-navigation__link selected" id="chatroomNameLabel"></p>
<div class="mdl-layout-spacer"></div>
<h6 class="mdl-navigation__link title" id = "dir-title">ROSTER</h6>
<div id="rosterDisplayDiv">
<!--
<a class="mdl-navigation__link" href="">@Jburke</a>
-->
</div>
<div class="mdl-layout-spacer"></div>
</nav>
</div>
<!-- feed of messaging -->
<main id="chatDisplayWrapper" class="mdl-layout__content">
<div id="chatDisplayDiv" class="comment">
<!--
<p><span>RandyMan</span><br> In the morning before dressing, light incense and meditate.</p>
-->
</div>
</main>
</div>
<!-- Section for user to enter message -->
<div id = "enter-message">
<p>
<div class="mdl-textfield mdl-js-textfield " id="input-message-area">
<input class="mdl-textfield__input" type="text" id="chatTextInput" />
<label class="mdl-textfield__label" for="sample1">Type a message here...</label>
</div>
</p>
<!-- upload photo button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">attach_file</i>
</button>
<!-- Emoticon button -->
<button class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">mood</i>
</button>
<!-- Submit -->
<button id="chatBtn" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Submit
</button>
</div>
<!-- Dialog for putting in user email -->
<div id="email-dialog">
Your email address:
<input type="text" name="email" id="emailInput"><br>
Your screen name:
<input type="text" name="screenname" id="screenNameInput"><br>
</div>
<div id="show-cert-dialog">
<textarea id="certString" class="dialogTextareaClass" readonly></textarea><br>
<p id="signerIdentityParagraph">Signer Identity: </p>
</div>
<div id="install-cert-dialog">
Install cert:<br>
<textarea id="signedCertString" class="dialogTextareaClass"></textarea>
<br>
<button id="installCertBtn">Install</button>
</div>
<div id="sync-tree-dialog">
Show sync tree:
<div id="sync-tree"></div>
</div>
<!--
With indexedDBBasedStorage storage enabled, the new participant is likely to think non-existent participants
as in chat, until the 10 * 3 heartbeat times out; same problem without the indexedDbBasedStorage, too?
-->
<script src="js/material.min.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/d3/d3.min.js"></script>
<script src="js/protobuf/long.min.js"></script>
<script src="js/protobuf/bytebuffer-ab.min.js"></script>
<script src="js/protobuf/protobuf.min.js"></script>
<script src="js/ndn.min.js"></script>
<script src="js/indexeddb-storage.js"></script>
<script src="js/fire-chat.js"></script>
<script src="js/page.js"></script>
</body>
</html>