Furizon
/
furizon_webint
3
2
Fork 0
Code Issues 4 Pull Requests 1 Packages Projects Releases Wiki Activity

[Feature] Componentisation of profile pictures 

Added a propic component, with the following parameters: order, show flag and show effects

Added a fancy animation on sponsors' profile border
This commit is contained in:
Andrea 2024-01-03 17:18:31 +01:00
parent 05eb2172ce
commit a70f727009
11 changed files with 3191 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3048
dummy.json Normal file
View File

File diff suppressed because it is too large Load Diff

1
res/icons/calendar.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 386 B

6
res/styles/base.css Normal file
View File

@ -0,0 +1,6 @@
/* Other blocks' styles */
@import url('propic.css');
summary:has(span.status) {
background-color: #ffaf0377;
}

94
res/styles/propic.css Normal file
View File

@ -0,0 +1,94 @@
svg.propic-border-filter {
display: none;
}
.propic-container {
max-width:7em;
margin:0 auto;
position: relative;
}
.propic-container img {
display: block;
}
.propic-container .absolute {
position: absolute;
}
.propic-filler {
width: 100%;
border-radius:0.4em;
margin:0 auto;
border:4px solid #546e7a;
opacity: 0;
}
.propic {
width:calc(100% - 4mm);
border-radius:0.4em;
margin:2mm;
border:4px solid #546e7a00;
z-index: 2;
}
.propic-border {
top: 0%;
z-index: 0;
min-width: 100%;
min-height: 100%;
border-radius:0.6em;
border: none !important;
overflow: hidden;
}
.propic-border-animation {
min-width: 200%;
min-height: 200%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform-origin: 0% 0%;
}
.propic-border.blurred {
filter: blur(20px);
z-index: 1;
}
.propic-border.propic-animated-super .propic-border-animation {
background: linear-gradient(90deg, #FA5E00 20%, #FAAA00 40%, #FB8C00 60%, #FA3200 80%, #FAC800 100%);
animation: border-animation 1s linear 0ms infinite;
}
.propic-border.propic-animated-normal .propic-border-animation {
background: linear-gradient(90deg, #6124AB 20%, #AB248F 40%, #8E24AA 60%, #3524AB 80%, #AB243E 100%);
animation: border-animation 1s linear 0ms infinite;
}
@keyframes border-animation {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
.propic-flag {
z-index: 2;
max-width: 2em;
border-radius:2px;
right: calc(0% - 0.3em);
bottom: -0.1em;
}
.propic-super {
border:4px solid #fb8c00;
}
.propic-normal {
border:4px solid #8e24aa;
}

10
tpl/base.html
View File

@ -6,16 +6,8 @@
<meta name="viewport" content="width=400rem" />
<meta name="supported-color-schemes" content="light dark">
<link rel="stylesheet" href="/res/pico.min.css">
<link rel="stylesheet" href="/res/styles/base.css">
<style>
.propic-container {max-width:6em;margin:0 auto;}
.propic-container img {display:block;}
.propic {width:100%;border-radius:0.4em;margin:0 auto;border:4px solid #546e7a;}
.propic-flag {max-width:2em;margin-top:-1em;margin-left:auto;transform:translateX(0.7em);margin-right:0em;border-radius:2px;}
.propic-super {border:4px solid #fb8c00;}
.propic-normal {border:4px solid #8e24aa;}
.people div {text-align:center;}
.people h3, .people p, .people h5 {margin:0;}
.people {grid-auto-flow:row;}

14
tpl/blocks/badge.html
View File

@ -13,22 +13,20 @@
<div>
{% if not order.ans('propic') %}
<input type="file" value="" accept="image/jpeg,image/png" name="propic" />
{% else %}
<div class="propic-container">
<img src="/res/propic/{{order.ans('propic') or 'default.png'}}" class="propic" />
</div>
{% endif %}
{% with order=order, imgSrc='/res/propic/' + (order.ans('propic') or 'default.png'), effects = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<p>Normal Badge</p>
</div>
{% if order.is_fursuiter %}
<div>
{% if not order.ans('propic_fursuiter') %}
<input type="file" value="" accept="image/jpeg,image/png" name="propic_fursuiter" />
{% else %}
<div class="propic-container">
<img src="/res/propic/{{order.ans('propic_fursuiter') or 'default.png'}}" class="propic" />
</div>
{% endif %}
{% with order=order, imgSrc='/res/propic/' + (order.ans('propic_fursuiter') or 'default.png'), effects = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<p>Fursuit Badge</p>
</div>
{% endif %}

15
tpl/blocks/propic.html Normal file
View File

@ -0,0 +1,15 @@
<div class="propic-container" >
{% if effects and (not order.sponsorship == None) %}
<div class="absolute propic-border {{'propic-animated-' + (order.sponsorship or 'base')}}">
<div class="propic-border-animation"></div>
</div>
<div class="absolute propic-border blurred {{'propic-animated-' + (order.sponsorship or 'base')}}">
<div class="propic-border-animation"></div>
</div>
{% endif %}
<img alt="Your own profile picture" src="{{imgSrc}}" class="absolute propic {{(('propic-' + order.sponsorship) if not effects else '') if order.sponsorship else 'propic-base'}}"/>
<img alt="Your own profile picture" src="{{imgSrc}}" class="propic-filler {{(('propic-' + order.sponsorship) if not effects else '')}}"/>
{% if flag %}
<img alt="A country flag" class="absolute propic-flag" src="/res/flags/{{order.country.lower()}}.svg"/>
{% endif %}
</div>

7
tpl/blocks/room.html
View File

@ -27,10 +27,9 @@
<div class="grid people" style="padding-bottom:1em;">
{% for person in room_members %}
<div style="margin-bottom: 1em;">
<div class="propic-container">
<img class="propic propic-{{person.sponsorship}}" src="/res/propic/{{person.ans('propic') or 'default.png'}}" />
<img class="propic-flag" src="/res/flags/{{person.country.lower()}}.svg" />
</div>
{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = true, flag = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<h3>{{person.ans('fursona_name')}}</h3>
{% if person.code == order.room_id %}<p><strong style="color:#c6f">ROOM OWNER</strong></p>{% endif %}
<p>{{person.ans('staff_title') if person.ans('staff_title') else ''}} {{'Fursuiter' if person.is_fursuiter}}</p>

7
tpl/fursuitcount.html
View File

@ -15,10 +15,9 @@
<div class="grid people" style="padding-bottom:1em;">
{% endif %}
<div style="margin-bottom: 1em;">
<div class="propic-container">
<img class="propic propic-{{person.sponsorship}}" src="/res/propic/{{person.ans('propic_fursuiter') or 'default.png'}}" />
<img class="propic-flag" src="/res/flags/{{person.country.lower()}}.svg" />
</div>
{% with order=person, imgSrc='/res/propic/' + (person.ans('propic_fursuiter') or 'default.png'), effects = false, flag = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<h5>{{person.ans('fursona_name')}}</h5>
</div>
{% if loop.last %}</div>{% endif %}

29
tpl/nosecount.html
View File

@ -17,10 +17,9 @@
{% if m in orders %}
{% with person = orders[m] %}
<div style="margin-bottom: 1em;">
<div class="propic-container">
<img class="propic propic-{{person.sponsorship}}" src="/res/propic/{{person.ans('propic') or 'default.png'}}" />
<img class="propic-flag" src="/res/flags/{{person.country.lower()}}.svg" />
</div>
{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = false, flag = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<h5>{{person.ans('fursona_name')}}</h5>
</div>
{% endwith %}
@ -42,10 +41,9 @@
{% if m in orders %}
{% with person = orders[m] %}
<div style="margin-bottom: 1em;">
<div class="propic-container">
<img class="propic propic-{{person.sponsorship}}" src="/res/propic/{{person.ans('propic') or 'default.png'}}" />
<img class="propic-flag" src="/res/flags/{{person.country.lower()}}.svg" />
</div>
{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = false, flag = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<h5>{{person.ans('fursona_name')}}</h5>
</div>
{% endwith %}
@ -63,10 +61,10 @@
<div class="grid people" style="padding-bottom:1em;">
{% endif %}
<div style="margin-bottom: 1em;">
<div class="propic-container">
<img class="propic propic-{{person.sponsorship}}" src="/res/propic/{{person.ans('propic') or 'default.png'}}" />
<img class="propic-flag" src="/res/flags/{{person.country.lower()}}.svg" />
</div>
{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = false, flag = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<h5>{{person.ans('fursona_name')}}</h5>
</div>
{% if loop.last %}</div>{% endif %}
@ -80,10 +78,9 @@
<div class="grid people" style="padding-bottom:1em;">
{% endif %}
<div style="margin-bottom: 1em;">
<div class="propic-container">
<img class="propic propic-{{person.sponsorship}}" src="/res/propic/{{person.ans('propic') or 'default.png'}}" />
<img class="propic-flag" src="/res/flags/{{person.country.lower()}}.svg" />
</div>
{% with order=person, imgSrc='/res/propic/' + (person.ans('propic') or 'default.png'), effects = false, flag = true %}
{% include 'blocks/propic.html' %}
{% endwith %}
<h5>{{person.ans('fursona_name')}}</h5>
</div>
{% if loop.last %}</div>{% endif %}

2
tpl/welcome.html
View File

@ -25,7 +25,7 @@
<tr>
<th>When{{' (convention)' if order.has_early or order.has_late else ''}}?</th>
{# This should be early/late excluded! #}
<td>4 June → 8 June 2024</td></td>
<td><img src="/res/icons/calendar.svg" class="icon" />4 June → 8 June 2024</td></td>
</tr>
{% if order.has_early or order.has_late %}
<tr>