diff options
Diffstat (limited to 'frontend')
45 files changed, 1867 insertions, 34 deletions
diff --git a/frontend/.DS_Store b/frontend/.DS_Store Binary files differnew file mode 100644 index 0000000..1f6bb54 --- /dev/null +++ b/frontend/.DS_Store diff --git a/frontend/OneSignalSDKWorker.js b/frontend/OneSignalSDKWorker.js deleted file mode 100644 index 067cf4d..0000000 --- a/frontend/OneSignalSDKWorker.js +++ /dev/null @@ -1 +0,0 @@ -importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");
\ No newline at end of file diff --git a/frontend/admin/admin-style.css b/frontend/admin/admin-style.css new file mode 100644 index 0000000..9c866ff --- /dev/null +++ b/frontend/admin/admin-style.css @@ -0,0 +1,53 @@ +#unauthorised { + +} + +#authorised { + +} + +.admin-machine-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + background-color: lightgrey; + gap: 16px; + padding: 16px; + width: fit-content; + max-width: 100%; + box-sizing: border-box; +} + +.admin-machine-container > div { + display: flex; + flex-direction: column; + gap: 16px; +} + +.admin-machine-container > div > img { + width: 128px; +} + +.admin-machine-container > div > span { + text-align: center; + font-weight: 600; +} + +.admin-machine-container > h2 { + writing-mode: vertical-lr; + transform: rotate(180deg); + margin: 0; + height: fit-content; +} + +#passwordFeedback { + display: none; + color: red; +} + +.blocks-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 16px; +} diff --git a/frontend/admin/admin.js b/frontend/admin/admin.js new file mode 100644 index 0000000..ff1c463 --- /dev/null +++ b/frontend/admin/admin.js @@ -0,0 +1,110 @@ +const API_URL = "https://backend.laundryweb.altafcreator.com" + +async function login() { + const field = document.getElementById("pwfield"); + + const response = await fetch(`${API_URL}/admin_login`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: `{"password": "${field.value}"}`, + }); + + if (response.status == 202) window.location.href = "./panel.html"; + else document.getElementById("passwordFeedback").style.display = "inherit"; +} + +async function checkLoginStatus() { + const response = await fetch(`${API_URL}/admin_check`, { + method: "POST", + credentials: "include" + }); + + return response.status == 202; +} + +async function autoLogin() { + if (await checkLoginStatus()) { + window.location.href = "./panel.html"; + } +} + +async function panelLoginCheck() { + const msg = document.getElementById("unauthorised"); + const authDiv = document.getElementById("authorised"); + + if (await checkLoginStatus()) { + msg.style.display = "none"; + authDiv.style.display = "inherit"; + return true; + } else { + msg.style.display = "inherit"; + authDiv.style.display = "none"; + return false; + } +} + +async function syncMachineStatus() { + const response = await fetch(`${API_URL}/admin_machine_status`, { + method: "POST", + credentials: "include", + }); + const data = await response.json(); + + for (let b = 0; b < data.length; b++) { + for (let m = 0; m < data[b].length; m++) { + const img = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()+"img"); + const dropdown = document.getElementById("h"+(b+1).toString()+"m"+(m+1).toString()); + + if (data[b][m] != "OUTOFSERVICE") { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_off.png"; + } else { + img.src = "/assets/img/washer_off.png"; + } + dropdown.selectedIndex = 0; + } else { + if (m % 2 == 0) { + img.src = "/assets/img/dryer_down.png"; + } else { + img.src = "/assets/img/washer_down.png"; + } + dropdown.selectedIndex = 1; + } + } + } +} + +async function overrideMachineStatus(block, machine) { + const img = document.getElementById("h"+block.toString()+"m"+machine.toString()+"img"); + const dropdown = document.getElementById("h"+block.toString()+"m"+machine.toString()); + + const response = await fetch(`${API_URL}/override_status`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: `{"block": ${block}, "machine_id": ${machine}, "disabled": ${dropdown.selectedIndex == 1}}`, + }); + + if (response.status != 200) { + return; + } + + if (dropdown.selectedIndex == 1) { + if (machine % 2 == 0) { + img.src = "/assets/img/washer_down.png"; + } else { + img.src = "/assets/img/dryer_down.png"; + } + } else { + if (machine % 2 == 0) { + img.src = "/assets/img/washer_off.png"; + } else { + img.src = "/assets/img/dryer_off.png"; + } + } +} diff --git a/frontend/admin/index.html b/frontend/admin/index.html new file mode 100644 index 0000000..76df357 --- /dev/null +++ b/frontend/admin/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Victoria Hall LaundryWeb Admin Panel</title> + <link rel="stylesheet" href="./admin-style.css"> +</head> +<body> + <h1>LaundryWeb Admin Panel Log In</h1> + <input type="password" id="pwfield"> <button onclick="login()">Log In</button> + <p id="passwordFeedback">Invalid password.</p> + <script src="./admin.js"></script> + <script> + autoLogin(); + </script> +</body> +</html> diff --git a/frontend/admin/panel.html b/frontend/admin/panel.html new file mode 100644 index 0000000..4813c06 --- /dev/null +++ b/frontend/admin/panel.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Victoria Hall LaundryWeb Admin Panel</title> + <link rel="stylesheet" href="./admin-style.css"> +</head> +<body> + <h1>LaundryWeb Admin Panel</h1> + <p id="unauthorised">You are unauthorised.</p> + <!-- even if you make this div visible, you won't be able to do anything if you are unauthorised --> + <div id="authorised"> + <div class="blocks-container"> + <div class="admin-machine-container" style="background-color: lightyellow;"> + <h2>Block H2</h2> + <div> + <span>Dryer 1</span> + <img id="h2m1img" src="/assets/img/dryer_off.png" alt=""> + <select id="h2m1" name="" onchange="overrideMachineStatus(2, 1);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 1</span> + <img id="h2m2img" src="/assets/img/washer_off.png" alt=""> + <select id="h2m2" name="" onchange="overrideMachineStatus(2, 2);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Dryer 2</span> + <img id="h2m3img" src="/assets/img/dryer_off.png" alt=""> + <select id="h2m3" name="" onchange="overrideMachineStatus(2, 3);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 2</span> + <img id="h2m4img" src="/assets/img/washer_off.png" alt=""> + <select id="h2m4" name="" onchange="overrideMachineStatus(2, 4);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + </div> + <div class="admin-machine-container" style="background-color: skyblue;"> + <h2>Block H1</h2> + <div> + <span>Dryer 1</span> + <img id="h1m1img" src="/assets/img/dryer_off.png" alt=""> + <select id="h1m1" name="" onchange="overrideMachineStatus(1, 1);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 1</span> + <img id="h1m2img" src="/assets/img/washer_off.png" alt=""> + <select id="h1m2" name="" onchange="overrideMachineStatus(1, 2);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Dryer 2</span> + <img id="h1m3img" src="/assets/img/dryer_off.png" alt=""> + <select id="h1m3" name="" onchange="overrideMachineStatus(1, 3);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + <div> + <span>Washer 2</span> + <img id="h1m4img" src="/assets/img/washer_off.png" alt=""> + <select id="h1m4" name="" onchange="overrideMachineStatus(1, 4);"> + <option value="normal">Normal</option> + <option value="down">Out of Service</option> + </select> + </div> + </div> + </div> + </div> + <script src="admin.js"></script> + <script> + (async () => { + if (await panelLoginCheck()) { + syncMachineStatus(); + } + })(); + </script> +</body> +</html> diff --git a/frontend/assets/.DS_Store b/frontend/assets/.DS_Store Binary files differnew file mode 100644 index 0000000..64959d9 --- /dev/null +++ b/frontend/assets/.DS_Store diff --git a/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf b/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf Binary files differnew file mode 100644 index 0000000..43ed4f5 --- /dev/null +++ b/frontend/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf diff --git a/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf b/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf Binary files differnew file mode 100644 index 0000000..e31b51e --- /dev/null +++ b/frontend/assets/fonts/Inter-VariableFont_opsz,wght.ttf diff --git a/frontend/assets/icons/.DS_Store b/frontend/assets/icons/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/frontend/assets/icons/.DS_Store diff --git a/frontend/assets/icons/1024.png b/frontend/assets/icons/1024.png Binary files differnew file mode 100644 index 0000000..7063453 --- /dev/null +++ b/frontend/assets/icons/1024.png diff --git a/frontend/assets/icons/192.png b/frontend/assets/icons/192.png Binary files differnew file mode 100644 index 0000000..80c8f46 --- /dev/null +++ b/frontend/assets/icons/192.png diff --git a/frontend/assets/icons/512.png b/frontend/assets/icons/512.png Binary files differnew file mode 100644 index 0000000..195b42b --- /dev/null +++ b/frontend/assets/icons/512.png diff --git a/frontend/assets/icons/logo.svg b/frontend/assets/icons/logo.svg new file mode 100644 index 0000000..e7e1c2b --- /dev/null +++ b/frontend/assets/icons/logo.svg @@ -0,0 +1,176 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="1024" + height="1024" + viewBox="0 0 270.93333 270.93333" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="logo.svg" + inkscape:export-filename="192.png" + inkscape:export-xdpi="18" + inkscape:export-ydpi="18" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showguides="true" + inkscape:zoom="0.43446384" + inkscape:cx="339.49891" + inkscape:cy="407.39869" + inkscape:current-layer="g5" /> + <defs + id="defs1"> + <meshgradient + inkscape:collect="always" + id="meshgradient15678" + gradientUnits="userSpaceOnUse" + x="165.22603" + y="170.67172" + gradientTransform="translate(-151.95082,25.498289)"> + <meshrow + id="meshrow42263"> + <meshpatch + id="meshpatch42263"> + <stop + path="c -2.84217e-14,32.2929 -26.1786,58.4715 -58.4715,58.4715" + style="stop-color:#ffffff;stop-opacity:1" + id="stop42263" /> + <stop + path="l 4.21082e-05,-58.4734" + style="stop-color:#dbe7e5;stop-opacity:1" + id="stop42264" /> + <stop + path="l -4.21082e-05,0.00263432" + style="stop-color:#dbe7e5;stop-opacity:1" + id="stop42265" /> + <stop + path="l 58.4715,-0.00070466" + style="stop-color:#ffffff;stop-opacity:1" + id="stop42266" /> + </meshpatch> + <meshpatch + id="meshpatch42266"> + <stop + path="c -32.2929,0 -58.4715,-26.1786 -58.4715,-58.4715" + id="stop42267" /> + <stop + path="l 58.4715,-0.00192966" + style="stop-color:#c0d5d2;stop-opacity:1" + id="stop42268" /> + <stop + path="l 0,0" + style="stop-color:#c0d5d2;stop-opacity:1" + id="stop42269" /> + </meshpatch> + <meshpatch + id="meshpatch42269"> + <stop + path="c 0,-32.2929 26.1786,-58.4715 58.4715,-58.4715" + id="stop42270" /> + <stop + path="l 4.15649e-05,58.4715" + style="stop-color:#a0bfbb;stop-opacity:1" + id="stop42271" /> + <stop + path="l 5.43348e-07,-0.00192966" + style="stop-color:#a0bfbb;stop-opacity:1" + id="stop42272" /> + </meshpatch> + <meshpatch + id="meshpatch42272"> + <stop + path="c 32.2929,0 58.4715,26.1784 58.4715,58.4713" + id="stop42273" /> + <stop + path="l -58.4715,0.0002" + style="stop-color:#93b6b1;stop-opacity:1" + id="stop42274" /> + <stop + path="l 4.15649e-05,0" + style="stop-color:#93b6b1;stop-opacity:1" + id="stop42275" /> + </meshpatch> + </meshrow> + </meshgradient> + </defs> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <rect + style="opacity:1;fill:#e8deb6;fill-opacity:1;stroke:none;stroke-width:4.99999;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + id="rect42288" + width="270.93332" + height="270.93332" + x="-28.712095" + y="7.7178087" + ry="19.067522" /> + <path + id="rect1" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 32.351323,85.692322 H 181.15782 c 6.29198,0 6.06569,-0.226285 6.06569,6.065692 V 244.29376 c 0,6.29198 -5.06538,11.35736 -11.35736,11.35736 H 37.64299 c -6.291977,0 -11.357359,-5.06538 -11.357359,-11.35736 V 91.758014 c 0,-6.291977 -0.226285,-6.065692 6.065692,-6.065692 z" + sodipodi:nodetypes="sssssssss" /> + <circle + style="display:none;fill:url(#meshgradient15678);fill-opacity:1;stroke:none;stroke-width:48.916;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + id="path5" + cy="196.17001" + cx="-45.196255" + r="58.471458" + transform="rotate(-45)" /> + <circle + style="fill:none;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="path2" + cx="106.75457" + cy="170.67172" + r="54.53896" /> + <path + id="rect3" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 37.642993,30.717831 H 175.86615 c 6.29198,0 11.35736,5.065383 11.35736,11.35736 v 24.93158 c 0,6.291977 0.22629,6.065692 -6.06569,6.065692 H 32.351326 c -6.291977,0 -6.065692,0.226285 -6.065692,-6.065692 v -24.93158 c 0,-6.291977 5.065382,-11.35736 11.357359,-11.35736 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:#000000;fill-opacity:0;stroke:#666a83;stroke-width:3.665;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="40.208775" + height="17.323994" + x="86.650185" + y="43.235077" + ry="8.6619968" /> + <circle + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:7.865;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="circle42275" + cx="106.75457" + cy="170.67172" + r="54.53896" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#798aa2;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,131.02162 v 39.6501 l 29.24515,-0.002" + id="path42288" + inkscape:export-filename="path42288.png" + inkscape:export-xdpi="18.000002" + inkscape:export-ydpi="18.000002" /> + </g> + </g> + <script + id="mesh_polyfill" + type="text/javascript"> +!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}(); +</script> +</svg> diff --git a/frontend/assets/icons/transparent_1024.png b/frontend/assets/icons/transparent_1024.png Binary files differnew file mode 100644 index 0000000..5e2e557 --- /dev/null +++ b/frontend/assets/icons/transparent_1024.png diff --git a/frontend/assets/icons/transparent_logo.svg b/frontend/assets/icons/transparent_logo.svg new file mode 100644 index 0000000..063bdf4 --- /dev/null +++ b/frontend/assets/icons/transparent_logo.svg @@ -0,0 +1,82 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="1024" + height="1024" + viewBox="0 0 270.93333 270.93333" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="logo_to_ico.svg" + inkscape:export-filename="transparent_1024.png" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showguides="true" + inkscape:zoom="0.61372381" + inkscape:cx="510.00139" + inkscape:cy="374.76141" + inkscape:current-layer="g5" /> + <defs + id="defs1" /> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <path + id="rect1" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 22.618924,78.171998 H 190.89022 c 7.11501,0 6.85912,-0.255885 6.85912,6.859122 v 172.48835 c 0,7.11501 -5.72797,12.84297 -12.84298,12.84297 H 28.602773 c -7.115005,0 -12.84297,-5.72796 -12.84297,-12.84297 V 85.03112 c 0,-7.115007 -0.255885,-6.859122 6.859121,-6.859122 z" + sodipodi:nodetypes="sssssssss" /> + <path + id="rect3" + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 28.602776,16.006507 H 184.90636 c 7.11501,0 12.84298,5.727967 12.84298,12.842972 v 28.192784 c 0,7.115005 0.25589,6.859121 -6.85912,6.859121 H 22.618928 c -7.115007,0 -6.859122,0.255884 -6.859122,-6.859121 V 28.849479 c 0,-7.115005 5.727965,-12.842972 12.84297,-12.842972 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:#000000;fill-opacity:0;stroke:#666a83;stroke-width:4.14441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="45.468327" + height="19.590078" + x="84.020409" + y="30.161087" + ry="9.7950392" /> + <circle + style="fill:#ffffff;fill-opacity:1;stroke:#666a83;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="circle42275" + cx="106.75457" + cy="174.26723" + r="61.672989" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#798aa2;stroke-width:5.65403;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,129.43064 v 44.83657 l 33.07059,-0.002" + id="path42288" + inkscape:export-filename="path42288.png" + inkscape:export-xdpi="18.000002" + inkscape:export-ydpi="18.000002" /> + </g> + </g> + <script + id="mesh_polyfill" + type="text/javascript"> +!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}(); +</script> +</svg> diff --git a/frontend/assets/icons/transparent_text_logo.svg b/frontend/assets/icons/transparent_text_logo.svg new file mode 100644 index 0000000..5740452 --- /dev/null +++ b/frontend/assets/icons/transparent_text_logo.svg @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + width="721.48175" + height="994.95959" + viewBox="0 0 190.89204 263.24972" + version="1.1" + id="svg1" + inkscape:version="1.4-beta3 (01c8a1ca, 2024-08-28)" + sodipodi:docname="transparent_text_logo.svg" + inkscape:export-filename="transparent_1024.png" + inkscape:export-xdpi="96" + inkscape:export-ydpi="96" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns="http://www.w3.org/2000/svg" + xmlns:svg="http://www.w3.org/2000/svg"> + <sodipodi:namedview + id="namedview1" + pagecolor="#ffffff" + bordercolor="#000000" + borderopacity="0.25" + inkscape:showpageshadow="2" + inkscape:pageopacity="0.0" + inkscape:pagecheckerboard="0" + inkscape:deskcolor="#d1d1d1" + inkscape:document-units="mm" + showguides="true" + inkscape:zoom="0.61372381" + inkscape:cx="358.46744" + inkscape:cy="360.09683" + inkscape:current-layer="g5" /> + <defs + id="defs1" /> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-40.020643,-3.8418031)"> + <g + id="g5" + style="stroke:#2c5aa0" + transform="translate(28.712096,-7.7178088)"> + <path + id="rect1" + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 22.618924,78.171998 H 190.89022 c 7.11501,0 6.85912,-0.255885 6.85912,6.859122 v 172.48835 c 0,7.11501 -5.72797,12.84297 -12.84298,12.84297 H 28.602773 c -7.115005,0 -12.84297,-5.72796 -12.84297,-12.84297 V 85.03112 c 0,-7.115007 -0.255885,-6.859122 6.859121,-6.859122 z" + sodipodi:nodetypes="sssssssss" /> + <path + id="rect3" + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-opacity:1;paint-order:markers fill stroke" + d="M 28.602776,16.006507 H 184.90636 c 7.11501,0 12.84298,5.727967 12.84298,12.842972 v 28.192784 c 0,7.115005 0.25589,6.859121 -6.85912,6.859121 H 22.618928 c -7.115007,0 -6.859122,0.255884 -6.859122,-6.859121 V 28.849479 c 0,-7.115005 5.727965,-12.842972 12.84297,-12.842972 z" + sodipodi:nodetypes="sssssssss" /> + <rect + style="fill:none;fill-opacity:0;stroke:#000000;stroke-width:4.14441;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" + id="rect4" + width="45.468327" + height="19.590078" + x="84.020409" + y="30.161087" + ry="9.7950392" /> + <circle + style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:8.89379;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:markers fill stroke" + id="circle42275" + cx="106.75457" + cy="174.26723" + r="61.672989" /> + <path + style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:5.65403;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill" + d="m 106.75457,129.43064 v 44.83657 l 33.07059,-0.002" + id="path42288" + inkscape:export-filename="path42288.png" + inkscape:export-xdpi="18.000002" + inkscape:export-ydpi="18.000002" /> + </g> + </g> + <script + id="mesh_polyfill" + type="text/javascript"> +!function(){const t="http://www.w3.org/2000/svg",e="http://www.w3.org/1999/xlink",s="http://www.w3.org/1999/xhtml",r=2;if(document.createElementNS(t,"meshgradient").x)return;const n=(t,e,s,r)=>{let n=new x(.5*(e.x+s.x),.5*(e.y+s.y)),o=new x(.5*(t.x+e.x),.5*(t.y+e.y)),i=new x(.5*(s.x+r.x),.5*(s.y+r.y)),a=new x(.5*(n.x+o.x),.5*(n.y+o.y)),h=new x(.5*(n.x+i.x),.5*(n.y+i.y)),l=new x(.5*(a.x+h.x),.5*(a.y+h.y));return[[t,o,a,l],[l,h,i,r]]},o=t=>{let e=t[0].distSquared(t[1]),s=t[2].distSquared(t[3]),r=.25*t[0].distSquared(t[2]),n=.25*t[1].distSquared(t[3]),o=e>s?e:s,i=r>n?r:n;return 18*(o>i?o:i)},i=(t,e)=>Math.sqrt(t.distSquared(e)),a=(t,e)=>t.scale(2/3).add(e.scale(1/3)),h=t=>{let e,s,r,n,o,i,a,h=new g;return t.match(/(\w+\(\s*[^)]+\))+/g).forEach(t=>{let l=t.match(/[\w.-]+/g),d=l.shift();switch(d){case"translate":2===l.length?e=new g(1,0,0,1,l[0],l[1]):(console.error("mesh.js: translate does not have 2 arguments!"),e=new g(1,0,0,1,0,0)),h=h.append(e);break;case"scale":1===l.length?s=new g(l[0],0,0,l[0],0,0):2===l.length?s=new g(l[0],0,0,l[1],0,0):(console.error("mesh.js: scale does not have 1 or 2 arguments!"),s=new g(1,0,0,1,0,0)),h=h.append(s);break;case"rotate":if(3===l.length&&(e=new g(1,0,0,1,l[1],l[2]),h=h.append(e)),l[0]){r=l[0]*Math.PI/180;let t=Math.cos(r),e=Math.sin(r);Math.abs(t)<1e-16&&(t=0),Math.abs(e)<1e-16&&(e=0),a=new g(t,e,-e,t,0,0),h=h.append(a)}else console.error("math.js: No argument to rotate transform!");3===l.length&&(e=new g(1,0,0,1,-l[1],-l[2]),h=h.append(e));break;case"skewX":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),o=new g(1,0,n,1,0,0),h=h.append(o)):console.error("math.js: No argument to skewX transform!");break;case"skewY":l[0]?(r=l[0]*Math.PI/180,n=Math.tan(r),i=new g(1,n,0,1,0,0),h=h.append(i)):console.error("math.js: No argument to skewY transform!");break;case"matrix":6===l.length?h=h.append(new g(...l)):console.error("math.js: Incorrect number of arguments for matrix!");break;default:console.error("mesh.js: Unhandled transform type: "+d)}}),h},l=t=>{let e=[],s=t.split(/[ ,]+/);for(let t=0,r=s.length-1;t<r;t+=2)e.push(new x(parseFloat(s[t]),parseFloat(s[t+1])));return e},d=(t,e)=>{for(let s in e)t.setAttribute(s,e[s])},c=(t,e,s,r,n)=>{let o,i,a=[0,0,0,0];for(let h=0;h<3;++h)e[h]<t[h]&&e[h]<s[h]||t[h]<e[h]&&s[h]<e[h]?a[h]=0:(a[h]=.5*((e[h]-t[h])/r+(s[h]-e[h])/n),o=Math.abs(3*(e[h]-t[h])/r),i=Math.abs(3*(s[h]-e[h])/n),a[h]>o?a[h]=o:a[h]>i&&(a[h]=i));return a},u=[[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],[-3,3,0,0,-2,-1,0,0,0,0,0,0,0,0,0,0],[2,-2,0,0,1,1,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],[0,0,0,0,0,0,0,0,-3,3,0,0,-2,-1,0,0],[0,0,0,0,0,0,0,0,2,-2,0,0,1,1,0,0],[-3,0,3,0,0,0,0,0,-2,0,-1,0,0,0,0,0],[0,0,0,0,-3,0,3,0,0,0,0,0,-2,0,-1,0],[9,-9,-9,9,6,3,-6,-3,6,-6,3,-3,4,2,2,1],[-6,6,6,-6,-3,-3,3,3,-4,4,-2,2,-2,-2,-1,-1],[2,0,-2,0,0,0,0,0,1,0,1,0,0,0,0,0],[0,0,0,0,2,0,-2,0,0,0,0,0,1,0,1,0],[-6,6,6,-6,-4,-2,4,2,-3,3,-3,3,-2,-1,-2,-1],[4,-4,-4,4,2,2,-2,-2,2,-2,2,-2,1,1,1,1]],f=t=>{let e=[];for(let s=0;s<16;++s){e[s]=0;for(let r=0;r<16;++r)e[s]+=u[s][r]*t[r]}return e},p=(t,e,s)=>{const r=e*e,n=s*s,o=e*e*e,i=s*s*s;return t[0]+t[1]*e+t[2]*r+t[3]*o+t[4]*s+t[5]*s*e+t[6]*s*r+t[7]*s*o+t[8]*n+t[9]*n*e+t[10]*n*r+t[11]*n*o+t[12]*i+t[13]*i*e+t[14]*i*r+t[15]*i*o},y=t=>{let e=[],s=[],r=[];for(let s=0;s<4;++s)e[s]=[],e[s][0]=n(t[0][s],t[1][s],t[2][s],t[3][s]),e[s][1]=[],e[s][1].push(...n(...e[s][0][0])),e[s][1].push(...n(...e[s][0][1])),e[s][2]=[],e[s][2].push(...n(...e[s][1][0])),e[s][2].push(...n(...e[s][1][1])),e[s][2].push(...n(...e[s][1][2])),e[s][2].push(...n(...e[s][1][3]));for(let t=0;t<8;++t){s[t]=[];for(let r=0;r<4;++r)s[t][r]=[],s[t][r][0]=n(e[0][2][t][r],e[1][2][t][r],e[2][2][t][r],e[3][2][t][r]),s[t][r][1]=[],s[t][r][1].push(...n(...s[t][r][0][0])),s[t][r][1].push(...n(...s[t][r][0][1])),s[t][r][2]=[],s[t][r][2].push(...n(...s[t][r][1][0])),s[t][r][2].push(...n(...s[t][r][1][1])),s[t][r][2].push(...n(...s[t][r][1][2])),s[t][r][2].push(...n(...s[t][r][1][3]))}for(let t=0;t<8;++t){r[t]=[];for(let e=0;e<8;++e)r[t][e]=[],r[t][e][0]=s[t][0][2][e],r[t][e][1]=s[t][1][2][e],r[t][e][2]=s[t][2][2][e],r[t][e][3]=s[t][3][2][e]}return r};class x{constructor(t,e){this.x=t||0,this.y=e||0}toString(){return`(x=${this.x}, y=${this.y})`}clone(){return new x(this.x,this.y)}add(t){return new x(this.x+t.x,this.y+t.y)}scale(t){return void 0===t.x?new x(this.x*t,this.y*t):new x(this.x*t.x,this.y*t.y)}distSquared(t){let e=this.x-t.x,s=this.y-t.y;return e*e+s*s}transform(t){let e=this.x*t.a+this.y*t.c+t.e,s=this.x*t.b+this.y*t.d+t.f;return new x(e,s)}}class g{constructor(t,e,s,r,n,o){void 0===t?(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0):(this.a=t,this.b=e,this.c=s,this.d=r,this.e=n,this.f=o)}toString(){return`affine: ${this.a} ${this.c} ${this.e} \n ${this.b} ${this.d} ${this.f}`}append(t){t instanceof g||console.error("mesh.js: argument to Affine.append is not affine!");let e=this.a*t.a+this.c*t.b,s=this.b*t.a+this.d*t.b,r=this.a*t.c+this.c*t.d,n=this.b*t.c+this.d*t.d,o=this.a*t.e+this.c*t.f+this.e,i=this.b*t.e+this.d*t.f+this.f;return new g(e,s,r,n,o,i)}}class w{constructor(t,e){this.nodes=t,this.colors=e}paintCurve(t,e){if(o(this.nodes)>r){const s=n(...this.nodes);let r=[[],[]],o=[[],[]];for(let t=0;t<4;++t)r[0][t]=this.colors[0][t],r[1][t]=(this.colors[0][t]+this.colors[1][t])/2,o[0][t]=r[1][t],o[1][t]=this.colors[1][t];let i=new w(s[0],r),a=new w(s[1],o);i.paintCurve(t,e),a.paintCurve(t,e)}else{let s=Math.round(this.nodes[0].x);if(s>=0&&s<e){let r=4*(~~this.nodes[0].y*e+s);t[r]=Math.round(this.colors[0][0]),t[r+1]=Math.round(this.colors[0][1]),t[r+2]=Math.round(this.colors[0][2]),t[r+3]=Math.round(this.colors[0][3])}}}}class m{constructor(t,e){this.nodes=t,this.colors=e}split(){let t=[[],[],[],[]],e=[[],[],[],[]],s=[[[],[]],[[],[]]],r=[[[],[]],[[],[]]];for(let s=0;s<4;++s){const r=n(this.nodes[0][s],this.nodes[1][s],this.nodes[2][s],this.nodes[3][s]);t[0][s]=r[0][0],t[1][s]=r[0][1],t[2][s]=r[0][2],t[3][s]=r[0][3],e[0][s]=r[1][0],e[1][s]=r[1][1],e[2][s]=r[1][2],e[3][s]=r[1][3]}for(let t=0;t<4;++t)s[0][0][t]=this.colors[0][0][t],s[0][1][t]=this.colors[0][1][t],s[1][0][t]=(this.colors[0][0][t]+this.colors[1][0][t])/2,s[1][1][t]=(this.colors[0][1][t]+this.colors[1][1][t])/2,r[0][0][t]=s[1][0][t],r[0][1][t]=s[1][1][t],r[1][0][t]=this.colors[1][0][t],r[1][1][t]=this.colors[1][1][t];return[new m(t,s),new m(e,r)]}paint(t,e){let s,n=!1;for(let t=0;t<4;++t)if((s=o([this.nodes[0][t],this.nodes[1][t],this.nodes[2][t],this.nodes[3][t]]))>r){n=!0;break}if(n){let s=this.split();s[0].paint(t,e),s[1].paint(t,e)}else{new w([...this.nodes[0]],[...this.colors[0]]).paintCurve(t,e)}}}class b{constructor(t){this.readMesh(t),this.type=t.getAttribute("type")||"bilinear"}readMesh(t){let e=[[]],s=[[]],r=Number(t.getAttribute("x")),n=Number(t.getAttribute("y"));e[0][0]=new x(r,n);let o=t.children;for(let t=0,r=o.length;t<r;++t){e[3*t+1]=[],e[3*t+2]=[],e[3*t+3]=[],s[t+1]=[];let r=o[t].children;for(let n=0,o=r.length;n<o;++n){let o=r[n].children;for(let r=0,i=o.length;r<i;++r){let i=r;0!==t&&++i;let h,d=o[r].getAttribute("path"),c="l";null!=d&&(c=(h=d.match(/\s*([lLcC])\s*(.*)/))[1]);let u=l(h[2]);switch(c){case"l":0===i?(e[3*t][3*n+3]=u[0].add(e[3*t][3*n]),e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0].add(e[3*t+3][3*n+3])),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"L":0===i?(e[3*t][3*n+3]=u[0],e[3*t][3*n+1]=a(e[3*t][3*n],e[3*t][3*n+3]),e[3*t][3*n+2]=a(e[3*t][3*n+3],e[3*t][3*n])):1===i?(e[3*t+3][3*n+3]=u[0],e[3*t+1][3*n+3]=a(e[3*t][3*n+3],e[3*t+3][3*n+3]),e[3*t+2][3*n+3]=a(e[3*t+3][3*n+3],e[3*t][3*n+3])):2===i?(0===n&&(e[3*t+3][3*n+0]=u[0]),e[3*t+3][3*n+1]=a(e[3*t+3][3*n],e[3*t+3][3*n+3]),e[3*t+3][3*n+2]=a(e[3*t+3][3*n+3],e[3*t+3][3*n])):(e[3*t+1][3*n]=a(e[3*t][3*n],e[3*t+3][3*n]),e[3*t+2][3*n]=a(e[3*t+3][3*n],e[3*t][3*n]));break;case"c":0===i?(e[3*t][3*n+1]=u[0].add(e[3*t][3*n]),e[3*t][3*n+2]=u[1].add(e[3*t][3*n]),e[3*t][3*n+3]=u[2].add(e[3*t][3*n])):1===i?(e[3*t+1][3*n+3]=u[0].add(e[3*t][3*n+3]),e[3*t+2][3*n+3]=u[1].add(e[3*t][3*n+3]),e[3*t+3][3*n+3]=u[2].add(e[3*t][3*n+3])):2===i?(e[3*t+3][3*n+2]=u[0].add(e[3*t+3][3*n+3]),e[3*t+3][3*n+1]=u[1].add(e[3*t+3][3*n+3]),0===n&&(e[3*t+3][3*n+0]=u[2].add(e[3*t+3][3*n+3]))):(e[3*t+2][3*n]=u[0].add(e[3*t+3][3*n]),e[3*t+1][3*n]=u[1].add(e[3*t+3][3*n]));break;case"C":0===i?(e[3*t][3*n+1]=u[0],e[3*t][3*n+2]=u[1],e[3*t][3*n+3]=u[2]):1===i?(e[3*t+1][3*n+3]=u[0],e[3*t+2][3*n+3]=u[1],e[3*t+3][3*n+3]=u[2]):2===i?(e[3*t+3][3*n+2]=u[0],e[3*t+3][3*n+1]=u[1],0===n&&(e[3*t+3][3*n+0]=u[2])):(e[3*t+2][3*n]=u[0],e[3*t+1][3*n]=u[1]);break;default:console.error("mesh.js: "+c+" invalid path type.")}if(0===t&&0===n||r>0){let e=window.getComputedStyle(o[r]).stopColor.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i),a=window.getComputedStyle(o[r]).stopOpacity,h=255;a&&(h=Math.floor(255*a)),e&&(0===i?(s[t][n]=[],s[t][n][0]=Math.floor(e[1]),s[t][n][1]=Math.floor(e[2]),s[t][n][2]=Math.floor(e[3]),s[t][n][3]=h):1===i?(s[t][n+1]=[],s[t][n+1][0]=Math.floor(e[1]),s[t][n+1][1]=Math.floor(e[2]),s[t][n+1][2]=Math.floor(e[3]),s[t][n+1][3]=h):2===i?(s[t+1][n+1]=[],s[t+1][n+1][0]=Math.floor(e[1]),s[t+1][n+1][1]=Math.floor(e[2]),s[t+1][n+1][2]=Math.floor(e[3]),s[t+1][n+1][3]=h):3===i&&(s[t+1][n]=[],s[t+1][n][0]=Math.floor(e[1]),s[t+1][n][1]=Math.floor(e[2]),s[t+1][n][2]=Math.floor(e[3]),s[t+1][n][3]=h))}}e[3*t+1][3*n+1]=new x,e[3*t+1][3*n+2]=new x,e[3*t+2][3*n+1]=new x,e[3*t+2][3*n+2]=new x,e[3*t+1][3*n+1].x=(-4*e[3*t][3*n].x+6*(e[3*t][3*n+1].x+e[3*t+1][3*n].x)+-2*(e[3*t][3*n+3].x+e[3*t+3][3*n].x)+3*(e[3*t+3][3*n+1].x+e[3*t+1][3*n+3].x)+-1*e[3*t+3][3*n+3].x)/9,e[3*t+1][3*n+2].x=(-4*e[3*t][3*n+3].x+6*(e[3*t][3*n+2].x+e[3*t+1][3*n+3].x)+-2*(e[3*t][3*n].x+e[3*t+3][3*n+3].x)+3*(e[3*t+3][3*n+2].x+e[3*t+1][3*n].x)+-1*e[3*t+3][3*n].x)/9,e[3*t+2][3*n+1].x=(-4*e[3*t+3][3*n].x+6*(e[3*t+3][3*n+1].x+e[3*t+2][3*n].x)+-2*(e[3*t+3][3*n+3].x+e[3*t][3*n].x)+3*(e[3*t][3*n+1].x+e[3*t+2][3*n+3].x)+-1*e[3*t][3*n+3].x)/9,e[3*t+2][3*n+2].x=(-4*e[3*t+3][3*n+3].x+6*(e[3*t+3][3*n+2].x+e[3*t+2][3*n+3].x)+-2*(e[3*t+3][3*n].x+e[3*t][3*n+3].x)+3*(e[3*t][3*n+2].x+e[3*t+2][3*n].x)+-1*e[3*t][3*n].x)/9,e[3*t+1][3*n+1].y=(-4*e[3*t][3*n].y+6*(e[3*t][3*n+1].y+e[3*t+1][3*n].y)+-2*(e[3*t][3*n+3].y+e[3*t+3][3*n].y)+3*(e[3*t+3][3*n+1].y+e[3*t+1][3*n+3].y)+-1*e[3*t+3][3*n+3].y)/9,e[3*t+1][3*n+2].y=(-4*e[3*t][3*n+3].y+6*(e[3*t][3*n+2].y+e[3*t+1][3*n+3].y)+-2*(e[3*t][3*n].y+e[3*t+3][3*n+3].y)+3*(e[3*t+3][3*n+2].y+e[3*t+1][3*n].y)+-1*e[3*t+3][3*n].y)/9,e[3*t+2][3*n+1].y=(-4*e[3*t+3][3*n].y+6*(e[3*t+3][3*n+1].y+e[3*t+2][3*n].y)+-2*(e[3*t+3][3*n+3].y+e[3*t][3*n].y)+3*(e[3*t][3*n+1].y+e[3*t+2][3*n+3].y)+-1*e[3*t][3*n+3].y)/9,e[3*t+2][3*n+2].y=(-4*e[3*t+3][3*n+3].y+6*(e[3*t+3][3*n+2].y+e[3*t+2][3*n+3].y)+-2*(e[3*t+3][3*n].y+e[3*t][3*n+3].y)+3*(e[3*t][3*n+2].y+e[3*t+2][3*n].y)+-1*e[3*t][3*n].y)/9}}this.nodes=e,this.colors=s}paintMesh(t,e){let s=(this.nodes.length-1)/3,r=(this.nodes[0].length-1)/3;if("bilinear"===this.type||s<2||r<2){let n;for(let o=0;o<s;++o)for(let s=0;s<r;++s){let r=[];for(let t=3*o,e=3*o+4;t<e;++t)r.push(this.nodes[t].slice(3*s,3*s+4));let i=[];i.push(this.colors[o].slice(s,s+2)),i.push(this.colors[o+1].slice(s,s+2)),(n=new m(r,i)).paint(t,e)}}else{let n,o,a,h,l,d,u;const x=s,g=r;s++,r++;let w=new Array(s);for(let t=0;t<s;++t){w[t]=new Array(r);for(let e=0;e<r;++e)w[t][e]=[],w[t][e][0]=this.nodes[3*t][3*e],w[t][e][1]=this.colors[t][e]}for(let t=0;t<s;++t)for(let e=0;e<r;++e)0!==t&&t!==x&&(n=i(w[t-1][e][0],w[t][e][0]),o=i(w[t+1][e][0],w[t][e][0]),w[t][e][2]=c(w[t-1][e][1],w[t][e][1],w[t+1][e][1],n,o)),0!==e&&e!==g&&(n=i(w[t][e-1][0],w[t][e][0]),o=i(w[t][e+1][0],w[t][e][0]),w[t][e][3]=c(w[t][e-1][1],w[t][e][1],w[t][e+1][1],n,o));for(let t=0;t<r;++t){w[0][t][2]=[],w[x][t][2]=[];for(let e=0;e<4;++e)n=i(w[1][t][0],w[0][t][0]),o=i(w[x][t][0],w[x-1][t][0]),w[0][t][2][e]=n>0?2*(w[1][t][1][e]-w[0][t][1][e])/n-w[1][t][2][e]:0,w[x][t][2][e]=o>0?2*(w[x][t][1][e]-w[x-1][t][1][e])/o-w[x-1][t][2][e]:0}for(let t=0;t<s;++t){w[t][0][3]=[],w[t][g][3]=[];for(let e=0;e<4;++e)n=i(w[t][1][0],w[t][0][0]),o=i(w[t][g][0],w[t][g-1][0]),w[t][0][3][e]=n>0?2*(w[t][1][1][e]-w[t][0][1][e])/n-w[t][1][3][e]:0,w[t][g][3][e]=o>0?2*(w[t][g][1][e]-w[t][g-1][1][e])/o-w[t][g-1][3][e]:0}for(let s=0;s<x;++s)for(let r=0;r<g;++r){let n=i(w[s][r][0],w[s+1][r][0]),o=i(w[s][r+1][0],w[s+1][r+1][0]),c=i(w[s][r][0],w[s][r+1][0]),x=i(w[s+1][r][0],w[s+1][r+1][0]),g=[[],[],[],[]];for(let t=0;t<4;++t){(d=[])[0]=w[s][r][1][t],d[1]=w[s+1][r][1][t],d[2]=w[s][r+1][1][t],d[3]=w[s+1][r+1][1][t],d[4]=w[s][r][2][t]*n,d[5]=w[s+1][r][2][t]*n,d[6]=w[s][r+1][2][t]*o,d[7]=w[s+1][r+1][2][t]*o,d[8]=w[s][r][3][t]*c,d[9]=w[s+1][r][3][t]*x,d[10]=w[s][r+1][3][t]*c,d[11]=w[s+1][r+1][3][t]*x,d[12]=0,d[13]=0,d[14]=0,d[15]=0,u=f(d);for(let e=0;e<9;++e){g[t][e]=[];for(let s=0;s<9;++s)g[t][e][s]=p(u,e/8,s/8),g[t][e][s]>255?g[t][e][s]=255:g[t][e][s]<0&&(g[t][e][s]=0)}}h=[];for(let t=3*s,e=3*s+4;t<e;++t)h.push(this.nodes[t].slice(3*r,3*r+4));l=y(h);for(let s=0;s<8;++s)for(let r=0;r<8;++r)(a=new m(l[s][r],[[[g[0][s][r],g[1][s][r],g[2][s][r],g[3][s][r]],[g[0][s][r+1],g[1][s][r+1],g[2][s][r+1],g[3][s][r+1]]],[[g[0][s+1][r],g[1][s+1][r],g[2][s+1][r],g[3][s+1][r]],[g[0][s+1][r+1],g[1][s+1][r+1],g[2][s+1][r+1],g[3][s+1][r+1]]]])).paint(t,e)}}}transform(t){if(t instanceof x)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].add(t);else if(t instanceof g)for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].transform(t)}scale(t){for(let e=0,s=this.nodes.length;e<s;++e)for(let s=0,r=this.nodes[0].length;s<r;++s)this.nodes[e][s]=this.nodes[e][s].scale(t)}}document.querySelectorAll("rect,circle,ellipse,path,text").forEach((r,n)=>{let o=r.getAttribute("id");o||(o="patchjs_shape"+n,r.setAttribute("id",o));const i=r.style.fill.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/),a=r.style.stroke.match(/^url\(\s*"?\s*#([^\s"]+)"?\s*\)/);if(i&&i[1]){const a=document.getElementById(i[1]);if(a&&"meshgradient"===a.nodeName){const i=r.getBBox();let l=document.createElementNS(s,"canvas");d(l,{width:i.width,height:i.height});const c=l.getContext("2d");let u=c.createImageData(i.width,i.height);const f=new b(a);"objectBoundingBox"===a.getAttribute("gradientUnits")&&f.scale(new x(i.width,i.height));const p=a.getAttribute("gradientTransform");null!=p&&f.transform(h(p)),"userSpaceOnUse"===a.getAttribute("gradientUnits")&&f.transform(new x(-i.x,-i.y)),f.paintMesh(u.data,l.width),c.putImageData(u,0,0);const y=document.createElementNS(t,"image");d(y,{width:i.width,height:i.height,x:i.x,y:i.y});let g=l.toDataURL();y.setAttributeNS(e,"xlink:href",g),r.parentNode.insertBefore(y,r),r.style.fill="none";const w=document.createElementNS(t,"use");w.setAttributeNS(e,"xlink:href","#"+o);const m="patchjs_clip"+n,M=document.createElementNS(t,"clipPath");M.setAttribute("id",m),M.appendChild(w),r.parentElement.insertBefore(M,r),y.setAttribute("clip-path","url(#"+m+")"),u=null,l=null,g=null}}if(a&&a[1]){const o=document.getElementById(a[1]);if(o&&"meshgradient"===o.nodeName){const i=parseFloat(r.style.strokeWidth.slice(0,-2))*(parseFloat(r.style.strokeMiterlimit)||parseFloat(r.getAttribute("stroke-miterlimit"))||1),a=r.getBBox(),l=Math.trunc(a.width+i),c=Math.trunc(a.height+i),u=Math.trunc(a.x-i/2),f=Math.trunc(a.y-i/2);let p=document.createElementNS(s,"canvas");d(p,{width:l,height:c});const y=p.getContext("2d");let g=y.createImageData(l,c);const w=new b(o);"objectBoundingBox"===o.getAttribute("gradientUnits")&&w.scale(new x(l,c));const m=o.getAttribute("gradientTransform");null!=m&&w.transform(h(m)),"userSpaceOnUse"===o.getAttribute("gradientUnits")&&w.transform(new x(-u,-f)),w.paintMesh(g.data,p.width),y.putImageData(g,0,0);const M=document.createElementNS(t,"image");d(M,{width:l,height:c,x:0,y:0});let S=p.toDataURL();M.setAttributeNS(e,"xlink:href",S);const k="pattern_clip"+n,A=document.createElementNS(t,"pattern");d(A,{id:k,patternUnits:"userSpaceOnUse",width:l,height:c,x:u,y:f}),A.appendChild(M),o.parentNode.appendChild(A),r.style.stroke="url(#"+k+")",g=null,p=null,S=null}}})}(); +</script> +</svg> diff --git a/frontend/assets/img/.DS_Store b/frontend/assets/img/.DS_Store Binary files differnew file mode 100644 index 0000000..5008ddf --- /dev/null +++ b/frontend/assets/img/.DS_Store diff --git a/frontend/assets/img/dryer_clothes.png b/frontend/assets/img/dryer_clothes.png Binary files differnew file mode 100644 index 0000000..babfc36 --- /dev/null +++ b/frontend/assets/img/dryer_clothes.png diff --git a/frontend/assets/img/dryer_down.png b/frontend/assets/img/dryer_down.png Binary files differnew file mode 100644 index 0000000..8c81b25 --- /dev/null +++ b/frontend/assets/img/dryer_down.png diff --git a/frontend/assets/img/dryer_off.png b/frontend/assets/img/dryer_off.png Binary files differnew file mode 100644 index 0000000..9919a01 --- /dev/null +++ b/frontend/assets/img/dryer_off.png diff --git a/frontend/assets/img/dryer_on.png b/frontend/assets/img/dryer_on.png Binary files differnew file mode 100644 index 0000000..7851dd5 --- /dev/null +++ b/frontend/assets/img/dryer_on.png diff --git a/frontend/assets/img/step1.png b/frontend/assets/img/step1.png Binary files differnew file mode 100644 index 0000000..4277a06 --- /dev/null +++ b/frontend/assets/img/step1.png diff --git a/frontend/assets/img/step2.png b/frontend/assets/img/step2.png Binary files differnew file mode 100644 index 0000000..7e24b63 --- /dev/null +++ b/frontend/assets/img/step2.png diff --git a/frontend/assets/img/step3.png b/frontend/assets/img/step3.png Binary files differnew file mode 100644 index 0000000..cbf88e8 --- /dev/null +++ b/frontend/assets/img/step3.png diff --git a/frontend/assets/img/step4.png b/frontend/assets/img/step4.png Binary files differnew file mode 100644 index 0000000..4a6801a --- /dev/null +++ b/frontend/assets/img/step4.png diff --git a/frontend/assets/img/washer_clothes.png b/frontend/assets/img/washer_clothes.png Binary files differnew file mode 100644 index 0000000..b16688a --- /dev/null +++ b/frontend/assets/img/washer_clothes.png diff --git a/frontend/assets/img/washer_down.png b/frontend/assets/img/washer_down.png Binary files differnew file mode 100644 index 0000000..89334b0 --- /dev/null +++ b/frontend/assets/img/washer_down.png diff --git a/frontend/assets/img/washer_off.png b/frontend/assets/img/washer_off.png Binary files differnew file mode 100644 index 0000000..0be7233 --- /dev/null +++ b/frontend/assets/img/washer_off.png diff --git a/frontend/assets/img/washer_on.png b/frontend/assets/img/washer_on.png Binary files differnew file mode 100644 index 0000000..7b811a4 --- /dev/null +++ b/frontend/assets/img/washer_on.png diff --git a/frontend/favicon.ico b/frontend/favicon.ico Binary files differnew file mode 100644 index 0000000..41044ea --- /dev/null +++ b/frontend/favicon.ico diff --git a/frontend/index.html b/frontend/index.html index 5217c41..fd7a1e9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,21 +2,28 @@ <html lang="en"> <head> <meta charset="UTF-8" /> - <link rel="icon" type="image/svg+xml" href="/vite.svg" /> + <link rel="stylesheet" href="./style.css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>frontend</title> - <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script> - <script> - window.OneSignalDeferred = window.OneSignalDeferred || []; - OneSignalDeferred.push(async function(OneSignal) { - await OneSignal.init({ - appId: "83901cc7-d964-475a-90ec-9f854df4ba52", - }); - }); - </script> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> </head> <body> - <button id="notbtn"></button> - <script src="main.js"></script> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" disabled>Timer</button> + <button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button> + </div> + <div class="section-container no-pad"> + <span>Loading...</span> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script src="/index.js"></script> </body> </html> diff --git a/frontend/index.js b/frontend/index.js new file mode 100644 index 0000000..12f1e97 --- /dev/null +++ b/frontend/index.js @@ -0,0 +1,14 @@ +(async () => { + const timers = await fetchTimers(); + if (Array.isArray(timers[1]) && timers[1].length > 0) { + window.location.href = './timer/'; + } else { + const urlCookie = await cookieStore.get("last_used_url"); + + if (urlCookie && urlCookie != null && urlCookie != "null") { + window.location.href = `./start/?machine=${urlCookie.value}`; + } else { + window.location.href = './status/' + } + } +})(); diff --git a/frontend/ios_popup.js b/frontend/ios_popup.js new file mode 100644 index 0000000..0b700ed --- /dev/null +++ b/frontend/ios_popup.js @@ -0,0 +1,9 @@ +(async () => { +const cookie = await cookieStore.get("subscription_endpoint"); + +if (navigator.userAgent.match(/iPhone|iPad|iPod/i) + && !window.matchMedia('(display-mode: standalone)').matches + && !cookie) { + openPopup(); +} +})(); diff --git a/frontend/main.js b/frontend/main.js index 51041fe..cfacc86 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -1,23 +1,376 @@ -const btn = document.getElementById("notbtn") -btn.addEventListener("click", () => requestPermission()) -function requestPermission() { - console.log("Requesting permission..."); - OneSignal.Notifications.requestPermission(); +// --- begin, important constants +const data = { + duration: 1, // will be multiplied by 30 + machine_id: "", } -document.cookie = "session_key=0" +const API_URL = "https://backend.laundryweb.altafcreator.com" -const data = { - duration: 2, - block: 1, - machine: 2, -} - -//fetch("http://localhost:8000/start", { -// credentials: "include", -// method: "POST", -// headers: { -// "Content-Type": "application/json" -// }, -// body: JSON.stringify(data) -//}); +const PUBLIC_VAPID_KEY = "BCvVfKfWBtHKtzdakJfhYy604yTn0_FgZxy2sNtxcQm6YyC3qdzBBuCJLbVcG6pmbz_CZLa0I44Z-b5UVBbegGw" + +// --- REGISTER SERVICE WORKERS +if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('/sw.js', { + scope: '/', + }); +} + +// --- subscribe +async function subscribe() { + if (!('serviceWorker' in navigator)) { + alert("err: no service worker"); + return; + } + + console.log(await Notification.requestPermission()); + + const registration = await navigator.serviceWorker.ready; + + try { + const subscription = await registration.pushManager.subscribe({ + userVisibleOnly: true, + applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY), + }); + + console.log(subscription); + + console.log("sw regis pass, write to db"); + + const db_reply = await fetch(`${API_URL}/notifsubscribe`, { + method: 'POST', + credentials: "include", + body: JSON.stringify(subscription), + headers: { + "Content-Type": "application/json", + }, + }); + + console.log(db_reply) + + return db_reply.ok; + } catch (e) { + console.log("ERR in regis, ", e); + return false; + } + +} + +/// copied from somewhere +const urlBase64ToUint8Array = (base64String) => { + const padding = '='.repeat((4 - base64String.length % 4) % 4); + const base64 = (base64String + padding) + .replace(/\-/g, '+') + .replace(/_/g, '/'); + + const rawData = window.atob(base64); + const outputArray = new Uint8Array(rawData.length); + + for (let i = 0; i < rawData.length; ++i) { + outputArray[i] = rawData.charCodeAt(i); + } + return outputArray; +}; + +// --- check machine status +// returns a 2d array representing machines +// []: root array +// []: block +// enum: machine status +async function checkMachineStatus() { + const response = await fetch(`${API_URL}/status`, { + method: "POST", + credentials: "include", + }); + return await response.json(); +} + +// --- timer duration +const minField = document.getElementById("min-field"); +const decBtn = document.getElementById("decTime"); +function increaseTime() { + data.duration += 1; + minField.innerText = (30 * data.duration).toString() + " minutes"; + decBtn.disabled = false; +} + +function decreaseTime() { + data.duration -= 1; + data.duration = Math.max(data.duration, 1); + if (data.duration == 1) { + decBtn.disabled = true; + } + minField.innerText = (30 * data.duration).toString() + " minutes"; +} + +// --- starting a timer +async function start() { + fetch(`${API_URL}/start`, { + credentials: "include", + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(data) + }).then(response => response.text()) + .then(data => { + console.log(data); + if (data == "all good bro timer started") { + window.location.href = "/timer/"; + } + cookieStore.delete("last_used_url"); + }); +} + +// --- information loading + cookie setting (from server) +async function information(urlParam = null) { + const urlCookie = await cookieStore.get("last_used_url"); + + const response = await fetch(`${API_URL}/info`, { + credentials: "include", + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ "machine_id": urlParam ? urlParam : "" }), + }); + + const json = await response.json(); + + if (json["block"]) { + document.getElementById("logo-id").innerText = "H" + json["block"]; + } else { + document.getElementById("logo-id").innerText = "H?"; + } + + return Promise.resolve(json); +} + + +// ------ page specific ----- +// wait WHY THE FUCK ARE THESE HERE THEN? + +// ---- machine status page + +const STATUS_INTERVAL = 30 + +// --- machines visual +async function startUpdateMachines() { + const urlParams = new URLSearchParams(window.location.search); + + await information(urlParams.get("machine")); + console.log("info done") + + updateMachines(); + + while (true) { + await delay(STATUS_INTERVAL * 1000); + + await updateMachines(); + } +} + +async function updateMachines() { + // less disgusting. + const types = ["dryer", "washer"]; + const ns = [1, 2]; + + const machineImgs = []; + const machineTxts = []; + const machineDetailImgs = []; + const machineDetailTitles = []; + const machineDetailDescs = []; + + for (const n of ns) { + for (const t of types) { + machineImgs.push(document.getElementById(`${t}${n}-img`)); + machineTxts.push(document.getElementById(`${t}${n}-span`)); + machineDetailImgs.push(document.getElementById(`detail-${t[0]}${n}-img`)); + machineDetailTitles.push(document.getElementById(`detail-${t[0]}${n}-title`)); + machineDetailDescs.push(document.getElementById(`detail-${t[0]}${n}-desc`)); + } + } + + console.log(machineDetailImgs); + console.log(machineDetailTitles); + console.log(machineDetailDescs); + + const status = await checkMachineStatus(); + console.log(status); + + for (let i = 0; i < status[0].length; i++) { + if (status[0][i] == "RUNNING") { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_on.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_on.png"; + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Timing might differ due to heavy load or excess suds." + } else { + machineImgs[i].src = "/assets/img/dryer_on.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_on.png"; + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + } + const now = Date.now(); + const end = Date.parse(status[2][i]); + const minsLeft = Math.ceil((end - now) / 60000).toString(); + machineTxts[i].innerHTML = minsLeft + " min(s) left"; + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = minsLeft + " minute(s) left" + } else if (status[0][i] == "OUTOFSERVICE") { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_down.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_down.png"; + } else { + machineImgs[i].src = "/assets/img/dryer_down.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_down.png"; + } + machineTxts[i].innerHTML = "Down" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Out of Service" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "This machine is currently out of service, and is unavailable to use." + } else if (status[0][i] == "FINISHED") { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_clothes.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_clothes.png"; + } else { + machineImgs[i].src = "/assets/img/dryer_clothes.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_clothes.png"; + } + machineTxts[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Clothes may not be collected yet." + } else { + if ((i + 1) % 2 == 0) { + machineImgs[i].src = "/assets/img/washer_off.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_off.png"; + } else { + machineImgs[i].src = "/assets/img/dryer_off.png"; + if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_off.png"; + } + if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle" + if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "" + machineTxts[i].innerHTML = "Idle" + } + } + + console.log("done"); +} + +// --- current timers +async function startLoadTimers() { + information(); + + const timersData = await fetchTimers(); + + if (timersData[0] != 200) { + console.error(timersData[0].toString() + " from backend: " + timersData[1]); + return; + } + + const timers = timersData[1]; + + const container = document.getElementById("timer-container") + if (timers.length > 0) container.innerHTML = ''; + + const textList = [] + const progList = [] + const startTimestamps = [] + const endTimestamps = [] + + for (let i = 0; i < timers.length; i++) { + container.innerHTML += ` + <div class="section-container no-pad" id="timer-${timers[i]["id"]}"> + <h1>Timer #${(i + 1).toString()}</h1> + <div class="machine-container"> + <div class="txtcol-dryer ${timers[i]["machine"] == 1 ? "machine-selected" : ""}"> + <span>Dryer 1</span> + <img src="/assets/img/dryer_${timers[i]["machine"] == 1 ? "on" : "off"}.png" alt=""> + </div> + <div class="txtcol-washer ${timers[i]["machine"] == 2 ? "machine-selected" : ""}"> + <span>Washer 1</span> + <img src="/assets/img/washer_${timers[i]["machine"] == 2 ? "on" : "off"}.png" alt=""> + </div> + <div class="txtcol-dryer ${timers[i]["machine"] == 3 ? "machine-selected" : ""}"> + <span>Dryer 2</span> + <img src="/assets/img/dryer_${timers[i]["machine"] == 3 ? "on" : "off"}.png" alt=""> + </div> + <div class="txtcol-washer ${timers[i]["machine"] == 4 ? "machine-selected" : ""}"> + <span>Washer 2</span> + <img src="/assets/img/washer_${timers[i]["machine"] == 4 ? "on" : "off"}.png" alt=""> + </div> + </div> + <div class="timer-container"> + <span id="timer-txt-${i}">15:00</span> + <div class="prog-container"> + <div class="prog" id="timer-prog-${i}"></div> + </div> + </div> + <button class="button bg-1" disabled id="timer-btn-${i}">I have collected my laundry!</button> + </div> + ` + + textList.push(`timer-txt-${i}`); + progList.push(`timer-prog-${i}`); + endTimestamps.push(Date.parse(timers[i]["end_time"])); + startTimestamps.push(Date.parse(timers[i]["start_time"])); + } + + for (let i = 0; i < timers.length; i++) { // html rebuilds everytime innerHTML is modified + document.getElementById(`timer-btn-${i}`).addEventListener("click", function () { + finishLaundryTimer(timers[i]["id"]); + }); + console.log("added!"); + } + + console.log(textList); + console.log(progList); + console.log(endTimestamps); + console.log(startTimestamps); + + while (true) { + for (let i = 0; i < textList.length; i++) { + const text = document.getElementById(textList[i]); + text.innerText = ""; + const timeRemaining = Math.max(Math.round((endTimestamps[i] - Date.now()) / 1000), 0); + const hours = Math.floor(timeRemaining / 3600); + const minutes = Math.floor(timeRemaining / 60) % 60; + const seconds = timeRemaining % 60; + if (hours > 0) text.innerText += hours.toString().padStart(2, '0') + ':'; + text.innerText += minutes.toString().padStart(2, '0') + ':'; + text.innerText += seconds.toString().padStart(2, '0'); + + const prog = document.getElementById(progList[i]); + const totalTime = endTimestamps[0] - startTimestamps[0]; + prog.style.width = ((timeRemaining / (totalTime / 1000)) * 100).toString() + "%"; + + if (timeRemaining <= 0) { + document.getElementById(`timer-btn-${i}`).disabled = false; + } + } + await delay(1000); + } +} + +async function fetchTimers() { + const response = await fetch(`${API_URL}/laundry`, { + method: "POST", + credentials: "include", + }); + return [response.status, await response.json()]; +} + +// --- finish / collect timer / laundry +async function finishLaundryTimer(timerId) { + console.log("finishing timer! w/ id "+timerId.toString()); + const response = await fetch(`${API_URL}/finish`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({id: timerId}), + }); + if (await response.text() == "laundry finished") { + window.location.reload(); + } +} + +const delay = (durationMs) => { + return new Promise(resolve => setTimeout(resolve, durationMs)); +} diff --git a/frontend/manifest.json b/frontend/manifest.json new file mode 100644 index 0000000..4bbf313 --- /dev/null +++ b/frontend/manifest.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://json.schemastore.org/web-manifest-combined.json", + "name": "LaundryWeb", + "icons": [ + { + "src": "/assets/icons/512.png", + "type": "image/png", + "sizes": "512x512" + }, + { + "src": "/assets/icons/192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "/assets/icons/1024.png", + "type": "image/png", + "sizes": "1024x1024" + } + ], + "start_url": "/", + "display": "standalone", + "theme_color": "#93B6B1", + "background_color": "#FFFFFF" +} diff --git a/frontend/permissionrequest.js b/frontend/permissionrequest.js new file mode 100644 index 0000000..1a90109 --- /dev/null +++ b/frontend/permissionrequest.js @@ -0,0 +1,25 @@ +const notif = document.getElementById("notif-panel"); +const notbtn = document.getElementById("notbtn"); + +(async function () { + cookie = await cookieStore.get("subscription_endpoint"); + if (cookie) { + notif.style.display = "none"; + } +})(); + +notbtn.addEventListener("click", () => requestPermission()); +async function requestPermission() { + const sub_result = await subscribe(); + + if (!sub_result) { + return; + } + + notif.style.display = "none"; + + // this is disgusting + if (typeof startbtn !== 'undefined') { + startbtn.disabled = false; + } +} diff --git a/frontend/popup.js b/frontend/popup.js new file mode 100644 index 0000000..b7adf0a --- /dev/null +++ b/frontend/popup.js @@ -0,0 +1,12 @@ +const popupCloseBtn = document.getElementById("close-popup"); +const popupMaster = document.getElementById("popup-master") + +popupCloseBtn.addEventListener("mousedown", () => closePopup()); + +function closePopup() { + popupMaster.style.display = "none"; +} + +function openPopup() { + popupMaster.style.display = "flex"; +} diff --git a/frontend/start.js b/frontend/start.js new file mode 100644 index 0000000..82e23aa --- /dev/null +++ b/frontend/start.js @@ -0,0 +1,63 @@ +const startbtn = document.getElementById("startbtn"); + +const urlParams = new URLSearchParams(window.location.search); +data.machine_id = urlParams.get('machine'); +console.log(urlParams); + +startUpdateMachines(); + +(async () => { + const timers = await fetchTimers(); + + console.log("timers: (start.js) " + timers); + + const existingPanel = document.getElementById("existing-laundry-panel"); + const existingText = document.getElementById("existing-laundry-text"); + + if (Array.isArray(timers[1]) && timers[1].length > 0) { + existingPanel.style.display = 'inherit'; + if (timers[1].length == 1) { + existingText.innerText = "You currently have another ongoing laundry. You are creating a new timer."; + } else { + existingText.innerText = "You currently have other ongoing laundries. You are creating a new timer."; + } + } + + const info = await information(data.machine_id); + + const machine = await info["machine"]; + + console.log(`machine is ${machine}`); + + const divs = [ + document.getElementById("dryer1"), + document.getElementById("washer1"), + document.getElementById("dryer2"), + document.getElementById("washer2"), + ] + + divs[machine - 1].classList.add("machine-selected"); + + cookie = await cookieStore.get("subscription_endpoint"); + + if (cookie) { + startbtn.disabled = false; + } +})(); + +startbtn.addEventListener("click", () => { + start(); +}); + +function rememberUrl() { + machineId = urlParams.get('machine'); + minutesDelta = 5; + expirationDate = new Date(new Date().getTime() + minutesDelta * 60000);; + cookieStore.set({ + expires: expirationDate, + name: "last_used_url", + value: machineId, + url: "https://laundryweb.altafcreator.com", + secure: true, + }) +} diff --git a/frontend/start/index.html b/frontend/start/index.html new file mode 100644 index 0000000..bcfd1a6 --- /dev/null +++ b/frontend/start/index.html @@ -0,0 +1,103 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="/style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> + </head> + <body> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" disabled>Timer</button> + <button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button> + </div> + <div class="section-container row bg-dark" id="existing-laundry-panel" style="display: none;"> + <div class="flex-center-container"> + <span class="icon" style="font-weight: 900; font-family: monospace;">i</span> + </div> + <div class="flex"> + <span id="existing-laundry-text">You currently have (an)other laundry(ies) ongoing. You are creating a new timer.</span> + <button id="cancelbtn" class="button bg-darker" onclick="window.location.href = '/timer/'">Cancel</button> + </div> + </div> + <div class="section-container no-pad" style="opacity: .5;"> + <h1>Selected Machine</h1> + <div class="machine-container"> + <div class="txtcol-dryer" id="dryer1"> + <span>Dryer 1</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer1-img"> + <span id="dryer1-span"></span> + </div> + <div class="txtcol-washer" id="washer1"> + <span>Washer 1</span> + <img src="/assets/img/washer_off.png" alt="" id="washer1-img"> + <span id="washer1-span"></span> + </div> + <div class="txtcol-dryer" id="dryer2"> + <span>Dryer 2</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer2-img"> + <span id="dryer2-span"></span> + </div> + <div class="txtcol-washer" id="washer2"> + <span>Washer 2</span> + <img src="/assets/img/washer_off.png" alt="" id="washer2-img"> + <span id="washer2-span"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Duration</h1> + <div class="input-field"> + <button class="button bg-3" onclick="decreaseTime()" id="decTime" disabled>-</button> + <span id="min-field">30 minutes</span> + <button class="button bg-3" onclick="increaseTime()" id="incTime">+</button> + </div> + </div> + <div class="section-container no-pad"> + <h1>Start</h1> + <div class="section-container row bg-red" id="notif-panel"> + <div class="flex-center-container"> + <span class="icon">🔔</span> + </div> + <div> + <span>Please allow this website to send you notifications to remind you about your laundry. That's like, the whole point of this website.</span> + <button id="notbtn" class="button bg-redder">Enable Required Permissions</button> + </div> + </div> + <button class="button bg-1" id="startbtn" disabled>Start</button> + </div> + <div class="master-popup-container" id="popup-master"> + <div class="popup-container"> + <h1 style="text-align: center;">Initial Setup for iOS</h1> + <p>To allow notifications on your iOS device, you’ll need to install this website as a web app.</p> + <hr> + <p><b>Step 1:</b> Press ... (if using iOS 26) → <b>Share</b></p> + <img src="/assets/img/step1.png" alt=""> + <p><b>Step 2:</b> Scroll down → Select <b>Add to Home Screen</b></p> + <img src="/assets/img/step2.png" alt=""> + <p><b>Step 3:</b> Press <b>Add</b>. If you're using iOS 26+, ensure Open as Web App is enabled.</p> + <img src="/assets/img/step3.png" alt=""> + <p><b>Step 4:</b> Go to your home screen → Reopen this page by <b>pressing</b> the <b>LaundryWeb app</b>.</p> + <img src="/assets/img/step4.png" alt="" style="height: 72px; margin-bottom: 32px;"> + </div> + <button id="close-popup"></button> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script src="/start.js"></script> + <script src="/permissionrequest.js"></script> + <script src="/popup.js"></script> + <script src="/ios_popup.js"></script> + <script> + rememberUrl(); + </script> + </body> +</html> diff --git a/frontend/status.js b/frontend/status.js new file mode 100644 index 0000000..5f55fe8 --- /dev/null +++ b/frontend/status.js @@ -0,0 +1,7 @@ +startUpdateMachines(); + +(async () => { + const urlParams = new URLSearchParams(window.location.search); + const inf = await information(urlParams.get("machine")); + document.getElementById("status-title").innerHTML = `Machine Status for H${inf ? inf.block : '?'}` +})(); diff --git a/frontend/status/index.html b/frontend/status/index.html new file mode 100644 index 0000000..46c50ed --- /dev/null +++ b/frontend/status/index.html @@ -0,0 +1,132 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="/style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> + </head> + <body> + <style> + .machine-container > div > img { + padding: 6px; + } + </style> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" onclick="window.location.href = '/timer/'">Timer</button> + <button class="button button-tab bg-3" disabled>Status</button> + </div> + <div class="section-container row bg-red" id="notif-panel"> + <div class="flex-center-container"> + <span class="icon">🔔</span> + </div> + <div> + <span>Please allow this website to send you notifications to remind you about your laundry. That's like, the whole point of this website.</span> + <button id="notbtn" class="button bg-redder">Enable Required Permissions</button> + </div> + </div> + <div class="section-container no-pad"> + <h1 id="status-title">Machine Status for H?</h1> + <div class="machine-container"> + <div class="txtcol-dryer" id="dryer1"> + <span>Dryer 1</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer1-img"> + <span id="dryer1-span"></span> + </div> + <div class="txtcol-washer" id="washer1"> + <span>Washer 1</span> + <img src="/assets/img/washer_off.png" alt="" id="washer1-img"> + <span id="washer1-span"></span> + </div> + <div class="txtcol-dryer" id="dryer2"> + <span>Dryer 2</span> + <img src="/assets/img/dryer_off.png" alt="" id="dryer2-img"> + <span id="dryer2-span"></span> + </div> + <div class="txtcol-washer" id="washer2"> + <span>Washer 2</span> + <img src="/assets/img/washer_off.png" alt="" id="washer2-img"> + <span id="washer2-span"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Dryer 1</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-d1-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-d1-title">Idle</span> + <span id="detail-d1-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Washer 1</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-w1-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-w1-title">Idle</span> + <span id="detail-w1-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Dryer 2</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-d2-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-d2-title">Idle</span> + <span id="detail-d2-desc"></span> + </div> + </div> + </div> + <div class="section-container no-pad"> + <h1>Washer 2</h1> + <div class="flex-container row"> + <div class="flex-center-container"> + <img id="detail-w2-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;"> + </div> + <div class="flex flex-center-container-jus col"> + <span class="big-text" id="detail-w2-title">Idle</span> + <span id="detail-w2-desc"></span> + </div> + </div> + </div> + <div class="master-popup-container" id="popup-master"> + <div class="popup-container"> + <h1 style="text-align: center;">Initial Setup for iOS</h1> + <p>To allow notifications on your iOS device, you’ll need to install this website as a web app.</p> + <hr> + <p><b>Step 1:</b> Press ... (if using iOS 26) → <b>Share</b></p> + <img src="/assets/img/step1.png" alt=""> + <p><b>Step 2:</b> Scroll down → Select <b>Add to Home Screen</b></p> + <img src="/assets/img/step2.png" alt=""> + <p><b>Step 3:</b> Press <b>Add</b>. If you're using iOS 26+, ensure Open as Web App is enabled.</p> + <img src="/assets/img/step3.png" alt=""> + <p><b>Step 4:</b> Go to your home screen → Reopen this page by <b>pressing</b> the <b>LaundryWeb app</b>.</p> + <img src="/assets/img/step4.png" alt="" style="height: 72px; margin-bottom: 32px;"> + </div> + <button id="close-popup"></button> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script src="/status.js"></script> + <script src="/permissionrequest.js"></script> + <script src="/popup.js"></script> + <script src="/ios_popup.js"></script> + </body> +</html> diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..37e66e8 --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,389 @@ +@font-face { + font-family: "Interesting"; + src: + url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype"), + url("/assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype"); +} + +:root { + --col-1: #93B6B1; + --col-2: #E8DEB6; + --col-3: #B3C9AA; + --darkcol-1: #656A85; + --darkcol-2: #798AA2; + --col-red-bg: #FFD0D0; + --col-red-fg: #A33939; + --col-washer: var(--darkcol-1); + --col-dryer: var(--darkcol-2); +} + +body { + margin: 0; + display: flex; + align-items: center; + flex-direction: column; + gap: 16px; + padding: 16px; + font-family: "Interesting", sans-serif; + padding-bottom: 64px; +} + +.section-container { + border-radius: 32px; + padding: 24px; + max-width: 512px; + width: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 16px; +} + +.section-container > span { + align-self: center; +} + +.section-container > div { + display: flex; + flex-direction: column; + gap: 16px; +} + +.section-container > h1 { + margin: 0; +} + +.no-pad { + padding: 0; +} + +.row { + flex-direction: row !important; +} + +.col { + flex-direction: column !important; +} + +.flex-container { + display: flex; + gap: 16px !important; +} + +.flex-center-container { + display: flex; + align-items: center; + justify-content: center; +} + +.flex-center-container-jus { + display: flex; + justify-content: center; +} + +.flex { + flex: 1; +} + +.button { + width: 100%; + height: 48px; + border-radius: 48px; + border: none; + cursor: pointer; + color: black; +} + +.button:hover:not(:disabled) { + box-shadow: inset 0 0 0 3px #00000033; +} + +.button:active:not(:disabled) { + opacity: .5; +} + +.button:disabled { + cursor: default !important; + color: black !important; + opacity: .5; +} + +.button-tab:not(:disabled) { + background-color: transparent; +} + +.button-tab:disabled { + opacity: 1 !important; +} + +.button-tab:hover { + background-color: var(--col-3); +} + +.bg-1 { + background-color: var(--col-1); +} + +.bg-2 { + background-color: var(--col-2); +} + +.bg-3 { + background-color: var(--col-3); +} + +.bg-red { + background-color: var(--col-red-bg); +} + +.bg-redder { + background-color: var(--col-red-fg); + color: white; +} + +.bg-dark { + background-color: var(--darkcol-2); + color: white; +} + +.bg-darker { + background-color: var(--darkcol-1); + color: white; +} + +.txtcol-washer { + color: var(--col-washer); +} + +.txtcol-dryer { + color: var(--col-dryer); +} + +.icon { + margin: 16px; + margin-left: 0; + font-size: 3rem; +} + +.machine-container { + display: flex; + flex-direction: row !important; + width: 100%; +} + +.machine-container > div { + flex: 1; +} + +.machine-container > div > span { + text-align: center; + width: 100%; + display: block; + height: 1rem; +} + +.machine-container > div > img { + width: 100%; + display: block; + padding: 11px; + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 6px; + border-radius: 16px; + overflow: visible; +} + +.machine-selected { + font-weight: bold; +} + +.machine-selected > img { + background-color: var(--col-2); +} + +.input-field { + display: flex; + flex-direction: row !important; + flex-wrap: nowrap; + background-color: var(--col-2); + width: 272px; + margin-left: auto; + margin-right: auto; + padding: 8px; + box-sizing: border-box; + align-items: center; + border-radius: 36px; +} + +.input-field > span { + flex: 1; + text-align: center; +} + +.input-field > button { + height: 48px; + width: 56px; + border-radius: 64px; +} + +.timer-container { + height: 124px; + background-color: var(--col-2); + position: relative; + border-radius: 32px; + overflow: hidden; +} + +.timer-container > span { + font-weight: bolder; + font-size: 4.1rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, calc(-50% - 8px)); +} + +.timer-container > .prog-container { + position: absolute; + bottom: 0; +} + +.prog-container { + width: 100%; + height: 16px; + background: #00000011; +} + +.prog { + height: 100%; + width: 50%; + background-color: var(--col-1); +} + +.credits-container { + opacity: .5; + font-size: .9rem; + text-align: center; +} + +a { + color: black; +} + +.feedback { + position: fixed; + bottom: 0; + padding: 12px; + padding-bottom: 12px; + background-color: var(--darkcol-1); + color: white; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + text-decoration: none; + right: 16px; + box-shadow: 0 0 8px #00000033; + transition: .3s padding-bottom, .3s background-color; +} + +.feedback:hover { + padding-bottom: 20px; + background-color: var(--darkcol-2); +} + +.big-text { + font-size: 1.5rem; +} + +.master-popup-container { + z-index: 1234567; + background-color: rgba(0, 0, 0, 0.25); + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + backdrop-filter: blur(6px); + padding: 16px; + padding-top: 64px; + padding-bottom: 64px; + box-sizing: border-box; + display: flex; + align-items: center; + display: none; +} + +.master-popup-container > button { + z-index: 1; + width: 100%; + height: 100%; + position: fixed; + left: 0; + top: 0; + opacity: 0; +} + +.popup-container { + z-index: 2; + background-color: white; + width: 100%; + max-height: 100%; + overflow-y: auto; + position: relative; + padding: 24px; + border-radius: 32px; + box-shadow: 0 0 16px rgba(0, 0, 0, 0.25); +} + +.popup-container > img { + margin-left: auto; + margin-right: auto; + display: block; + height: 192px; +} + +#logo-id { + font-size: 4rem; + margin: 0; + font-weight: 900; +} + +#logo { + font-size: 2rem; +} + +#icon { + background-image: url("/assets/icons/transparent_text_logo.svg"); + background-size: contain; + background-repeat: no-repeat; + height: 3.2rem; + margin-bottom: .5rem; + display: block; +} + +button { + font-family: "Interesting", sans-serif; + font-size: 1rem; +} + +hr { + opacity: .25; +} + +@media only screen and (max-width: 512px) { + .txtcol-washer > span { + font-size: .8rem; + } + + .txtcol-washer > img { + padding: 8px; + } + + .txtcol-dryer > span { + font-size: .8rem; + } + + .txtcol-dryer > img { + padding: 8px; + } +} diff --git a/frontend/sw.js b/frontend/sw.js new file mode 100644 index 0000000..dd9a495 --- /dev/null +++ b/frontend/sw.js @@ -0,0 +1,47 @@ +const API_URL = "https://backend.laundryweb.altafcreator.com" + +self.addEventListener('push', (e) => { + console.log(e.data); + const received_data = e.data.json(); + console.log(received_data); + if (received_data.requireInteraction) { + self.registration.showNotification(received_data.title, { + body: received_data.body, + vibrate: [200, 100, 200], + requireInteraction: received_data.requireInteraction, + actions: [ + { + title: "I've collected my laundry!", + action: "collect", + } + ], + data: {timerId: received_data.timerId}, + }); + } else { + self.registration.showNotification(received_data.title, { + body: received_data.body, + vibrate: [200, 100, 200], + }); + } +}); + +self.addEventListener("notificationclick", (event) => { + if (event.action === "collect") { + console.log(event); + timerId = event.notification.data.timerId; + console.log("finishing timer! w/ id "+timerId); + fetch(`${API_URL}/finish`, { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({id: timerId}), + }); + clients.openWindow("/timer/"); + event.notification.close(); + } else { + clients.openWindow("/timer/"); + event.notification.close(); + } +}); diff --git a/frontend/timer/index.html b/frontend/timer/index.html new file mode 100644 index 0000000..724ebe8 --- /dev/null +++ b/frontend/timer/index.html @@ -0,0 +1,32 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="stylesheet" href="/style.css"> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <link rel="manifest" href="/manifest.json" /> + <title>LaundryWeb</title> + </head> + <body> + <div class="section-container row bg-1" style="height: 164px;"> + <span id="logo"><span id="icon"></span>LaundryWeb</span> + <span id="logo-id">H?</span> + </div> + <div class="section-container row bg-2" style="padding: 8px; gap: 8px;"> + <button class="button button-tab bg-3" disabled>Timer</button> + <button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button> + </div> + <div id="timer-container" class="section-container no-pad"> + <img src="/assets/img/washer_off.png" alt="" style="width: 2rem; margin-top: 3rem; margin-right: auto; margin-left: auto; opacity: .5;"> + <span style="opacity: .5; margin-top: .5rem; margin-bottom: 2rem; display: block;">You currently don't have any laundry.</span> + </div> + <div class="section-container credits-container"> + <span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span> + </div> + <a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a> + <script src="/main.js"></script> + <script> + startLoadTimers(); + </script> + </body> +</html> |
