Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

examples: adjust page layout

This commit is contained in:
Haowei Wen 2021-09-23 00:40:03 +08:00
parent cdfde336d9
commit 0fac73356c
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
1 changed files with 39 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
examples/index.html
View File

@ -22,17 +22,11 @@
h1, h1,
h2 { h2 {
margin-bottom: 0; margin: 5px 0 0 0;
}
input[type="number"] {
max-width: 60px;
} }
input[type="text"] { input[type="text"] {
box-sizing: border-box; box-sizing: border-box;
max-width: 250px;
width: calc(100% - 100px);
} }
.control { .control {
@ -118,18 +112,18 @@
<div class="control-section"> <div class="control-section">
<h1>Canvas Size</h1> <h1>Canvas Size</h1>
<label class="control">Width: <input id="canvas_width" type="number" value="300"></label> <label class="control">Width: <input id="canvas_width" type="number" value="300" size="4"></label>
<label class="control">Height: <input id="canvas_height" type="number" value="300"></label> <label class="control">Height: <input id="canvas_height" type="number" value="300" size="4"></label>
</div> </div>
<div class="control-section"> <div class="control-section">
<h1>Animation</h1> <h1>Animation</h1>
<label class="control">Global Speed: <input id="global_animation_speed" type="number" value="1" step="0.1"></label> <label class="control">Global Speed: <input id="global_animation_speed" type="number" value="1" step="0.1" size="3"></label>
<button id="animation_pause_resume" type="button" class="control">Pause / Resume</button> <button id="animation_pause_resume" type="button" class="control">Pause / Resume</button>
<div> <div>
<h2>Rotate</h2> <h2>Rotate</h2>
<label class="control"><input id="rotate_animation" type="checkbox"> Enable</label> <label class="control"><input id="rotate_animation" type="checkbox"> Enable</label>
<label class="control">Speed: <input id="rotate_animation_speed" type="number" value="1" step="0.1"></label> <label class="control">Speed: <input id="rotate_animation_speed" type="number" value="1" step="0.1" size="3"></label>
</div> </div>
<div> <div>
<h2>Walk / Run / Fly</h2> <h2>Walk / Run / Fly</h2>
@ -139,7 +133,7 @@
<label><input type="radio" id="primary_animation_run" name="primary_animation" value="run"> Run</label> <label><input type="radio" id="primary_animation_run" name="primary_animation" value="run"> Run</label>
<label><input type="radio" id="primary_animation_fly" name="primary_animation" value="fly"> Fly</label> <label><input type="radio" id="primary_animation_fly" name="primary_animation" value="fly"> Fly</label>
</div> </div>
<label class="control">Speed: <input id="primary_animation_speed" type="number" value="1" step="0.1"></label> <label class="control">Speed: <input id="primary_animation_speed" type="number" value="1" step="0.1" size="3"></label>
</div> </div>
</div> </div>
@ -197,10 +191,10 @@
</div> </div>
<div class="control-section"> <div class="control-section">
<h1>Textures</h1> <h1>Skin</h1>
<div> <div>
<div class="control"> <div class="control">
<label>Skin URL: <input id="skin_url" type="text" value="img/1_8_texturemap_redux.png" placeholder="none" list="default_skins"></label> <label>URL: <input id="skin_url" type="text" value="img/1_8_texturemap_redux.png" placeholder="none" list="default_skins" size="20"></label>
<datalist id="default_skins"> <datalist id="default_skins">
<option value="img/1_8_texturemap_redux.png"> <option value="img/1_8_texturemap_redux.png">
<option value="img/hacksore.png"> <option value="img/hacksore.png">
@ -214,6 +208,8 @@
<button type="button" class="control" <button type="button" class="control"
onclick="document.getElementById('skin_url_upload').click();">Browse...</button> onclick="document.getElementById('skin_url_upload').click();">Browse...</button>
</div> </div>
</div>
<div>
<label class="control">Model: <label class="control">Model:
<select id="skin_model"> <select id="skin_model">
<option value="auto-detect" selected>Auto detect</option> <option value="auto-detect" selected>Auto detect</option>
@ -222,32 +218,36 @@
</select> </select>
</label> </label>
</div> </div>
<div> </div>
<div class="control">
<label>Cape URL: <input id="cape_url" type="text" value="" placeholder="none" list="default_capes"></label> <div class="control-section">
<datalist id="default_capes"> <h1>Cape</h1>
<option value=""> <div class="control">
<option value="img/mojang_cape.png"> <label>URL: <input id="cape_url" type="text" value="" placeholder="none" list="default_capes" size="20"></label>
<option value="img/legacy_cape.png"> <datalist id="default_capes">
<option value="img/hd_cape.png"> <option value="">
</datalist> <option value="img/mojang_cape.png">
<input id="cape_url_upload" type="file" class="hidden" accept="image/*"> <option value="img/legacy_cape.png">
<button id="cape_url_unset" type="button" class="control hidden">Unset</button> <option value="img/hd_cape.png">
<button type="button" class="control" </datalist>
onclick="document.getElementById('cape_url_upload').click();">Browse...</button> <input id="cape_url_upload" type="file" class="hidden" accept="image/*">
</div> <button id="cape_url_unset" type="button" class="control hidden">Unset</button>
<button type="button" class="control"
onclick="document.getElementById('cape_url_upload').click();">Browse...</button>
</div> </div>
<div> </div>
<div class="control">
<label>Panorama URL: <input id="panorama_url" type="text" value="" placeholder="none" list="default_panorama"></label> <div class="control-section">
<datalist id="default_panorama"> <h1>Panorama</h1>
<option value=""> <div class="control">
</datalist> <label>URL: <input id="panorama_url" type="text" value="" placeholder="none" list="default_panorama" size="20"></label>
<input id="panorama_url_upload" type="file" class="hidden" accept="image/*"> <datalist id="default_panorama">
<button id="panorama_url_unset" type="button" class="control hidden">Unset</button> <option value="">
<button type="button" class="control" </datalist>
onclick="document.getElementById('panorama_url_upload').click();">Browse...</button> <input id="panorama_url_upload" type="file" class="hidden" accept="image/*">
</div> <button id="panorama_url_unset" type="button" class="control hidden">Unset</button>
<button type="button" class="control"
onclick="document.getElementById('panorama_url_upload').click();">Browse...</button>
</div> </div>
</div> </div>