Hugging Face's logo

Spaces:
borreooo
/
trustchain-certifysecure
Running

App Files Community
trustchain-certifysecure
File size: 8,172 Bytes
acc1137
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verify Certificate - TrustChain</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .glow-text {
            text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
        }
        .gradient-border {
            border: 2px solid transparent;
            background: linear-gradient(#f8fafc, #f8fafc) padding-box,
                        linear-gradient(to right, #10b981, #3b82f6) border-box;
        }
        .hover-scale {
            transition: transform 0.3s ease;
        }
        .hover-scale:hover {
            transform: scale(1.02);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- Navigation -->
    <nav class="gradient-border border-b-2 py-4 px-6 backdrop-blur-md">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <a href="/" class="flex items-center space-x-2">
                <i data-feather="shield" class="text-emerald-400"></i>
                <span class="text-2xl font-bold glow-text">TrustChain</span>
            </a>
            <div class="hidden md:flex space-x-6">
                <a href="/university" class="hover:text-emerald-400 transition-colors">
                    University Portal
                </a>
                <a href="/employer" class="hover:text-emerald-400 transition-colors">
                    Employer Portal
                </a>
                <a href="/verify" class="hover:text-emerald-400 transition-colors text-emerald-500">
                    Verify Certificate
                </a>
                <a href="/about" class="hover:text-emerald-400 transition-colors">
                    About
                </a>
            </div>
            <button class="md:hidden">
                <i data-feather="menu"></i>
            </button>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="max-w-3xl mx-auto px-4 py-12">
        <div class="text-center mb-16">
            <h1 class="text-4xl font-bold mb-6 glow-text">Verify Certificate</h1>
            <p class="text-xl text-gray-600">
                Check the authenticity of any TrustChain certificate
            </p>
        </div>

        <div class="bg-white p-8 rounded-2xl shadow-lg hover-scale mb-16">
            <div class="space-y-6">
                <div>
                    <label for="verifyCertId" class="block text-gray-700 mb-2">Certificate ID</label>
                    <input type="text" id="verifyCertId" placeholder="Enter certificate ID (e.g. TC-ABCD-1234)" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-400 focus:border-transparent">
                </div>
                <button id="verifyCertBtn" class="w-full bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-3 rounded-lg font-medium transition-colors">
                    Verify Certificate
                </button>
                <div class="text-center text-gray-500">OR</div>
                <div class="text-center">
                    <button class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors">
                        <i data-feather="camera" class="inline mr-2"></i> Scan QR Code
                    </button>
                </div>
            </div>
        </div>

        <div id="verificationResult" class="bg-white p-8 rounded-2xl shadow-lg hover-scale" style="display: none;">
            <h2 class="text-2xl font-bold mb-6">Verification Result</h2>
            <div id="resultContent">
                <!-- Results will be displayed here -->
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="gradient-border border-t-2 py-6 px-6 mt-8">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
                <h3 class="text-lg font-semibold mb-4">TrustChain</h3>
                <p class="text-gray-600">
                    Decentralized certificate verification powered by blockchain technology.
                </p>
            </div>
            <div>
                <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                <ul class="space-y-2">
                    <li><a href="/university" class="text-gray-600 hover:text-emerald-400">University Portal</a></li>
                    <li><a href="/employer" class="text-gray-600 hover:text-emerald-400">Employer Portal</a></li>
                    <li><a href="/verify" class="text-gray-600 hover:text-emerald-400">Verify Certificate</a></li>
                    <li><a href="/about" class="text-gray-600 hover:text-emerald-400">About</a></li>
                </ul>
            </div>
            <div>
                <h3 class="text-lg font-semibold mb-4">Connect</h3>
                <div class="flex space-x-4">
                    <a href="https://twitter.com/trustchain" class="text-gray-600 hover:text-emerald-400"><i data-feather="twitter"></i></a>
                    <a href="https://github.com/trustchain" class="text-gray-600 hover:text-emerald-400"><i data-feather="github"></i></a>
                    <a href="https://linkedin.com/company/trustchain" class="text-gray-600 hover:text-emerald-400"><i data-feather="linkedin"></i></a>
                    <a href="/contact" class="text-gray-600 hover:text-emerald-400"><i data-feather="mail"></i></a>
                </div>
            </div>
        </div>
        <div class="max-w-7xl mx-auto mt-8 pt-4 border-t border-gray-300 text-center text-gray-500">
            <p>© 2023 TrustChain. All rights reserved.</p>
        </div>
    </footer>

    <script>
        // Initialize Feather Icons
        feather.replace();

        // Mock Verification Function
        document.getElementById('verifyCertBtn').addEventListener('click', function() {
            const certId = document.getElementById('verifyCertId').value;
            if (!certId) {
                alert('Please enter a certificate ID');
                return;
            }

            // Show verification result section
            document.getElementById('verificationResult').style.display = 'block';

            // Mock API response
            setTimeout(() => {
                document.getElementById('resultContent').innerHTML = `
                    <div class="bg-green-50 border-l-4 border-green-500 p-4">
                        <div class="flex items-center">
                            <i data-feather="check-circle" class="text-green-500 mr-2"></i>
                            <h3 class="text-lg font-semibold">Certificate Verified</h3>
                        </div>
                        <div class="mt-4 space-y-2">
                            <p><span class="font-medium">Certificate ID:</span> ${certId}</p>
                            <p><span class="font-medium">Status:</span> <span class="text-green-500">Valid</span></p>
                            <p><span class="font-medium">Student Name:</span> Jane Doe</p>
                            <p><span class="font-medium">Institution:</span> Stanford University</p>
                            <p><span class="font-medium">Degree:</span> Master of Computer Science</p>
                            <p><span class="font-medium">Issue Date:</span> June 15, 2023</p>
                            <p><span class="font-medium">Blockchain Hash:</span> 0x4a3b...e7f2</p>
                        </div>
                    </div>
                `;
                feather.replace();
            }, 800);
        });
    </script>
</body>
</html>