From f613b79ef979adcb39e5829f3cfa519b99b29df5 Mon Sep 17 00:00:00 2001 From: Oliver Falk Date: Fri, 30 Dec 2022 12:00:01 +0100 Subject: [PATCH] Enhance UI/UX --- .../templates/avatar_creator.html | 275 +++++++++++------- 1 file changed, 167 insertions(+), 108 deletions(-) diff --git a/ivatar/ivataraccount/templates/avatar_creator.html b/ivatar/ivataraccount/templates/avatar_creator.html index 71554c6..d991d49 100644 --- a/ivatar/ivataraccount/templates/avatar_creator.html +++ b/ivatar/ivataraccount/templates/avatar_creator.html @@ -42,132 +42,191 @@ "&accessories_type=" + accessories_type + "&clothe_type=" + clothe_type + "&clothe_color=" + clothe_color + "&clothe_graphic_type=" + clothe_graphic_type; $("#avatar_image").attr('src', url); - // TODO: Wire up manipulating size $("#avatar_image").attr('width', size + "px"); }

{% trans 'Adjust your avatar:' %}

-
- - -
-
-

{% trans 'Skin color' %}

+
+ + +
+
+
+ + + +
+
+
+ +
+ +
{% for color in SkinColor %}   {% endfor %} +

-
-

{% trans 'Hair color' %}

- {% for color in HairColor %} -   - {% endfor %} + +
+ +
+ {% for color in HairColor %} +   + {% endfor %} +

-
-

{% trans 'Facial hair type' %}

- {% for type in FacialHairType %} - - {% if type.name == 'BEARD_MEDIUM' %} - Medium - {% elif type.name == 'BEARD_LIGHT' %} - Light - {% elif type.name == 'BEARD_MAJESTIC' %} - Majestic - {% elif type.name == 'MOUSTACHE_FANCY' %} - Moustache fancy - {% elif type.name == 'MOUSTACHE_MAGNUM' %} - Moustache magnum - {% else %} - Default - {% endif %} - - {% endfor %} + +
+ + + +
+ + + +
+ + + +
+ +
+ +
+ {% for color in HatColor %} +   + {% endfor %} +

-
-

{% trans 'Facial hair color' %}

- {% for color in HairColor %} -   - {% endfor %} + +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+ {% for color in ClotheColor %} +   + {% endfor %} +

-
-

{% trans 'Top Type' %}

- {% for type in TopType %} - {{ type.name }} - {% endfor %} -
-
-
-

{% trans 'Hat color' %}

- {% for color in HatColor %} -   - {% endfor %} -
-
-
-

{% trans 'Mouth type' %}

- {% for type in MouthType %} - {{ type.name }} - {% endfor %} -
-
-
-

{% trans 'Eyes type' %}

- {% for type in EyesType %} - {{ type.name }} - {% endfor %} -
-
-
-

{% trans 'Eyebrow type' %}

- {% for type in EyebrowType %} - {{ type.name }} - {% endfor %} -
- -
-
-

{% trans 'Glasses' %}

- {% for type in AccessoriesType %} - {{ type.name }} - {% endfor %} -
-
-
-

{% trans 'Clothe type' %}

- {% for type in ClotheType %} - {{ type.name }} - {% endfor %} -
-
-
-

{% trans 'Clothe color' %}

- {% for color in ClotheColor %} -   - {% endfor %} -
-
-
-

{% trans 'Clothe graphic type' %}

- {% for type in ClotheGraphicType %} - {{ type.name }} - {% endfor %} + +