forked from HatCrew/HatClient
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
234 lines (229 loc) · 19.5 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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Planet - Chatting. Simplified.</title>
<link rel="icon" href="https://planetchat.ml/logo.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.css">
<link rel="stylesheet" href="css/newstyle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Oswald" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/emoji.css" rel="stylesheet">
</head>
<body>
<nav class="nav-extended black" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Planet<span>v1.1.7</span></a>
<ul class="right hide-on-med-and-down">
<li><a href="https://beta.planetchat.ml">Beta</a></li>
<li><a href="#about">About</a></li>
<li><a href="#settingsmodal">Settings</a></li>
</ul>
<ul id="nav-mobile" class="right side-nav">
<li><a href="#about">About</a></li>
<li><a href="#settingsmodal">Settings</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
<div class="nav-content">
</nav>
<nav id="optionsNav" class="nav-extended black hidden" role="navigation">
<div class="nav-wrapper container"><span>Chat Options:</span>
<ul class="right">
<li><a class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Invite User" href="#invitemodal"><i class="material-icons">forum</i></a></li>
<li><a class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Ignore User" href="#ignoremodal"><i class="material-icons">volume_off</i></a></li>
</ul>
</div>
</nav>
</div>
<div id="welcomepage" class="container loginform">
<div class="col s12">
<div class="row">
<div class="input-field col s9 offset-s1">
<select id="serverchoice">
<option value="hackchat">🌏 Planet</option>
<option value="hackchat">👨💻 hack.chat</option>
<!--<option value="1111">1.1.1.1 (Experimental 🧪)</option>
<option value="1001">1.0.0.1 (Experimental 🧪)</option>
<option value="sleepychat">sleepykev.tk:8080</option>
<option value="hatchat">🧪 Paswd4</option>
<!--<option value="minuxchat">minuxgix.tk</option>-->
</select>
<label>Resolver</label>
</div>
</div>
<div class="row">
<div class="input-field col s9 offset-s1">
<input id="room" type="text" placeholder="Channel ID (eg. general, programming, memes)">
Here's a channel ID generated just for you: <span id="gen">Loading...</span>
</div>
</div>
<script>
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
var gen = document.getElementById("gen");
gen.innerText = makeid(8);
</script>
<div class="row">
<div class="input-field col s9 offset-s1">
<input id="username" type="text" placeholder="Username (Pick a cool and unique name)">
</div>
</div>
<div class="row">
<div class="input-field col s9 offset-s1">
<input id="password" type="password" placeholder="Verification code (Put anything here)">
</div>
</div>
<div class="row">
<div class="col s9 offset-s1 center-align">
<p class="right">
<input type="checkbox" class="filled-in" id="rememberme"/>
<label for="rememberme">Remember Me</label>
</p><br><br><br>
<button class="btn waves-effect waves-light right" onclick="initialize()">Join Chat</button>
</div>
</div>
</div>
</div>
<div id="main" class="hidden">
<ul id="messages" class="collection">
</ul>
<div class="container">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<div id="chatform"><textarea data-emojiable="converted" data-emoji-input="unicode" data-id="f39e2396-b824-43a7-b432-484cd8fffc28" data-type="original-input" id="icon_prefix2 chatinput" class="materialize-textarea" type="text" autocomplete="off" placeholder="Type a message..." autofocus></textarea>
<div class="emoji-menu" data-id="f39e2396-b824-43a7-b432-484cd8fffc28" data-type="menu" style="display: none;"><div class="emoji-items-wrap1"><table class="emoji-menu-tabs"><tbody><tr><td><a class="emoji-menu-tab icon-recent-selected"></a></td><td><a class="emoji-menu-tab icon-smile"></a></td><td><a class="emoji-menu-tab icon-flower"></a></td><td><a class="emoji-menu-tab icon-bell"></a></td><td><a class="emoji-menu-tab icon-car"></a></td><td><a class="emoji-menu-tab icon-grid"></a></td></tr></tbody></table><div class="emoji-items-wrap mobile_scrollable_wrap"><div class="emoji-items"><a href="javascript:void(0)" title=":rainbow:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -675px -75px no-repeat;background-size:725px 100px;" alt=":rainbow:"><span class="label">:rainbow:</span></a><a href="javascript:void(0)" title=":foggy:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -650px -75px no-repeat;background-size:725px 100px;" alt=":foggy:"><span class="label">:foggy:</span></a><a href="javascript:void(0)" title=":new_moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') 0px -75px no-repeat;background-size:725px 100px;" alt=":new_moon:"><span class="label">:new_moon:</span></a><a href="javascript:void(0)" title=":waning_crescent_moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -175px -75px no-repeat;background-size:725px 100px;" alt=":waning_crescent_moon:"><span class="label">:waning_crescent_moon:</span></a><a href="javascript:void(0)" title=":last_quarter_moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -150px -75px no-repeat;background-size:725px 100px;" alt=":last_quarter_moon:"><span class="label">:last_quarter_moon:</span></a><a href="javascript:void(0)" title=":waning_gibbous_moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -125px -75px no-repeat;background-size:725px 100px;" alt=":waning_gibbous_moon:"><span class="label">:waning_gibbous_moon:</span></a><a href="javascript:void(0)" title=":full_moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -100px -75px no-repeat;background-size:725px 100px;" alt=":full_moon:"><span class="label">:full_moon:</span></a><a href="javascript:void(0)" title=":moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -75px -75px no-repeat;background-size:725px 100px;" alt=":moon:"><span class="label">:moon:</span></a><a href="javascript:void(0)" title=":first_quarter_moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -50px -75px no-repeat;background-size:725px 100px;" alt=":first_quarter_moon:"><span class="label">:first_quarter_moon:</span></a><a href="javascript:void(0)" title=":waxing_crescent_moon:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -25px -75px no-repeat;background-size:725px 100px;" alt=":waxing_crescent_moon:"><span class="label">:waxing_crescent_moon:</span></a><a href="javascript:void(0)" title=":cyclone:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -625px -75px no-repeat;background-size:725px 100px;" alt=":cyclone:"><span class="label">:cyclone:</span></a><a href="javascript:void(0)" title=":snowflake:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -575px -75px no-repeat;background-size:725px 100px;" alt=":snowflake:"><span class="label">:snowflake:</span></a><a href="javascript:void(0)" title=":snowman:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -600px -75px no-repeat;background-size:725px 100px;" alt=":snowman:"><span class="label">:snowman:</span></a><a href="javascript:void(0)" title=":tiger2:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -375px -25px no-repeat;background-size:725px 100px;" alt=":tiger2:"><span class="label">:tiger2:</span></a><a href="javascript:void(0)" title=":rat:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -325px -25px no-repeat;background-size:725px 100px;" alt=":rat:"><span class="label">:rat:</span></a><a href="javascript:void(0)" title=":turtle:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -675px 0px no-repeat;background-size:725px 100px;" alt=":turtle:"><span class="label">:turtle:</span></a><a href="javascript:void(0)" title=":snail:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -75px -25px no-repeat;background-size:725px 100px;" alt=":snail:"><span class="label">:snail:</span></a><a href="javascript:void(0)" title=":cow:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_1.png') -300px 0px no-repeat;background-size:725px 100px;" alt=":cow:"><span class="label">:cow:</span></a><a href="javascript:void(0)" title=":confused:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_0.png') -625px -25px no-repeat;background-size:675px 175px;" alt=":confused:"><span class="label">:confused:</span></a><a href="javascript:void(0)" title=":large_blue_circle:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -775px -125px no-repeat;background-size:850px 175px;" alt=":large_blue_circle:"><span class="label">:large_blue_circle:</span></a><a href="javascript:void(0)" title=":small_blue_diamond:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -100px -150px no-repeat;background-size:850px 175px;" alt=":small_blue_diamond:"><span class="label">:small_blue_diamond:</span></a><a href="javascript:void(0)" title=":100:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -250px -125px no-repeat;background-size:850px 175px;" alt=":100:"><span class="label">:100:</span></a><a href="javascript:void(0)" title=":top:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -125px -100px no-repeat;background-size:850px 175px;" alt=":top:"><span class="label">:top:</span></a><a href="javascript:void(0)" title=":exclamation:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') 0px -100px no-repeat;background-size:850px 175px;" alt=":exclamation:"><span class="label">:exclamation:</span></a><a href="javascript:void(0)" title=":o:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -100px -100px no-repeat;background-size:850px 175px;" alt=":o:"><span class="label">:o:</span></a><a href="javascript:void(0)" title=":small_orange_diamond:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -75px -150px no-repeat;background-size:850px 175px;" alt=":small_orange_diamond:"><span class="label">:small_orange_diamond:</span></a><a href="javascript:void(0)" title=":large_blue_diamond:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -50px -150px no-repeat;background-size:850px 175px;" alt=":large_blue_diamond:"><span class="label">:large_blue_diamond:</span></a><a href="javascript:void(0)" title=":small_red_triangle_down:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -800px -125px no-repeat;background-size:850px 175px;" alt=":small_red_triangle_down:"><span class="label">:small_red_triangle_down:</span></a><a href="javascript:void(0)" title=":question:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -25px -100px no-repeat;background-size:850px 175px;" alt=":question:"><span class="label">:question:</span></a><a href="javascript:void(0)" title=":grey_exclamation:"><img src="img/blank.gif" class="img" style="display:inline-block;width:25px;height:25px;background:url('../lib/img//emoji_spritesheet_4.png') -50px -100px no-repeat;background-size:850px 175px;" alt=":grey_exclamation:"><span class="label">:grey_exclamation:</span></a></div></div></div></div>
<i class="emoji-picker-icon emoji-picker fa fa-smile-o" data-id="f39e2396-b824-43a7-b432-484cd8fffc28" data-type="picker"></i>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Modal Structure -->
<div id="settingsmodal" class="modal bottom-sheet">
<div class="modal-content">
<h4>Planet Settings</h4>
<div class="col s12">
<div class="row">
<div class="input-field col s1">
<select id="themechoice">
<option value="default">Light</option>
<option value="dark">Dark</option>
<option value="solarized">Solarized</option>
</select>
<label>Theme:</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" onclick="saveSettings()" class=" modal-action modal-close waves-effect waves-green btn-flat">Save Settings</a>
</div>
</div>
<div id="about" class="modal">
<div class="modal-content">
<h4>About Planet</h4>
<p>Planet is a chat webapp for many different things.
Planet is currently <b>unfinished</b>, but it will be receiving continuous updates forever.
<p>Planet is <b>completely</b> open-source for anyone to contribute to on <a href="https://github.com/planetchat/planetchat.github.io">GitHub</a></p>
<p>Planet channels are also <b>100% encrypted</b> with ultra-advanced SSL and Cloudflare security.</p>
<br><hr><br>
<h4>Built-In Commands</h4>
Planet has 8 built-in commands. These can be triggered by typing them into the message box.<br>
<ul class="cmds">
<li><span class="cmd">/help</span> — Displays all available commands.</li>
<li><span class="cmd">/online</span> — Displays the number of users connected to the current channel.</li>
<li><span class="cmd">/stats</span> — Displays the number of unique IP's connected to the current fork, as well as the number of channels in use.</li>
<li><span class="cmd">/morestats</span> — Displays additional information about the current fork, such as the number of messages sent and server uptime.</li>
<li><span class="cmd">/leave</span> — Disconnects you from the current channel.</li>
<li><span class="cmd">/setTheme [theme]</span> — Changes Planet's theme without navigating to the settings menu. Available themes are <span class=cmd">dark</span>, <span class=cmd">solarized</span>, and <span class=cmd">default</span>.</li>
</ul>
<h5>Mod-Only Commands</h5>
<ul class="cmds">
<li><span class="cmd">/ban [user]</span> — Bans a user from the server.<br></li>
<li><span class="cmd">/kick [user]</span> — Kicks a user from the channel.</li>
</ul>
<hr><br>
<h4>Info</h4>
<b>VERSION:</b> 1.1.7
<br>
<b>LAST UPDATED:</b> Monday 7 September, 2020
<br>
<b>CURRENT THEME:</b><span id="curTheme"></span></p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">OK</a>
</div>
</div>
<div id="help" class="modal">
<div class="modal-content">
<h4>Planet Help</h4>
<p>Coming soon!</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">OK</a>
</div>
</div>
<!-- -->
<div id="invitemodal" class="modal">
<div class="modal-content">
<h4>Invite User</h4>
<p>Enter name of user to invite:</p>
<div class="input-field col s4 offset-s4">
<input id="userToInvite" type="text" placeholder="Username">
</div>
</div>
<div class="modal-footer">
<a href="#" onclick="inviteUser()" class=" modal-action modal-close waves-effect waves-green btn-flat">Invite</a>
</div>
</div>
<!-- -->
<div id="ignoremodal" class="modal">
<div class="modal-content">
<h4>Ignore User</h4>
<p>Enter name of user to ignore:</p>
<div class="input-field col s4 offset-s4">
<input id="userToIgnore" type="text" placeholder="Username">
</div>
</div>
<div class="modal-footer">
<a href="#" onclick="ignoreUser()" class=" modal-action modal-close waves-effect waves-green btn-flat">Ignore</a>
</div>
</div>
<!-- Need to combine both modals at some point -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/config.js"></script>
<script src="js/util.js"></script>
<script src="js/jquery.emojiarea.js"></script>
<script src="js/emoji-picker.js"></script>
<!-- <script>
$(function() {
// Initializes and creates emoji set from sprite sheet
window.emojiPicker = new EmojiPicker({
emojiable_selector: '[data-emojiable=true]',
assetsPath: 'img/',
popupButtonClasses: 'fa fa-smile-o'
});
// Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
// You may want to delay this step if you have dynamically created input fields that appear later in the loading process
// It can be called as many times as necessary; previously converted input fields will not be converted again
window.emojiPicker.discover();
});
</script> -->
<script src="js/client.js" charset="utf-8"></script>
<script src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
</body>
</html>