Spaces:
Running
Running
| <html lang="en" dir="ltr" id="html"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Certification | Rasd</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'spa-green': '#006C35', | |
| 'spa-gold': '#C9A646', | |
| 'spa-dark': '#1A2E44', | |
| 'spa-light-gray': '#f8f9fa', | |
| }, | |
| fontFamily: { 'tajawal': ['Tajawal', 'sans-serif'] } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { font-family: 'tajawal', sans-serif; } | |
| .rtl { direction: rtl; } | |
| .ltr { direction: ltr; } | |
| </style> | |
| </head> | |
| <body class="bg-white text-spa-dark"> | |
| <!-- Header --> | |
| <header class="sticky top-0 w-full bg-white/80 backdrop-blur-md z-50 border-b"> | |
| <nav class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center"> | |
| <a href="index.html" class="flex items-center space-x-3"> | |
| <img src="spa-logo.png" alt="SPA Logo" class="h-10"> | |
| <span class="text-2xl font-bold text-spa-green" data-en="Rasd" data-ar="رصد">Rasd</span> | |
| </a> | |
| <div class="flex items-center space-x-4"> | |
| <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> | |
| <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> | |
| </div> | |
| </nav> | |
| </header> | |
| <main class="py-20"> | |
| <section class="max-w-5xl mx-auto px-6 text-center"> | |
| <h1 class="text-5xl font-extrabold text-spa-dark mb-4" data-en="Guardians of Authenticity" data-ar="حراس الأصالة">Guardians of Authenticity</h1> | |
| <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> | |
| </section> | |
| <section class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center mb-20"> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-4" data-en="How It Works" data-ar="كيف تعمل الخدمة">How It Works</h2> | |
| <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> | |
| <div class="space-y-4"> | |
| <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> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-8 rounded-lg"> | |
| <h3 class="text-2xl font-bold mb-6 text-center" data-en="Verify an Image" data-ar="تحقق من صورة">Verify an Image</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="font-bold" data-en="Enter Image ID or URL" data-ar="أدخل معرف الصورة أو الرابط">Enter Image ID or URL</label> | |
| <input id="verify-input" type="text" class="w-full mt-2 p-3 border rounded-md" placeholder="e.g., SPA-IMG-12345678"> | |
| </div> | |
| <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> | |
| </div> | |
| <div id="verify-result" class="mt-6 text-center hidden"> | |
| <!-- Verification result will be shown here --> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="py-16 bg-spa-light-gray border-t"> | |
| <div class="max-w-7xl mx-auto px-6 text-center text-gray-600"> | |
| <img src="spa-logo.png" alt="SPA Logo" class="h-12 mx-auto mb-4"> | |
| <p>© <span id="footer-year-cert"></span> Saudi Press Agency. All Rights Reserved.</p> | |
| </div> | |
| </footer> | |
| <script src="translations.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |