Vote-Vault/verfication.html at main · L0veMathur/Vote-Vault · GitHub

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
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>SecureVote: Identity Verification Protocol</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#0033A0",
                        "background-light": "#F8F9FA",
                        "background-dark": "#101622",
                        "secondary-text": "#6c757d",
                        "body-text-light": "#212529",
                        "body-text-dark": "#e5e7eb",
                        "success": "#28a745",
                        "error": "#dc3545",
                    },
                    fontFamily: {
                        "display": ["Inter", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }
    </style>
</head>
<body class="font-display bg-background-light dark:bg-background-dark text-body-text-light dark:text-body-text-dark">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col items-center">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-gray-200 dark:border-gray-700 px-10 py-3 w-full max-w-7xl">
<div class="flex items-center gap-4 text-primary">
<div class="size-6 text-primary">
<svg fill="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M24 18.4228L42 11.475V34.3663C42 34.7796 41.7457 35.1504 41.3601 35.2992L24 42V18.4228Z" fill-rule="evenodd"></path>
<path clip-rule="evenodd" d="M24 8.18819L33.4123 11.574L24 15.2071L14.5877 11.574L24 8.18819ZM9 15.8487L21 20.4805V37.6263L9 32.9945V15.8487ZM27 37.6263V20.4805L39 15.8487V32.9945L27 37.6263ZM25.354 2.29885C24.4788 1.98402 23.5212 1.98402 22.646 2.29885L4.98454 8.65208C3.7939 9.08038 3 10.2097 3 11.475V34.3663C3 36.0196 4.01719 37.5026 5.55962 38.098L22.9197 44.7987C23.6149 45.0671 24.3851 45.0671 25.0803 44.7987L42.4404 38.098C43.9828 37.5026 45 36.0196 45 34.3663V11.475C45 10.2097 44.2061 9.08038 43.0155 8.65208L25.354 2.29885Z" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-xl font-bold leading-tight tracking-[-0.015em] text-primary">SecureVote</h2>
</div>
</header>
<main class="flex flex-1 justify-center py-5 px-4 sm:px-6 lg:px-8 w-full">
<div class="layout-content-container flex flex-col w-full max-w-7xl flex-1">
<div class="flex flex-wrap justify-between gap-3 pt-8 pb-4">
<h1 class="text-4xl font-black leading-tight tracking-[-0.033em] w-full text-center text-body-text-light dark:text-body-text-dark">Secure Your Electoral Submission</h1>
</div>
<div class="flex flex-col gap-3 py-4 max-w-3xl mx-auto w-full">
<div class="flex gap-6 justify-between">
<p class="text-base font-medium leading-normal text-body-text-light dark:text-body-text-dark">Protocol Phase 2 of 3: Identity Validation</p>
</div>
<div class="rounded bg-gray-200 dark:bg-gray-700">
<div class="h-2 rounded bg-primary" style="width: 66%;"></div>
</div>
</div>
<p class="text-base font-normal leading-normal pb-6 pt-2 text-center text-secondary-text">Mandatory identity validation is required prior to casting your secure vote to uphold electoral integrity.</p>
<div class="w-full">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav aria-label="Tabs" class="-mb-px flex space-x-8">
<a aria-current="page" class="border-primary text-primary whitespace-nowrap py-4 px-1 border-b-2 font-semibold text-base" href="#">1. Identity Verification (KYC)</a>
<a class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-base" href="#">2. Cast Your Encrypted Vote</a>
</nav>
</div>
<div class="py-10">
<div class="w-full bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div class="flex flex-col items-center justify-center space-y-4">
<div class="w-full aspect-[4/3] bg-gray-900 rounded-lg flex items-center justify-center text-white relative overflow-hidden">
<span class="material-symbols-outlined text-6xl text-gray-500">videocam</span>
<div class="absolute inset-0 bg-black/20"></div>
<p class="absolute bottom-4 text-center text-sm px-4">Your live camera feed will be displayed here for secure biometric capture. Please ensure your face is centrally aligned.</p>
</div>
<div class="flex items-center gap-4">
<button class="flex items-center justify-center gap-2 rounded-lg bg-gray-100 dark:bg-gray-700 px-5 py-2.5 text-base font-semibold text-body-text-light dark:text-body-text-dark shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors" type="button">
<span class="material-symbols-outlined text-xl">photo_camera</span> Initiate Biometric Capture
                                            </button>
</div>
</div>
<div class="space-y-6">
<h3 class="text-2xl font-bold leading-tight tracking-[-0.015em] text-body-text-light dark:text-body-text-dark">Advanced Biometric Identity Verification</h3>
<p class="text-secondary-text">To uphold the integrity of the decentralized election, a real-time biometric capture is required. This protocol prevents unauthorized participation and ensures a robust electoral process.</p>
<ul class="space-y-3">
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-success mt-1">check_circle</span>
<div>
<h4 class="font-semibold">Optimal Illumination</h4>
<p class="text-secondary-text text-sm">Ensure consistent and adequate lighting to facilitate clear facial recognition and prevent obfuscation.</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-success mt-1">check_circle</span>
<div>
<h4 class="font-semibold">Direct Gaze Alignment</h4>
<p class="text-secondary-text text-sm">Maintain direct eye contact with the camera. All face-obscuring accessories, such as headwear or eyewear, must be removed.</p>
</div>
</li>
<li class="flex items-start gap-3">
<span class="material-symbols-outlined text-success mt-1">check_circle</span>
<div>
<h4 class="font-semibold">Unobstructed Backdrop</h4>
<p class="text-secondary-text text-sm">Position yourself against a uniform, non-distracting background for enhanced image processing accuracy.</p>
</div>
</li>
</ul>
<button class="flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3.5 text-base font-semibold text-white shadow-sm hover:bg-primary/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled="" type="submit">
<span class="material-symbols-outlined text-xl">lock_open</span> Finalize Verification Protocol
                                        </button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="w-full max-w-7xl py-6 px-4 sm:px-6 lg:px-8 border-t border-gray-200 dark:border-gray-700 mt-auto">
<div class="flex justify-center items-center gap-6">
<a class="text-sm text-secondary-text hover:text-primary hover:underline" href="#">Support Documentation</a>
<span class="text-gray-300 dark:text-gray-600">|</span>
<a class="text-sm text-secondary-text hover:text-primary hover:underline" href="#">Technical Assistance</a>
</div>
</footer>
</div>
</div>
</body></html>