Spaces:
Running
Running
File size: 6,984 Bytes
d8bd1e5 |
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 |
<!DOCTYPE html>
<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> |