-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
417 lines (373 loc) · 21.4 KB
/
index.html
File metadata and controls
417 lines (373 loc) · 21.4 KB
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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Mint your certificates as NFTs on Ethereum Sepolia. Upload an image or PDF, personalize, and create blockchain-verified digital certificates." />
<meta name="theme-color" content="#000000" />
<title>CertifyNFT — Mint Certificate NFTs on Ethereum Sepolia</title>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
<!-- Ethers.js v6 via CDN -->
<script src="https://cdn.jsdelivr.net/npm/ethers@6.13.5/dist/ethers.umd.min.js"></script>
<!-- Firebase v10 Compat SDK (CDN) — Auth + Firestore -->
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script>
<!-- PDF.js for rendering PDF uploads to canvas (first page → image) -->
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@4.7.76/build/pdf.min.mjs" type="module"></script>
<script type="module">
import * as pdfjsLib from 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.7.76/build/pdf.min.mjs';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.7.76/build/pdf.worker.min.mjs';
window.pdfjsLib = pdfjsLib;
</script>
<!-- Config must load before app.js -->
<script src="config.js"></script>
<!-- Optional local override (gitignored) — create config.local.js for local dev -->
<script src="config.local.js" onerror="/* expected in production */"></script>
<!-- Styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ============================
Animated Background
============================ -->
<div class="bg-canvas" aria-hidden="true">
<div class="bg-gradient"></div>
<div class="bg-grid"></div>
</div>
<!-- ============================
Navigation
============================ -->
<nav class="navbar" role="navigation" aria-label="Main navigation">
<div class="container">
<a href="#" class="nav-brand" aria-label="CertifyNFT Home">
<svg class="nav-brand-icon" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36" height="36" rx="8" fill="url(#nbg)"/>
<path d="M10 18l5 5L26 13" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="nbg" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
<stop stop-color="#a855f7"/>
<stop offset="1" stop-color="#06b6d4"/>
</linearGradient>
</defs>
</svg>
<span class="nav-brand-name">CertifyNFT</span>
</a>
<div class="nav-right">
<div id="network-badge" class="network-badge" aria-live="polite">
<span class="network-dot"></span>
<span>Not connected</span>
</div>
<div id="wallet-info" class="wallet-info hidden">
<div class="wallet-avatar" id="wallet-avatar" aria-hidden="true"></div>
<span id="short-address">—</span>
</div>
<button id="btn-connect" class="btn btn-primary" aria-label="Connect MetaMask wallet">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V12M21 12L16 7M21 12L16 17M21 12H13C12.4696 12 11.9609 11.7893 11.5858 11.4142C11.2107 11.0391 11 10.5304 11 10C11 9.46957 11.2107 8.96086 11.5858 8.58579C11.9609 8.21071 12.4696 8 13 8H17C17.5304 8 18.0391 8.21071 18.4142 8.58579C18.7893 8.96086 19 9.46957 19 10C19 10.5304 18.7893 11.0391 18.4142 11.4142C18.0391 11.7893 17.5304 12 17 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Connect Wallet
</button>
<button id="btn-disconnect" class="btn btn-secondary hidden" aria-label="Disconnect wallet">
Disconnect
</button>
</div>
</div>
</nav>
<!-- ============================
Hero
============================ -->
<section class="hero" aria-label="Hero">
<div class="container">
<div class="hero-badge">
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
<path d="M6 0L7.5 4.5L12 6L7.5 7.5L6 12L4.5 7.5L0 6L4.5 4.5L6 0Z"/>
</svg>
Ethereum Sepolia Testnet
</div>
<h1 class="hero-title">
<span class="hero-title-gradient">Mint Your Certificate</span>
<br />as an NFT
</h1>
<p class="hero-subtitle">
Upload your certificate (image or PDF), add metadata, and mint a permanent, verifiable NFT on Ethereum Sepolia — no servers, no IPFS keys needed.
</p>
<div class="hero-actions">
<a href="#mint" class="btn btn-primary btn-lg">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Start Minting
</a>
<a href="#how-it-works" class="btn btn-secondary btn-lg">How It Works</a>
</div>
</div>
</section>
<!-- ============================
Mint Section
============================ -->
<section id="mint" class="section mint-section" aria-label="Mint Certificate">
<div class="container">
<div class="section-header">
<h2 class="section-title">Create Your NFT Certificate</h2>
<p class="section-subtitle">Fill in the details below. Your certificate image is stored entirely on-chain as base64.</p>
</div>
<!-- Mint form (hidden until wallet connected) -->
<div id="mint-section" class="hidden">
<div class="mint-grid">
<!-- LEFT: Form -->
<div class="glass-card">
<h3 style="font-size:18px;font-weight:700;margin-bottom:24px;">Certificate Details</h3>
<!-- Upload Zone -->
<div class="form-group">
<label class="form-label">Certificate Image</label>
<div id="upload-zone" class="upload-zone" role="button" tabindex="0" aria-label="Upload certificate image">
<input type="file" id="upload-input" class="upload-input" accept="image/png,image/jpeg,image/webp,application/pdf,.pdf" aria-label="Choose certificate file" />
<div id="upload-placeholder" class="upload-placeholder">
<svg class="upload-icon" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="12" fill="rgba(168,85,247,0.1)"/>
<path d="M28 36V20M28 20L22 26M28 20L34 26" stroke="#a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 32H36" stroke="rgba(168,85,247,0.4)" stroke-width="2" stroke-linecap="round"/>
</svg>
<p class="upload-title">Drop your certificate here</p>
<p class="upload-subtitle">or click to browse — PNG, JPG, WebP, PDF</p>
</div>
<img id="upload-preview" class="upload-preview" alt="Certificate preview" />
<button id="upload-remove-btn" class="upload-remove-btn hidden" aria-label="Remove image" type="button">✕</button>
</div>
<p id="upload-hint" class="form-hint">PNG, JPG, WebP, or PDF — max 20MB raw. PDFs render their first page. Compressed to a small thumbnail (~6KB) to fit Ethereum Sepolia's gas limits for on-chain storage.</p>
</div>
<!-- Certificate Title -->
<div class="form-group">
<label class="form-label" for="cert-title">Certificate Title</label>
<input type="text" id="cert-title" class="form-input" placeholder="e.g. Certificate of Completion" maxlength="100" />
</div>
<!-- Recipient Name -->
<div class="form-group">
<label class="form-label" for="recipient-name">Recipient Name</label>
<input type="text" id="recipient-name" class="form-input" placeholder="e.g. John Doe" maxlength="80" />
</div>
<!-- Issuer Name -->
<div class="form-group">
<label class="form-label" for="issuer-name">Issuer</label>
<input type="text" id="issuer-name" class="form-input" placeholder="e.g. Tertiary Infotech Academy" maxlength="100" />
</div>
<!-- Description -->
<div class="form-group">
<label class="form-label" for="cert-description">Description (optional)</label>
<textarea id="cert-description" class="form-textarea" placeholder="Add any additional details..." maxlength="500"></textarea>
</div>
<!-- Issue Date -->
<div class="form-group">
<label class="form-label" for="issue-date">Issue Date</label>
<input type="date" id="issue-date" class="form-input" />
</div>
<!-- Mint Button -->
<div class="mint-action-area">
<button id="btn-mint" class="btn btn-primary btn-lg" style="width:100%;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Mint NFT
</button>
<p style="font-size:11px;color:var(--text-muted);text-align:center;margin-top:8px;">
Requires Ethereum Sepolia testnet + Sepolia ETH for gas
</p>
</div>
</div>
<!-- RIGHT: Live Preview -->
<div class="preview-section">
<div class="certificate-preview glass-card-static">
<div class="preview-image-container">
<img id="preview-image" class="preview-image" alt="Certificate preview" />
<div id="preview-placeholder" class="preview-placeholder">
<svg class="preview-placeholder-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="8" stroke="currentColor" stroke-width="1.5"/>
<circle cx="24" cy="20" r="6" stroke="currentColor" stroke-width="1.5"/>
<path d="M10 38C10 31.373 16.477 26 24 26C31.523 26 38 31.373 38 38" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="preview-placeholder-text">Upload image to preview</span>
</div>
</div>
<div class="preview-meta">
<div class="preview-title" id="preview-title">Certificate Title</div>
<div class="preview-recipient" id="preview-recipient">Recipient Name</div>
<div class="preview-issuer" id="preview-issuer">Issuer</div>
<div class="preview-date" id="preview-date"></div>
<div class="preview-badge">
<svg width="10" height="10" viewBox="0 0 12 12" fill="currentColor">
<path d="M6 0L7.5 4.5L12 6L7.5 7.5L6 12L4.5 7.5L0 6L4.5 4.5L6 0Z"/>
</svg>
NFT Certificate
</div>
</div>
</div>
<div style="margin-top:16px;padding:16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);">
<p style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;">How it works</p>
<ul style="font-size:12px;color:var(--text-muted);list-style:disc;padding-left:18px;display:flex;flex-direction:column;gap:4px;">
<li>Image (or PDF first page) compressed & embedded as base64 in metadata</li>
<li>Metadata stored entirely on-chain (no IPFS)</li>
<li>Gas fees paid in Sepolia ETH (free from faucet)</li>
<li>Certificate verifiable on Etherscan forever</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Connect wallet prompt -->
<div id="connect-prompt" class="glass-card" style="text-align:center;padding:60px 40px;">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin:0 auto 20px;opacity:0.5;">
<rect width="64" height="64" rx="16" fill="rgba(168,85,247,0.1)"/>
<path d="M32 20V44M20 32H44" stroke="#a855f7" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="32" cy="32" r="12" stroke="#a855f7" stroke-width="2"/>
</svg>
<h3 style="font-size:20px;font-weight:700;margin-bottom:8px;">Connect Your Wallet</h3>
<p style="font-size:14px;color:var(--text-secondary);max-width:360px;margin:0 auto 24px;">
Connect your MetaMask wallet to start minting certificate NFTs on Ethereum Sepolia.
</p>
<button id="btn-connect-prompt" class="btn btn-primary btn-lg" onclick="document.getElementById('btn-connect').click()">
Connect MetaMask
</button>
</div>
</div>
</section>
<!-- ============================
How It Works
============================ -->
<section id="how-it-works" class="section" aria-label="How it works">
<div class="container">
<div class="section-header">
<h2 class="section-title">How It Works</h2>
<p class="section-subtitle">Four simple steps to a blockchain-verified certificate.</p>
</div>
<div class="how-it-works">
<div class="how-steps">
<div class="how-step fade-in-up stagger-1">
<div class="how-step-number">1</div>
<div class="how-step-title">Connect Wallet</div>
<div class="how-step-desc">Click "Connect Wallet" and approve the MetaMask popup. The app auto-switches to Ethereum Sepolia testnet.</div>
</div>
<div class="how-step fade-in-up stagger-2">
<div class="how-step-number">2</div>
<div class="how-step-title">Upload Image or PDF</div>
<div class="how-step-desc">Drag-and-drop an image or PDF. PDFs render their first page. Files compress to ~50KB and are stored entirely on-chain as base64.</div>
</div>
<div class="how-step fade-in-up stagger-3">
<div class="how-step-number">3</div>
<div class="how-step-title">Fill Metadata</div>
<div class="how-step-desc">Enter the certificate title, recipient, issuer, description, and date. See a live preview as you type.</div>
</div>
<div class="how-step fade-in-up stagger-4">
<div class="how-step-number">4</div>
<div class="how-step-title">Mint NFT</div>
<div class="how-step-desc">Click "Mint NFT", confirm in MetaMask, and receive a unique certificate NFT on Ethereum Sepolia. Free via faucet!</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================
Gallery Section
============================ -->
<section id="gallery" class="section" aria-label="Your Certificates">
<div class="container">
<div class="section-header">
<div style="display:flex;align-items:center;justify-content:center;gap:12px;">
<h2 class="section-title" style="margin-bottom:0;">Your Certificates</h2>
<button id="btn-refresh-gallery" class="btn btn-sm btn-secondary" title="Refresh gallery" style="padding:6px 10px;">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4V10H7M23 20V14H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.49 9A9 9 0 005.64 5.64L1 10M23 14L18.36 18.36A9 9 0 013.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<p class="section-subtitle">All certificate NFTs minted by your connected wallet.</p>
</div>
<div id="gallery-grid" class="gallery-grid"></div>
<div id="gallery-empty" class="gallery-empty glass-card">
<svg class="gallery-empty-icon" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="12" width="48" height="40" rx="4" stroke="currentColor" stroke-width="1.5"/>
<path d="M20 28h24M20 36h16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="48" cy="48" r="10" fill="#0a0a0f" stroke="currentColor" stroke-width="1.5"/>
<path d="M45 48h6M48 45v6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<p style="font-size:14px;color:var(--text-secondary);">No certificates minted yet. Connect your wallet and mint your first one!</p>
</div>
</div>
</section>
<!-- ============================
Footer
============================ -->
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="nav-brand" style="margin-bottom:12px;">
<svg width="28" height="28" viewBox="0 0 36 36" fill="none">
<rect width="36" height="36" rx="8" fill="url(#fbg)"/>
<path d="M10 18l5 5L26 13" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<linearGradient id="fbg" x1="0" y1="0" x2="36" y2="36" gradientUnits="userSpaceOnUse">
<stop stop-color="#a855f7"/>
<stop offset="1" stop-color="#06b6d4"/>
</linearGradient>
</defs>
</svg>
<span class="nav-brand-name">CertifyNFT</span>
</a>
<p>Mint verifiable certificate NFTs on Ethereum Sepolia. Zero server infrastructure, zero IPFS keys — pure on-chain storage.</p>
</div>
<div>
<p class="footer-title">Resources</p>
<ul class="footer-links">
<li><a href="https://remix.ethereum.org/" target="_blank" rel="noopener">Remix IDE</a></li>
<li><a href="https://cloud.google.com/application/web3/faucet/ethereum/sepolia" target="_blank" rel="noopener">Google Cloud Sepolia Faucet</a></li>
<li><a href="https://sepolia.etherscan.io/" target="_blank" rel="noopener">Sepolia Etherscan</a></li>
<li><a href="https://sepolia.etherscan.io/address/0x555ed79aFBE0377000DA6a4a1C8d8a203d9b3C3b" target="_blank" rel="noopener">Contract on Etherscan</a></li>
</ul>
</div>
<div>
<p class="footer-title">Contract</p>
<ul class="footer-links">
<li><a href="https://docs.openzeppelin.com/contracts/erc721" target="_blank" rel="noopener">OpenZeppelin ERC-721</a></li>
<li><a href="https://docs.ethers.org/v6/" target="_blank" rel="noopener">Ethers.js Docs</a></li>
<li><a href="https://support.metamask.io/start/getting-started-with-metamask/" target="_blank" rel="noopener">MetaMask Getting Started</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 CertifyNFT. Built for Ethereum Sepolia testnet.</span>
<span>Powered by Ethers.js v6 & OpenZeppelin</span>
<span>Powered by <a href="https://www.tertiarycourses.com.sg/" target="_blank" rel="noopener">Tertiary Infotech Academy Pte Ltd</a></span>
</div>
</div>
</footer>
<!-- ============================
Mint Transaction Modal
============================ -->
<div id="mint-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<div class="modal">
<div id="modal-icon"></div>
<h2 id="modal-title" class="modal-title"></h2>
<p id="modal-subtitle" class="modal-subtitle"></p>
<div id="modal-detail" class="modal-detail hidden"></div>
<div id="modal-actions" class="modal-actions"></div>
</div>
</div>
<!-- ============================
Toast Container
============================ -->
<div id="toast-container" class="toast-container" role="status" aria-live="polite"></div>
<!-- App Script -->
<script src="app.js"></script>
</body>
</html>