liveness-checker/sample.html at main · universal-verify/liveness-checker · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Universal Verify - One-Time Identity Verification for All Platforms</title>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous">
    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
    <script src="/scripts/page/index.js" type="module" defer></script>
</head>
<body class="font-sans">
    <!-- Navigation -->
    <nav class="bg-white shadow-lg fixed w-full z-10">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="/" class="text-2xl font-bold text-blue-600">Universal Verify</a>
                </div>
                <div class="md:flex items-center space-x-8">
                    <a href="#features" class="hidden md:inline text-gray-700 hover:text-blue-600">Features</a>
                    <a href="#how-it-works" class="hidden md:inline text-gray-700 hover:text-blue-600">How It Works</a>
                    <a href="/login" class="text-gray-700 hover:text-blue-600">Login</a>
                    <a href="/register" class="hidden md:inline bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Get Started</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="pt-32 pb-20 bg-gradient-to-r from-blue-50 to-indigo-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="text-center">
                <h1 class="text-5xl font-bold text-gray-900 mb-6">Verify Once – Stay Anonymous</h1>
                <p class="text-xl text-gray-600 mb-8">Universal Verify lets you prove you're a real person while maintaining your privacy. Verify once with your ID, then connect to platforms without needing to share all of your personal information.</p>
                <div class="flex justify-center space-x-4">
                    <a href="/register" class="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700">Get Started</a>
                    <a href="#how-it-works" class="border border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50">Learn More</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">Why Choose Universal Verify?</h2>
            <div class="grid lg:grid-cols-3 gap-8">
                <div class="p-6 bg-white rounded-lg shadow-lg max-w-xl mx-auto w-full">
                    <i class="fas fa-user-secret text-4xl text-blue-600 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">Stay Anonymous</h3>
                    <p class="text-gray-600">Platforms only see if you're verified - your personal information stays private with us.</p>
                </div>
                <div class="p-6 bg-white rounded-lg shadow-lg max-w-xl mx-auto w-full">
                    <i class="fas fa-shield-alt text-4xl text-blue-600 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">You're in Control</h3>
                    <p class="text-gray-600">Choose what additional information to share with each platform. Your consent is always required.</p>
                </div>
                <div class="p-6 bg-white rounded-lg shadow-lg max-w-xl mx-auto w-full">
                    <i class="fas fa-clock text-4xl text-blue-600 mb-4"></i>
                    <h3 class="text-xl font-semibold mb-2">Save Time</h3>
                    <p class="text-gray-600">Verify once and connect to any supporting platform instantly. No more repeated verification processes.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section id="how-it-works" class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">How It Works</h2>
            <div class="max-w-3xl mx-auto">
                <ol class="space-y-8">
                    <li class="flex items-start">
                        <span class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white font-bold mr-4">1</span>
                        <div>
                            <h4 class="font-bold mb-1">Create Your Account</h4>
                            <p class="text-gray-600">Sign up for a free Universal Verify account in minutes.</p>
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white font-bold mr-4">2</span>
                        <div>
                            <h4 class="font-bold mb-1">Verify Your Identity</h4>
                            <p class="text-gray-600">Complete a one-time verification using your government-issued ID and a selfie.</p>
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white font-bold mr-4">3</span>
                        <div>
                            <h4 class="font-bold mb-1">Connect Anywhere</h4>
                            <p class="text-gray-600">Instantly connect your verified identity to any participating platform.</p>
                        </div>
                    </li>
                </ol>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h4 class="text-xl font-bold mb-4">Universal Verify</h4>
                    <p class="text-gray-400">One-time verification for all your online needs.</p>
                </div>
                <div>
                    <h4 class="text-xl font-bold mb-4">Resources</h4>
                    <ul class="space-y-2">
                        <li><a href="/help-center" class="text-gray-400 hover:text-white">Help Center</a></li>
                        <li><a href="/terms-of-use" class="text-gray-400 hover:text-white">Terms of Use</a></li>
                        <li><a href="/privacy-policy" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-xl font-bold mb-4">Company</h4>
                    <ul class="space-y-2">
                        <li><a href="/about" class="text-gray-400 hover:text-white">About</a></li>
                        <li><a href="/blog" class="text-gray-400 hover:text-white">Blog</a></li>
                        <li><a href="https://partners.universalverify.com" class="text-gray-400 hover:text-white">Partners</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-xl font-bold mb-4">Connect</h4>
                    <ul class="space-y-2">
                        <li><a href="https://bsky.app/profile/universalverify.com" class="text-gray-400 hover:text-white">Bluesky</a></li>
                        <li><a href="https://github.com/universal-verify" class="text-gray-400 hover:text-white">GitHub</a></li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; 2025 Universal Verify. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>