commit 2379c0e964016bab4aea515fdabcb2e483ae3360
parent 3f040a357bc7300192d4f6d2c7bd88325115cc64
Author: Martin Schanzenbach <schanzen@gnunet.org>
Date: Tue, 26 Aug 2025 10:38:05 +0200
Add timeline UI and cards
Diffstat:
5 files changed, 188 insertions(+), 67 deletions(-)
diff --git a/static/css/style.css b/static/css/style.css
@@ -0,0 +1,58 @@
+.qr {
+ text-align: center;
+}
+
+.taldir-qr {
+ margin: 1em;
+ border: 1px solid #555;
+ border-radius: 1em;
+}
+
+ul.timeline {
+ list-style-type: none;
+ position: relative;
+}
+ul.timeline:before {
+ content: ' ';
+ background: #d4d9df;
+ display: inline-block;
+ position: absolute;
+ left: 29px;
+ width: 2px;
+ height: 100%;
+ z-index: 400;
+}
+ul.timeline > li {
+ margin: 20px 0;
+ padding-left: 20px;
+}
+
+ul.timeline > li:before {
+ content: ' ';
+ background: white;
+ display: inline-block;
+ position: absolute;
+ border-radius: 50%;
+ border: 3px solid #ddd;
+ left: 20px;
+ width: 20px;
+ height: 20px;
+ z-index: 400;
+}
+
+ul.timeline > li.inprogress:before {
+ border: 3px solid #22c0e8;
+}
+
+ul.timeline > li.done:before {
+ border: 3px solid #333;
+}
+/*.card {
+// box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.1);
+// border: 1px solid #e6e4e9;
+// border-radius: 8px;
+//}
+//
+//body {
+// background-color: #fefefe;
+//}*/
diff --git a/web/templates/buy.html b/web/templates/buy.html
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/bootstrap.min.css" rel="stylesheet">
+ <link href="/css/style.css" rel="stylesheet">
<link href="/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/fontawesome/css/solid.css" rel="stylesheet" />
<title>Buy</title>
@@ -12,17 +13,32 @@
<body>
{{ template "nav.html" . }}
<div class ="container">
- <div class ="text-center mt-5">
- <h1 class="mb-3">To complete the registration of <i class="text-primary">{{.label}}</i>:</h1>
-
- {{if .orderUnpaid}}
- <a class="link-dark" href="{{.payto}}" class="btn btn-success mb-3">Pay {{.cost}} with your Taler wallet</a><br/>
- Alternatively, you can pay using your mobile wallet by scanning the QR code below:<br/>
- <img class="qr" src="{{.qrCode}}"/>
- {{else}}
- <b>Pay {{.cost}} with your Taler wallet. The order has already been claimed by your wallet. Please complete the payment now.</b>
- {{end}}
- <br/>
+ <div class="row">
+ <div class="col-2">
+ <ul class="timeline">
+ <li class="done">Lookup</li>
+ <li class="inprogress">Checkout</li>
+ <li>Manage</li>
+ </ul>
+ </div>
+ <div class="col-10">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Checkout</h4>
+ <hr>
+ <p class="card-text">
+ To complete the registration of <i class="text-primary">{{.label}}</i>:
+ {{if .orderUnpaid}}
+ <a class="link-dark" href="{{.payto}}" class="btn btn-success mb-3">Pay {{.cost}} with your Taler wallet</a><br/>
+ Alternatively, you can pay using your mobile wallet by scanning the QR code below:<br/>
+ <img class="qr" src="{{.qrCode}}"/>
+ {{else}}
+ <b>Pay {{.cost}} with your Taler wallet. The order has already been claimed by your wallet. Please complete the payment now.</b>
+ {{end}}
+ </p>
+ </div>
+ </div>
+ </div>
</div>
<div class="alert alert-warning">
<h4>Important</h4>
diff --git a/web/templates/edit.html b/web/templates/edit.html
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/bootstrap.min.css" rel="stylesheet">
+ <link href="/css/style.css" rel="stylesheet">
<link href="/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/fontawesome/css/solid.css" rel="stylesheet" />
<title>Edit registration</title>
@@ -31,40 +32,58 @@
</div>
{{end}}
<div class="container pt-5">
- <h1 class="mb-5">Manage registration for <i class="text-primary">{{.label}}</i></h1>
- <form action="/name/{{.label}}/edit" method="post" class="align-items-center mb-5">
- <div class="row">
- <div class="col-md-12 alert alert-light">
- <h4>Zone information</h4>
- <input type="hidden" value="{{.token}}" name="token">
- {{if ne .remainingDays 0}}
- <div class="form-floating mb-3">
- <input name="zkey" id="zkeyInput" class="form-control" value="{{.zkey}}" maxlength="63" type="text" placeholder="Enter your zone key here!" required autofocus>
- <label for="zkeyInput">Enter your PKEY or EDKEY here</label>
- </div>
- <input class="btn btn-primary" type="submit" value="Update zone key">
- {{else}}
- <div class="form-floating mb-3">
- <input name="zkey" id="zkeyInput" class="form-control" value="{{.zkey}}" readonly maxlength="63" type="text" placeholder="Enter your zone key here!" required autofocus>
- <label for="zkeyInput">Enter your PKEY or EDKEY here</label>
- </div>
- {{end}}
- </div>
+ <div class="row">
+ <div class="col-2">
+ <ul class="timeline">
+ <li class="done">Lookup</li>
+ <li class="done">Checkout</li>
+ <li class="inprogress">Manage</li>
+ </ul>
</div>
- </form>
- {{if ne .remainingDays 0}}
- <div class="row mt-1">
- <div class="col-md-12 alert alert-light">
- <h4>Extension</h4>
- <div class="form-floating mb-3">
- <input readonly id="expInput" class="form-control" value="{{.registeredUntil}}" type="text" required autofocus>
- <label for="expInput">Registration expires in {{.remainingDays}} days:</label>
+ <div class="col-10">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Manage registration</h4>
+ <hr>
+ <p class="card-text">
+ Manage registration for <i class="text-primary">{{.label}}</i>
+ </p>
+ <form action="/name/{{.label}}/edit" method="post" class="align-items-center mb-5">
+ <div class="row">
+ <div class="col-md-12 alert alert-light">
+ <input type="hidden" value="{{.token}}" name="token">
+ {{if ne .remainingDays 0}}
+ <div class="form-floating mb-3">
+ <input name="zkey" id="zkeyInput" class="form-control" value="{{.zkey}}" maxlength="63" type="text" placeholder="Enter your zone key here!" required autofocus>
+ <label for="zkeyInput">Enter your PKEY or EDKEY here</label>
+ </div>
+ <input class="btn btn-primary" type="submit" value="Update zone key">
+ {{else}}
+ <div class="form-floating mb-3">
+ <input name="zkey" id="zkeyInput" class="form-control" value="{{.zkey}}" readonly maxlength="63" type="text" placeholder="Enter your zone key here!" required autofocus>
+ <label for="zkeyInput">Enter your PKEY or EDKEY here</label>
+ </div>
+ {{end}}
+ </div>
+ </div>
+ </form>
+ {{if ne .remainingDays 0}}
+ <div class="row mt-1">
+ <div class="col-md-12 alert alert-light">
+ <h4>Extension</h4>
+ <div class="form-floating mb-3">
+ <input readonly id="expInput" class="form-control" value="{{.registeredUntil}}" type="text" required autofocus>
+ <label for="expInput">Registration expires in {{.remainingDays}} days:</label>
+ </div>
+ <a class="btn btn-primary" href="/name/{{.label}}/buy">Extend registration for {{.extensionDaysCount}} days until <b>{{.extendedExpiration}}</b> for <b>{{.cost}}</b></a>
+ </div>
+ </div>
+ {{end}}
+ </div>
</div>
- <a class="btn btn-primary" href="/name/{{.label}}/buy">Extend registration for {{.extensionDaysCount}} days until <b>{{.extendedExpiration}}</b> for <b>{{.cost}}</b></a>
</div>
</div>
</div>
- {{end}}
<hr/>
<a class="btn btn-secondary" href="/">Back</a>
{{ template "footer.html" . }}
diff --git a/web/templates/landing.html b/web/templates/landing.html
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/bootstrap.min.css" rel="stylesheet">
+ <link href="/css/style.css" rel="stylesheet">
<link href="/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/fontawesome/css/solid.css" rel="stylesheet" />
<title>GNS Registrar</title>
diff --git a/web/templates/name.html b/web/templates/name.html
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/css/bootstrap.min.css" rel="stylesheet">
+ <link href="/css/style.css" rel="stylesheet">
<link href="/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/fontawesome/css/solid.css" rel="stylesheet" />
<title>Name Overview</title>
@@ -32,18 +33,35 @@
<div class="container pt-5">
{{if .available}}
<h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-success">available</span> for registration.</h1>
- <form action="/name/{{.label}}/buy" method="get" class="align-items-center">
- <div class="row">
- <div class="col-md-12 alert alert-light">
- <h4>Zone information</h4>
- <div class="form-floating mb-3">
- <input name="zkey" value="{{.zkey}}" id="zkeyInput" class="form-control" maxlength="63" type="text" placeholder="Enter your zone key here!" required autofocus>
- <label for="zkeyInput">Enter your zone key here</label>
+ <div class="row">
+ <div class="col-2">
+ <ul class="timeline">
+ <li class="inprogress">Lookup</li>
+ <li>Checkout</li>
+ <li>Manage</li>
+ </ul>
+ </div>
+ <div class="col-10">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Register</h4>
+ <hr>
+ <p class="card-text">Register your zone key</p>
+ <form action="/name/{{.label}}/buy" method="get" class="align-items-center">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="form-floating mb-3">
+ <input name="zkey" value="{{.zkey}}" id="zkeyInput" class="form-control" maxlength="63" type="text" placeholder="Enter your zone key here!" required autofocus>
+ <label for="zkeyInput">Enter your zone key here</label>
+ </div>
+ <input class="btn btn-primary" type="submit" value="Register for a duration of {{.registrationDaysCount}} days for {{.cost}}">
+ </div>
+ </div>
+ </form>
</div>
- <input class="btn btn-primary" type="submit" value="Register for a duration of {{.registrationDaysCount}} days for {{.cost}}">
</div>
</div>
- </form>
+ </div>
<div class="container pt-5">
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">How do I get a zone key?</h4>
@@ -58,36 +76,45 @@
<p class="mb-0">
You must have a Taler wallet installed and at least {{.cost}} in the wallet. You can get the wallet and some coins suitable for payment at this registrar <a class="link-dark" href="https://demo.taler.net" target="_blank">at the Taler Demo</a>.
</p>
- </div> </div>
- {{else}}
- {{if eq .remainingDays 0}}
- <h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-body-secondary">reserved</span>!</h1>
- {{else}}
- <h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-danger">taken</span>!</h1>
- {{end}}
- <div class="row">
- <div class="col-md-12 alert alert-light">
- <h4>Zone information</h4>
+ </div>
+ </div>
+ {{else}}
+ {{if eq .remainingDays 0}}
+ <h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-body-secondary">reserved</span>!</h1>
+ {{else}}
+ <h1 class="mb-5"><i class="text-primary">{{.label}}</i> is <span class="text-danger">taken</span>!</h1>
+ {{end}}
+ <div class="row">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Zone registered</h4>
+ <hr>
+ <p class="card-text">Registered zone information</p>
<div class="form-floating mb-3">
<input name="zkey" id="zkeyInput" class="form-control" maxlength="63" type="text" value="{{.currentValue}}" readonly required autofocus>
<label for="zkeyInput">Zone key</label>
</div>
</div>
</div>
- {{if ne .remainingDays 0}}
- <div class="row">
- <div class="col-md-12 alert alert-light">
- <h4>Registration info</h4>
+ </div>
+ {{if ne .remainingDays 0}}
+ <div class="row">
+ <div class="card">
+ <div class="card-body">
+ <h4 class="card-title">Zone registered</h4>
+ <hr>
+ <p class="card-text">Registered zone information</p>
<div class="form-floating mb-3">
<input name="reg" id="regInput" class="form-control" type="text" value="{{.registeredUntil}}" readonly required autofocus>
<label for="regInput">Registration expires in {{.remainingDays}} days:</label>
</div>
</div>
</div>
- {{end}}
- {{end}}
- <hr/>
- <a class="btn btn-secondary" href="/">Back</a>
+ </div>
+ {{end}}
+ {{end}}
+ <hr/>
+ <a class="btn btn-secondary" href="/">Back</a>
</div>
{{ template "footer.html" . }}
</body>
