From aef4725f3bff088c3eabb2ee5588d2c8859d756f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=9A=9C=EF=B8=8F=20A=CC=8D=CD=AD=CD=A9nL=CD=AD=CC=87?=
 =?UTF-8?q?=CC=8E=CC=8F=CC=92o=CD=A9M=CC=B3=CD=87i=CD=8E=CC=9E=CC=9D=CC=AA?=
 =?UTF-8?q?n=CD=83=CD=A3=CD=83=CD=8A=CD=83=CC=B9=CC=98u=CC=8A=CC=88=CD=95s?=
 =?UTF-8?q?=CC=88=CC=8C=CC=87=CC=90=CC=82=CC=99=CD=89=CD=8E=CC=AB=20?=
 =?UTF-8?q?=E2=9A=9C=EF=B8=8F?=
 <51442719+AnLoMinus@users.noreply.github.com>
Date: Sun, 7 Dec 2025 06:29:18 +0200
Subject: [PATCH] Improve landing page accessibility and UX

---
 index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
diff --git a/index.html b/index.html
index 17dbf2c..d38fe3c 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="Diablo ~ Pentesting / Hacking & Reporting Tool by AnLoMinus. Automate recon, organize pentest flows, and generate Markdown reports. Ethical use only." />
   <meta name="theme-color" content="#ff0033" />
+  <meta property="og:title" content="Diablo · Pentesting / Hacking & Reporting" />
+  <meta property="og:description" content="Automate recon, organize pentest flows, and generate Markdown reports with Diablo." />
+  <meta property="og:image" content="https://user-images.githubusercontent.com/51442719/170010336-39176f7e-b5dc-4f31-81ca-4b4144e6938c.png" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://github.com/Anlominus/Diablo" />
   <style>
     :root {
       --bg: #05020a;
@@ -45,6 +50,24 @@
       overflow-x: hidden;
     }
 
+    .skip-link {
+      position: absolute;
+      left: -999px;
+      top: 0.5rem;
+      padding: 0.5rem 0.9rem;
+      background: #0f0a1c;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      box-shadow: var(--shadow-soft);
+      color: var(--text);
+      text-decoration: none;
+      z-index: 100;
+    }
+
+    .skip-link:focus {
+      left: 1rem;
+    }
+
     /* Subtle noise / scanline overlay */
     body::before {
       content: "";
@@ -629,6 +652,35 @@
       color: var(--accent-2);
     }
 
+    .back-to-top {
+      position: fixed;
+      right: 1.2rem;
+      bottom: 1.2rem;
+      padding: 0.65rem 0.9rem;
+      border-radius: 999px;
+      border: 1px solid var(--border);
+      background: rgba(5,3,18,0.85);
+      color: var(--muted);
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      cursor: pointer;
+      box-shadow: var(--shadow-soft);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+    }
+
+    .back-to-top.visible {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0);
+    }
+
+    .back-to-top span.icon {
+      font-size: 1rem;
+    }
+
     @media (max-width: 900px) {
       .hero-grid {
         grid-template-columns: minmax(0,1fr);
@@ -665,6 +717,7 @@
   </style>
 </head>
 <body>
+  <a class="skip-link" href="#top">Skip to main content</a>
   <header class="topbar">
     <div class="container topbar-inner">
       <div class="logo-mark">
@@ -1132,6 +1185,11 @@
     </section>
   </main>
 
+  <button class="back-to-top" type="button" aria-label="Back to top">
+    <span class="icon">⬆️</span>
+    <span>Back to top</span>
+  </button>
+
   <footer class="footer">
     <div class="container footer-inner">
       <div>
@@ -1145,5 +1203,24 @@
       </div>
     </div>
   </footer>
+  <script>
+    const backToTop = document.querySelector('.back-to-top');
+    const toggleBackToTop = () => {
+      if (!backToTop) return;
+      if (window.scrollY > 240) {
+        backToTop.classList.add('visible');
+      } else {
+        backToTop.classList.remove('visible');
+      }
+    };
+
+    if (backToTop) {
+      backToTop.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      });
+      window.addEventListener('scroll', toggleBackToTop);
+      toggleBackToTop();
+    }
+  </script>
 </body>
 </html>
