-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
123 lines (120 loc) · 8.66 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
<!DOCTYPE html>
<html>
<head>
<title data-translate="app_name">HoloPrint</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.webmanifest"/>
<link rel="icon" sizes="48x48" href="favicon.ico"/>
<link rel="icon" sizes="192x192" href="assets/logo_192.png"/>
<!-- todo: add apple web application metadata things: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
<!-- todo: add metadata: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name-->
<link rel="stylesheet" href="https://fonts.bunny.net/css?family=catamaran:400,500,700&display=swap"/>
<link rel="stylesheet" href="index.css"/>
<script src="index.js" type="module"></script>
</head>
<body>
<main>
<h1 data-translate="app_name">HoloPrint</h1>
<div id="responsiveWidthWrapper">
<form action="javascript:" id="generatePackForm">
<fieldset>
<legend data-translate="generate_heading">Generate HoloPrint resource pack (<code>*.mcpack</code>)</legend>
<fieldset>
<legend data-translate="upload">Upload structure files (<code>*.mcstructure</code>)</legend>
<label>
<input type="file" accept=".mcstructure" multiple name="structureFiles" required id="structureFilesInput"/>
<div class="buttonlike"><p data-translate="upload.button">Upload a file</p><p data-translate="upload.button.drop_notice">Or drop files here</p></div>
</label>
</fieldset>
<div id="configTabsCont">
<input type="radio" checked name="configTabs" form="" id="settingsTab"/>
<label for="settingsTab" class="buttonlike" data-translate="settings.heading">Settings</label>
<fieldset>
<legend data-translate="settings.heading">Settings</legend>
<label><span data-translate="settings.material_list_language">Language (material list):</span> <select name="materialListLanguage" id="materialListLanguageSelector">
<option value="en_US" selected>English (United States)</option>
</select></label>
<label><span data-translate="settings.hologram_scale">Hologram scale:</span> <input type="number" min="70" max="100" step="1" value="95" name="scale"/>%</label>
<fieldset class="expandable textureSettings">
<legend><label><span data-translate="settings.textures">Textures</span><input type="checkbox"/></label></legend>
<div>
<div>
<label><span data-translate="settings.textures.tint.color">Overlay tint:</span> <input type="color" value="#579EFA" name="tintColor"/></label>
<label><span data-translate="settings.textures.tint.opacity">Overlay tint opacity:</span> <input type="number" min="1" max="100" value="20" name="tintOpacity"/>%</label>
<label><span data-translate="settings.textures.outline.width">Texture outline width:</span> <select name="textureOutlineWidth">
<option value="0" data-translate="settings.textures.outline.width.no_outline">None</option>
<option value="0.125">0.125px</option>
<option value="0.25" selected>0.25px</option>
<option value="0.5">0.5px</option>
<option value="1">1px</option>
</select></label>
<label><span data-translate="settings.textures.outline.color">Texture outline color:</span> <input type="color" value="#0000FF" name="textureOutlineColor"/></label>
<label><span data-translate="settings.textures.outline.opacity">Texture outline opacity:</span> <input type="number" min="10" max="100" value="65" name="textureOutlineOpacity"/>%</label>
</div>
<div id="texturePreviewCont">
<span data-translate="settings.textures.tint.toggleable_in_game">Tint can be turned on/off in-game</span>
<div id="texturePreviewImageCont">
<div class="loader"></div>
</div>
</div>
</div>
</fieldset>
<fieldset class="expandable">
<legend><label><span data-translate="settings.player_controls">In-game controls</span><input type="checkbox"/></label></legend>
<div id="playerControlsInputCont"></div>
</fieldset>
<label><span data-translate="settings.spawn_animation">Spawn animation:</span> <input type="checkbox" name="spawnAnimationEnabled" checked/></label>
<label><span data-translate="settings.ignored_blocks">Ignored blocks:</span> <input type="text" name="ignoredBlocks" placeholder="block_1 block_2 etc." data-translate-placeholder="settings.ignored_blocks.placeholder"/></label>
<details>
<summary data-translate="settings.advanced">Advanced</summary>
<label><span data-translate="settings.layer_mode">Layer mode:</span> <select name="layerMode">
<option value="single" selected data-translate="settings.layer_mode.single">Single layer</option>
<option value="all_below" data-translate="settings.layer_mode.all_below">All layers below</option>
</select></label>
<label><span data-translate="settings.opacity_mode">Opacity mode:</span> <select name="opacityMode">
<option value="multiple" selected data-translate="settings.opacity_mode.in_game_controls">In-game controls</option>
<option value="single" data-translate="settings.opacity_mode.fixed_opacity">Single option</option>
</select></label>
<label class="hidden"><span data-translate="settings.opacity">Hologram opacity:</span> <input type="number" min="10" max="100" step="5" value="90" name="opacity"/>%</label>
</details>
<button type="button" class="resetButton" data-reset-text="Settings reset!" data-translate="reset" data-translate-data-reset-text="settings.reset">Reset</button>
</fieldset>
<input type="radio" name="configTabs" form="" id="metadataTab"/>
<label for="metadataTab" class="buttonlike" data-translate="metadata.heading">Metadata</label>
<fieldset>
<legend data-translate="metadata.heading">Metadata</legend>
<label><span data-translate="metadata.pack_name">Pack name:</span> <code><input type="text" name="packName"/></code></label>
<label><span data-translate="metadata.pack_icon">Pack icon (<code>*.png</code>):</span> <input type="file" accept=".png" name="packIcon"/></label>
<label><span data-translate="metadata.structure_author">Structure author:</span> <input type="text" placeholder="MinecraftLover123" name="author" data-translate-placeholder="metadata.structure_author.placeholder"/></label>
<label><span data-translate="metadata.description">Description:</span><br/><textarea placeholder="This is my epic house!" rows="3" cols="20" name="description" data-translate-placeholder="metadata.description.placeholder"></textarea></label>
<button type="button" class="resetButton" data-reset-text="Metadata reset!" data-translate="reset" data-translate-data-reset-text="metadata.reset">Reset</button>
</fieldset>
<input type="radio" name="configTabs" form="" id="resourcesTab"/>
<label for="resourcesTab" class="buttonlike" data-translate="resource_packs.heading">Resource packs</label>
<fieldset>
<legend data-translate="resource_packs.heading">Resource packs</legend>
<label><span data-translate="resource_packs.upload_local">Upload a local resource pack:</span><br/><input type="file" webkitdirectory name="localResourcePack"/></label>
<button type="button" id="clearResourcePackCacheButton" data-translate="resource_packs.clear_cache">Clear resource pack cache</button>
<button type="button" class="resetButton" data-reset-text="Resource packs reset!" data-translate="reset" data-translate-data-reset-text="resource_packs.reset">Reset</button>
</fieldset>
</div>
<button name="submit" id="generatePackButton" data-translate="generate">Generate pack</button>
<small id="termsOfUseNotice" data-translate="terms_of_use_notice">By generating a pack with HoloPrint, you agree to the <a href="https://github.com/SuperLlama88888/holoprint/blob/main/TERMS_OF_USE.md" target="_blank">Terms of Use</a>. (It's really short!)</small>
</fieldset>
</form>
<div id="completedPacksCont"></div>
<div id="log"></div>
</div>
<div id="languageSelectorCont" title="Change language" data-translate-title="change_language">
<div id="languageSelectorButton"></div>
<select id="languageSelector">
<option value="en">English</option> <!-- Other options will be added later in JS -->
</select>
</div>
</main>
<div id="dropFileNotice" class="hidden">
<h1 data-translate="upload.drop_file">Drop your structure files here</h1>
</div>
</body>
</html>