This repository was archived by the owner on Jun 8, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchat.html
More file actions
225 lines (191 loc) · 11.6 KB
/
Copy pathchat.html
File metadata and controls
225 lines (191 loc) · 11.6 KB
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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/chat.css" />
<link rel="stylesheet" id="css-theme" href="css/themes/default.css" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css" />
<link rel="stylesheet" href ="https://materialdesignicons.com/cdn/light/0.2.63/css/materialdesignicons-light.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/REST.js"></script>
<script src="js/UIActions.js"></script>
<!--<script src="js/SockEvents.js"></script>-->
<script src="js/contextMenu.js"></script>
<script src="js/headInfo.js"></script>
<title>Azuma</title>
</head>
<body>
<div class="header">
<div class="header-information">
Logged in as<br>
</div>
<div class="settings-icon">
<span class="mdi mdi-settings"></span>
</div>
<div class="online-icon">
<span class="mdi mdi-account"></span>
</div>
</div>
<div class="channellist" id="channels">
</div>
<div class="channellist hidden" id="online">
<span class="settings-headline" style="color: #444"><span class="mdi mdi-account-outline"> </span>Users</span><br><br>
YOU
<div class="online-user">
<img class="online-user-avatar" src="/resources/graphics/avatars/azuma-3.svg"> <span id="user-online-you-name"></span>
</div><br>
<div id="online-users">
</div>
<div class="foot-centered">
Azuma v0.0.1a
</div>
</div>
<div class="channellist hidden" id="settings">
<span class="settings-headline" style="color: #333"><span class="mdi mdi-settings-outline"> </span>Settings</span>
<div class="settings-category" onclick="settings('account')" id="settings-account">Account<span class="mdi mdi-chevron-right settings-chevron"></span></div>
<div class="settings-category" onclick="settings('appearance')" id="settings-appearance">Appearance<span class="mdi mdi-chevron-right settings-chevron"></span></div>
<div class="settings-category" onclick="settings('sound')" id="settings-sound">Sound<span class="mdi mdi-chevron-right settings-chevron"></span></div>
<div class="settings-category" onclick="settings('info')" id="settings-info">Info<span class="mdi mdi-chevron-right settings-chevron"></span></div><br>
<a href="/logout"><div class="settings-category">Logout<span class="mdi mdi-account-arrow-right-outline settings-chevron"></span></div></a>
<div class="foot-centered">
Azuma v0.0.1a
</div>
</div>
<div id="appends"></div>
<!--Settings popouts-->
<div class="settings-popout" id="settings-account-popout">
<div class="form-header big color-title">
<span class="settings-headline"><span class="mdi mdi-account-outline"> </span>Account</span>
</div>
<div class="account-head">
<img class="account-head-avatar" src="/resources/graphics/avatars/azuma-3.svg">
<span class="account-head-name"><span class="mdi mdi-check-decagram"></span> admin</span><br>
<button class="button">Change avatar</button>
<select class="button">
<option>Online</option>
<option>Away</option>
<option>Do not disturb</option>
<option>Offline (Hidden)</option>
</select>
</div>
</div>
<div class="settings-popout" id="settings-appearance-popout">
<div class="form-header big color-red">
<span class="settings-headline"><span class="mdi mdi-palette-outline"> </span>Appearance</span>
</div>
<div id="appearance-table"></div> <!--Themers can use these divs to display information about their theme.-->
<div id="appearance-table-2"></div>
<!--What? I should use flexbox? Yeah, I should, but who cares? :tramp:-->
<table style="width: 100%;table-layout: fixed ;line-height: 20px; color: #aaa">
<tr>
<td>
Choose a theme
<select class="button form-input" id="theme-switcher">
<option value="default" selected>Default</option>
<option value="dark">Dark</option>
<option value="amoled">AMOLED</option>
<option value="fluent" style="color:red">(Experimental) Fluent</option>
<option value="custom" disabled>Custom...</option>
</select><br><br>
Font
<select class="button form-input" value="Hind" id="font-switcher">
<option value="Abel" style="font-family: Abel">Abel</option>
<option value="Archivo Narrow" style="font-family: Archivo Narrow">Archivo Narrow</option>
<option value="Hind" style="font-family: Hind">Hind</option>
<option value="Rajdhani" style="font-family: Rajdhani">Rajdhani</option>
<option value="Roboto" style="font-family: Roboto">Roboto</option>
<option value="Titillium Web" selected style="font-family: Titillium Web">Titillium Web</option>
</select><br><br>
Background
<input class="button form-input" style="text-align:left" placeholder="Custom background URL" disabled>
</td>
<td>
Channel list layout
<select class="button form-input">
<option value="default" selected>Default</option>
<option value="compact" disabled>Compact</option>
<option value="big" disabled>Big</option>
<option value="micro" disabled>Micro</option>
</select><br><br>
Message layout
<select class="button form-input">
<option value="default" selected>Default</option>
<option value="compact" disabled>Compact</option>
<option value="big" disabled>Big</option>
</select><br><br>
</td>
</tr>
</table>
<!--Yeah, it's simple. But works. xd-->
<button class="button" onclick="$(document.body).toggleClass('invert')">Invert colors</button><br><br>
</div>
<div class="settings-popout" id="settings-sound-popout">
<div class="form-header big color-green">
<span class="settings-headline"><span class="mdi mdi-speaker"> </span>Sound</span>
</div>
<span style="color: #bbb">Problems with surround sound audio systems are known. We're working on a fix.</span><br>
<button class="button" style="padding-left: 10px" onclick="new Audio('/resources/audio/message.mp3').play();"><span class="mdi mdi-volume-high"></span> Incoming message</button><br>
<button class="button" style="padding-left: 10px" onclick="new Audio('/resources/audio/message_short.mp3').play();"><span class="mdi mdi-volume-high"></span> Short incoming message</button><br>
<button class="button" style="padding-left: 10px" onclick="new Audio('/resources/audio/friend_request.mp3').play();"><span class="mdi mdi-volume-high"></span> New Friend request</button><br>
</div>
<div class="settings-popout" id="settings-info-popout">
<div class="form-header big color-blue">
<span class="settings-headline"><span class="mdi mdi-information-outline"> </span>Info</span>
</div>
<span style="color: #bbb" id="info-info">Links will always open in a new tab.</span><br><br>
Azuma is being developed by <a href="https://github.com/shinixsensei-dev">shinixsensei</a>; <a href="https://github.com/okrplay">okrplay</a> and <a href="https://rmcprod.me">RMC</a><br>
Additional contributors: <a href="https://ron31.me">Ron31</a><br><br>
You're using an alpha version which is in active development. Be aware of bugs and errors.<br>
If you find any bugs, we'd appreciate if you opened an issue on GitHub.<br><br>
The Notification sounds are licensed under a CC-Attribution License. Find the sounds here:<br>
<a href="https://notificationsounds.com/notification-sounds/job-done-501">New message sound</a><br>
<a href="https://notificationsounds.com/notification-sounds/suppressed-437">Short new message sound</a><br>
<a href="https://notificationsounds.com/message-tones/youve-been-informed-345">New Friend request</a><br><br>
<div class="form-header inline big color-blue">
<span class="settings-headline"><span class="mdi mdi-history"> </span>Changelog</span>
</div><br>
<section id="changelog"></section>
<div class="form-footer">
<a href="https://github.com/rmcproductions/Azuma">
<button class="button form-input">View on GitHub</button>
</a>
<a href="https://github.com/rmcproductions/Azuma/issues/new">
<button class="button form-input">Report a bug</button>
</a>
</div>
</div>
<div class="chat-messages">
<div class="scroll-container" id="scroller">
<div class="messages-container" id="messages-container">
<!--Messages are appended here-->
</div>
</div>
<div class="typing color-green" id="typing"><b>Typing: </b></div>
<div class="input h">
<input placeholder="Write a message..." id="message" class="input messagebox">
<span class="mdi mdi-send send-icon color-blue" id="send"></span>
</div>
</div>
<div id="disconnection-warning">
<span class="mdi mdi-close-network-outline"></span>You have been disconnected from the chat. Please be patient.
</div>
<!--
<div class="welcome-background" id="welcome-modal">
<div class="welcome-message">
<div class="welcome-left color-red">
<img class="welcome-illustration" src="/resources/graphics/illustrations/write-paper-ink.svg">
</div>
<div class="welcome-right">
<span class="welcome-headline">Who's typing?</span><br><br>
You can now see a little indicator when someone is typing! Yay!<br>
This thing really turns out to become Discord 2.<br><br>
Keep checking back for more updates!
<button class="button form-input" onclick="$('#welcome-modal').remove()" id="welcome-got-it">Got it!</button>
</div>
</div>
</div>-->
<script src="/js/app.js">
</script>
</body>
</html>