sol-vote/templates/index.html
Nathan Woodburn 049141966a
Some checks failed
Build Docker / Build Image (push) Failing after 4m45s
feat: Added start times and all dates in UTC
2024-02-26 23:32:34 +11:00

143 lines
7.5 KiB
HTML

<!DOCTYPE html>
<html data-bs-theme="dark" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Vote | Nathan.Woodburn/</title>
<meta name="twitter:image" content="https://vote.woodburn.au/assets/img/favicon.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Vote on Nathan.Woodburn/ projects">
<meta property="og:title" content="Vote | Nathan.Woodburn/">
<meta name="description" content="Vote on Nathan.Woodburn/ projects">
<meta property="og:type" content="website">
<meta property="og:description" content="Vote on Nathan.Woodburn/ projects">
<meta name="twitter:title" content="Vote | Nathan.Woodburn/">
<meta property="og:image" content="https://vote.woodburn.au/assets/img/favicon.png">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Vote | Nathan.Woodburn/",
"url": "https://vote.woodburn.au"
}
</script>
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="180x180" href="assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/img/android-chrome-512x512.png">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
<link rel="stylesheet" href="assets/css/default.css">
<script async src="https://umami.woodburn.au/script.js" data-website-id="6a55028e-aad3-481c-9a37-3e096ff75589"></script>
</head>
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-shrink py-3 navbar-light" id="mainNav">
<div class="container"><a class="navbar-brand d-flex align-items-center" href="/"><span>Nathan.Woodburn/</span></a><button class="navbar-toggler" data-bs-toggle="collapse"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button></div>
</nav>
<header class="pt-5">
<div class="container pt-4 pt-xl-5">
<div class="row pt-5">
<div class="col-md-8 text-center text-md-start mx-auto">
<div class="text-center">
<h1 class="display-4 fw-bold mb-5">Vote on projects from<br><a class="no-a-display" href="https://nathan.woodburn.au" target="_blank"><span class="underline">Nathan.Woodburn/</span></a></h1>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<h2>{{current_vote}}</h2>{% if ended %}
<h3 style="margin-bottom: 0px;">Voting has closed<span id="timer"></span>&nbsp;</h3>
{% elif notStarted %}
<h3 style="margin-bottom: 0px;">Opens on {{starts}} <span id="timer"></span>&nbsp;</h3>
{% else %}
<h3 style="margin-bottom: 0px;">Closes in <span id="timer"></span>&nbsp;</h3>
<span id="date" style="font-size: 16px;">({{smallEnd}})</span>
<script>
function updateTimer() {
const endDate = new Date('{{unixEnd}}'); // Set the end date here
const now = new Date();
const diff = endDate - now;
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
let timerText = '';
if (days > 0) {
timerText += `${days} day${days > 1 ? 's' : ''} `;
}
if (hours > 0 || (days === 0 && minutes === 0)) {
timerText += `${hours} hour${hours > 1 ? 's' : ''} `;
}
if (minutes > 0 || (days === 0 && hours < 4)) {
timerText += `${minutes} minute${minutes > 1 ? 's' : ''} `;
}
if (seconds > 0 && (days === 0 && hours < 4)) {
timerText += `${seconds} second${seconds > 1 ? 's' : ''}`;
}
document.getElementById('timer').innerText = timerText;
}
setInterval(updateTimer, 1000);
updateTimer();
</script>
{% endif %}
<p style="margin: 0px;">{{description}}</p>
<p>You are {{revote}} allowed to redo your vote.</p>{{votes|safe}}
</div>
<div class="col-md-6 text-center">
<h3>You have&nbsp;<span id="balance">0</span>&nbsp;votes.</h3>
<h4><span id="percent">0</span>% of the voting power.</h4>
<div id="existingVote"></div>
<h5 class="display-5">Vote Here</h5>
<form class="d-flex justify-content-center flex-wrap" id="signMessageForm" data-bs-theme="light">
<div class="mb-3">
<p>Select your vote or split your votes between options.</p>{{options|safe}}
</div>
<div class="mb-3"><button class="btn btn-primary" type="submit" style="margin-top: 25px;" {% if not enabled %}disabled{% endif %}>Vote</button></div>
</form>
</div>
</div>
<div class="col-12 col-lg-10 mx-auto">
<div class="text-center position-relative" style="padding-top: 25px;"><a class="btn btn-primary" role="button" target="_blank" href="/votes">View vote proofs</a><img class="img-fluid" src="assets/img/illustrations/meeting.svg" style="width: 800px;"></div>
</div>
</div>
</section>
<footer>
<div class="container py-4 py-lg-5">
<div class="row row-cols-2 row-cols-md-4">
<div class="col-12 col-md-3">
<div class="fw-bold d-flex align-items-center mb-2"><span>Nathan.Woodburn/</span></div>
<p class="text-muted">Australian developer and student.</p>
</div>
<div class="col-sm-4 col-md-3 text-lg-start d-flex flex-column">
<h3 class="fs-6 fw-bold">Sites</h3>
<ul class="list-unstyled">
<li><a href="https://nathan.woodburn.au" target="_blank">Nathan.Woodburn/</a></li>
<li><a href="https://hns.au" target="_blank">HNSAU</a></li>
<li><a href="https://hnshosting.au" target="_blank">HNSHosting</a></li>
</ul>
</div>
</div>
<hr>
<div class="text-muted d-flex justify-content-between align-items-center pt-3">
<p class="mb-0">Copyright © {{year}} Nathan.Woodburn/</p>
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="assets/js/startup-modern.js"></script>
</body>
</html>