Modernize homepage

This commit is contained in:
jholdstock 2020-06-17 14:25:56 +01:00 committed by David Hill
parent 600cd7bf9b
commit 03a5ef4fd1
5 changed files with 146 additions and 69 deletions

View File

@ -1,6 +1,15 @@
html, body {
height: 100%;
}
body { body {
background-color: #F3F5F6; background-color: #F9FAFA;
color: #3D5873; color: #3D5873;
display: flex;
flex-direction: column;
}
.page-content {
flex: 1 0 auto;
} }
.logo--logo { .logo--logo {
@ -14,11 +23,47 @@ body {
color: #091440; color: #091440;
} }
th { .vsp-overview {
white-space: nowrap; color: #8997A5;
background-color: #ffffff;
font-size: 16px;
} }
td { .vsp-overview h1 {
font-family: "vspd-code"; color: #3D5873;
font-size: 28px;
}
.vsp-stats .stat-title {
font-size: 14px;
color: #596D81;
}
.vsp-stats .stat-value {
font-size: 24px;
color: #091440;
}
footer {
flex-shrink: 0;
font-size: 0.8rem;
background-color: #091440;
color: #8997a5;
width: 100%;
}
footer .code {
word-break: break-word; word-break: break-word;
} }
.footer__credit {
background-color: rgba(237,239,241,.1);
text-align: right;
color: #8997a5;
}
@media (max-width: 768px) {
.footer__credit {
text-align: center;
}
}

View File

@ -1,5 +1,27 @@
{{ define "footer" }} {{ define "footer" }}
</div>
</div> <!-- page-content -->
<footer class="row m-0">
<div class="col-md-8 col-12 d-flex justify-content-center align-items-center">
<p class="py-4 m-0">
<strong>Stats&nbsp;updated:</strong>&nbsp;{{ .VspStats.UpdateTime }}
<br />
<strong>Support:</strong>&nbsp;<a href="mailto:{{ .VspStats.SupportEmail }}" rel="noopener noreferrer">{{ .VspStats.SupportEmail }}</a>
<br />
<strong>VSP&nbsp;public&nbsp;key:</strong>&nbsp;<span class="code">{{ printf "%x" .VspStats.PubKey }}</span>
</p>
</div>
<div class="col-md-4 col-12 footer__credit d-flex justify-content-center align-items-center">
<p class="py-4 m-0">
Decred Developers | 2020
<br />
The source code is available on <a href="https://github.com/decred/vspd" target="_blank" rel="noopener noreferrer">GitHub</a>
</p>
</div>
</footer>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View File

@ -42,40 +42,36 @@
</head> </head>
<body> <body>
<nav class="py-sm-3 px-sm-5 navbar"> <div class="page-content">
<div class="container">
<div class=""> <nav class="py-sm-3 px-sm-5 navbar">
<a class="py-1 border-0 d-flex justify-content-start align-items-center" href="/"> <div class="container">
<div class="logo--logo"> <div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="38" height="32" fill="none" viewBox="0 0 23 20"> <a class="py-1 border-0 d-flex justify-content-start align-items-center" href="/">
<path fill="#000" fill-opacity="0" d="M0 0h23v19.167H0z" /> <div class="logo--logo">
<path fill="#091440" <svg xmlns="http://www.w3.org/2000/svg" width="38" height="32" fill="none" viewBox="0 0 23 20">
d="M4.792 4.792L0 0h5.175l7.667 7.667H7.667a3.834 3.834 0 1 0 0 7.666h1.917l3.833 3.834h-5.75A7.667 7.667 0 0 1 0 11.5c0-3.11 1.533-5.615 4.792-6.708z" /> <path fill="#000" fill-opacity="0" d="M0 0h23v19.167H0z" />
<path fill="#091440" <path fill="#091440"
d="M18.208 14.375L23 19.167h-5.175L10.158 11.5h5.175a3.834 3.834 0 0 0 0-7.667h-1.917L9.583 0h5.75A7.667 7.667 0 0 1 23 7.667c0 3.109-1.533 5.615-4.792 6.708z" /> d="M4.792 4.792L0 0h5.175l7.667 7.667H7.667a3.834 3.834 0 1 0 0 7.666h1.917l3.833 3.834h-5.75A7.667 7.667 0 0 1 0 11.5c0-3.11 1.533-5.615 4.792-6.708z" />
</svg> <path fill="#091440"
</div> d="M18.208 14.375L23 19.167h-5.175L10.158 11.5h5.175a3.834 3.834 0 0 0 0-7.667h-1.917L9.583 0h5.75A7.667 7.667 0 0 1 23 7.667c0 3.109-1.533 5.615-4.792 6.708z" />
<div class="logo--text"> </svg>
VSP<br> </div>
<b>{{ .VspStats.Designation }}</b> <div class="logo--text">
</div> VSP<br>
</a> <b>{{ .VspStats.Designation }}</b>
</div> </div>
</div> </a>
</nav> </div>
</div>
</nav>
<div class="container">
{{ if .VspStats.Debug }} {{ if .VspStats.Debug }}
<div class="alert alert-warning" role="alert"> <div class="container">
Web server is running in debug mode - don't do this in production! <div class="alert alert-warning" role="alert">
Web server is running in debug mode - don't do this in production!
</div>
</div> </div>
{{ end }} {{ end }}
{{ if .VspStats.VspClosed }}
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">This Voting Service Provider is closed</h4>
A closed VSP will still vote on tickets with already paid fees, but will not accept new any tickets.
Visit <a href="https://decred.org/vsp/" class="alert-link">decred.org</a> to find a new VSP.
</div>
{{ end }}
{{end}} {{end}}

View File

@ -1,5 +1,28 @@
{{ template "header" . }} {{ template "header" . }}
{{ template "vsp-stats" .VspStats }} <div class="vsp-overview pt-4 pb-3 mb-3">
<div class="container">
{{ if .VspStats.VspClosed }}
<div class="alert alert-danger" role="alert">
<h4 class="alert-heading">This Voting Service Provider is closed</h4>
A closed VSP will still vote on tickets with already paid fees, but will not accept new any tickets.
Visit <a href="https://decred.org/vsp/" class="alert-link" target="_blank" rel="noopener noreferrer">decred.org</a> to find a new VSP.
</div>
{{ end }}
<h1>VSP Overview</h1>
<p class="pt-1 pb-2">A Voting Service Provider (VSP) maintains a pool of always-online voting wallets,
and allows Decred ticket holders to use these wallets to vote their tickets in exchange for a small fee.
VSPs are completely non-custodial - they never hold, manage, or have access to any user funds.
Visit <a href="https://docs.decred.org/proof-of-stake/overview/" target="_blank" rel="noopener noreferrer">docs.decred.org</a>
to find out more about VSPs, tickets, and voting.
</p>
{{ template "vsp-stats" .VspStats }}
</div>
</div>
{{ template "footer" . }} {{ template "footer" . }}

View File

@ -1,36 +1,27 @@
{{ define "vsp-stats" }} {{ define "vsp-stats" }}
<section> <div class="row vsp-stats">
<h3>VSP Stats</h3>
<p><em>Last updated: {{ .UpdateTime }}</em></p> <div class="col-6 col-sm-4 col-lg-2 py-3">
<div class="stat-title">Total tickets</div>
<div class="stat-value" id="vsp-hash-rate">{{ .TotalTickets }}</div>
</div>
<table class="table table-dark"> <div class="col-6 col-sm-4 col-lg-2 py-3">
<tr> <div class="stat-title">Fee confirmed tickets</div>
<th>Total tickets</th> <div class="stat-value" id="last-work-height">{{ .FeeConfirmedTickets }}</div>
<td>{{ .TotalTickets }}</td> </div>
</tr>
<tr> <div class="col-6 col-sm-4 col-lg-2 py-3">
<th>Fee confirmed tickets</th> <div class="stat-title">VSP Fee</div>
<td>{{ .FeeConfirmedTickets }}</td> <div class="stat-value">{{ .VSPFee }}%</div>
</tr> </div>
<tr>
<th>VSP Fee</th> <div class="col-6 col-sm-4 col-lg-2 py-3">
<td>{{ .VSPFee }}% of vote reward</td> <div class="stat-title">Network</div>
</tr> <div class="stat-value">{{ .Network }}</div>
<tr> </div>
<th>Network</th>
<td>{{ .Network }}</td> </div>
</tr>
<tr>
<th>Support</th>
<td>{{ .SupportEmail }}</td>
</tr>
<tr>
<th>Pubkey</th>
<td class="code">{{ printf "%x" .PubKey }}</td>
</tr>
</table>
</section>
{{ end }} {{ end }}