A rewrite of Poly+, my quality-of-life browser extension for Polytoria. Built entirely fresh using the WXT extension framework, Typescript, and with added better overall code quality.
indexx.dev
extension
1<!doctype html>
2<html>
3 <head>
4 <!-- META TAGS -->
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8 <!-- PUBLIC -->
9 <title>Poly+ Preferences</title>
10 </head>
11 <body data-bs-theme="dark">
12 <dialog class="w-50" id="ResetDefaults-Modal">
13 <div class="modal-header">
14 <p>Are you sure?</p>
15 </div>
16 <div class="modal-body">
17 <p>Are you sure you'd like to reset all settings to their defaults? (this action is irreversible)</p>
18 <button id="ResetDefaults-Modal-Yes" class="btn btn-danger">Yes</button>
19 <button id="ResetDefaults-Modal-No" class="btn btn-primary">No</button>
20 </div>
21 </dialog>
22 <dialog class="w-50" id="ThemeCreator-Modal" data-setting="ThemeCreator">
23 <div class="modal-header">
24 <p>Theme Creator</p>
25 </div>
26 <div class="modal-body">
27 <p>Let out your creativity and turn it into a reality on Polytoria's website!</p>
28 <hr class="mt-3 mb-3" />
29
30 <label>Save Theme to JSON</label>
31 <div class="input-group mb-3">
32 <input id="SaveThemeToJSONInput" type="text" class="form-control bg-dark ignore" placeholder="JSON String..." disabled />
33 <button id="CopyThemeJSONBtn" class="btn btn-warning">Copy</button>
34 </div>
35
36 <label>Load Theme from JSON</label>
37 <div class="input-group">
38 <input type="text" class="form-control bg-dark ignore" placeholder="JSON..." />
39 <button id="LoadThemeFromJSONBtn" class="btn btn-success ignore">Load</button>
40 </div>
41
42 <hr class="mt-2 mb-3" />
43
44 <div class="card mb-2">
45 <div class="card-header">Navigation</div>
46 <div class="card-body">
47 <label>Navbar Background Color</label>
48 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="NavBGColor" />
49
50 <label>Navbar Border Color</label>
51 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="NavBorderColor" />
52
53 <label>Sidebar Background Color</label>
54 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideBGColor" />
55
56 <label>Sidebar Border Color</label>
57 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideBorderColor" />
58
59 <hr class="navbar-divider" />
60
61 <label>Navbar Item Color</label>
62 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="NavItemColor" />
63
64 <label>Sidebar Item Background Color</label>
65 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemBGColor" />
66
67 <label>Sidebar Item Border Color</label>
68 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemBorderColor" />
69
70 <label>Sidebar Item Color</label>
71 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemColor" />
72
73 <label>Sidebar Item Label Color</label>
74 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemLabelColor" />
75 </div>
76 </div>
77
78 <div class="card mb-2">
79 <div class="card-header">Background</div>
80 <div class="card-body">
81 <label>Background Color</label>
82 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="BGColor" />
83
84 <label>Background Image (URL)</label>
85 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="BGImage" />
86
87 <label>Background Image Size (if there is a background image)</label>
88 <select class="form-select bg-dark mb-2" data-setting="BGImageSize">
89 <option value="fit" selected>Fit (default)</option>
90 <option value="cover">Cover</option>
91 <option value="contain">Contain</option>
92 </select>
93 </div>
94 </div>
95
96 <div class="card mb-2">
97 <div class="card-header">Text</div>
98 <div class="card-body">
99 <label>Primary Text Color</label>
100 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="PrimaryTextColor" />
101
102 <label>Secondary Text Color</label>
103 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SecondaryTextColor" />
104
105 <div class="row">
106 <div class="col">
107 <label>Link (state: default) Text Color</label>
108 </div>
109 <div class="col">
110 <label>Link (state: hovered) Text Color</label>
111 </div>
112 <div class="col">
113 <label>Link (state: focused) Text Color</label>
114 </div>
115 </div>
116
117 <div class="input-group">
118 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="LinkTextColor" />
119 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="LinkHoveredTextColor" />
120 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="LinkFocusedTextColor" />
121 </div>
122 </div>
123 </div>
124
125 <div class="card mb-2">
126 <div class="card-header">Cards</div>
127 <div class="card-body">
128 <label>Card (Header) Background Color</label>
129 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="CardHeadBGColor" />
130
131 <label>Card (Body) Background Color</label>
132 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="CardBodyBGColor" />
133
134 <label>Card Border Color</label>
135 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="CardBorderColor" />
136 </div>
137 </div>
138
139 <div class="card mb-2">
140 <div class="card-header">Branding</div>
141 <div class="card-body">
142 <label>Website Logo (URL)</label>
143 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="WebsiteLogo" />
144 </div>
145 </div>
146
147 <div role="group" class="btn-group w-100">
148 <button class="btn btn-success w-25" data-setting="[save]">Save</button>
149 <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
150 <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
151 </div>
152 </div>
153 </dialog>
154 <dialog class="w-50" id="ModifyNav-Modal" data-setting="ModifyNav">
155 <div class="modal-header">
156 <p>Modify Navbar</p>
157 </div>
158 <div class="modal-body">
159 <p>Customize the navbar to your liking!</p>
160 <hr class="mt-2 mb-3" />
161 <div class="card mb-2">
162 <div class="card-header">#1 Navbar Item</div>
163 <div class="card-body">
164 <label>Label</label>
165 <input class="form-control bg-dark mb-2" placeholder="Play" data-parent="0" data-setting="Label" />
166
167 <label>Link</label>
168 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/places/" data-parent="0" data-setting="Link" />
169 </div>
170 </div>
171 <div class="card mb-2">
172 <div class="card-header">#2 Navbar Item</div>
173 <div class="card-body">
174 <label>Label</label>
175 <input class="form-control bg-dark mb-2" placeholder="Store" data-parent="1" data-setting="Label" />
176
177 <label>Link</label>
178 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/store/" data-parent="1" data-setting="Link" />
179 </div>
180 </div>
181 <div class="card mb-2">
182 <div class="card-header">#3 Navbar Item</div>
183 <div class="card-body">
184 <label>Label</label>
185 <input class="form-control bg-dark mb-2" placeholder="Guilds" data-parent="2" data-setting="Label" />
186
187 <label>Link</label>
188 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/guilds/" data-parent="2" data-setting="Link" />
189 </div>
190 </div>
191 <div class="card mb-2">
192 <div class="card-header">#4 Navbar Item</div>
193 <div class="card-body">
194 <label>Label</label>
195 <input class="form-control bg-dark mb-2" placeholder="People" data-parent="3" data-setting="Label" />
196
197 <label>Link</label>
198 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/users/" data-parent="3" data-setting="Link" />
199 </div>
200 </div>
201 <div class="card mb-2">
202 <div class="card-header">#5 Navbar Item</div>
203 <div class="card-body">
204 <label>Label</label>
205 <input class="form-control bg-dark mb-2" placeholder="Forum" data-parent="4" data-setting="Label" />
206
207 <label>Link</label>
208 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/forum" data-parent="4" data-setting="Link" />
209 </div>
210 </div>
211
212 <div role="group" class="btn-group w-100">
213 <button class="btn btn-success w-25" data-setting="[save]">Save</button>
214 <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
215 <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
216 </div>
217 </div>
218 </dialog>
219 <dialog class="w-75" id="AutoAdBidding-Modal" data-setting="AutoAdBidding">
220 <div class="modal-header">
221 <p>Automatic Ad Bidding</p>
222 </div>
223 <div class="modal-body">
224 <p>description (max 10 ads)</p>
225 <hr class="mt-2 mb-3" />
226 <div class="input-group mb-2">
227 <input type="text" class="form-control ignore" placeholder="Ad ID..">
228 <button class="btn btn-primary" id="auto-ad-bidding-add">Add</button>
229 </div>
230 <table class="table">
231 <thead>
232 <tr>
233 <th scope="col">#</th>
234 <th scope="col">Ad Name</th>
235 <th scope="col">Bid</th>
236 <th scope="col">Automation</th>
237 <th scope="col">Actions</th>
238 </tr>
239 </thead>
240 <tbody>
241 <tr>
242 <th scope="row">1</th>
243 <td><a href="https://polytoria.com/create/ad/632">"everdayi m shuffling"</a></td>
244 <td class="text-success"><span class="pi">$</span> 150</td>
245 <td>
246 <select class="form-select ignore">
247 <option value="daily" selected>Daily</option>
248 <option value="weekly">Weekly</option>
249 <option value="monthly">Monthly</option>
250 </select>
251 </td>
252 <td>
253 <div role="group" class="btn-group w-100">
254 <button class="btn btn-success w-25">
255 BID
256 </button>
257 <button class="btn btn-orange w-25">
258 EDIT
259 </button>
260 <button class="btn btn-danger w-25">
261 DELETE
262 </button>
263 </div>
264 </td>
265 </tr>
266 </tbody>
267 </table>
268
269 <div role="group" class="btn-group w-100">
270 <button class="btn btn-success w-25" data-setting="[save]">Save</button>
271 <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
272 <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
273 </div>
274 </div>
275 </dialog>
276 <div id="page">
277 <h1
278 class="text-center title-popup-bg"
279 style="
280 text-shadow: 0px 0px 5px orange;
281 padding-bottom: 5px;
282 margin-bottom: 10px;
283 display: flex;
284 align-items: center;
285 justify-content: center;
286 "
287 >
288 <span>Poly+</span>
289 </h1>
290 <div id="discovery" class="row flex-nowrap mb-2" style="--bs-gutter-x: 5px; overflow-x: auto; scrollbar-width: none;" >
291 <div class="col-md-3">
292 <input id="search" type="text" class="form-control form-control-sm" placeholder="Search.." />
293 </div>
294 </div>
295 <div id="settings"></div>
296 <hr />
297 <div class="btn-group w-100">
298 <button id="save" class="btn btn-primary w-50" disabled="true">Save</button>
299 <button id="reset" class="btn btn-warning w-50">Reset to Default Settings</button>
300 </div>
301 <p id="footer-text" class="text-center text-muted mt-2" style="font-size: 0.8rem;">
302 <span></span>
303 |
304 <a id="check-for-updates"><b>Check for Updates</b></a>
305 <br />
306 made by <a href="https://polytoria.com/u/Index" target="_blank">Index</a> with the help of several contributors <3
307 </p>
308 </div>
309 <script src="preferences-handler.js"></script>
310 </body>
311</html>