Write elm frontend. WIP.
This commit is contained in:
parent
f1ee604638
commit
e338f76535
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,3 +1,5 @@
|
||||
__pycache__
|
||||
venv
|
||||
surprise.txt
|
||||
backend/static/main.js
|
||||
frontend/elm-stuff
|
||||
|
||||
@ -25,7 +25,7 @@ assert os.path.isdir(SURPRISE_ASSET_DIR)
|
||||
SURPRISE_REVEAL_DATETIME = dt_parser.parse(
|
||||
os.environ.get(
|
||||
"SURPRISE_REVEAL_DATETIME",
|
||||
(datetime.datetime.now() + datetime.timedelta(minutes=5)).isoformat()
|
||||
(datetime.datetime.now() + datetime.timedelta(minutes=1)).isoformat()
|
||||
)
|
||||
)
|
||||
print("SURPRISE_REVEAL_DATETIME =", SURPRISE_REVEAL_DATETIME)
|
||||
@ -50,9 +50,9 @@ def _get_surprise_assets():
|
||||
map(lambda s: s.lower().strip())
|
||||
)(files)
|
||||
if '_null' not in surprise_assets:
|
||||
surprise_assets['_null'] = os.path.join('/static', '_null.png')
|
||||
surprise_assets['_null'] = os.path.join('/static', '_null.svg')
|
||||
if '_secret' not in surprise_assets:
|
||||
surprise_assets['_secret'] = os.path.join('/static', '_secret.png')
|
||||
surprise_assets['_secret'] = os.path.join('/static', '_secret.svg')
|
||||
return surprise_assets
|
||||
|
||||
SURPRISE_ASSETS = _get_surprise_assets()
|
||||
|
||||
33
backend/static/_null.svg
Normal file
33
backend/static/_null.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80">
|
||||
<g id="vinyl-record" fill="none" transform="translate(40,0) translate(0,40) rotate(95.75999999999999) translate(-30,0) translate(0,-30) ">
|
||||
<path id="big-circle" fill="#404040" d="M30,0C13.4314,0,0,13.4314,0,30C0.01875,46.5607,13.4393,59.9812,30,60C46.5686,60,60,46.5686,60,30C60,13.4314,46.5686,0,30,0zM30,58C14.5361,58,2.00004,45.4639,2.00004,30C2.01738,14.5432,14.5432,2.01738,30,2.00004C45.4639,2.00004,58,14.5361,58,30C58,45.4639,45.4639,58,30,58z"/>
|
||||
<path id="inner-circle" fill="#404040" d="M44,30C44,22.268,37.732,16,30,16C22.2716,16.0086,16.0086,22.2716,16,30C16,37.732,22.268,44,30,44C37.732,44,44,37.732,44,30zM18,30C18,23.3726,23.3726,18,30,18C36.6244,18.0074,41.9926,23.3756,42,30C42,36.6274,36.6274,42,30,42C23.3726,42,18,36.6274,18,30z" transform="translate(30,30) translate(-30,-30)"/>
|
||||
<path id="middle-circle" fill="#404040" d="M33,30C33,28.3432,31.6568,27,30,27C28.3439,27.0018,27.0018,28.3439,27,30C27,31.6568,28.3431,33,30,33C31.6569,33,33,31.6568,33,30zM29,30C29,29.4477,29.4477,29,30,29C30.5521,29.0006,30.9995,29.4479,31,30C31,30.5523,30.5523,31,30,31C29.4477,31,29,30.5523,29,30z" transform="translate(30,30) translate(-30,-30)"/>
|
||||
<path id="shine-6" stroke="#404040" stroke-width="2" d="M55,30L55,30C54.9846,43.8003,43.8002,54.9846,29.9989,54.9999L30,55L30,55C43.8011,54.9843,54.9843,43.8011,55,30.0011L55,30Z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="79 79" stroke-dashoffset="79" style="stroke-dashoffset: 35.1527px;"/>
|
||||
<path id="shine-4" stroke="#404040" stroke-width="2" d="M45.4974,37.0001L45.4972,36.9999L45.4972,36.9996C43.7916,40.7704,40.7709,43.791,37.0001,45.4966L37,45.4967L37,45.4965L37.0001,45.4966C40.7708,43.7913,43.7915,40.771,45.4974,37.0001z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="25 25" stroke-dashoffset="25" style="stroke-dashoffset: 11.1243px;"/>
|
||||
<path id="shine-3" stroke="#404040" stroke-width="2" d="M29.9989,5C16.1989,5.01575,5.01575,16.1989,5,29.9989L4.99992,30L4.99996,30C5.0154,16.1997,16.1998,5.0154,30.0011,5.00008L30,5.00004L30,5L29.9989,5Z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="79 79" stroke-dashoffset="79" style="stroke-dashoffset: 35.1527px;"/>
|
||||
<path id="shine-1" stroke="#404040" stroke-width="2" d="M23,14.5033L23.0001,14.5033L23,14.5033C23,14.5033,23,14.5033,23,14.5034L23,14.5033ZM23,14.5034C23,14.5034,23,14.5034,23,14.5034L22.9999,14.5034C19.2292,16.2087,16.2085,19.229,14.5026,22.9998L14.5026,23.0002L14.5026,23.0002L14.5028,23.0004C16.2084,19.2296,19.2291,16.209,22.9999,14.5034L23,14.5033L23,14.5034Z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="25 25" stroke-dashoffset="25" style="stroke-dashoffset: 11.1243px;"/>
|
||||
<path id="shine-2" stroke="#404040" stroke-width="2" d="M25.5507,9.01385C17.1913,10.6996,10.6616,17.2463,9.00032,25.615C8.99927,25.6204,8.99936,25.6203,8.99945,25.6203C8.99996,25.6203,8.9988,25.6202,8.99719,25.6199C8.99961,25.6203,8.99975,25.6204,8.99982,25.6205L8.99999,25.6213C10.6603,17.2539,17.19,10.7041,25.5507,9.01385zM25.6188,9.00019C25.6206,8.99985,25.6223,8.99951,25.624,8.99916C25.6189,9.00017,25.6188,9.00015,25.6188,9.00019zM25.5507,9.01385C25.5734,9.00926,25.5961,9.00471,25.6188,9.00019C25.6188,9.00027,25.6189,9.00024,25.6188,9.00024L25.6136,9.00127C25.5926,9.00544,25.5716,9.00963,25.5507,9.01385z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="50 50" stroke-dashoffset="50" style="stroke-dashoffset: 22.2486px;"/>
|
||||
<path id="shine-5" stroke="#404040" stroke-width="2" d="M25.5507,9.01385C17.1913,10.6996,10.6616,17.2463,9.00032,25.615C8.99927,25.6204,8.99936,25.6203,8.99945,25.6203C8.99996,25.6203,8.9988,25.6202,8.99719,25.6199C8.99961,25.6203,8.99975,25.6204,8.99982,25.6205L8.99999,25.6213C10.6603,17.2539,17.19,10.7041,25.5507,9.01385zM25.6188,9.00019C25.6206,8.99985,25.6223,8.99951,25.624,8.99916C25.6189,9.00017,25.6188,9.00015,25.6188,9.00019zM25.5507,9.01385C25.5734,9.00926,25.5961,9.00471,25.6188,9.00019C25.6188,9.00027,25.6189,9.00024,25.6188,9.00024L25.6136,9.00127C25.5926,9.00544,25.5716,9.00963,25.5507,9.01385z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="50 50" stroke-dashoffset="50" transform="translate(43.0811,42.6889) rotate(-180) translate(-17.3106,-17.3102)" style="stroke-dashoffset: 22.2486px;"/>
|
||||
</g>
|
||||
<script><![CDATA[var q="- translate translate - scale scale - skewX skewY - - - rotate".split(" "),F="url blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia".split(" "),G=function(){function y(){if(!1!==n)g=n;else{var b=(new Date).getTime();0>t&&(t=b);g=(b-t+z)*m}p&&(g>l.end&&(g=l.end),0>g&&(g=0));for(var a,b=u.length,e=0;e<b;++e){for(var d=u[e],c="",H=l.anims[e].length,A=0;A<H;++A){var h=l.anims[e][A],k=h[0];if(h[3]){a=h[2];var f=h[4].length,v=h[4][f-1];a=g<=a?h[5][0]:Infinity!=
|
||||
h[3]&&g>=a+h[3]?0!=v&&h[3]%v?C(h[3]%v,h):h[5][f-1]:C((g-a)%v,h)}else a=h[2];0===k?(a=a*h[9]/100,k=h[7].getPointAtLength(a),c+="translate("+k.x+","+k.y+") ",h[10]&&(a?a=h[7].getPointAtLength(a-.5):(a=k,k=h[7].getPointAtLength(.5)),c+="rotate("+180*Math.atan2(k.y-a.y,k.x-a.x)/Math.PI+") ")):12>=k?(h=q[k]+"(",h=4>k?h+(1==k?a+",0":"0,"+a):7>k?h+(4==k?a+",1":"1,"+a):h+a,c+=h+") "):(a=I(h[8]&240,a),h=h[8]&15,1==h?d.setAttribute(k,a):!h&&(d.style[k]=a))}""!=c&&d.setAttribute("transform",c)}G.b&&G.b(g);p&&
|
||||
(0<=m&&g<l.end||0>m&&0<g?w(y):(G.a&&G.a(),n=g,p=!1))}function x(b){return 0<=b?Math.pow(b,1/3):-Math.pow(-b,1/3)}function J(b,a,e,d){if(0==b)return 0==a?a=-d/e:(b=Math.sqrt(e*e-4*a*d),d=(-e+b)/(2*a),0<=d&&1>=d?a=d:(d=(-e-b)/(2*a),a=0<=d&&1>=d?d:0)),a;var c=e/b-a*a/(b*b)/3;e=a*a*a/(b*b*b)/13.5-a*e/(b*b)/3+d/b;var g=e*e/4+c*c*c/27;a=-a/(3*b);if(0>=g)if(c||e){b=Math.sqrt(e*e/4-g);d=Math.acos(-e/2/b);e=Math.cos(d/3);d=Math.sqrt(3)*Math.sin(d/3);b=x(b);c=2*b*e+a;if(0<=c&&1>=c)return c;c=-b*(e+d)+a;if(0<=
|
||||
c&&1>=c)return c;c=b*(d-e)+a;if(0<=c&&1>=c)return c}else return-x(d/b);else{b=x(-e/2+Math.sqrt(g));e=x(-e/2-Math.sqrt(g));d=b+e+a;if(0<=d&&1>=d)return d;d=-(b+e)/2+a;if(0<=d&&1>=d)return d}return 0}function I(b,a){if(32==b&&"number"===typeof a)return"#"+("000000"+a.toString(16)).substr(-6);if(48==b)return a.join(",");if(80==b){for(var e="",d=a.length,c=0;c<d;)if("M"==a[c])e+="M"+a[c+1]+","+a[c+2],c+=3;else if("L"==a[c])e+="L"+a[c+1]+","+a[c+2],c+=3;else if("C"==a[c])e+="C"+a[c+1]+","+a[c+2]+","+a[c+
|
||||
3]+","+a[c+4]+","+a[c+5]+","+a[c+6],c+=7;else if("Z"==a[c])e+="Z",c+=1;else break;return e}if(64==b){if(99==a[0])return"none";e="";d=a.length;for(c=0;c<d;)e+=F[a[c]],0==a[c]?e+="("+a[c+1]+") ":4==a[c]?(e+="("+a[c+1]+"px "+a[c+2]+"px "+a[c+3]+"px #"+("00000000"+a[c+4].toString(16)).substr(-8)+") ",c+=3):e=1==a[c]?e+("("+a[c+1]+"px) "):6==a[c]?e+("("+a[c+1]+"deg) "):e+("("+(0>a[c+1]?0:a[c+1])+") "),c+=2;return e}return a}function r(b){return 0>=b?0:255<=b?255:b}function K(b,a,e,d){if(0==b)return(e-
|
||||
a)*d+a;if(16==b)return 1>d?a:e;if(32==b){if("number"===typeof a&&"number"===typeof e){var c=1-d,g,l,h;return r(c*(a>>16)+d*(e>>16))<<16|r(c*(a>>8&255)+d*(e>>8&255))<<8|r(c*(a&255)+d*(e&255))}return 1>d?a:e}if(48==b){0==a.length&&(a=[0]);0==e.length&&(e=[0]);b=a.length;a.length!=e.length&&(b=a.length*e.length);for(var k=Array(b),f=0;f<b;++f)c=a[f%a.length],g=(e[f%e.length]-c)*d+c,0>g&&(g=0),k[f]=g;return k}if(80==b){if(a.length!=e.length)return.5>d?a:e;b=a.length;k=[];for(f=0;f<b;++f)if("string"===
|
||||
typeof a[f]||"string"==typeof e[f]){if(a[f]!==e[f])return.5>d?a:e;k[f]=a[f]}else k[f]=(e[f]-a[f])*d+a[f];return k}if(64==b){b=a.length;if(b!=e.length)return a;k=Array(b);for(f=0;f<b;){if(a[f]!=e[f]||0==a[f])return a;k[f]=a[f];k[f+1]=(e[f+1]-a[f+1])*d+a[f+1];if(4==a[f]){k[f+2]=(e[f+2]-a[f+2])*d+a[f+2];k[f+3]=(e[f+3]-a[f+3])*d+a[f+3];var c=1-d,m=a[f+4],n=e[f+4];g=c*(m>>>24)+d*(n>>>24);l=c*(m>>16&255)+d*(n>>16&255);h=c*(m>>8&255)+d*(n>>8&255);k[f+4]=(r(l)<<16|r(h)<<8|r(c*(m&255)+d*(n&255)))+16777216*
|
||||
(r(g)|0);f+=3}f+=2}return k}return 0}function C(b,a){var e;a:{e=a[4].length;for(var d=0;d<e;++d)if(b<a[4][d]){e=d;break a}--e}d=a[4][e-1];d=(b-d)/(a[4][e]-d);if(a[6]&&a[6].length>e-1){var c=a[6][e-1];if(0<=c[0])if(0>=d)d=0;else if(1<=d)d=1;else var g=c[0],l=c[2],d=J(3*g-3*l+1,-6*g+3*l,3*g,-d),d=3*d*(1-d)*(1-d)*c[1]+3*d*d*(1-d)*c[3]+d*d*d;else-1!=c[0]&&(-2==c[0]?(c=c[1],d=Math.ceil(d*c)/c):-3==c[0]&&(c=c[1],d=Math.floor(d*c)/c))}return K(a[8]&240,a[5][e-1],a[5][e],d)}function D(b){p=!0;0!=m&&(z=b/
|
||||
m,n=!1);t=-1;w(y)}function E(b){g=b;!1!==n?B||p||0==m?n=g:D(g):z=g/m-((new Date).getTime()-(0>t?(new Date).getTime():t));y()}var w=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||null;w||(w=function(b){window.setTimeout(b,16)});var g=0,t=-1,z=0,B=!0,n=0,p=!1,m=1,l,u=[],L={stroke:32,fill:32,strokeDasharray:48,filter:64,width:1,height:1,d:81};return{play:function(b){"undefined"!==typeof b&&
|
||||
E(b);B=!1;p||(b=n,0<m&&(0>b||b>=l.end)?b=0:0>m&&(0>=b||b>l.end)&&(b=l.end),D(b));return G},pause:function(b){"undefined"!==typeof b&&E(b);B=!0;p&&(p=!1,n=g);return G},_set_data:function(b){l=b;u=[];for(b=0;b<l.targets.length;++b)u[b]=document.getElementById(l.targets[b]);l.anims.forEach(function(a){if(0==a[0][0]){var b=document.createElementNS("http://www.w3.org/2000/svg","path");b.setAttribute("d",a[0][7]);a[0][10]=" "==a[0][7].charAt(0);a[0][9]=b.getTotalLength();a[0][7]=b}a.forEach(function(a){a[8]=
|
||||
L[a[0]];a[8]||(a[8]=0)})})}}}();window.ks=G;
|
||||
document.ks=ks;ks._data={targets:['vinyl-record','shine-6','shine-4','shine-3','shine-1','shine-2','shine-5'],
|
||||
anims:[[[1,0,40],[2,0,40],[12,0,0,Infinity,[0,2000],[360,0]],[1,0,-30],[2,0,-30]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[79,0,79],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[25,0,25],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[79,0,79],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[25,0,25],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[50,0,50],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[50,0,50],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]]],
|
||||
end:Infinity};ks._set_data(ks._data);var hr=document.location.href.split('?');(2>hr.length||-1==hr[1].split('&').indexOf('playState=paused'))&&ks.play();]]></script>
|
||||
<iframe xmlns="http://www.w3.org/1999/xhtml" class="cleanslate hidden" src="vinyl-dark-grey_files/commandline.html" id="cmdline_iframe" loading="lazy" style="height: 0px !important;"></iframe></a0:svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
43
backend/static/_secret.svg
Normal file
43
backend/static/_secret.svg
Normal file
@ -0,0 +1,43 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80"><iframe xmlns="http://www.w3.org/1999/xhtml" class="cleanslate hidden" src="vinyl-dj-dark-grey_files/commandline.html" id="cmdline_iframe" loading="lazy" style="height: 0px !important;"></iframe>
|
||||
<defs xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="record" preserveAspectRatio="none" width="60" height="60" viewBox="0 0 60 60" overflow="visible">
|
||||
<g id="vinyl-record-x" fill="none" transform="translate(30,30) rotate(360) translate(-30,-30)">
|
||||
<path id="big-circle-x" fill="#404040" d="M30,0C13.4314,0,0,13.4314,0,30C0.01875,46.5607,13.4393,59.9812,30,60C46.5686,60,60,46.5686,60,30C60,13.4314,46.5686,0,30,0zM30,58C14.5361,58,2.00004,45.4639,2.00004,30C2.01738,14.5432,14.5432,2.01738,30,2.00004C45.4639,2.00004,58,14.5361,58,30C58,45.4639,45.4639,58,30,58z" transform="translate(30,30) translate(-30,-30)"/>
|
||||
<path id="inner-circle-x" fill="#404040" d="M44,30C44,22.268,37.732,16,30,16C22.2716,16.0086,16.0086,22.2716,16,30C16,37.732,22.268,44,30,44C37.732,44,44,37.732,44,30zM18,30C18,23.3726,23.3726,18,30,18C36.6244,18.0074,41.9926,23.3756,42,30C42,36.6274,36.6274,42,30,42C23.3726,42,18,36.6274,18,30z" transform="translate(30,30) translate(-30,-30)"/>
|
||||
<path id="middle-circle-x" fill="#404040" d="M33,30C33,28.3432,31.6568,27,30,27C28.3439,27.0018,27.0018,28.3439,27,30C27,31.6568,28.3431,33,30,33C31.6569,33,33,31.6568,33,30zM29,30C29,29.4477,29.4477,29,30,29C30.5521,29.0006,30.9995,29.4479,31,30C31,30.5523,30.5523,31,30,31C29.4477,31,29,30.5523,29,30z" transform="translate(30,30) translate(-30,-30)"/>
|
||||
<path id="shine-6-x" stroke="#404040" stroke-width="2" d="M55,30L55,30C54.9846,43.8003,43.8002,54.9846,29.9989,54.9999L30,55L30,55C43.8011,54.9843,54.9843,43.8011,55,30.0011L55,30Z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="79 79" stroke-dashoffset="79" style="stroke-dashoffset: 12.9595px;"/>
|
||||
<path id="shine-4-x" stroke="#404040" stroke-width="2" d="M45.4974,37.0001L45.4972,36.9999L45.4972,36.9996C43.7916,40.7704,40.7709,43.791,37.0001,45.4966L37,45.4967L37,45.4965L37.0001,45.4966C40.7708,43.7913,43.7915,40.771,45.4974,37.0001z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="25 25" stroke-dashoffset="25" style="stroke-dashoffset: 4.10112px;"/>
|
||||
<path id="shine-3-x" stroke="#404040" stroke-width="2" d="M29.9989,5C16.1989,5.01575,5.01575,16.1989,5,29.9989L4.99992,30L4.99996,30C5.0154,16.1997,16.1998,5.0154,30.0011,5.00008L30,5.00004L30,5L29.9989,5Z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="79 79" stroke-dashoffset="79" style="stroke-dashoffset: 12.9595px;"/>
|
||||
<path id="shine-1-x" stroke="#404040" stroke-width="2" d="M23,14.5033L23.0001,14.5033L23,14.5033C23,14.5033,23,14.5033,23,14.5034L23,14.5033ZM23,14.5034C23,14.5034,23,14.5034,23,14.5034L22.9999,14.5034C19.2292,16.2087,16.2085,19.229,14.5026,22.9998L14.5026,23.0002L14.5026,23.0002L14.5028,23.0004C16.2084,19.2296,19.2291,16.209,22.9999,14.5034L23,14.5033L23,14.5034Z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="25 25" stroke-dashoffset="25" style="stroke-dashoffset: 4.10112px;"/>
|
||||
<path id="shine-2-x" stroke="#404040" stroke-width="2" d="M25.5507,9.01385C17.1913,10.6996,10.6616,17.2463,9.00032,25.615C8.99927,25.6204,8.99936,25.6203,8.99945,25.6203C8.99996,25.6203,8.9988,25.6202,8.99719,25.6199C8.99961,25.6203,8.99975,25.6204,8.99982,25.6205L8.99999,25.6213C10.6603,17.2539,17.19,10.7041,25.5507,9.01385zM25.6188,9.00019C25.6206,8.99985,25.6223,8.99951,25.624,8.99916C25.6189,9.00017,25.6188,9.00015,25.6188,9.00019zM25.5507,9.01385C25.5734,9.00926,25.5961,9.00471,25.6188,9.00019C25.6188,9.00027,25.6189,9.00024,25.6188,9.00024L25.6136,9.00127C25.5926,9.00544,25.5716,9.00963,25.5507,9.01385z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="50 50" stroke-dashoffset="50" style="stroke-dashoffset: 8.20224px;"/>
|
||||
<path id="shine-5-x" stroke="#404040" stroke-width="2" d="M25.5507,9.01385C17.1913,10.6996,10.6616,17.2463,9.00032,25.615C8.99927,25.6204,8.99936,25.6203,8.99945,25.6203C8.99996,25.6203,8.9988,25.6202,8.99719,25.6199C8.99961,25.6203,8.99975,25.6204,8.99982,25.6205L8.99999,25.6213C10.6603,17.2539,17.19,10.7041,25.5507,9.01385zM25.6188,9.00019C25.6206,8.99985,25.6223,8.99951,25.624,8.99916C25.6189,9.00017,25.6188,9.00015,25.6188,9.00019zM25.5507,9.01385C25.5734,9.00926,25.5961,9.00471,25.6188,9.00019C25.6188,9.00027,25.6189,9.00024,25.6188,9.00024L25.6136,9.00127C25.5926,9.00544,25.5716,9.00963,25.5507,9.01385z" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="50 50" stroke-dashoffset="50" transform="translate(43.0811,42.6889) rotate(-180) translate(-17.3106,-17.3102)" style="stroke-dashoffset: 8.20224px;"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</defs>
|
||||
<use xmlns="http://www.w3.org/2000/svg" id="spinning-records" width="60" height="60" xlink:href="#record" transform="translate(40,0) translate(0,40) rotate(360) translate(-30,0) translate(0,-30) "/>
|
||||
<g xmlns="http://www.w3.org/2000/svg" id="dj-hand" transform="translate(60.4856,0) translate(0,77.7211) translate(-15.4856,0) translate(0,-45.7211) ">
|
||||
<path id="hand-fills" fill="#FFFFFF" d="M29.3536,21.3361C30.9814,22.3736,31.4604,24.5339,30.4239,26.1622L20.4122,41.8311C18.764,44.425,15.9014,45.993,12.8282,45.9854L9.00002,45.9854C4.03174,45.98,0.00541556,41.9537,2.49226e-05,36.9854L2.49226e-05,11.0255C-0.00349071,10.0962,0.365064,9.20402,1.02342,8.54801C1.68225,7.89469,2.57206,7.52742,3.49995,7.52555C4.02014,7.52836,4.53307,7.64906,4.99995,7.87852L4.99995,7.2716C4.99842,5.33555,6.56393,3.76336,8.49999,3.75691C9.02018,3.75973,9.53299,3.88031,9.99999,4.10941L9.99999,3.50004C9.99999,1.56703,11.567,0,13.5,0C15.433,0,17.0001,1.56703,17.0001,3.50004L17.0001,4.10402C17.4675,3.87668,17.9802,3.75738,18.5001,3.75492C20.4321,3.75727,21.9978,5.32289,22.0001,7.25496L22.0001,26.3413L24.5176,22.3977C25.0181,21.6156,25.8083,21.0639,26.7149,20.8635C27.6222,20.6577,28.5742,20.8282,29.3536,21.3361z"/>
|
||||
<path id="hand-outline" fill="#404040" d="M29.3536,21.3361L29.3536,21.3361C28.5742,20.8282,27.6222,20.6577,26.7149,20.8635C25.8083,21.0639,25.0181,21.6156,24.5176,22.3977L22.0001,26.3413L22.0001,7.25496C21.9978,5.32289,20.4321,3.75727,18.5001,3.75492C17.9802,3.75738,17.4675,3.87668,17.0001,4.10402L17.0001,3.50004C17.0001,1.56703,15.433,0,13.5,0C11.567,0,9.99999,1.56703,9.99999,3.50004L9.99999,4.10941C9.53299,3.88031,9.02018,3.75973,8.49999,3.75691C6.56393,3.76336,4.99842,5.33555,4.99995,7.2716L4.99995,7.87852C4.53307,7.64906,4.02014,7.52836,3.49995,7.52555C2.57206,7.52742,1.68225,7.89469,1.02342,8.54801C0.365064,9.20402,-0.00349071,10.0962,2.49226e-05,11.0255L2.49226e-05,36.9854C0.00541556,41.9537,4.03174,45.98,9.00002,45.9854L12.8282,45.9854C15.9014,45.993,18.764,44.425,20.4122,41.8311L30.4239,26.1622C31.4604,24.5339,30.9814,22.3736,29.3536,21.3361zM28.7374,25.087L28.7374,25.087L18.7266,40.7551C17.4442,42.7719,15.2181,43.9911,12.8282,43.9855L9.00002,43.9855C5.136,43.9808,2.00475,40.8496,2.00006,36.9855L2.00006,11.0255C1.99795,10.6273,2.1551,10.2446,2.43659,9.96293C2.86924,9.5325,3.51917,9.40641,4.08143,9.64371C4.6437,9.88102,5.00663,10.4346,5.00006,11.0449L5.00006,21.1007C5.00006,21.653,5.44784,22.1006,6.00002,22.1006C6.55233,22.1006,6.99999,21.653,6.99999,21.1007L6.99999,7.2716C6.99483,6.7323,7.27948,6.23156,7.74577,5.96039C8.21206,5.68922,8.78792,5.68922,9.2542,5.96039C9.72049,6.23156,10.0053,6.73219,9.99999,7.2716L9.99999,21.1007C9.99999,21.653,10.4476,22.1006,10.9999,22.1006C11.5523,22.1006,11.9999,21.653,11.9999,21.1007L11.9999,3.50016C11.9948,2.96086,12.2794,2.46012,12.7457,2.18895C13.212,1.91777,13.7878,1.91777,14.2541,2.18895C14.7204,2.46012,15.0052,2.96074,14.9999,3.50016L14.9999,21.0997C14.9999,21.652,15.4476,22.0997,15.9999,22.0997C16.5522,22.0997,16.9998,21.6519,16.9998,21.0997L16.9998,7.27547C16.9994,6.87035,17.1594,6.48164,17.4451,6.19441C17.7226,5.91117,18.1033,5.7525,18.4998,5.75496C19.3279,5.7559,19.9989,6.42691,19.9998,7.25496L19.9998,29.7656C20.0049,29.8003,20.0118,29.8346,20.0206,29.8686C20.027,29.9361,20.0404,30.0027,20.0606,30.0674C20.1192,30.2535,20.2334,30.4173,20.3876,30.5368C20.415,30.5589,20.4315,30.5891,20.4618,30.6083C20.4852,30.6232,20.5123,30.6244,20.5364,30.6371C20.6562,30.6956,20.785,30.7335,20.9174,30.7489C20.946,30.7514,20.9706,30.7656,20.9999,30.7656C21.0354,30.7605,21.0706,30.7534,21.1051,30.7444C21.1709,30.7379,21.2358,30.7249,21.2989,30.7054C21.4183,30.6666,21.5295,30.6061,21.6269,30.527C21.6803,30.4825,21.7289,30.4322,21.7716,30.3772C21.7933,30.3502,21.8234,30.3338,21.8426,30.3038L26.2,23.4785C26.6456,22.7816,27.571,22.5762,28.2696,23.0191C28.9683,23.4621,29.1777,24.3866,28.7374,25.087z"/>
|
||||
</g>
|
||||
<script xmlns="http://www.w3.org/2000/svg"><![CDATA[var q="- translate translate - scale scale - skewX skewY - - - rotate".split(" "),F="url blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia".split(" "),G=function(){function y(){if(!1!==n)g=n;else{var b=(new Date).getTime();0>t&&(t=b);g=(b-t+z)*m}p&&(g>l.end&&(g=l.end),0>g&&(g=0));for(var a,b=u.length,e=0;e<b;++e){for(var d=u[e],c="",H=l.anims[e].length,A=0;A<H;++A){var h=l.anims[e][A],k=h[0];if(h[3]){a=h[2];var f=h[4].length,v=h[4][f-1];a=g<=a?h[5][0]:Infinity!=
|
||||
h[3]&&g>=a+h[3]?0!=v&&h[3]%v?C(h[3]%v,h):h[5][f-1]:C((g-a)%v,h)}else a=h[2];0===k?(a=a*h[9]/100,k=h[7].getPointAtLength(a),c+="translate("+k.x+","+k.y+") ",h[10]&&(a?a=h[7].getPointAtLength(a-.5):(a=k,k=h[7].getPointAtLength(.5)),c+="rotate("+180*Math.atan2(k.y-a.y,k.x-a.x)/Math.PI+") ")):12>=k?(h=q[k]+"(",h=4>k?h+(1==k?a+",0":"0,"+a):7>k?h+(4==k?a+",1":"1,"+a):h+a,c+=h+") "):(a=I(h[8]&240,a),h=h[8]&15,1==h?d.setAttribute(k,a):!h&&(d.style[k]=a))}""!=c&&d.setAttribute("transform",c)}G.b&&G.b(g);p&&
|
||||
(0<=m&&g<l.end||0>m&&0<g?w(y):(G.a&&G.a(),n=g,p=!1))}function x(b){return 0<=b?Math.pow(b,1/3):-Math.pow(-b,1/3)}function J(b,a,e,d){if(0==b)return 0==a?a=-d/e:(b=Math.sqrt(e*e-4*a*d),d=(-e+b)/(2*a),0<=d&&1>=d?a=d:(d=(-e-b)/(2*a),a=0<=d&&1>=d?d:0)),a;var c=e/b-a*a/(b*b)/3;e=a*a*a/(b*b*b)/13.5-a*e/(b*b)/3+d/b;var g=e*e/4+c*c*c/27;a=-a/(3*b);if(0>=g)if(c||e){b=Math.sqrt(e*e/4-g);d=Math.acos(-e/2/b);e=Math.cos(d/3);d=Math.sqrt(3)*Math.sin(d/3);b=x(b);c=2*b*e+a;if(0<=c&&1>=c)return c;c=-b*(e+d)+a;if(0<=
|
||||
c&&1>=c)return c;c=b*(d-e)+a;if(0<=c&&1>=c)return c}else return-x(d/b);else{b=x(-e/2+Math.sqrt(g));e=x(-e/2-Math.sqrt(g));d=b+e+a;if(0<=d&&1>=d)return d;d=-(b+e)/2+a;if(0<=d&&1>=d)return d}return 0}function I(b,a){if(32==b&&"number"===typeof a)return"#"+("000000"+a.toString(16)).substr(-6);if(48==b)return a.join(",");if(80==b){for(var e="",d=a.length,c=0;c<d;)if("M"==a[c])e+="M"+a[c+1]+","+a[c+2],c+=3;else if("L"==a[c])e+="L"+a[c+1]+","+a[c+2],c+=3;else if("C"==a[c])e+="C"+a[c+1]+","+a[c+2]+","+a[c+
|
||||
3]+","+a[c+4]+","+a[c+5]+","+a[c+6],c+=7;else if("Z"==a[c])e+="Z",c+=1;else break;return e}if(64==b){if(99==a[0])return"none";e="";d=a.length;for(c=0;c<d;)e+=F[a[c]],0==a[c]?e+="("+a[c+1]+") ":4==a[c]?(e+="("+a[c+1]+"px "+a[c+2]+"px "+a[c+3]+"px #"+("00000000"+a[c+4].toString(16)).substr(-8)+") ",c+=3):e=1==a[c]?e+("("+a[c+1]+"px) "):6==a[c]?e+("("+a[c+1]+"deg) "):e+("("+(0>a[c+1]?0:a[c+1])+") "),c+=2;return e}return a}function r(b){return 0>=b?0:255<=b?255:b}function K(b,a,e,d){if(0==b)return(e-
|
||||
a)*d+a;if(16==b)return 1>d?a:e;if(32==b){if("number"===typeof a&&"number"===typeof e){var c=1-d,g,l,h;return r(c*(a>>16)+d*(e>>16))<<16|r(c*(a>>8&255)+d*(e>>8&255))<<8|r(c*(a&255)+d*(e&255))}return 1>d?a:e}if(48==b){0==a.length&&(a=[0]);0==e.length&&(e=[0]);b=a.length;a.length!=e.length&&(b=a.length*e.length);for(var k=Array(b),f=0;f<b;++f)c=a[f%a.length],g=(e[f%e.length]-c)*d+c,0>g&&(g=0),k[f]=g;return k}if(80==b){if(a.length!=e.length)return.5>d?a:e;b=a.length;k=[];for(f=0;f<b;++f)if("string"===
|
||||
typeof a[f]||"string"==typeof e[f]){if(a[f]!==e[f])return.5>d?a:e;k[f]=a[f]}else k[f]=(e[f]-a[f])*d+a[f];return k}if(64==b){b=a.length;if(b!=e.length)return a;k=Array(b);for(f=0;f<b;){if(a[f]!=e[f]||0==a[f])return a;k[f]=a[f];k[f+1]=(e[f+1]-a[f+1])*d+a[f+1];if(4==a[f]){k[f+2]=(e[f+2]-a[f+2])*d+a[f+2];k[f+3]=(e[f+3]-a[f+3])*d+a[f+3];var c=1-d,m=a[f+4],n=e[f+4];g=c*(m>>>24)+d*(n>>>24);l=c*(m>>16&255)+d*(n>>16&255);h=c*(m>>8&255)+d*(n>>8&255);k[f+4]=(r(l)<<16|r(h)<<8|r(c*(m&255)+d*(n&255)))+16777216*
|
||||
(r(g)|0);f+=3}f+=2}return k}return 0}function C(b,a){var e;a:{e=a[4].length;for(var d=0;d<e;++d)if(b<a[4][d]){e=d;break a}--e}d=a[4][e-1];d=(b-d)/(a[4][e]-d);if(a[6]&&a[6].length>e-1){var c=a[6][e-1];if(0<=c[0])if(0>=d)d=0;else if(1<=d)d=1;else var g=c[0],l=c[2],d=J(3*g-3*l+1,-6*g+3*l,3*g,-d),d=3*d*(1-d)*(1-d)*c[1]+3*d*d*(1-d)*c[3]+d*d*d;else-1!=c[0]&&(-2==c[0]?(c=c[1],d=Math.ceil(d*c)/c):-3==c[0]&&(c=c[1],d=Math.floor(d*c)/c))}return K(a[8]&240,a[5][e-1],a[5][e],d)}function D(b){p=!0;0!=m&&(z=b/
|
||||
m,n=!1);t=-1;w(y)}function E(b){g=b;!1!==n?B||p||0==m?n=g:D(g):z=g/m-((new Date).getTime()-(0>t?(new Date).getTime():t));y()}var w=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||null;w||(w=function(b){window.setTimeout(b,16)});var g=0,t=-1,z=0,B=!0,n=0,p=!1,m=1,l,u=[],L={stroke:32,fill:32,strokeDasharray:48,filter:64,width:1,height:1,d:81};return{play:function(b){"undefined"!==typeof b&&
|
||||
E(b);B=!1;p||(b=n,0<m&&(0>b||b>=l.end)?b=0:0>m&&(0>=b||b>l.end)&&(b=l.end),D(b));return G},pause:function(b){"undefined"!==typeof b&&E(b);B=!0;p&&(p=!1,n=g);return G},_set_data:function(b){l=b;u=[];for(b=0;b<l.targets.length;++b)u[b]=document.getElementById(l.targets[b]);l.anims.forEach(function(a){if(0==a[0][0]){var b=document.createElementNS("http://www.w3.org/2000/svg","path");b.setAttribute("d",a[0][7]);a[0][10]=" "==a[0][7].charAt(0);a[0][9]=b.getTotalLength();a[0][7]=b}a.forEach(function(a){a[8]=
|
||||
L[a[0]];a[8]||(a[8]=0)})})}}}();window.ks=G;
|
||||
document.ks=ks;ks._data={targets:['shine-6-x','shine-4-x','shine-3-x','shine-1-x','shine-2-x','shine-5-x','spinning-records','dj-hand'],
|
||||
anims:[[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[79,0,79],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[25,0,25],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[79,0,79],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[25,0,25],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[50,0,50],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[['strokeDashoffset',0,0,Infinity,[0,1000,2000],[50,0,50],[[0.42,0,0.58,1],[0.42,0,0.58,1],[-1]]]],
|
||||
[[1,0,40],[2,0,40],[12,0,0,Infinity,[0,500,1000,1500,2000],[360,313.502,360,360,0],[[0.42,0,1,1],[-1],[-1],[0,0,0.58,1],[-1]]],[1,0,-30],[2,0,-30]],
|
||||
[[1,0,0,Infinity,[0,500,1000,1500,2000],[60.4856,60.4856,60.4856,60.4856,60.4856],[[0.42,0,0.58,1],[0.42,0,0.58,1],[0,0,0.58,1],[0,0,0.58,1],[-1]]],[2,0,0,Infinity,[0,500,1000,1500,2000],[74.7211,74.7211,77.7211,77.7211,74.7211],[[0.42,0,0.58,1],[0.42,0,0.58,1],[0,0,0.58,1],[0,0,0.58,1],[-1]]],[1,0,-15.4856],[2,0,-45.7211]]],
|
||||
end:Infinity};ks._set_data(ks._data);var hr=document.location.href.split('?');(2>hr.length||-1==hr[1].split('&').indexOf('playState=paused'))&&ks.play();]]></script>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
33
backend/static/loading.svg
Normal file
33
backend/static/loading.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80"><iframe xmlns="http://www.w3.org/1999/xhtml" class="cleanslate hidden" src="loader-dark_files/commandline.html" id="cmdline_iframe" loading="lazy" style="height: 0px !important;"></iframe>
|
||||
<g xmlns="http://www.w3.org/2000/svg" id="sinewave-loader" fill="none" fill-rule="evenodd" stroke="#404040" transform=" translate(40,0) translate(0,40) rotate(0.04933877736720568) scale(0.9998349095940077,1) scale(1,0.9998349095940077) translate(-40,0) translate(0,-40)">
|
||||
<path id="loader-circle" d="M40,14.5C54.0602,14.5,65.5,25.9395,65.5,40C65.5,54.0605,54.0602,65.5,40,65.5C25.9398,65.5,14.5,54.0605,14.5,40C14.5,25.9395,25.9398,14.5,40,14.5zM40,64.5C26.4909,64.5,15.5,53.5091,15.5,40C15.5,26.4909,26.4909,15.5,40,15.5C53.5091,15.5,64.5,26.4909,64.5,40C64.5,53.5091,53.5091,64.5,40,64.5z" stroke-dasharray="314 314" stroke-dashoffset="314" stroke-width="1" style="stroke-width: 1.00055px; stroke-dashoffset: 313.827px;"/>
|
||||
</g>
|
||||
<script xmlns="http://www.w3.org/2000/svg"><![CDATA[window.ks=function(){function F(a){return"undefined"!==typeof a}function v(a,b){return a&&0==a.indexOf(b)}function M(a){if(!isFinite(a))throw"non-finite value";}function N(a){if(14>=a)return 16;(a=W[a])||(a=0);return a}function D(a){return 0<=a?Math.pow(a,1/3):-Math.pow(-a,1/3)}function X(a,b,c,d){if(0==a)return 0==b?b=-d/c:(a=Math.sqrt(c*c-4*b*d),d=(-c+a)/(2*b),0<=d&&1>=d?b=d:(d=(-c-a)/(2*b),b=0<=d&&1>=d?d:0)),b;var e=c/a-b*b/(a*a)/3;c=b*b*b/(a*a*a)/13.5-b*c/(a*a)/3+d/a;var k=c*c/4+e*e*e/27;b=-b/
|
||||
(3*a);if(0>=k){if(0==e&&0==c)return-D(d/a);a=Math.sqrt(c*c/4-k);d=Math.acos(-c/2/a);c=Math.cos(d/3);d=Math.sqrt(3)*Math.sin(d/3);a=D(a);e=2*a*c+b;if(0<=e&&1>=e)return e;e=-a*(c+d)+b;if(0<=e&&1>=e)return e;e=a*(d-c)+b;if(0<=e&&1>=e)return e}else{a=D(-c/2+Math.sqrt(k));c=D(-c/2-Math.sqrt(k));d=a+c+b;if(0<=d&&1>=d)return d;d=-(a+c)/2+b;if(0<=d&&1>=d)return d}return 0}function Y(a,b){if(48==a&&"number"===typeof b)return"#"+("000000"+b.toString(16)).substr(-6);if(64==a)return b=b.map(function(a){return a+
|
||||
"px"}),b.join(",");if(96==a){a="";for(var c=b.length,d=0;d<c;d+=2)a+=b[d],a+=b[d+1].join(",");return a}if(80==a){if(0==b[0])return"none";a="";c=b.length;for(d=0;d<c;)a+=Q[b[d]],1==b[d]?a+="("+b[d+1]+") ":5==b[d]?(a+="("+b[d+1]+"px "+b[d+2]+"px "+b[d+3]+"px rgba("+(b[d+4]>>>24)+","+(b[d+4]>>16&255)+","+(b[d+4]>>8&255)+","+(b[d+4]&255)/255+")) ",d+=3):a=2==b[d]?a+("("+b[d+1]+"px) "):7==b[d]?a+("("+b[d+1]+"deg) "):a+("("+(0>b[d+1]?0:b[d+1])+") "),d+=2;return a}return 32==a?b+"px":b}function w(a){return 0>=
|
||||
a?0:255<=a?255:a}function Z(a,b,c,d){if(16==a||32==a)return(c-b)*d+b;if(0==a)return.5>d?b:c;if(48==a){if("number"===typeof b&&"number"===typeof c){var e=1-d;return w(e*(b>>16)+d*(c>>16))<<16|w(e*(b>>8&255)+d*(c>>8&255))<<8|w(e*(b&255)+d*(c&255))}return.5>d?b:c}if(64==a){0==b.length&&(b=[0]);0==c.length&&(c=[0]);var k=b.length;b.length!=c.length&&(k=b.length*c.length);var g=[];for(a=0;a<k;++a){var f=b[a%b.length];var h=(c[a%c.length]-f)*d+f;0>h&&(h=0);g.push(h)}return g}if(96==a){if(b.length!=c.length)return.5>
|
||||
d?b:c;k=b.length;g=[];for(a=0;a<k;a+=2){if(b[a]!==c[a])return.5>d?b:c;g[a]=b[a];g[a+1]=[];for(f=0;f<b[a+1].length;++f)g[a+1].push((c[a+1][f]-b[a+1][f])*d+b[a+1][f])}return g}if(80==a){k=b.length;if(k!=c.length)return.5>d?b:c;g=[];for(a=0;a<k;){if(b[a]!=c[a]||1==b[a])return.5>d?b:c;g[a]=b[a];g[a+1]=(c[a+1]-b[a+1])*d+b[a+1];if(5==b[a]){g[a+2]=(c[a+2]-b[a+2])*d+b[a+2];g[a+3]=(c[a+3]-b[a+3])*d+b[a+3];e=1-d;var l=b[a+4],q=c[a+4];h=e*(l>>>24)+d*(q>>>24);var m=e*(l>>16&255)+d*(q>>16&255);f=e*(l>>8&255)+
|
||||
d*(q>>8&255);g[a+4]=(w(m)<<16|w(f)<<8|w(e*(l&255)+d*(q&255)))+16777216*(w(h)|0);a+=3}a+=2}return g}return 0}function R(a,b){a:{var c=a+b[2];var d=b[4].length;for(var e=0;e<d;++e)if(c<b[4][e]){c=e;break a}c=d-1}d=b[2];e=b[4][c-1]-d;a=(a-e)/(b[4][c]-d-e);if(b[6]&&b[6].length>c-1)if(d=b[6][c-1],1==d[0])if(0>=a)a=0;else if(1<=a)a=1;else{e=d[1];var k=d[3];a=X(3*e-3*k+1,-6*e+3*k,3*e,-a);a=3*a*(1-a)*(1-a)*d[2]+3*a*a*(1-a)*d[4]+a*a*a}else 2==d[0]?(d=d[1],a=Math.ceil(a*d)/d):3==d[0]&&(d=d[1],a=Math.floor(a*
|
||||
d)/d);return Z(b[1]&240,b[5][c-1],b[5][c],a)}function O(){z=(new Date).getTime()}function A(a){for(var b=!1,c=0;c<x.length;++c)x[c].F(a)&&(b=!0);x.forEach(function(a){a.l&&(a.l=!1,a.onfinish&&(a.onfinish(),b=!0))});return b}function S(){O();A(!0)?(J=!0,K(S)):J=!1}function P(){J||(J=!0,K(S))}function T(a,b){var c=[];a.split(b).forEach(function(a){c.push(parseFloat(a))});return c}function t(a){-1==a.indexOf(",")&&(a=a.replace(" ",","));return T(a,",")}function U(a){a._ks||(a._ks={H:L},++L);if(!a._ks.transform){for(var b=
|
||||
a._ks.transform=[],c=0;14>=c;++c)b[c]=0;if(c=a.getAttribute("transform")){for(c=c.trim().split(") ");0<a._ks.w;)c.shift(),--a._ks.w;a=c.shift();v(a,"translate(")&&(a=t(a.substring(10)),b[1]=a[0],b[2]=a[1],a=c.shift());v(a,"rotate(")&&(a=t(a.substring(7)),b[6]=a[0],a=c.shift());v(a,"skewX(")&&(a=t(a.substring(6)),b[7]=a[0],a=c.shift());v(a,"skewY(")&&(a=t(a.substring(6)),b[8]=a[0],a=c.shift());v(a,"scale(")&&(a=t(a.substring(6)),b[10]=a[0],b[11]=a[1],a=c.shift());v(a,"translate(")&&(a=t(a.substring(10)),
|
||||
b[13]=a[0],b[14]=a[1])}}}function V(a){this.C=a;this.v=[];this.o=[];this.g=0;this.i=this.a=this.b=null;this.f=this.A=this.l=this.h=!1}function H(a,b,c){b=a[b];void 0===b&&(b=a[c]);return b}function aa(a){return Array.isArray(a)?a:v(a,"cubic-bezier(")?(a=a.substring(13,a.length-1).split(","),[1,parseFloat(a[0]),parseFloat(a[1]),parseFloat(a[2]),parseFloat(a[3])]):v(a,"steps(")?(a=a.substring(6,a.length-1).split(","),[a[1]&&"start"==a[1].trim()?2:3,parseFloat(a[0])]):[0]}function ba(a){a=a.trim();return v(a,
|
||||
"#")?(parseInt(a.substring(1),16)<<8)+255:v(a,"rgba(")?(a=a.substring(5,a.length-1),a=a.split(","),(parseInt(a[0],10)<<24)+(parseInt(a[1],10)<<16)+(parseInt(a[2],10)<<8)+255*parseFloat(a[3])<<0):a}var ca=" translate translate rotate skewX skewY scale scale translate translate".split(" "),Q="none url blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia".split(" "),K=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||
|
||||
window.oRequestAnimationFrame||window.msRequestAnimationFrame||null;K||(K=function(a){window.setTimeout(a,16)});var L=0,W={d:97,fill:48,fillOpacity:16,filter:80,height:33,opacity:16,stroke:48,strokeDasharray:64,strokeDashoffset:32,strokeOpacity:16,strokeWidth:32,transform:1,width:33},J=!1,z=(new Date).getTime(),x=[];V.prototype={j:function(a){var b=!1;if(null!==this.b){var c=this.c();null!==c&&c>=this.g?(b=!0,a?this.a=c:this.a=this.i?Math.max(this.i,this.g):this.g):null!==c&&(a&&null!==this.a&&(this.b=
|
||||
z-this.a/1),this.a=null)}this.i=this.c();return b},F:function(a){a&&(this.h&&(this.h=!1,null===this.b&&(null!==this.a?(this.b=z-this.a/1,this.a=null):this.b=z)),null===this.a&&null!==this.b&&this.j(!1)&&(this.l=!0));a=this.c();if(null===a)return!1;for(var b=this.v,c=this.o,d=0;d<b.length;++d){for(var e=b[d],k=!1,g=0;g<c[d].length;++g){var f=c[d][g],h=f[0];if(null!==h){var l=f[2];var q=f[4].length,m=f[4][q-1]-l;l=0==m?f[5][q-1]:a<=l?f[5][0]:a>=l+f[3]?0==f[3]%m?f[5][q-1]:R(f[3]%m,f):R((a-l)%m,f);0==
|
||||
h?(e._ks.mpath=f[8],e._ks.transform[h]=l,k=!0):14>=h?(e._ks.transform[h]=l,k=!0):(l=Y(f[1]&240,l),f[1]&1?e.setAttribute(h,l):e.style[h]=l)}}if(k){U(e);k=e._ks.transform;g="";if(f=e._ks.mpath)l=k[0]*f[2]/100,h=f[1].getPointAtLength(l),g="translate("+h.x+","+h.y+") ",f[0]&&(.5>l?(l=h,h=f[1].getPointAtLength(.5)):l=f[1].getPointAtLength(l-.5),g+="rotate("+180*Math.atan2(h.y-l.y,h.x-l.x)/Math.PI+") ");for(f=1;f<k.length;++f)if(h=k[f])g+=" "+ca[f]+"(",g=2>=f?g+(1==f?h+",0":"0,"+h):13<=f?g+(13==f?h+",0":
|
||||
"0,"+h):10<=f?g+(10==f?h+",1":"1,"+h):g+h,g+=")";e.setAttribute("transform",g)}}return"running"==this.B()},s:function(){if(!this.A){this.A=!0;for(var a=this.v,b=this.o,c=0;c<a.length;++c)for(var d=a[c],e=!1,k=0;k<b[c].length;++k){var g=b[c][k][0];14>=g?d._ks.G||(U(d),d._ks.G=d._ks.transform.slice()):(d._ks.m||(d._ks.m={}),F(d._ks.m[g])||(e||(e=getComputedStyle(d)),d._ks.m[g]=N(g)&1?d.getAttribute(g):e[g]))}}},play:function(a){F(a)&&this.u(a,!0);if(!this.f)return this;a=this.c();if(null===a||0>a||
|
||||
a>=this.g)this.a=0;if(null===this.a)return this;this.b=null;this.h=!0;this.s();A(!1);P();return this},pause:function(a){F(a)&&this.u(a,!0);if(!this.f||"paused"==this.B())return this;F(a)||O();a=this.c();null===a&&(this.a=0);null!==this.b&&null===this.a&&(this.a=a);this.b=null;this.h=!1;this.j(!1);this.s();A(!1);return this},c:function(){return null!==this.a?this.a:null===this.b?null:1*(z-this.b)},u:function(a,b){M(a);b&&O();null!==a&&(this.s(),null!==this.a||null===this.b?(this.a=a,A(!1)):this.b=
|
||||
z-a/1,this.f||(this.b=null),this.i=null,this.j(!0),P())},I:function(){return this.c()},time:function(a){return F(a)?(this.f&&this.u(a,!0),this):this.I()},startTime:function(a){if(F(a)){M(a);if(!this.f)return this;this.i=this.c();this.b=a;null!==a?this.a=null:this.a=this.i;this.h=!1;this.j(!0);A(!1);P();return this}return this.D?this.D[0].startTime:this.b},B:function(){var a=this.c();return this.h?"running":null===a?"idle":null===this.b?"paused":a>=this.g?"finished":"running"}};return{setmptr:function(a){for(var b in a){var c=
|
||||
document.getElementById(b);c._ks||(c._ks={});c._ks.w=a[b]}},animate:function(){if(0<x.length)throw"data already set";var a={};if(1==arguments.length%2){a=arguments[arguments.length-1];var b={};for(c in a)b[c]=a[c];a=b}var c=new V(a);a=arguments;for(var d=b=0;d<a.length-1;d+=2){var e=a[d];var k=e instanceof Element?e:document.getElementById(e.substring(1));if(!k)throw"invalid target: "+e;e=k;k=a[d+1];e._ks||(e._ks={H:L},++L);for(var g=[],f=0;f<k.length;++f){var h=k[f],l=H(h,"p","property");14>=l||
|
||||
-1==l.indexOf("-")||(l=null);var q=N(l);q||(q=0);var m=H(h,"t","times");if(!m||2>m.length)throw"not enough times";m=m.slice();if(!isFinite(m[0])||0>m[0])throw"bad time: "+m[0];for(var y=1;y<m.length;++y)if(!isFinite(m[y])||0>m[y]||m[y]<m[y-1])throw"bad time: "+m[y];y=m[0];var w=m[m.length-1]-y,z=h.iterations||0;1>z&&(z=1);w*=z;b<w+y&&(b=w+y);var t=H(h,"v","values");if(!t||t.length!=m.length)throw"values don't match times";t=t.slice();for(var B=l,n=t,A=N(B)&240,p=0;p<n.length;++p)if(96==A){for(var G=
|
||||
n[p].substring(6,n[p].length-2).match(/[A-DF-Za-df-z][-+0-9eE., ]*/ig),I=[],r=0;r<G.length;++r){I.push(G[r][0]);for(var u=1<G[r].trim().length?G[r].substring(1).split(","):[],E=0;E<u.length;++E)u[E]=parseFloat(u[E]);I.push(u)}n[p]=I}else if(48==A)if(v(n[p],"#"))n[p]=parseInt(n[p].substring(1),16);else{if(!v(n[p],"url(")&&"none"!=n[p])throw"invalid color: "+n[p];}else if(80==A){G=n;I=p;r=n[p];if("none"==r)r=[0];else{u=[];for(var C=r.indexOf("(");0<C;)if(E=Q.indexOf(r.substring(0,C)),0<=E){u.push(E);
|
||||
var D=r.indexOf(") ");0>D&&(D=r.length-1);C=r.substring(C+1,D).split(" ");5==E?(u.push(parseFloat(C[0])),u.push(parseFloat(C[1])),u.push(parseFloat(C[2])),u.push(ba(C[3]))):1==E?u.push(C[0]):u.push(parseFloat(C[0]));r=r.substring(D+1).trim();C=r.indexOf("(")}else break;r=u}G[I]=r}else if(64==A)if("none"!=n[p]){if(!/^[0-9 .]*$/.test(n[p]))throw"bad value: "+n[p];n[p]=T(n[p]," ")}else n[p]=[0];else 32==A?(M(n[p]),n[p]=parseFloat(n[p])):0===B&&(n[p]=parseFloat(n[p]));B=H(h,"e","easing");n=m.length;for(B||
|
||||
(B=[]);B.length<n;)B.push([1,0,0,.58,1]);for(n=0;n<B.length;++n)B[n]=aa(B[n]);q=[l,q,y,w,m,t,B,z];m=H(h,"m","motionPath");F(m)&&0===l&&(q[8]=[],q[8][0]=h.motionRotate,h=document.createElementNS("http://www.w3.org/2000/svg","path"),m||(m="M0,0"),h.setAttribute("d",m),q[8][1]=h,q[8][2]=h.getTotalLength());g.push(q)}0<g.length&&(c.v.push(e),c.o.push(g))}c.g=b;!1===c.f&&(x.push(c),c.f=!0,!1!==c.C.autoplay&&c.play());return c},_priv_list:function(){return x.slice()},play:function(){return x[0]?x[0].play():
|
||||
this},pause:function(){return x[0]?x[0].pause():this},time:function(a){return x[0]?x[0].time(a):F(a)?this:null}}}();
|
||||
document.ks=ks;(function(ks){
|
||||
ks.animate("#sinewave-loader",[{p:6,t:[0,2000],v:[0,360],e:[[1,0.42,0,0.58,1],[0]],iterations:Infinity},{p:10,t:[0,1000,2000],v:[1,0.7,1],e:[[1,0.42,0,0.58,1],[1,0.42,0,0.58,1],[0]],iterations:Infinity},{p:11,t:[0,1000,2000],v:[1,0.7,1],e:[[1,0.42,0,0.58,1],[1,0.42,0,0.58,1],[0]],iterations:Infinity}],
|
||||
"#loader-circle",[{p:'strokeWidth',t:[0,1000,2000],v:[1,2,1],e:[[1,0.42,0,0.58,1],[1,0.42,0,0.58,1],[0]],iterations:Infinity},{p:'strokeDashoffset',t:[0,1000,2000],v:[314,0,314],e:[[1,0.42,0,0.58,1],[1,0.42,0,0.58,1],[0]],iterations:Infinity}],
|
||||
{autoplay:document.location.search.substr(1).split('&').indexOf('autoplay=false')<0})
|
||||
})(ks);
|
||||
]]></script>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
@ -4,6 +4,22 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<script src="/static/main.js"></script>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#main {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -16,8 +32,11 @@
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
<h1 style="color: blue">Hei</h1>
|
||||
<p>TODO</p>
|
||||
<div id="main"></div>
|
||||
<script>
|
||||
var app = Elm.Main.init({
|
||||
node: document.getElementById('main')
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<style>body { padding: 0; margin: 0; }</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
27
frontend/elm.json
Normal file
27
frontend/elm.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"type": "application",
|
||||
"source-directories": [
|
||||
"src"
|
||||
],
|
||||
"elm-version": "0.19.1",
|
||||
"dependencies": {
|
||||
"direct": {
|
||||
"elm/browser": "1.0.2",
|
||||
"elm/core": "1.0.5",
|
||||
"elm/html": "1.0.0",
|
||||
"elm/http": "2.0.0",
|
||||
"elm/json": "1.1.3",
|
||||
"elm/time": "1.0.0"
|
||||
},
|
||||
"indirect": {
|
||||
"elm/bytes": "1.0.8",
|
||||
"elm/file": "1.0.5",
|
||||
"elm/url": "1.0.0",
|
||||
"elm/virtual-dom": "1.0.2"
|
||||
}
|
||||
},
|
||||
"test-dependencies": {
|
||||
"direct": {},
|
||||
"indirect": {}
|
||||
}
|
||||
}
|
||||
106
frontend/src/Main.elm
Normal file
106
frontend/src/Main.elm
Normal file
@ -0,0 +1,106 @@
|
||||
module Main exposing (main)
|
||||
|
||||
import Browser
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (..)
|
||||
import Http
|
||||
import Time
|
||||
import Json.Decode exposing (Decoder, map3, field, string, float)
|
||||
|
||||
|
||||
|
||||
-- MAIN
|
||||
|
||||
main =
|
||||
Browser.element
|
||||
{ init = init
|
||||
, update = update
|
||||
, subscriptions = subscriptions
|
||||
, view = view
|
||||
}
|
||||
|
||||
|
||||
-- MODEL
|
||||
|
||||
type alias Surprise =
|
||||
{ diff : Float
|
||||
, surprise : String
|
||||
, asset : String
|
||||
}
|
||||
|
||||
type Model
|
||||
= Failure
|
||||
| Loading
|
||||
| Success Surprise
|
||||
|
||||
|
||||
init : () -> (Model, Cmd Msg)
|
||||
init _ =
|
||||
(Loading, getSurprise)
|
||||
|
||||
|
||||
-- UPDATE
|
||||
|
||||
type Msg
|
||||
= FetchSurprise Time.Posix
|
||||
| GotSurprise (Result Http.Error Surprise)
|
||||
|
||||
|
||||
update : Msg -> Model -> (Model, Cmd Msg)
|
||||
update msg model =
|
||||
case msg of
|
||||
FetchSurprise _ ->
|
||||
(Loading, getSurprise)
|
||||
|
||||
GotSurprise result ->
|
||||
case result of
|
||||
Ok surprise ->
|
||||
(Success surprise, Cmd.none)
|
||||
|
||||
Err _ ->
|
||||
(Failure, Cmd.none)
|
||||
|
||||
|
||||
-- SUBSCRIPTIONS
|
||||
|
||||
subscriptions : Model -> Sub Msg
|
||||
subscriptions model =
|
||||
Time.every 1000 FetchSurprise
|
||||
|
||||
|
||||
-- VIEW
|
||||
|
||||
view : Model -> Html Msg
|
||||
view model =
|
||||
case model of
|
||||
Failure ->
|
||||
div [] [ text "Failed to fetch from server." ]
|
||||
|
||||
Loading ->
|
||||
img [ src "/static/loading.svg" ] []
|
||||
|
||||
Success surprise ->
|
||||
div []
|
||||
[ div [] [ text (String.fromInt (round surprise.diff)) ]
|
||||
, img [ src surprise.asset ] []
|
||||
]
|
||||
|
||||
|
||||
-- HTTP
|
||||
|
||||
getSurprise : Cmd Msg
|
||||
getSurprise =
|
||||
Http.get
|
||||
{ url = "/get-surprise.json"
|
||||
, expect = Http.expectJson GotSurprise surpriseDecoder
|
||||
}
|
||||
|
||||
|
||||
surpriseDecoder : Decoder Surprise
|
||||
surpriseDecoder =
|
||||
map3 Surprise
|
||||
(field "diff_seconds" float)
|
||||
(field "surprise" string)
|
||||
(field "asset" string)
|
||||
|
||||
BIN
surprise-assets/gender-reveal/_null.gif
Normal file
BIN
surprise-assets/gender-reveal/_null.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
surprise-assets/gender-reveal/_secret.webp
Normal file
BIN
surprise-assets/gender-reveal/_secret.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
BIN
surprise-assets/gender-reveal/boy.webp
Normal file
BIN
surprise-assets/gender-reveal/boy.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
BIN
surprise-assets/gender-reveal/girl.webp
Normal file
BIN
surprise-assets/gender-reveal/girl.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
Loading…
x
Reference in New Issue
Block a user