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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
|
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Memdeklaro - Self-Declaration of Identity</title>
<link href="style.css" rel="stylesheet">
</head>
<body class="font-sans bg-cream text-ink antialiased">
<div id="generator" class="py-16 bg-gradient-to-b from-brand-50 to-cream">
<div class="flex items-center justify-center gap-3 group mb-8">
<div class="relative w-10 h-10 rounded-lg bg-brand-600 flex items-center justify-center shadow-md group-hover:shadow-brand-300/50 transition-shadow duration-300">
<svg fill="white" stroke="none" class="w-6 h-6" viewBox="0 0 40 40">
<path d="M37.2317 4.49969C36.4913 5.78214 35.1479 6.49947 33.7664 6.50036C33.0773 5.30374 33.0273 3.78252 33.7674 2.50067C34.5078 1.21821 35.8511 0.500883 37.2326 0.5C37.9217 1.69661 37.9718 3.21783 37.2317 4.49969Z" fill="white"></path>
<path clip-rule="evenodd" d="M33.0615 10.7135C32.5693 12.0271 32.3346 13.6297 32.3807 15.4463C33.0777 14.8558 33.9797 14.4997 34.9648 14.4997C36.4454 14.4997 37.7381 15.3041 38.4297 16.4998C37.7381 17.6953 36.4455 18.4997 34.965 18.4997C34.0664 18.4997 33.237 18.2034 32.5693 17.7032C32.744 18.9703 33.0381 20.3133 33.4578 21.7122L31.5422 22.287C30.1447 17.6289 29.9658 13.2344 31.2025 9.97435C30.3063 10.1345 29.3508 9.99127 28.5007 9.50042C27.2184 8.7601 26.5011 7.41704 26.5 6.03574C27.6967 5.34622 29.2184 5.29597 30.5005 6.03622C31.7797 6.77478 32.4967 8.11322 32.5011 9.49106C33.4786 8.51609 34.9348 8.07423 36.3643 8.45726C37.7945 8.84047 38.835 9.95212 39.1935 11.2861C38.216 12.2618 36.7593 12.7042 35.3292 12.321C34.3674 12.0633 33.5819 11.4762 33.0615 10.7135ZM32.5012 9.49649L32.5012 9.50018L32.5023 9.50075L32.5012 9.49649Z" fill="white" fill-rule="evenodd"></path>
<path d="M14.1642 14.8722C12.5378 13.7105 11.1276 12.4211 10.1157 11.4102C10.411 8.39997 11.9206 5.95131 13.4943 4.56836C13.4943 4.56836 14.6544 7.07845 16.6511 9.85287C16.5382 10.014 16.4313 10.1798 16.3298 10.3498C15.5425 11.6683 15.0345 13.3338 14.6404 15.198C14.4861 15.0971 14.3278 14.9891 14.1642 14.8722Z" fill="white"></path>
<path clip-rule="evenodd" d="M18.502 32.9997C23.502 32.9997 28.002 28.9997 28.002 22.9997C28.002 21.2048 27.7564 19.9613 27.4374 18.3456C27.3012 17.6555 27.1516 16.8975 27.002 15.9997L30.002 14.9997L27.4558 13.3023C26.4452 10.7854 24.8642 8.99972 22.5019 8.99972C18.1713 8.99972 17.082 12.2412 16.1148 18.2786C15.9974 18.2195 15.8792 18.1607 15.7596 18.1013C14.9406 17.6941 14.0632 17.2578 13.0018 16.4997C9.50184 13.9997 7.00193 10.9997 7.00193 10.9997C5.00188 13.9997 4.00195 19.9997 9.00168 24.9997C9.39734 25.3954 9.78234 25.7464 10.1538 26.0578C8.10767 26.7058 5.44022 26.9997 2.00173 26.9997C2.00173 26.9997 1.33529 28.9997 3.00173 31.4997C4.66816 33.9997 7.00156 34.9997 7.00156 34.9997L13.0016 31.9997C13.0016 31.9997 15.002 32.9997 18.502 32.9997ZM27.002 15.8679C26.993 15.9206 26.9923 15.9652 27.002 15.9997V15.8679ZM24.0017 13.4997C24.0017 14.3281 23.3302 14.9997 22.5017 14.9997C21.6733 14.9997 21.0017 14.3281 21.0017 13.4997C21.0017 12.6713 21.6733 11.9997 22.5017 11.9997C23.3302 11.9997 24.0017 12.6713 24.0017 13.4997Z" fill="white" fill-rule="evenodd"></path>
</svg>
</div>
<span class="font-sans font-bold text-xl tracking-tight transition-colors duration-300">
Memdeklaro
</span>
</div>
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center mb-16">
<h1 class="font-sans text-4xl lg:text-6xl font-black text-ink mb-6 leading-tight">
Make Your<br> <span class="gradient-text">Self-Declaration</span>
</h1>
<p class="text-gray-600 text-lg leading-relaxed">
Fill out the form below, then print your self-declaration as a business card or CR-80 card.
</p>
</div>
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
<div class="bg-gradient-to-r from-brand-900 to-brand-700 p-8 flex items-center gap-6">
<div class="flex-shrink-0">
<div class="w-16 h-16 bg-brand-600/40 rounded-xl flex items-center justify-center border border-brand-400/30">
<svg class="w-8 h-8 text-brand-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-2 9l2 2 4-4"></path>
</svg>
</div>
</div>
<div>
<h3 class="text-white font-sans text-xl font-bold">Memdeklaro de identeco</h3>
<p class="text-brand-200 text-sm mt-1">Self-declaration of identity</p>
</div>
<div class="ml-auto">
<span class="px-3 py-1.5 bg-green-400/20 text-green-300 text-xs font-bold rounded-full border border-green-400/30">No Database • Locally Generated</span>
</div>
</div>
<div class="p-8 lg:p-12">
<form class="grid md:grid-cols-2 gap-6">
<div>
<label for="first_name" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">First name <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Antaŭnomo)</span></label>
<input id="first_name" type="text" placeholder="JOHN" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white">
</div>
<div>
<label for="surname" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Surname <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Nomo)</span></label>
<input id="surname" type="text" placeholder="DOE" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white">
</div>
<div>
<label for="birth_date" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Birth date <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Naskiĝdato)</span></label>
<input id="birth_date" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white" type="text" placeholder="1995-01-31">
</div>
<div>
<label for="issued" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Date of issuance <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Eldondato)</span></label>
<input id="issued" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white" type="input" placeholder="2026-02-28">
</div>
<div>
<label for="expiry" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Date of expiry <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Limdato)</span></label>
<input id="expiry" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white" placeholder="2031-02-28" type="text">
</div>
<div>
<label for="id_number" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">ID number (10 digits) <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Numero)</span></label>
<input id="id_number" type="text" placeholder="1234567890" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-mono font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white">
</div>
<div class="md:col-span-2">
<label for="note" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Note (Max 2 lines) <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Notoj)</span></label>
<textarea id="note" rows="2" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white resize-none" placeholder="E.g. Conscientious Objector"></textarea>
</div>
<div>
<label for="issuer" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Issuer <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Eldonisto)</span></label>
<input id="issuer" type="text" value="EPO" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white">
</div>
<div>
<label for="mrz" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">MRZ <span class="text-gray-400 font-normal normal-case tracking-normal">(Auto generated)</span></label>
<textarea id="mrz" rows="1" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-400 font-mono text-sm focus:outline-none bg-gray-50 resize-none" placeholder="MRZ (Auto generated)"></textarea>
</div>
<div>
<label for="photo" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Photo (35mm × 45mm) <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Foto)</span></label>
<div class="w-full px-4 py-3 border-2 border-dashed border-gray-200 rounded-xl bg-gray-50 hover:border-brand-300 hover:bg-brand-50 transition-all duration-200 cursor-pointer">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<input id="photo" type="file" accept="image/*" class="text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-brand-50 file:text-brand-500 hover:file:bg-brand-100">
</div>
</div>
</div>
<div>
<label for="signature" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Signature <span class="text-brand-500 font-mono normal-case tracking-normal font-normal">(Subskribo)</span></label>
<div class="w-full px-4 py-3 border-2 border-dashed border-gray-200 rounded-xl bg-gray-50 hover:border-brand-300 hover:bg-brand-50 transition-all duration-200 cursor-pointer">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
</svg>
<input id="signature" type="file" id="photo" accept="image/*" class="text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-brand-50 file:text-brand-500 hover:file:bg-brand-100">
</div>
</div>
</div>
<div>
<label for="generate_pdf417" class="inline-flex items-center text-sm font-bold text-gray-500">
<input class="border border-brand-400" id="generate_pdf417" type="checkbox" value="1">
<span class="px-2">Include Barcode</span>
</label>
</div>
<div>
<label for="generate_did" class="inline-flex items-center text-sm font-bold text-gray-500">
<input class="border border-brand-400" id="generate_did" type="checkbox" value="1" onchange="document.querySelector('#show_did_identifier').style.display = this.checked ? 'block' : 'none'">
<span class="px-2">Generate DID</span>
</label>
<div id="show_did_identifier" style="display:none">
<label for="did_identifier" class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2 mt-2">DID Identifier</label>
<input id="did_identifier" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-ink font-medium focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all duration-200 bg-gray-50 hover:bg-white" type="input" placeholder="did:key:abcdef1234567890...">
</div>
</div>
<div class="md:col-span-2 pt-4">
<button id="submit" onclick="generate_declaration(); return false;" type="button" class="w-full py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-700 hover:to-brand-600 text-white font-bold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-brand-500/30 flex items-center justify-center gap-3">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
Generate
</button>
</div>
<noscript>
<div class="md:col-span-2 text-gray-400 text-sm mt-4 flex items-center gap-2">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-5 h-5 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>Enable JavaScript to use the generator, or download the template at <a class="font-bold" href="https://github.com/memdeklaro">github.com/memdeklaro</a> and add your text manually using an image editor.</span>
</div>
</noscript>
</form>
</div>
</div>
</div>
<div id="generator_front" class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden mt-12" style="display:none">
<div class="p-8 lg:p-12">
<h4 class="font-semibold text-ink mb-4 flex items-center gap-2">
Self declaration - Front
</h4>
<div class="text-gray-600 text-sm mt-4 mb-6 flex items-center gap-2">
<svg width="24" height="24" viewBox="0 0 36 36"><path fill="#DD2E44" d="M11.626 7.488a1.413 1.413.0 00-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"/><path fill="#EA596E" d="M13 12 .416 32.506l-.282.635.011.011c-.208.403.14 1.223.853 1.937.232.232.473.408.709.557L17 17l-4-5z"/><path fill="#A0041E" d="M23.012 13.066c4.67 4.672 7.263 9.652 5.789 11.124-1.473 1.474-6.453-1.118-11.126-5.788-4.671-4.672-7.263-9.654-5.79-11.127 1.474-1.473 6.454 1.119 11.127 5.791z"/><path fill="#AA8DD8" d="M18.59 13.609a.99.99.0 01-.734.215c-.868-.094-1.598-.396-2.109-.873-.541-.505-.808-1.183-.735-1.862.128-1.192 1.324-2.286 3.363-2.066.793.085 1.147-.17 1.159-.292.014-.121-.277-.446-1.07-.532-.868-.094-1.598-.396-2.11-.873-.541-.505-.809-1.183-.735-1.862.13-1.192 1.325-2.286 3.362-2.065.578.062.883-.057 1.012-.134.103-.063.144-.123.148-.158.012-.121-.275-.446-1.07-.532a.998.998.0 01-.886-1.102.997.997.0 011.101-.886c2.037.219 2.973 1.542 2.844 2.735-.13 1.194-1.325 2.286-3.364 2.067-.578-.063-.88.057-1.01.134-.103.062-.145.123-.149.157-.013.122.276.446 1.071.532 2.037.22 2.973 1.542 2.844 2.735-.129 1.192-1.324 2.286-3.362 2.065-.578-.062-.882.058-1.012.134-.104.064-.144.124-.148.158-.013.121.276.446 1.07.532a1 1 0 01.52 1.773z"/><path fill="#77B255" d="M30.661 22.857c1.973-.557 3.334.323 3.658 1.478.324 1.154-.378 2.615-2.35 3.17-.77.216-1.001.584-.97.701.034.118.425.312 1.193.095 1.972-.555 3.333.325 3.657 1.479.326 1.155-.378 2.614-2.351 3.17-.769.216-1.001.585-.967.702.033.117.423.311 1.192.095a1 1 0 11.54 1.925c-1.971.555-3.333-.323-3.659-1.479-.324-1.154.379-2.613 2.353-3.169.77-.217 1.001-.584.967-.702-.032-.117-.422-.312-1.19-.096-1.974.556-3.334-.322-3.659-1.479-.325-1.154.378-2.613 2.351-3.17.768-.215.999-.585.967-.701-.034-.118-.423-.312-1.192-.096a1 1 0 11-.54-1.923z"/><path fill="#AA8DD8" d="M23.001 20.16a1.001 1.001.0 01-.626-1.781c.218-.175 5.418-4.259 12.767-3.208a1 1 0 11-.283 1.979c-6.493-.922-11.187 2.754-11.233 2.791a.999.999.0 01-.625.219z"/><path fill="#77B255" d="M5.754 16a1 1 0 01-.958-1.287c1.133-3.773 2.16-9.794.898-11.364-.141-.178-.354-.353-.842-.316-.938.072-.849 2.051-.848 2.071a1 1 0 11-1.994.149c-.103-1.379.326-4.035 2.692-4.214 1.056-.08 1.933.287 2.552 1.057 2.371 2.951-.036 11.506-.542 13.192A1 1 0 015.754 16z"/><circle fill="#5C913B" cx="25.5" cy="9.5" r="1.5"/><circle fill="#9266CC" cx="2" cy="18" r="2"/><circle fill="#5C913B" cx="32.5" cy="19.5" r="1.5"/><circle fill="#5C913B" cx="23.5" cy="31.5" r="1.5"/><circle fill="#FFCC4D" cx="28" cy="4" r="2"/><circle fill="#FFCC4D" cx="32.5" cy="8.5" r="1.5"/><circle fill="#FFCC4D" cx="29.5" cy="12.5" r="1.5"/><circle fill="#FFCC4D" cx="7.5" cy="23.5" r="1.5"/></svg>
<span><b>Congratulations, your self-declaration is ready!</b><br> Download the front and back, then print it yourself as a business card or CR-80 plastic card, or use it digitally.</span>
</div>
<canvas id="canvas_front"></canvas>
<div class="md:col-span-2 pt-4">
<button id="download_front" onclick="download_front(); return false;" type="button" class="w-full py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-700 hover:to-brand-600 text-white font-bold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-brand-500/30 flex items-center justify-center gap-3">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
Download Front
</button>
</div>
</div>
</div>
<div id="generator_back" class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden mt-12" style="display:none">
<div class="p-8 lg:p-12">
<h4 class="font-semibold text-ink mb-4 flex items-center gap-2">
Self declaration - Back
</h4>
<div class="text-gray-600 text-sm mt-4 mb-6 flex items-center gap-2">
<svg width="24" height="24" viewBox="0 0 36 36"><path fill="#DD2E44" d="M11.626 7.488a1.413 1.413.0 00-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"/><path fill="#EA596E" d="M13 12 .416 32.506l-.282.635.011.011c-.208.403.14 1.223.853 1.937.232.232.473.408.709.557L17 17l-4-5z"/><path fill="#A0041E" d="M23.012 13.066c4.67 4.672 7.263 9.652 5.789 11.124-1.473 1.474-6.453-1.118-11.126-5.788-4.671-4.672-7.263-9.654-5.79-11.127 1.474-1.473 6.454 1.119 11.127 5.791z"/><path fill="#AA8DD8" d="M18.59 13.609a.99.99.0 01-.734.215c-.868-.094-1.598-.396-2.109-.873-.541-.505-.808-1.183-.735-1.862.128-1.192 1.324-2.286 3.363-2.066.793.085 1.147-.17 1.159-.292.014-.121-.277-.446-1.07-.532-.868-.094-1.598-.396-2.11-.873-.541-.505-.809-1.183-.735-1.862.13-1.192 1.325-2.286 3.362-2.065.578.062.883-.057 1.012-.134.103-.063.144-.123.148-.158.012-.121-.275-.446-1.07-.532a.998.998.0 01-.886-1.102.997.997.0 011.101-.886c2.037.219 2.973 1.542 2.844 2.735-.13 1.194-1.325 2.286-3.364 2.067-.578-.063-.88.057-1.01.134-.103.062-.145.123-.149.157-.013.122.276.446 1.071.532 2.037.22 2.973 1.542 2.844 2.735-.129 1.192-1.324 2.286-3.362 2.065-.578-.062-.882.058-1.012.134-.104.064-.144.124-.148.158-.013.121.276.446 1.07.532a1 1 0 01.52 1.773z"/><path fill="#77B255" d="M30.661 22.857c1.973-.557 3.334.323 3.658 1.478.324 1.154-.378 2.615-2.35 3.17-.77.216-1.001.584-.97.701.034.118.425.312 1.193.095 1.972-.555 3.333.325 3.657 1.479.326 1.155-.378 2.614-2.351 3.17-.769.216-1.001.585-.967.702.033.117.423.311 1.192.095a1 1 0 11.54 1.925c-1.971.555-3.333-.323-3.659-1.479-.324-1.154.379-2.613 2.353-3.169.77-.217 1.001-.584.967-.702-.032-.117-.422-.312-1.19-.096-1.974.556-3.334-.322-3.659-1.479-.325-1.154.378-2.613 2.351-3.17.768-.215.999-.585.967-.701-.034-.118-.423-.312-1.192-.096a1 1 0 11-.54-1.923z"/><path fill="#AA8DD8" d="M23.001 20.16a1.001 1.001.0 01-.626-1.781c.218-.175 5.418-4.259 12.767-3.208a1 1 0 11-.283 1.979c-6.493-.922-11.187 2.754-11.233 2.791a.999.999.0 01-.625.219z"/><path fill="#77B255" d="M5.754 16a1 1 0 01-.958-1.287c1.133-3.773 2.16-9.794.898-11.364-.141-.178-.354-.353-.842-.316-.938.072-.849 2.051-.848 2.071a1 1 0 11-1.994.149c-.103-1.379.326-4.035 2.692-4.214 1.056-.08 1.933.287 2.552 1.057 2.371 2.951-.036 11.506-.542 13.192A1 1 0 015.754 16z"/><circle fill="#5C913B" cx="25.5" cy="9.5" r="1.5"/><circle fill="#9266CC" cx="2" cy="18" r="2"/><circle fill="#5C913B" cx="32.5" cy="19.5" r="1.5"/><circle fill="#5C913B" cx="23.5" cy="31.5" r="1.5"/><circle fill="#FFCC4D" cx="28" cy="4" r="2"/><circle fill="#FFCC4D" cx="32.5" cy="8.5" r="1.5"/><circle fill="#FFCC4D" cx="29.5" cy="12.5" r="1.5"/><circle fill="#FFCC4D" cx="7.5" cy="23.5" r="1.5"/></svg>
<span><b>Congratulations, your self-declaration is ready!</b><br> Download the front and back, then print it yourself as a business card or CR-80 plastic card, or use it digitally.</span>
</div>
<canvas id="canvas_back"></canvas>
<div class="md:col-span-2 pt-4">
<button id="download_back" onclick="download_back(); return false;" type="button" class="w-full py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-700 hover:to-brand-600 text-white font-bold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-brand-500/30 flex items-center justify-center gap-3">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
Download Back
</button>
</div>
</div>
</div>
<div id="generator_pdf" class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden mt-12" style="display:none">
<div class="p-8 lg:p-12">
<h4 class="font-semibold text-ink mb-4 flex items-center gap-2">
Self declaration - PDF
</h4>
<div class="text-gray-600 text-sm mt-4 mb-6 flex items-center gap-2">
<span>You can optionally download your self-declaration as a PDF, which includes a QR code.</span>
</div>
<div class="md:col-span-2 pt-4">
<button id="download_pdf" onclick="download_pdf(); return false;" type="button" class="w-full py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-700 hover:to-brand-600 text-white font-bold text-lg rounded-xl transition-all duration-200 shadow-lg hover:shadow-brand-500/30 flex items-center justify-center gap-3">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
Download PDF
</button>
</div>
</div>
</div>
<div id="generator_did" class="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden mt-12" style="display:none">
<div class="p-8 lg:p-12">
<h4 class="font-semibold text-ink mb-4 flex items-center gap-2">
Self declaration - DID
</h4>
<div class="text-gray-600 text-sm mt-4 mb-6 flex items-center gap-2">
<span>Here is your Memdeklaro self-asserted credential. You can self-sign it wth your key and upload it to your wallet.</span>
</div>
<div class="md:col-span-2 pt-4">
<div>
<label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Self-Asserted Credential <span class="text-gray-400 font-normal normal-case tracking-normal">(JSON-LD)</span></label>
<textarea id="did" rows="12" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-gray-400 font-mono text-sm focus:outline-none bg-gray-50 resize-none" placeholder="JSON-LD"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="generator.js"></script>
</body>
</html>
|
