Merge pull request 'beta' (#13) from beta into main

RonDevHub · RonDevHub · commit 6afda1b74780 · 2026-03-24T14:20:57.000Z
Reviewed-on: https://commitcloud.net/RonDevHub/MailShield/pulls/13
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,6 @@
 # Changelog
 
 ### Fixed
-- The CAPTCHA integration has been updated and can no longer be bypassed.
-- The light/dark mode toggle has been redesigned and is now located in the page header, so there are no visual disruptions on the mobile site
 
 ### Added
-- SQLite (default, zero config), PostgreSQL (recommended for production) Switch via environment variables.
-- Easily switch from an SQLite database to PostgreSQL (migration can now be performed using JSON)
-- French and Italian languages added
+- A “How It Works” section has been added, and the translation has been included in the languages that have already been translated
diff --git a/src/lang/de.php b/src/lang/de.php
@@ -46,5 +46,13 @@
     'kofi' => 'ko-fi.com',
     'bmac' => 'Buy me a Coffee',
     'crypto' => 'Crypto Workspace',
+    'how_it_works_title' => 'So funktioniert es',
+    'how_it_works_subtitle' => 'Schütze Deine E-Mails in 3 einfachen Schritten',
+    'step1_title' => 'E-Mail-Adresse eingeben',
+    'step1_desc' => 'Gib Deine E-Mail-Adresse in das obige Formular ein',
+    'step2_title' => 'Link zum Schutz',
+    'step2_desc' => 'Wir erstellen einen eindeutigen, geschützten Link für dich',
+    'step3_title' => 'Sicher teilen',
+    'step3_desc' => 'Nur Menschen können deine echte E-Mail-Adresse herausfinden.',
     'copy' => 'Erstellt mit ❤️ und ☕️ von'
 ];
diff --git a/src/lang/en.php b/src/lang/en.php
@@ -46,5 +46,13 @@
     'kofi' => 'ko-fi.com',
     'bmac' => 'Buy me a Coffee',
     'crypto' => 'Crypto Workspace',
+    'how_it_works_title' => 'How It Works',
+    'how_it_works_subtitle' => 'Protect your email in 3 simple steps',
+    'step1_title' => 'Enter Email',
+    'step1_desc' => 'Type your email address in the form above',
+    'step2_title' => 'Get Protected Link',
+    'step2_desc' => 'We generate a unique, protected link for you',
+    'step3_title' => 'Share Safely',
+    'step3_desc' => 'Only humans can reveal your real email',
     'copy' => 'Created with ❤️ and ☕️ by'
 ];
diff --git a/src/lang/fr.php b/src/lang/fr.php
@@ -46,5 +46,13 @@
     'kofi' => 'ko-fi.com',
     'bmac' => 'Buy me a Coffee',
     'crypto' => 'Espace Crypto',
+    'how_it_works_title' => 'Comment ça marche',
+    'how_it_works_subtitle' => 'Protégez votre e-mail en 3 étapes simples',
+    'step1_title' => 'Saisir l’e-mail',
+    'step1_desc' => 'Entrez votre adresse e-mail dans le formulaire ci-dessus',
+    'step2_title' => 'Obtenir le lien protégé',
+    'step2_desc' => 'Nous générons un lien unique et protégé pour vous',
+    'step3_title' => 'Partager en toute sécurité',
+    'step3_desc' => 'Seuls les humains peuvent révéler votre véritable e-mail',
     'copy' => 'Créé avec ❤️ et ☕️ par'
 ];
diff --git a/src/lang/it.php b/src/lang/it.php
@@ -46,5 +46,13 @@
     'kofi' => 'ko-fi.com',
     'bmac' => 'Offrimi un caffè',
     'crypto' => 'Crypto Workspace',
+    'how_it_works_title' => 'Come funziona',
+    'how_it_works_subtitle' => 'Proteggi la tua email in 3 semplici passaggi',
+    'step1_title' => 'Inserisci l’email',
+    'step1_desc' => 'Digita il tuo indirizzo email nel modulo sopra',
+    'step2_title' => 'Ottieni il link protetto',
+    'step2_desc' => 'Generiamo per te un link unico e protetto',
+    'step3_title' => 'Condividi in sicurezza',
+    'step3_desc' => 'Solo gli esseri umani possono rivelare la tua vera email',
     'copy' => 'Creato con ❤️ e ☕️ da'
 ];
diff --git a/src/public/index.php b/src/public/index.php
@@ -170,8 +170,8 @@ class="group relative p-2 ml-1 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm
             </h1>
             <p class="text-gray-500 dark:text-gray-400"><?= $lang['subtitle'] ?></p>
 
-            <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 flex items-center justify-center gap-4">
-                <span class="flex items-center gap-1">
+            <div class="mt-6 flex flex-wrap items-center justify-center gap-x-6 gap-y-3 text-[10px] uppercase tracking-widest font-bold text-gray-400 dark:text-gray-500">
+                <span class="flex items-center gap-2 px-3 py-1.5 bg-gray-100/50 dark:bg-gray-800/40 rounded-full border border-gray-200/20 dark:border-gray-700/20 transition-colors hover:text-blue-500">
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 384 512">
                         <defs>
                             <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
