-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
299 lines (263 loc) · 18.2 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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Generic Engines </title>
<link rel="icon" href="img/favicon.ico">
<link id="css-palette" rel="stylesheet" type="text/css" href="css/classic-Palette.css">
<link id="main-css" rel="stylesheet" type="text/css" href="css/style.css">
<style id="edit-cell-height-override">/* Changed in JS */</style>
<style id="custom-theme-override">/* Changed in JS */</style>
<script>
// Detect IE and Edge, and display 'use Firefox or Chromium browser' notice
function checkIE () {
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
var noticeHTML = "";
// IE doesn't support multiline backtick strings
noticeHTML += ' <div class="fullscreen-box"> ';
noticeHTML += ' <div class="fullscreen-grayout"></div> ';
noticeHTML += ' <div class="fullscreen-content"> ';
noticeHTML += ' Generic Engines Web will not work on Internet Explorer or Edge. <hr /> ';
noticeHTML += ' Use ';
noticeHTML += ' <b><a href="https://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a></b>, ';
noticeHTML += ' <a href="https://www.google.com/chrome/">Google Chrome</a> or ';
noticeHTML += ' <a href="https://www.opera.com/">Opera</a><br /> ';
noticeHTML += " For the best experience, I recommend using Mozilla Firefox, as that's the primary browser I use to test/develop this site";
noticeHTML += ' </div> ';
noticeHTML += ' </div> ';
// Replace the entire site body
document.body.innerHTML = noticeHTML;
}
}
</script>
<script src="lib/zip.js"></script>
<script src="js/index.js"></script>
</head>
<body onload="checkIE ()">
<div class="notify-container">
</div>
<div class="fullscreen-box" id="export-box" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<div>
You can click off this window. Exporting will continue on background. Click 'Export' again to reopen this window. (Only while current exporting is still in progress)<br><br>
Downloaded files: <span id="export-done"></span>/<span id="export-to-download"></span> | Current status: <span id="export-status">Waiting</span><br><br>
<button id="export-refresh">Retry downloading pending files</button><button id="export-abort" class="right">Abort exporting</button><hr>
</div>
<div id="export-box-container">
</div>
</div>
</div>
<div class="fullscreen-box modal-selector-root" id="model-selector" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<span>
Select a model<br style="display: block; margin: -10px 0;">
<span style="font-size: 14px; font-family: serif;"><i>This list is incomplete. <a target="_blank" href="https://github.com/PatPL/Generic-Engines-Web/wiki/Adding-a-new-model-to-the-website">You can help by expanding it.</a></i></span>
<span style="font-size: 14px;"><a target="_blank" href="https://github.com/PatPL/Generic-Engines-Web/tree/master/files/models">Licences</a></span>
</span>
<!-- Populated on 'DOMContentLoaded' in 'ModelSelector.ts' -->
<div id="model-selector-content" class="modal-selector">
</div>
</div>
</div>
<div class="fullscreen-box modal-selector-root" id="plume-selector" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<span>
Select a plume<br>
<span style="font-size: 14px;">
Due to how hard it is to cut a background out of a translucent object (plume), there might be some black shade left.<br>
To enhance your plume viewing experience, please imagine, that shades of black are actually varying levels of transparency<br>
</span>
</span>
<!-- Populated on 'DOMContentLoaded' in 'ModelSelector.ts' -->
<div id="plume-selector-content" class="modal-selector">
</div>
</div>
</div>
<div class="fullscreen-box" id="settings-box" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<input setting-field="classic_unit_display" type="checkbox"><span class="checkbox-label">Display only KSP units (t, kN, l, kW (EC/s))</span><br>
<input setting-field="show_info_panel" type="checkbox"><span class="checkbox-label">Show side panel with additional info</span><br>
<input setting-field="prettify_config" type="checkbox"><span class="checkbox-label">Prettify exported config (For debug purposes)</span><br>
<input setting-field="hide_disabled_fields_on_sort" type="checkbox"><span class="checkbox-label">Hide rows with an inaccessible value on sorted column</span><br>
<input setting-field="ignore_localstorage_usage" type="checkbox"><span class="checkbox-label">Ignore localStorage usage notification on start</span>
<hr>
<span>Currently, you are using <b><span id="settings-localStorage-usage-display"></span></b> characters in your localStorage.</span><br>
<span>Check your localStorage character limit <a target="_blank" href="https://arty.name/localstorage.html">here</a></span><br><br>
<!--
<button id="settings-export-localStorage-button" class="option-button" style="width: 49%; float: left;">Export localStorage</button>
<button id="settings-import-localStorage-button" class="option-button" style="width: 49%; float: right">Import localStorage</button><br><br>
-->
<button id="settings-remove-all-autosaves" class="option-button" style="width: 100%; clear: both;">Remove all autosaves (<span id="settings-localStorage-autosave-usage-display"></span> characters used)</button>
</div>
</div>
<div class="fullscreen-box" id="about-box" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<center>
<h1>Generic Engines <span class="js-insert-version"></span></h1>
<hr>
<a target="_blank" href="https://github.com/PatPL/Generic-Engines-Web/wiki">Wiki 🗗</a>
<a target="_blank" href="https://github.com/PatPL/Generic-Engines-Web/releases">Changelog 🗗</a>
<a target="_blank" href="https://old.reddit.com/r/GenericEngines/">Subreddit 🗗</a>
<a target="_blank" href="https://github.com/PatPL/Generic-Engines-Web/issues/new/choose">Report a bug 🗗</a>
<hr>
<a target="_blank" href="https://github.com/PatPL/Generic-Engines-Web/tree/master">Source 🗗</a>
<a target="_blank" href="https://github.com/PatPL/Generic-Engines-Web/graphs/contributors">Authors 🗗</a>
</center>
</div>
</div>
<div class="fullscreen-box" id="cache-box" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<span>Browser cache</span>
<div id="cache-box-content">
<div>12</div>
<div>32423</div>
<div>432546</div>
</div>
</div>
</div>
<div class="fullscreen-box" id="open-box" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<div>
<img id="option-button-open-upload-list" src="svg/button/upload-large.svg" class="option-button">
<img id="option-button-append-upload-list" src="svg/button/upload-append-large.svg" class="option-button">
<div>(Open/Append) list from a file</div>
</div>
<div>
<img id="option-button-open-cache-list" src="svg/button/cache-open-().svg" class="option-button browser-relevant">
<img id="option-button-append-cache-list" src="svg/button/cache-append-().svg" class="option-button browser-relevant">
<div>(Open/Append) list from browser cache</div>
</div>
<div>
<img id="option-button-open-clipboard-list" src="svg/button/base64-open.svg" class="option-button">
<img id="option-button-append-clipboard-list" src="svg/button/base64-append.svg" class="option-button">
<div>(Open/Append) list from base64 string</div>
</div>
<div>
<img id="option-button-open-autosave-list" src="svg/button/autosave-open-large.svg" class="option-button">
<img id="option-button-append-autosave-list" src="svg/button/autosave-append-large.svg" class="option-button">
<div>(Open/Append) list from autosave</div>
</div>
<div>
<div>(Append) You can also try drag&dropping .enl files on this website</div>
</div>
</div>
</div>
<div class="fullscreen-box" id="save-box" style="display: none;">
<div class="fullscreen-grayout"></div>
<div class="fullscreen-content">
<div>
<img id="option-button-download-list" src="svg/button/download-large.svg" class="option-button">
<div>Download the list as .enl file</div>
</div>
<div>
<img id="option-button-cache-list" src="svg/button/cache-save-().svg" class="option-button browser-relevant">
<div>Store the list in broser cache</div>
</div>
<div>
<img id="option-button-clipboard-list" src="svg/button/base64-save.svg" class="option-button">
<div>Copy the list as a base64 string</div>
</div>
<div>
<img id="option-button-clipboard-selection" src="svg/button/base64-save.svg" class="option-button">
<div>Copy selected engines as a base64 string</div>
</div>
</div>
</div>
<div class="fullscreen-box" id="style-box" style="display: none;">
<div class="fullscreen-grayout transparent"></div>
<div class="fullscreen-content">
Current theme: <select id="styles-select"></select>
<div id="custom-styles-container" style="display: none">
<img src="svg/button/clear.svg" class="option-button button32px" id="custom-styles-reload" title="Rebuild the custom theme using last selected built-in theme">
<img src="svg/button/export.svg" class="option-button button32px" id="custom-styles-export" title="Export the theme as a Base64 string">
<img src="svg/button/import.svg" class="option-button button32px" id="custom-styles-import" title="Imports the theme from a Base64 string">
<button id="custom-styles-randomize" title=":D" style="display: none;">Randomize the values</button>
<br>
<span>Made a cool theme? <a target="_blank" href="https://forms.gle/cs4nZoidZhwurjxx8">Submit it</a>!</span>
<hr style="width: 150%;">
<table id="styles-custom">
</table>
</div>
</div>
</div>
<div class="fullscreen-box" id="color-box" style="display: none;">
<div class="fullscreen-grayout transparent"></div>
<div id="color-selector-container">
<!-- https://stackoverflow.com/questions/18452885/building-a-4-corners-colors-css3-gradient -->
<!-- https://codepen.io/anon/pen/GQvYXe -->
<div id="color-selector-squareX"></div>
<div id="color-selector-squareY"></div>
<div id="color-selector-squareOverlay"><div class="circular-color-meter"></div></div>
<div id="color-selector-r" title="Red"><div class="color-meter-vertical"></div></div>
<div id="color-selector-g" title="Green"><div class="color-meter-vertical"></div></div>
<div id="color-selector-b" title="Blue"><div class="color-meter-vertical"></div></div>
<div id="color-selector-s" title="Saturation"><div class="color-meter-horizontal"></div></div>
<div id="color-selector-v" title="Value"><div class="color-meter-horizontal"></div></div>
<div id="color-selector-a-grid"></div>
<div id="color-selector-a"></div>
<div id="color-selector-a-overlay" title="Alpha"><div class="color-meter-horizontal"></div></div>
<div id="color-selector-h" title="Hue"><div class="color-meter-vertical"></div></div>
<div id="color-selector-preview-grid"></div>
<div id="color-selector-preview" title="Color preview"></div>
<img class="option-button" id="color-selector-apply" title="Apply the changes" src="svg/button/apply.svg">
<img class="option-button" id="color-selector-revert" title="Revert the changes" src="svg/button/revert.svg">
<input id="color-selector-preview-input">
</div>
</div>
<div class="option-container" id="option-row">
<img style="grid-area: la;" id="option-button-new" title="Clear the current list" class="option-button" src="svg/button/clear.svg">
<img style="grid-area: lb;" id="option-button-open" title="Open/Append an existing list" class="option-button" src="svg/button/open.svg">
<img style="grid-area: lc;" id="option-button-save" title="Save current list" class="option-button" src="svg/button/save.svg">
<img style="grid-area: ld;" id="option-button-cache" title="Open browser cache" class="option-button browser-relevant" src="svg/button/cache-().svg">
<img style="grid-area: le;" id="option-button-validate" title="Check current list for inconsistencies" class="option-button" src="svg/button/validate.svg">
<img style="grid-area: lf;" id="option-button-export" title="Export current list as KSP mod" class="option-button" src="svg/button/export.svg">
<img style="grid-area: lg;" id="option-button-duplicate" title="Duplicate selected engines" class="option-button" src="svg/button/duplicate.svg">
<img style="grid-area: lh;" id="option-button-add" title="Add a new engine to current list" class="option-button" src="svg/button/add.svg">
<img style="grid-area: li;" id="option-button-remove" title="Delete selected engines from current list" class="option-button" src="svg/button/remove.svg">
<div style="grid-area: ss;" class="flex-spacer" id="list-name"></div>
<img style="grid-area: ra;" id="option-button-help" title="Help & About" class="option-button" src="svg/button/help.svg">
<img style="grid-area: rb;" id="option-button-style" title="Customize theme" class="option-button do-not-end-edit-mode" src="svg/button/style.svg">
<img style="grid-area: rc;" id="option-button-settings" title="Settings" class="option-button" src="svg/button/settings.svg">
</div>
<div id="content-container">
<div id="list-container">
</div>
<div id="info-panel">
<div id="info-panel-resize"></div>
<div id="info-panel-content" tabindex="-1">
<b>ID:</b> <span info-field="id"></span>
<hr>
<h6>Mass:</h6>
<b class="abbr" title="With empty tanks">Dry:</b> <span info-field="dry_mass"></span><br>
<b class="abbr" title="With full tanks">Wet:</b> <span info-field="wet_mass"></span>
<hr>
<h6 class="abbr" title="Range represents values between min and max throttle setting">Thrust:</h6>
<b class="abbr" title="Vacuum">Vac:</b> <span info-field="thrust_min_vac"></span> - <span info-field="thrust_max_vac"></span><br>
<b class="abbr" title="Sea level">SL:</b> <span info-field="thrust_min_atm"></span> - <span info-field="thrust_max_atm"></span>
<hr>
<h6 class="abbr" title="Range represents TWR from wet mass to dry mass">TWR:</h6>
<b><span class="abbr" title="Lowest throttle setting">Min</span> <span class="abbr" title="Vacuum">Vac:</span></b> <span info-field="twr_wet_vac_min"></span> - <span info-field="twr_dry_vac_min"></span><br>
<b><span class="abbr" title="Highest throttle setting">Max</span> <span class="abbr" title="Vacuum">Vac:</span></b> <span info-field="twr_wet_vac"></span> - <span info-field="twr_dry_vac"></span><br>
<b><span class="abbr" title="Lowest throttle setting">Min</span> <span class="abbr" title="Sea level">SL:</span></b> <span info-field="twr_wet_atm_min"></span> - <span info-field="twr_dry_atm_min"></span><br>
<b><span class="abbr" title="Highest throttle setting">Max</span> <span class="abbr" title="Sea level">SL:</span></b> <span info-field="twr_wet_atm"></span> - <span info-field="twr_dry_atm"></span>
<hr>
<h6 class="abbr" title="Range represents values between min and max throttle setting">Mass flow:</h6>
<span info-field="min_mass_flow"></span> - <span info-field="max_mass_flow"></span><br><br>
<b class="abbr" title="At 100% thrust">Per fuel:</b>
<span info-field="mass_flow_detail"></span>
<hr>
<h6 class="abbr" title="Burn time of the engine, with current thrust, Isp, thrust curve and tank settings, per used propellant">Burn time:</h6>
<span info-field="burn_time_detail"></span>
<hr><!-- Doesn't scroll all the way down without that, no clue why -->
</div>
</div>
</div>
</body>
</html>