From aec3ef4e29fbba3462453ccac91113c7f3210076 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:32:02 +0200
Subject: [PATCH] Enhance landing page accessibility and readiness guidance

---
 index.html | 204 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 202 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 17dbf2c..0cbaa83 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,27 @@
       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,
+    .skip-link:focus-visible {
+      left: 1rem;
+      outline: 2px solid var(--accent-2);
+      outline-offset: 3px;
+    }
+
     /* Subtle noise / scanline overlay */
     body::before {
       content: "";
@@ -534,6 +560,77 @@
       margin-bottom: 0.15rem;
     }
 
+    .note-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 1rem;
+    }
+
+    .note-card {
+      background: var(--card-bg);
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      padding: 1rem;
+      box-shadow: var(--shadow-soft);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .note-card::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: radial-gradient(circle at 20% 15%, var(--accent-soft), transparent 65%);
+      opacity: 0.7;
+      pointer-events: none;
+    }
+
+    .note-title {
+      margin: 0 0 0.4rem;
+      font-size: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+    }
+
+    .note-title span.icon {
+      font-size: 1.2rem;
+    }
+
+    .note-body {
+      color: var(--muted);
+      font-size: 0.9rem;
+      margin: 0 0 0.7rem;
+    }
+
+    .checklist {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: grid;
+      gap: 0.45rem;
+    }
+
+    .checklist-item {
+      display: flex;
+      align-items: center;
+      gap: 0.55rem;
+      font-size: 0.9rem;
+      color: var(--muted);
+    }
+
+    .status-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      display: inline-block;
+      box-shadow: 0 0 14px rgba(255, 0, 51, 0.35);
+    }
+
+    .status-dot.ready { background: #36ff92; box-shadow: 0 0 14px rgba(54,255,146,0.55); }
+    .status-dot.warn { background: #f0c94f; box-shadow: 0 0 14px rgba(240,201,79,0.45); }
+    .status-dot.info { background: #00d1ff; box-shadow: 0 0 14px rgba(0,209,255,0.45); }
+
     .step-title {
       font-size: 0.9rem;
       margin-bottom: 0.3rem;
@@ -629,6 +726,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);
@@ -645,6 +771,9 @@
       .split {
         grid-template-columns: minmax(0,1fr);
       }
+      .note-grid {
+        grid-template-columns: minmax(0,1fr);
+      }
     }
 
     @media (max-width: 640px) {
@@ -662,9 +791,19 @@
         grid-template-columns: minmax(0,1fr);
       }
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+      }
+    }
   </style>
 </head>
 <body>
+  <a class="skip-link" href="#main-content">Skip to main content</a>
   <header class="topbar">
     <div class="container topbar-inner">
       <div class="logo-mark">
@@ -674,11 +813,12 @@
           <div class="logo-text-sub">PENTESTING · HACKING · REPORTING</div>
         </div>
       </div>
-      <nav class="nav-links">
+      <nav class="nav-links" aria-label="Primary">
         <a href="#about">About</a>
         <a href="#features">Features</a>
         <a href="#install">Install</a>
         <a href="#usage">Usage</a>
+        <a href="#readiness">Readiness</a>
         <a href="#docs">Docs</a>
         <a href="#roadmap">Roadmap</a>
         <a href="#security">Security</a>
@@ -686,7 +826,7 @@
     </div>
   </header>
 
-  <main>
+  <main id="main-content">
     <!-- HERO -->
     <section class="section hero" id="top">
       <div class="container hero-grid">
@@ -1058,6 +1198,42 @@
       </div>
     </section>
 
+    <!-- READINESS -->
+    <section class="section" id="readiness">
+      <div class="container">
+        <div class="section-header">
+          <div class="section-kicker">✅ Readiness</div>
+          <h2 class="section-title">Pre-flight &amp; Reporting Guardrails</h2>
+          <p class="section-description">
+            Use these quick checks before starting and before handing off any report.
+            They keep engagements traceable, authorized and consistent.
+          </p>
+        </div>
+
+        <div class="note-grid">
+          <article class="note-card">
+            <h3 class="note-title"><span class="icon">📝</span> Before You Run Diablo</h3>
+            <p class="note-body">Ensure the environment is safe to touch and every action is approved.</p>
+            <ul class="checklist">
+              <li class="checklist-item"><span class="status-dot ready" aria-hidden="true"></span>Authorization and scope are documented.</li>
+              <li class="checklist-item"><span class="status-dot info" aria-hidden="true"></span>Network changes are coordinated with owners.</li>
+              <li class="checklist-item"><span class="status-dot warn" aria-hidden="true"></span>Fallback contacts are ready if services degrade.</li>
+            </ul>
+          </article>
+
+          <article class="note-card">
+            <h3 class="note-title"><span class="icon">📤</span> Before You Deliver</h3>
+            <p class="note-body">Ship only what is necessary for remediation and learning.</p>
+            <ul class="checklist">
+              <li class="checklist-item"><span class="status-dot ready" aria-hidden="true"></span>Sensitive or out-of-scope data removed.</li>
+              <li class="checklist-item"><span class="status-dot info" aria-hidden="true"></span>Risks prioritized with actionable fixes.</li>
+              <li class="checklist-item"><span class="status-dot warn" aria-hidden="true"></span>Logs archived securely for audit and lessons learned.</li>
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+
     <!-- DOCS & ROADMAP -->
     <section class="section" id="docs">
       <div class="container">
@@ -1132,6 +1308,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 +1326,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>