@@ -183,7 +183,8 @@ class="group relative p-2 ml-1 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm
                     </svg>
                     <?= $lang['no_tracking'] ?>
                 </span>
-                <span class="flex items-center gap-1">
+
+                <span class="flex items-center gap-2 px-3 py-1.5 bg-gray-100/50 dark:bg-gray-800/40 rounded-full border border-gray-200/20 dark:border-gray-700/20 transition-colors hover:text-blue-500">
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 576 512">
                         <defs>
                             <linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="0%">
@@ -195,7 +196,8 @@ class="group relative p-2 ml-1 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm
                     </svg>
                     <?= $lang['no_ads'] ?>
                 </span>
-                <span class="flex items-center gap-1">
+
+                <span class="flex items-center gap-2 px-3 py-1.5 bg-gray-100/50 dark:bg-gray-800/40 rounded-full border border-gray-200/20 dark:border-gray-700/20 transition-colors hover:text-blue-500">
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" viewBox="0 0 576 512">
                         <defs>
                             <linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="0%">
@@ -207,7 +209,7 @@ class="group relative p-2 ml-1 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm
                     </svg>
                     <?= $lang['free'] ?>
                 </span>
-            </p>
+            </div>
 
             <div class="mt-8 flex justify-center gap-12">
                 <div class="text-center">
@@ -288,6 +290,49 @@ class="w-full bg-blue-600 text-white font-bold py-3 rounded-xl transition-all fl
             <?php endif; ?>
         </main>
 
+        <section class="mt-20 mb-12">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2">
+                    <?= $lang['how_it_works_title'] ?? 'How It Works' ?>
+                </h2>
+                <p class="text-gray-500 dark:text-gray-400">
+                    <?= $lang['how_it_works_subtitle'] ?? 'Protect your email in 3 simple steps' ?>
+                </p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+                <div class="flex flex-col items-center">
+                    <div class="w-16 h-16 bg-blue-500/10 rounded-2xl flex items-center justify-center mb-6 border border-blue-500/20 shadow-lg shadow-blue-500/5 transition-transform hover:scale-110 duration-300">
+                        <span class="text-2xl font-black text-blue-500">1</span>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2"><?= $lang['step1_title'] ?? 'Enter Email' ?></h3>
+                    <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed px-4">
+                        <?= $lang['step1_desc'] ?? 'Type your email address in the form above' ?>
+                    </p>
+                </div>
+
+                <div class="flex flex-col items-center">
+                    <div class="w-16 h-16 bg-teal-500/10 rounded-2xl flex items-center justify-center mb-6 border border-teal-500/20 shadow-lg shadow-teal-500/5 transition-transform hover:scale-110 duration-300">
+                        <span class="text-2xl font-black text-teal-500">2</span>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2"><?= $lang['step2_title'] ?? 'Get Protected Link' ?></h3>
+                    <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed px-4">
+                        <?= $lang['step2_desc'] ?? 'We generate a unique, protected link for you' ?>
+                    </p>
+                </div>
+
+                <div class="flex flex-col items-center">
+                    <div class="w-16 h-16 bg-purple-500/10 rounded-2xl flex items-center justify-center mb-6 border border-purple-500/20 shadow-lg shadow-purple-500/5 transition-transform hover:scale-110 duration-300">
+                        <span class="text-2xl font-black text-purple-500">3</span>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2"><?= $lang['step3_title'] ?? 'Share Safely' ?></h3>
+                    <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed px-4">
+                        <?= $lang['step3_desc'] ?? 'Only humans can reveal your real email' ?>
+                    </p>
+                </div>
+            </div>
+        </section>
+
         <footer class="mt-16 mb-8 text-center space-y-6">
             <a href="/support" class="inline-flex items-center gap-2 text-[11px] font-bold tracking-[0.2em] uppercase opacity-30 hover:opacity-100 transition-all duration-300 group">
                 <span class="p-1.5 rounded-lg bg-gray-200 dark:bg-gray-800 group-hover:bg-red-500/10 group-hover:text-red-500 transition-colors shadow-sm">
@@ -308,7 +353,7 @@ class="w-full bg-blue-600 text-white font-bold py-3 rounded-xl transition-all fl
                 <?= $lang['copy'] ?>
                 <a href="https://github.com/RonDevHub/MailShield"
                     target="_blank"
-                    class="relative group inline-block font-black text-gray-900 dark:text-gray-100 transition-all duration-300 hover:scale-105">
+                    class="relative group inline-block bg-clip-text text-semibold text-transparent bg-gradient-to-r from-blue-500 to-teal-400 transition-all duration-300 hover:scale-105">
                     <span>RonDevHub</span>
                     <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-teal-400 transition-all duration-300 group-hover:w-full"></span>
                     <span class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/5 blur-xl transition-all duration-500 -z-10 rounded-full"></span>
@@ -354,4 +399,5 @@ function onCaptchaVerified(token) {
         })
     </script>
 </body>
+
 </html>
