vue/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="apple-touch-icon" href="/brand/touch_icon_gold.png">
<title>Loomio</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#loading-placeholder {
position: fixed;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: #f0f0f0;
justify-content: center;
}
@media (prefers-color-scheme: dark) {
#loading-placeholder {
background-color: #1B1B1B;
}
}
#loading-placeholder svg {
width: 60%;
max-width: 320px;
height: auto;
/* animation: pulse 2s 1 ease-in-out; */
}
.loading-text {
margin-top: 2em;
font-size: 16px;
font-family: 'Roboto', 'Helvetica', sans-serif;
color: #aaa;
}
</style>
</head>
<body>
<div id="app">
<div id="loading-placeholder">
<svg height="96" viewBox="0 0 600 96" width="600" xmlns="http://www.w3.org/2000/svg"><g id="logofill" fill="#fff"><path d="m588.093039 96c-3.349396 0-6.201584-1.1604958-8.558566-3.4805024-2.355982-2.4431492-3.534473-5.3128643-3.534473-8.6111157 0-3.1751088 1.178491-5.9236516 3.534473-8.2436582 2.356982-2.4431491 5.20917-3.6647237 8.558566-3.6647237 3.348395 0 6.139557 1.1604958 8.371488 3.4814876 2.356981 2.3200065 3.535473 5.1296281 3.535473 8.4268943 0 3.2982514-1.178492 6.1679665-3.535473 8.6111157-2.231931 2.3200066-5.023093 3.4805024-8.371488 3.4805024z"/><path d="m521 96c-9.071381 0-17.260054-2.0619973-24.567025-6.1869973-7.30697-4.2506703-13.039543-10.0003351-17.196715-17.25-4.158177-7.3753351-6.23626-15.5630027-6.23626-24.5630027s2.078083-17.1253351 6.23626-24.3750001c4.157172-7.375335 9.889745-13.1249999 17.196715-17.2499999 7.306971-4.24966488 15.495644-6.375 24.567025-6.375 9.070375 0 17.260054 2.12533512 24.567023 6.375 7.306972 4.125 13.039545 9.8746649 17.196717 17.2499999 4.157172 7.249665 6.23626 15.3750001 6.23626 24.3750001s-2.079088 17.1876676-6.23626 24.5630027c-4.157172 7.2496649-9.889745 12.9993297-17.196717 17.25-7.306969 4.125-15.496648 6.1869973-24.567023 6.1869973zm0-16.3119973c8.944705 0 16.251676-2.9376676 21.920912-8.8130026 5.669235-6 8.504356-13.624665 8.504356-22.8750001s-2.835121-16.8126676-8.504356-22.6869973c-5.669236-6-12.976207-9-21.920912-9-8.94571 0-16.252681 3-21.921917 9-5.669236 5.8743297-8.503351 13.4366622-8.503351 22.6869973s2.834115 16.8750001 8.503351 22.8750001c5.669236 5.875335 12.976207 8.8130026 21.921917 8.8130026z"/><path d="m439 2h17v94h-17z"/><path d="m297 1.13833183h16.967966v11.38331847c2.486823-3.79409889 5.90457-6.82999109 10.256259-9.10665478 4.350683-2.27666369 9.136133-3.41499552 14.357355-3.41499552 10.939608 0 19.14381 4.61668156 24.613614 13.8500447 6.961294-9.23336314 16.222221-13.8500447 27.783785-13.8500447 9.323323 0 16.656988 2.84582961 22.003004 8.53748883 5.345009 5.56495077 8.018017 13.72333627 8.018017 24.47413467v62.9883765h-16.968971v-59.1932558c0-6.4508879-1.553888-11.4466726-4.661662-14.9883766-3.107775-3.6684123-7.520855-5.5015965-13.23924-5.5015965-5.469804 0-9.944275 1.8965384-13.425425 5.6916591-3.480144 3.6673905-5.221222 8.600843-5.221222 14.798314v59.1932558h-16.967966v-59.1932558c0-6.4508879-1.616284-11.4466726-4.847846-14.9883766-3.107775-3.6684123-7.458458-5.5015965-13.053056-5.5015965-5.469803 0-9.944274 1.8965384-13.425425 5.6916591-3.480143 3.6673905-5.221221 8.600843-5.221221 14.798314v59.1932558h-16.967966z"/><path d="m238 96c-9.071381 0-17.260054-2.0619973-24.567023-6.1869973-7.306972-4.2506703-13.039545-10.0003351-17.196717-17.25-4.158177-7.3753351-6.23626-15.5630027-6.23626-24.5630027s2.078083-17.1253351 6.23626-24.3750001c4.157172-7.375335 9.889745-13.1249999 17.196717-17.2499999 7.306969-4.24966488 15.495642-6.375 24.567023-6.375 9.070375 0 17.260054 2.12533512 24.567025 6.375 7.30697 4.125 13.039543 9.8746649 17.196715 17.2499999 4.157172 7.249665 6.23626 15.3750001 6.23626 24.3750001s-2.079088 17.1876676-6.23626 24.5630027c-4.157172 7.2496649-9.889745 12.9993297-17.196715 17.25-7.306971 4.125-15.49665 6.1869973-24.567025 6.1869973zm0-16.3119973c8.944705 0 16.251676-2.9376676 21.920912-8.8130026 5.669235-6 8.504356-13.624665 8.504356-22.8750001s-2.835121-16.8126676-8.504356-22.6869973c-5.669236-6-12.976207-9-21.920912-9-8.94571 0-16.252681 3-21.921917 9-5.669236 5.8743297-8.503351 13.4366622-8.503351 22.6869973s2.834115 16.8750001 8.503351 22.8750001c5.669236 5.875335 12.976207 8.8130026 21.921917 8.8130026z"/><path d="m133 96c-9.071381 0-17.260054-2.0619973-24.567023-6.1869973-7.306972-4.2506703-13.0395454-10.0003351-17.1967169-17.25-4.158177-7.3753351-6.2362601-15.5630027-6.2362601-24.5630027s2.0780831-17.1253351 6.2362601-24.3750001c4.1571715-7.375335 9.8897449-13.1249999 17.1967169-17.2499999 7.306969-4.24966488 15.495642-6.375 24.567023-6.375 9.070375 0 17.260054 2.12533512 24.567025 6.375 7.30697 4.125 13.039543 9.8746649 17.196715 17.2499999 4.157172 7.249665 6.23626 15.3750001 6.23626 24.3750001s-2.079088 17.1876676-6.23626 24.5630027c-4.157172 7.2496649-9.889745 12.9993297-17.196715 17.25-7.306971 4.125-15.49665 6.1869973-24.567025 6.1869973zm-.425268-16.3119973c8.819681 0 16.024518-2.9376676 21.614513-8.8130026 5.589994-6 8.385487-13.624665 8.385487-22.8750001s-2.795493-16.8126676-8.385487-22.6869973c-5.589995-6-12.794832-9-21.614513-9-8.820672 0-16.02551 3-21.615504 9-5.589995 5.8743297-8.384496 13.4366622-8.384496 22.6869973s2.794501 16.8750001 8.384496 22.8750001c5.589994 5.875335 12.794832 8.8130026 21.615504 8.8130026z"/><path d="m0 0h17.0293155v79.7603887h60.9706845v16.2396113h-78z"/></g></svg>
<script>
bgcolors = "#DCA034 #3D3D3D #658AE7 #EBB6A5 #BE5247 #7f9ea0".split(' ')
bgcolor = bgcolors[Math.floor(Math.random() * bgcolors.length)]
fgcolors = "#DCA034 #3D3D3D #658AE7 #EBB6A5 #BE5247 #7f9ea0 #fff".split(' ')
fgcolor = fgcolors[Math.floor(Math.random() * fgcolors.length)]
// 1/5th of the time, we're going to use a colour background
flip = Math.floor(Math.random() * 5) != 0
if (flip) {
if (document.getElementById('logofill')) {
document.getElementById('logofill').setAttribute('fill', fgcolor)
}
} else {
if (document.getElementById('loading-placeholder')) {
document.getElementById('loading-placeholder').style.backgroundColor = bgcolor;
}
}
</script>
</div>
</div>
<!-- built files will be auto injected -->
<script type="module" src="/src/main.js"></script>
</body>
</html>