-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (120 loc) · 6.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<title>dHealth Transaction QR</title>
<link rel="shortcut icon" href="resources/images/favicon.png" />
<meta name="description" content="Transaction QR Generator for dHealth Network" />
<link rel="stylesheet" type="text/css" href="resources/animate-4.1.1.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="resources/yourdlt.css" media="screen" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="resources/dhealth-sdk.pack-1.0.0.min.js"></script>
<script src="resources/showcase.min.js?t=now"></script>
</head>
<body class="responsive bg-gray-300">
<div class="min-h-screen grid grid-flow-row">
<div class="w-full h-20">
<div class="w-96 h-15 mx-auto mt-5 pt-3 px-4">
<img src="resources/images/logo.dhealth.blue.png"
class="h-10 mx-auto" />
</div>
</div>
<div class="h-[26rem] md:h-[32rem] text-center">
<div class="w-full h-[26rem] md:h-[31rem] border-collapse text-base lg:text-base md:text-base text-black">
<div class="w-96 h-[26rem] mt-0 mx-auto py-3 px-4 rounded border border-gray-600 hover:border-blue-600">
<p>Welcome to this dApp with dHealth Network. Click the button below to generate your Transaction QR.</p>
<fieldset class="mt-10">
<legend class="text-left text-gray-600">Parameters</legend>
<div class="mt-2 lg:mt-0 text-bold text-sm md:text-xl py-3 px-4">
<select
id="type-selector"
class="mx-auto py-2 pl-3 pr-3 block bg-white w-full border border-slate-300 rounded-md shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
>
<option value="claim" selected>Claim transaction</option>
</select>
<div rel="claim">
<select
id="dapp-selector"
class="mx-auto py-2 pl-3 pr-3 block bg-white w-full border border-slate-300 rounded-md shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
>
<option value="dHealthTechChats">NDEV dHealth Tech Chats</option>
<option value="dHealthClaimPool" selected>NDEV dHealth Claim Pool</option>
</select>
<input
id="message-input"
type="text"
class="mx-auto py-2 pl-3 pr-3 placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-md shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm"
placeholder="I claim that I wish to receive dHealth's NFT." />
</div>
</fieldset>
<button
data-toggle="#modal-transaction-qr"
class="animate__animated animate__backInDown mt-2 lg:mt-0 text-bold text-sm md:text-xl rounded py-3 px-4 cursor-pointer bg-white border border-gray-600 text-gray-600 hover:text-blue-600 hover:border-blue-600">Generate QR</button>
<p class="mt-5">Note that you will need to install <a href="#">dHealth Mobile Wallet</a> to scan a Transaction QR.</p>
</div>
</div>
</div>
<div class="w-full h-auto xxl:h-16 mb-5 mt-5 lg:mb-0 lg:mt-2 xxl:mt-10">
<div class="text-xs lg:text-sm md:text-base text-center text-black">
This dApp is made with ♥ at dHealth Foundation<br class="hidden lg:block md:block" />
Copyright © 2022 dHealth Foundation, All Rights Reserved.<br />
<a class="text-blue-400 hover:text-blue-800" href="https://dhealth.com" target="_blank">Website</a> | <a class="text-blue-400 hover:text-blue-800" href="https://github.com/dhealthproject" target="_blank">Github</a> | <a class="text-blue-400 hover:text-blue-800" href="https://docs.dhealth.com" target="_blank">Documentation</a>
</div>
</div>
</div> <!-- /.grid-flow-row -->
<!--
REGION MODAL BOXES
-->
<div id="modal-transaction-qr" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
<div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-black text-sm z-50">
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
<span class="text-sm">(Esc)</span>
</div>
<!-- add margin if you want to see some of the overlay behind the modal-->
<div class="modal-content py-4 text-center px-6">
<div class="flex justify-between items-center pb-3">
<p class="text-xl text-blue-800 text-bold">Scan Transaction QR</p>
<div class="modal-close cursor-pointer z-50">
<!-- closing icon-->
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</div>
</div>
<div id="qr-code-wrapper"></div>
</div>
</div>
</div> <!-- /.modal -->
<!--
REGION SCRIPTS
-->
<script>
document.addEventListener('DOMContentLoaded', () => {
setupUI();
readNetwork('http://dual-01.dhealth.cloud:3000', {
namespace: 'dhealth/mini-qr-showcase',
networkName: 'dHealth Public Network',
generationHash: 'ED5761EA890A096C50D3F50B7C2F0CCB4B84AFC9EA870F381E84DDE36D04EF16',
epochAdjustment: 1616978397,
identityPublicKey: '5172C98BD61DF32F447C501DE8090A9D7096F9E71975D788D67F7A82B8C04EFA',
nodePublicKey: '1448AE052B6D032B0CF4DC2B53B98C7A03FF2A4EF3781C9137F9857FD2D28E72',
});
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-170594251-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-170594251-5');
</script>
</body>
</html>