mirror of
https://github.com/AnLoMinus/Diablo.git
synced 2026-02-12 14:02:47 +00:00
Enhance landing page accessibility and readiness guidance
This commit is contained in:
⚜️ A̍ͭͩnLͭ̇̎̏̒oͩM̳͇i͎̞̝̪n̹̘̓ͣ̓͊̓ů͕̈s̙͉͎̫̈̌̇̐̂ ⚜️
parent
dd155b7e8d
commit
aec3ef4e29
204
index.html
204
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 & 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>
|
||||
|
||||
Reference in New Issue
Block a user