Hugging Face's logo

Spaces:
AhmedMostafaAttia
/
Final-Rasd
Running

App Files Community
AhmedMostafaAttia commited on
Commit
d8bd1e5
·
verified ·
1 Parent(s): 21e9cb0

Create certification.html

Browse files
Files changed (1) hide show
  1. certification.html +91 -0
certification.html ADDED
@@ -0,0 +1,91 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr" id="html">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Image Certification | Rasd</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ 'spa-green': '#006C35',
16
+ 'spa-gold': '#C9A646',
17
+ 'spa-dark': '#1A2E44',
18
+ 'spa-light-gray': '#f8f9fa',
19
+ },
20
+ fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ body { font-family: 'tajawal', sans-serif; }
27
+ .rtl { direction: rtl; }
28
+ .ltr { direction: ltr; }
29
+ </style>
30
+ </head>
31
+ <body class="bg-white text-spa-dark">
32
+
33
+ <!-- Header -->
34
+ <header class="sticky top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b">
35
+ <nav class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
36
+ <a href="index.html" class="flex items-center space-x-3">
37
+ <img src="spa-logo.png" alt="SPA Logo" class="h-10">
38
+ <span class="text-2xl font-bold text-spa-green" data-en="Rasd" data-ar="رصد">Rasd</span>
39
+ </a>
40
+ <div class="flex items-center space-x-4">
41
+ <a href="dashboard.html" class="px-6 py-2 bg-spa-green text-white font-bold rounded-full hover:bg-opacity-90 transition-all" data-en="Enter Command Center" data-ar="دخول مركز القيادة">Enter Command Center</a>
42
+ <button onclick="toggleLanguage()" id="lang-toggle-btn" class="w-10 h-10 border-2 border-spa-green rounded-full text-spa-green font-bold hover:bg-spa-green hover:text-white transition-colors">ع</button>
43
+ </div>
44
+ </nav>
45
+ </header>
46
+
47
+ <main class="py-20">
48
+ <section class="max-w-5xl mx-auto px-6 text-center">
49
+ <h1 class="text-5xl font-extrabold text-spa-dark mb-4" data-en="Guardians of Authenticity" data-ar="حراس الأصالة">Guardians of Authenticity</h1>
50
+ <p class="text-xl text-gray-600 mb-12" data-en="The SPA Digital Certification service ensures the integrity and origin of every official image." data-ar="خدمة التصديق الرقمي من واس تضمن سلامة وأصل كل صورة رسمية.">The SPA Digital Certification service ensures the integrity and origin of every official image.</p>
51
+ </section>
52
+
53
+ <section class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center mb-20">
54
+ <div>
55
+ <h2 class="text-3xl font-bold mb-4" data-en="How It Works" data-ar="كيف تعمل الخدمة">How It Works</h2>
56
+ <p class="text-gray-600 mb-6" data-en="Upon publication, each image is embedded with a secure, invisible digital watermark and registered on a private blockchain, creating a permanent, verifiable record of its authenticity." data-ar="عند النشر، يتم تضمين كل صورة بعلامة مائية رقمية آمنة وغير مرئية وتسجيلها على بلوكتشين خاص، مما ينشئ سجلاً دائماً وقابلاً للتحقق من أصالتها."></p>
57
+ <div class="space-y-4">
58
+ <div class="flex items-start space-x-4"><i class="fas fa-camera text-2xl text-spa-green mt-1"></i><div><h4 class="font-bold" data-en="1. Image Publication" data-ar="١. نشر الصورة">1. Image Publication</h4><p class="text-sm text-gray-500" data-en="A new image is published by an SPA editor." data-ar="يتم نشر صورة جديدة من قبل محرر في واس."></p></div></div>
59
+ <div class="flex items-start space-x-4"><i class="fas fa-fingerprint text-2xl text-spa-green mt-1"></i><div><h4 class="font-bold" data-en="2. Unique Hash Generation" data-ar="٢. إنشاء بصمة فريدة">2. Unique Hash Generation</h4><p class="text-sm text-gray-500" data-en="A unique cryptographic hash (digital fingerprint) is created." data-ar="يتم إنشاء بصمة رقمية (تجزئة تشفيرية) فريدة للصورة."></p></div></div>
60
+ <div class="flex items-start space-x-4"><i class="fas fa-cube text-2xl text-spa-green mt-1"></i><div><h4 class="font-bold" data-en="3. Blockchain Registration" data-ar="٣. تسجيلها في البلوكتشين">3. Blockchain Registration</h4><p class="text-sm text-gray-500" data-en="The hash is recorded on an immutable blockchain ledger." data-ar="يتم تسجيل البصمة في سجل بلوكتشين غير قابل للتغيير."></p></div></div>
61
+ <div class="flex items-start space-x-4"><i class="fas fa-shield-alt text-2xl text-spa-green mt-1"></i><div><h4 class="font-bold" data-en="4. Verification Ready" data-ar="٤. جاهزة للتحقق">4. Verification Ready</h4><p class="text-sm text-gray-500" data-en="The image is now globally verifiable through our platform." data-ar="تصبح الصورة الآن قابلة للتحقق عالمياً عبر منصتنا."></p></div></div>
62
+ </div>
63
+ </div>
64
+ <div class="bg-gray-100 p-8 rounded-lg">
65
+ <h3 class="text-2xl font-bold mb-6 text-center" data-en="Verify an Image" data-ar="تحقق من صورة">Verify an Image</h3>
66
+ <div class="space-y-4">
67
+ <div>
68
+ <label class="font-bold" data-en="Enter Image ID or URL" data-ar="أدخل معرف الصورة أو الرابط">Enter Image ID or URL</label>
69
+ <input id="verify-input" type="text" class="w-full mt-2 p-3 border rounded-md" placeholder="e.g., SPA-IMG-12345678">
70
+ </div>
71
+ <button id="verify-btn" class="w-full py-3 bg-spa-green text-white font-bold rounded-md" data-en="Verify Authenticity" data-ar="تحقق من الأصالة">Verify Authenticity</button>
72
+ </div>
73
+ <div id="verify-result" class="mt-6 text-center hidden">
74
+ <!-- Verification result will be shown here -->
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ </main>
80
+
81
+ <footer class="py-16 bg-spa-light-gray border-t">
82
+ <div class="max-w-7xl mx-auto px-6 text-center text-gray-600">
83
+ <img src="spa-logo.png" alt="SPA Logo" class="h-12 mx-auto mb-4">
84
+ <p>&copy; <span id="footer-year-cert"></span> Saudi Press Agency. All Rights Reserved.</p>
85
+ </div>
86
+ </footer>
87
+
88
+ <script src="translations.js"></script>
89
+ <script src="script.js"></script>
90
+ </body>
91
+ </html>