forked from MonkeyGG2/monkeygg2.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
213 lines (212 loc) · 11.3 KB
/
index.html
File metadata and controls
213 lines (212 loc) · 11.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5937MNQKK5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-5937MNQKK5');
</script>
<div class="games">
<div class="searchbar">
<input type="text" id="search" placeholder="Search For Games..." />
<select id="sort">
<option value="alphabetical">Alphabetical</option>
<option value="reverse">Reverse Alphabetical</option>
</select>
<button class="randgame" onclick="randomGame()">Random Game</button>
</div>
<ul id="gamesList"></ul>
</div>
<div class="settings">
<div class="setting-bg">
<h4>Settings</h4>
<h6>Notice: All changes occur on page refresh</h6>
<div class="setting">
<button class="save-button" id="download">Download Game Data</button>
<button class="save-button" id="upload">Upload Game Data</button>
<p class="upload-result"></p>
</div>
<div class="setting">
<h5>Cloak and Mask Presets</h5>
<p>If the 2 settings are enabled, choose without typing it out</p>
<select id="presets">
<option value="classroom">Google Classroom</option>
<option value="drive">Google Drive</option>
<option value="mail">Google Mail</option>
<option value="canvas">Canvas</option>
</select>
<button class="submit-button" onclick="updatePreset()">Submit</button>
</div>
<div class="setting">
<h5>Cloak</h5>
<p>Toggles if Cloak (Hides site from history and being view online) is forced</p>
<label class="switch">
<input id="cloakCheckboxInput" type="checkbox" hidden />
<div class="switch__wrapper">
<div class="switch__toggle"></div>
</div>
</label>
</div>
<div class="setting">
<h5>Cloak URL</h5>
<p>This site will appear in your history instead of MonkeyGG2.</p>
<input id="cloakUrlInput" class="text-field" type="text" placeholder="https://classroom.google.com" />
<button id="cloakUrlSubmit" class="submit-button">Submit</button>
</div>
<div class="setting">
<h5>Mask</h5>
<p>Toggles if mask is applied on loading of a page automatically</p>
<label class="switch">
<input id="maskCheckboxInput" type="checkbox" hidden />
<div class="switch__wrapper">
<div class="switch__toggle"></div>
</div>
</label>
</div>
<div class="setting">
<h5>Mask Title</h5>
<p>This site's title will replace MonkeyGG2's title in your browser tab.</p>
<input id="maskTitleInput" class="text-field" type="text" placeholder="Home" />
<button id="maskTitleSubmit" class="submit-button">Submit</button>
</div>
<div class="setting">
<h5>Mask Icon URL</h5>
<p> This site's icon will replace MonkeyGG2's icon in your browser tab. (Don't forget https://) </p>
<input id="maskIconInput" class="text-field" type="text" placeholder="https://ssl.gstatic.com/classroom/ic_product_classroom_32.png" />
<button id="maskIconSubmit" class="submit-button">Submit</button>
</div>
<div class="setting">
<h5>Shortcuts</h5>
<p> Shortcuts will help some people navigate the site easier. DISCLAIMER!! Certain shortcuts such as CTRL+R and CTRL+W cannot be overriden manually. </p>
</div>
<div class="setting">
<!--thers prolly a more efficent way to do this but this is what i have rn-->
<div id="keybind-1">
<h5>Slot 1</h5>
<p>Press a button then press a key on your keyboard to choose</p>
<button class="keySlot 1">Set Key</button>
<p style="display: inline;">+</p>
<button class="keySlot 2">Set Key</button>
<p style="display: inline;">+</p>
<button class="keySlot 3">Set Key (Optional)</button>
<p style="display: inline;">=</p>
<select class="slot-action">
<option value="makecloak()">Cloak</option>
<option value="mask()">Mask</option>
<option value="returnHome()">Return to Home</option>
<option value="mute()">Mute</option>
<option value="#">Pop-up Tab</option>
<option value="eval(prompt('What do you want to run?')); pressedKeys = {};">Custom JS</option>
<option value="#">Select an option ▼</option>
</select>
</div>
<div id="keybind-2">
<h5>Slot 2</h5>
<p>Press a button then press a key on your keyboard to choose</p>
<button class="keySlot 1">Set Key</button>
<p style="display: inline;">+</p>
<button class="keySlot 2">Set Key</button>
<p style="display: inline;">+</p>
<button class="keySlot 3">Set Key (Optional)</button>
<p style="display: inline;">=</p>
<select class="slot-action">
<option value="makecloak()">Cloak</option>
<option value="mask()">Mask</option>
<option value="returnHome()">Return to Home</option>
<option value="mute()">Mute</option>
<option value="#">Pop-up Tab</option>
<option value="eval(prompt('What do you want to run?')); pressedKeys = {};">Custom JS</option>
<option value="#">Select an option ▼</option>
</select>
</div>
<div id="keybind-3">
<h5>Slot 3</h5>
<p>Press a button then press a key on your keyboard to choose</p>
<button class="keySlot 1">Set Key</button>
<p style="display: inline;">+</p>
<button class="keySlot 2">Set Key</button>
<p style="display: inline;">+</p>
<button class="keySlot 3">Set Key (Optional)</button>
<p style="display: inline;">=</p>
<select class="slot-action">
<option value="makecloak()">Cloak</option>
<option value="mask()">Mask</option>
<option value="returnHome()">Return to Home</option>
<option value="mute()">Mute</option>
<option value="#">Pop-up Tab</option>
<option value="eval(prompt('What do you want to run?')); pressedKeys = {};">Custom JS</option>
<option value="#">Select an option ▼</option>
</select>
</div>
</div>
<div class="setting">
<h5>Background</h5>
<p>Background can cause a lot of lag. Disable if your computer is diagnosed with low FPS.</p>
<label class="switch">
<input type="checkbox" id="backgroundCheckboxInput" hidden />
<div class="switch__wrapper">
<div class="switch__toggle"></div>
</div>
</label>
</div>
<h4>Appearance</h4>
<div class="setting">
<h5>Custom Theme (change on refresh)</h5>
<label for="bg">Background Color:</label>
<input type="color" id="bg" name="bg" value="#202020" class="color-input" />
<br />
<label for="block-color">Block Color:</label>
<input type="color" id="block-color" name="block-color" value="#2b2b2b" class="color-input" />
<br />
<label for="button-color">Button Color:</label>
<input type="color" id="button-color" name="button-color" value="#373737" class="color-input" />
<br />
<label for="games-color">Games Color:</label>
<input type="color" id="games-color" name="games-color" value="#373737a6" class="color-input" />
<br />
<label for="hover-color">Hover Color:</label>
<input type="color" id="hover-color" name="hover-color" value="#3c3c3c" class="color-input" />
<br />
<label for="scrollbar-color">Scrollbar Color:</label>
<input type="color" id="scrollbar-color" name="scrollbar-color" value="#434343" class="color-input" />
<br />
<label for="scroll-track-color">Scroll Track Color:</label>
<input type="color" id="scroll-track-color" name="scroll-track-color" value="#111" class="color-input" />
<br />
<label for="font-color">Font Color:</label>
<input type="color" id="font-color" name="font-color" value="#dcddde" class="color-input" />
<br />
<button class="save-button" onclick="restoreColorChanges()">Restore Defaults</button>
<button class="save-button" onClick="saveColorChanges()">Save Changes</button>
</div>
</div>
</div>
</section>
<section id="page-loader">
<iframe></iframe>
<button id="gameButton" class="in-game-button">
<svg class="svg-inline--fa fa-chevron-left fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg="">
<path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path>
</svg>
<!-- <i class="fas fa-chevron-left"></i> Font Awesome fontawesome.com -->
<img src="imgs/icon-256-256.png" width="36" height="36" alt="Logo" />
</button>
<button id="refresh" class="in-game-button">
<img src="imgs/refresh.png" width="40" height="36" alt="Logo" />
<svg class="svg-inline--fa fa-chevron-left fa-w-10" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg="">
<path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path>
</svg>
<!-- <i class="fas fa-chevron-left"></i> Font Awesome fontawesome.com -->
</button>
</section>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="js/loading.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.8.0/lib/p5.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/index.min.js" defer></script>
<script src="js/bg.js" defer></script>
<script src="js/index.js" defer></script>
<script src="js/cryptojs.js" defer></script>
</body>
</html>