external-repos/ivatar
1
0
Fork 0
mirror of https://git.linux-kernel.at/oliver/ivatar.git synced 2025-11-19 14:38:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Slightly rearrange the options to the right - still WIP

Browse Source
This commit is contained in:
Oliver Falk
2022-12-31 20:41:05 +01:00
parent 419f8fce90
commit 65be9ac7cd
1 changed files with 45 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
ivatar/ivataraccount/templates/avatar_creator.html
View File

@@ -46,55 +46,54 @@
} }
</script> </script>
<h3>{% trans 'Adjust your avatar:' %}</h3>
<div> <div>
<div> <div id="preview_and_download" style="float:left;width:50%;" data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<h3>{% trans 'Adjust your avatar' %}</h3>
<div id="avatar_image_div"> <div id="avatar_image_div">
<img id="avatar_image" width="172px" style="float:left;"> <img id="avatar_image" width="172px">
<script>update_image();</script>
</div>
<div class="form-group" role="group" style="margin-top:5px;align:center;">
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=svg";window.open(url);'>Download SVG</button>
&nbsp;
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=png";window.open(url);'>Download PNG</button>
</div>
</div>
<div id="options" style="float:right;">
<!--
<div class="form-group" role="group">
<label for="preview_size" class="form-label">{% trans 'Preview size'%}</label>
<input type="range" class="form-range" id="preview_size" min="16" max="500" step="1" value="172">
<script> <script>
update_image(); var preview_size = document.getElementById("preview_size");
preview_size.addEventListener("input", function() {
size = this.value;
update_image();
});
</script> </script>
</div> </div>
<div id="options"> -->
<div class="form-group" role="group" style="float:right;width:50%">
<label for="preview_size" class="form-label">{% trans 'Preview size'%}</label>
<input type="range" class="form-range" id="preview_size" min="16" max="500" step="1" value="172">
<script>
var preview_size = document.getElementById("preview_size");
preview_size.addEventListener("input", function() {
size = this.value;
update_image();
});
</script>
</div>
<div class="form-group" role="group" style="float:right;width:50%">
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=svg";window.open(url);'>Download SVG</button>
&nbsp;
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=png";window.open(url);'>Download PNG</button>
</div>
</div> <div class="form-group" role="group">
<hr style="clear:both;"/> <label for="skincolor" class="form-label">{% trans 'Skin color'%}</label>
<div id="skincolor">
{% for color in SkinColor %}
<a class="button achoose" style="background:{{ color.main_value }};" onclick='skin_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %}
</div>
</div>
<br/>
<div class="form-group" role="group" style="float:none;"> <div class="form-group" role="group">
<label for="skincolor" class="form-label">{% trans 'Skin color'%}</label> <label for="haircolor" class="form-label">{% trans 'Hair color'%}</label>
<div id="skincolor"> <div id="haircolor">
{% for color in SkinColor %} {% for color in HairColor %}
<a class="button achoose" style="background:{{ color.main_value }};" onclick='skin_color="{{ color.value }}"; update_image();'>&nbsp;</a> <a class="button achoose" style="background:{{ color.main_value }};" onclick='hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<br/> <br/>
<div class="form-group" role="group" style="float:none;">
<label for="haircolor" class="form-label">{% trans 'Hair color'%}</label>
<div id="haircolor">
{% for color in HairColor %}
<a class="button achoose" style="background:{{ color.main_value }};" onclick='hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %}
</div>
</div>
<br/>
<div class="form-group" role="group" style="float:none;"> <div class="form-group" role="group" style="float:none;">
<label for="facialhairtype" class="form-label">{% trans 'Facial hair type' %}</label> <label for="facialhairtype" class="form-label">{% trans 'Facial hair type' %}</label>
@@ -122,8 +121,8 @@
<a class="button achoose" style="background:{{ color.main_value }};" onclick='facial_hair_color="{{ color.value }}"; update_image();'>&nbsp;</a> <a class="button achoose" style="background:{{ color.main_value }};" onclick='facial_hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %} {% endfor %}
</div> </div>
<br/>
</div> </div>
<br/>
<div class="form-group" role="group" style="float:none;"> <div class="form-group" role="group" style="float:none;">
<label for="toptype" class="form-label">{% trans 'Top type' %}</label> <label for="toptype" class="form-label">{% trans 'Top type' %}</label>
@@ -172,7 +171,7 @@
</div> </div>
<div class="form-group" role="group" style="float:none;"> <div class="form-group" role="group" style="float:none;">
<label for="eyebrowtype" class="form-label">{% trans 'Eyerbrow type' %}</label> <label for="eyebrowtype" class="form-label">{% trans 'Eyebrow type' %}</label>
<input type="range" class="form-range" id="eyebrowtype" min="0" max="12" step="1" value="0"> <input type="range" class="form-range" id="eyebrowtype" min="0" max="12" step="1" value="0">
<script> <script>
var elem = document.getElementById("eyebrowtype"); var elem = document.getElementById("eyebrowtype");
@@ -238,5 +237,7 @@
</div> </div>
</div> </div>
<div>
</div>
<div style="height:40px"></div> <div style="height:40px"></div>
{% endblock content %} {% endblock content %}