|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cerberus Gate - Internal Access Broker (Legitimate Use Only)</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #2c3e50; |
|
|
--secondary: #34495e; |
|
|
--accent: #3498db; |
|
|
--danger: #e74c3c; |
|
|
--success: #2ecc71; |
|
|
--warning: #f39c12; |
|
|
--text: #ecf0f1; |
|
|
--dark-text: #2c3e50; |
|
|
--light-bg: #ecf0f1; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #f5f7fa; |
|
|
color: var(--dark-text); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.security-banner { |
|
|
background-color: var(--warning); |
|
|
color: var(--dark-text); |
|
|
padding: 10px; |
|
|
text-align: center; |
|
|
font-weight: bold; |
|
|
font-size: 14px; |
|
|
} |
|
|
|
|
|
header { |
|
|
background-color: var(--primary); |
|
|
color: var(--text); |
|
|
padding: 1rem 2rem; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
font-size: 1.8rem; |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.logo h1 { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
nav a { |
|
|
color: var(--text); |
|
|
text-decoration: none; |
|
|
font-weight: 500; |
|
|
transition: color 0.3s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
nav a:hover { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.user-actions { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s; |
|
|
border: none; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background-color: var(--accent); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
background-color: #2980b9; |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background-color: transparent; |
|
|
border: 1px solid var(--text); |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.breadcrumb { |
|
|
padding: 1rem 2rem; |
|
|
background-color: var(--light-bg); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.breadcrumb a { |
|
|
color: var(--accent); |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.breadcrumb a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
.container { |
|
|
padding: 2rem; |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.info-boxes { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.info-box { |
|
|
background-color: white; |
|
|
border-radius: 8px; |
|
|
padding: 1.5rem; |
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); |
|
|
border-left: 4px solid var(--accent); |
|
|
} |
|
|
|
|
|
.info-box h3 { |
|
|
margin-bottom: 0.75rem; |
|
|
color: var(--primary); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.info-box i { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.dashboard-stats { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background-color: white; |
|
|
border-radius: 8px; |
|
|
padding: 1.5rem; |
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stat-card .value { |
|
|
font-size: 2rem; |
|
|
font-weight: bold; |
|
|
color: var(--primary); |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
|
|
|
.stat-card .label { |
|
|
font-size: 0.9rem; |
|
|
color: #7f8c8d; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
margin: 2rem 0 1rem; |
|
|
color: var(--primary); |
|
|
padding-bottom: 0.5rem; |
|
|
border-bottom: 2px solid var(--light-bg); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.filter-bar { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 1rem; |
|
|
margin-bottom: 1.5rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.filter-group { |
|
|
background-color: white; |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 4px; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
select, input { |
|
|
padding: 0.5rem; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
min-width: 200px; |
|
|
} |
|
|
|
|
|
.access-table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
background-color: white; |
|
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.access-table th, .access-table td { |
|
|
padding: 1rem; |
|
|
text-align: left; |
|
|
border-bottom: 1px solid #eee; |
|
|
} |
|
|
|
|
|
.access-table th { |
|
|
background-color: var(--primary); |
|
|
color: var(--text); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.access-table tr:hover { |
|
|
background-color: #f9f9f9; |
|
|
} |
|
|
|
|
|
.status-badge { |
|
|
display: inline-block; |
|
|
padding: 0.25rem 0.75rem; |
|
|
border-radius: 50px; |
|
|
font-size: 0.8rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.status-active { |
|
|
background-color: rgba(46, 204, 113, 0.1); |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.status-expired { |
|
|
background-color: rgba(231, 76, 60, 0.1); |
|
|
color: var(--danger); |
|
|
} |
|
|
|
|
|
.status-pending { |
|
|
background-color: rgba(241, 196, 15, 0.1); |
|
|
color: var(--warning); |
|
|
} |
|
|
|
|
|
.action-btn { |
|
|
padding: 0.25rem 0.5rem; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
font-size: 0.85rem; |
|
|
transition: all 0.3s; |
|
|
border: none; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 5px; |
|
|
margin-right: 0.5rem; |
|
|
} |
|
|
|
|
|
.action-btn.view { |
|
|
background-color: rgba(52, 152, 219, 0.1); |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.action-btn.request { |
|
|
background-color: rgba(46, 204, 113, 0.1); |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.action-btn.revoke { |
|
|
background-color: rgba(231, 76, 60, 0.1); |
|
|
color: var(--danger); |
|
|
} |
|
|
|
|
|
.action-btn:hover { |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.pagination { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 0.5rem; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.pagination-btn { |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
background-color: white; |
|
|
border: 1px solid #ddd; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.pagination-btn.active { |
|
|
background-color: var(--accent); |
|
|
color: white; |
|
|
border-color: var(--accent); |
|
|
} |
|
|
|
|
|
.pagination-btn:hover:not(.active) { |
|
|
background-color: #f9f9f9; |
|
|
} |
|
|
|
|
|
footer { |
|
|
background-color: var(--primary); |
|
|
color: var(--text); |
|
|
padding: 2rem; |
|
|
margin-top: 3rem; |
|
|
} |
|
|
|
|
|
.footer-content { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
.footer-section h3 { |
|
|
margin-bottom: 1rem; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.footer-section ul { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-section ul li { |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.footer-section a { |
|
|
color: var(--text); |
|
|
text-decoration: none; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
|
|
|
.footer-section a:hover { |
|
|
color: var(--accent); |
|
|
} |
|
|
|
|
|
.copyright { |
|
|
text-align: center; |
|
|
margin-top: 2rem; |
|
|
padding-top: 1rem; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.5); |
|
|
z-index: 1000; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background-color: white; |
|
|
border-radius: 8px; |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
max-height: 80vh; |
|
|
overflow-y: auto; |
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); |
|
|
animation: modalFadeIn 0.3s; |
|
|
} |
|
|
|
|
|
@keyframes modalFadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
padding: 1.5rem; |
|
|
border-bottom: 1px solid #eee; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
background-color: var(--primary); |
|
|
color: white; |
|
|
border-radius: 8px 8px 0 0; |
|
|
} |
|
|
|
|
|
.modal-header h2 { |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.close-btn { |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.form-group input, .form-group select, .form-group textarea { |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.form-group textarea { |
|
|
min-height: 120px; |
|
|
resize: vertical; |
|
|
} |
|
|
|
|
|
.modal-footer { |
|
|
padding: 1.5rem; |
|
|
border-top: 1px solid #eee; |
|
|
display: flex; |
|
|
justify-content: flex-end; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
header { |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.access-table { |
|
|
display: block; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.filter-bar { |
|
|
flex-direction: column; |
|
|
align-items: stretch; |
|
|
} |
|
|
|
|
|
.filter-group { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
select, input { |
|
|
width: 100%; |
|
|
min-width: auto; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="security-banner"> |
|
|
<i class="fas fa-shield-alt"></i> WARNING: This system is for authorized internal red team use only. All activity is monitored and logged. |
|
|
</div> |
|
|
|
|
|
<header> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-shield-virus"></i> |
|
|
<h1>Cerberus Gate</h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul> |
|
|
<li><a href="#"><i class="fas fa-home"></i> Dashboard</a></li> |
|
|
<li><a href="#"><i class="fas fa-database"></i> Access Catalog</a></li> |
|
|
<li><a href="#"><i class="fas fa-history"></i> Activity Log</a></li> |
|
|
<li><a href="#"><i class="fas fa-file-alt"></i> Reports</a></li> |
|
|
<li><a href="#"><i class="fas fa-cog"></i> Settings</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
<div class="user-actions"> |
|
|
<button class="btn btn-outline"><i class="fas fa-bell"></i></button> |
|
|
<button class="btn btn-primary"><i class="fas fa-user-shield"></i> Admin</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="breadcrumb"> |
|
|
<a href="#">Home</a> / <a href="#">Access Broker</a> / <span>Catalog</span> |
|
|
</div> |
|
|
|
|
|
<div class="container"> |
|
|
<div class="info-boxes"> |
|
|
<div class="info-box"> |
|
|
<h3><i class="fas fa-info-circle"></i> About This System</h3> |
|
|
<p>Cerberus Gate provides controlled access to compromised infrastructure for authorized red team operations. All access must be justified and logged according to internal policy.</p> |
|
|
</div> |
|
|
<div class="info-box"> |
|
|
<h3><i class="fas fa-exclamation-triangle"></i> Rules of Engagement</h3> |
|
|
<p>1. Never access production data. 2. Document all activities. 3. Obtain approval before provisioning. 4. Review the acceptable use policy monthly.</p> |
|
|
</div> |
|
|
<div class="info-box"> |
|
|
<h3><i class="fas fa-calendar-check"></i> Scheduled Maintenance</h3> |
|
|
<p>Next rotation: 2023-08-15 02:00 UTC (All access tokens will be automatically revoked during this window)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="dashboard-stats"> |
|
|
<div class="stat-card"> |
|
|
<i class="fas fa-key" style="color: var(--accent);"></i> |
|
|
<div class="value">247</div> |
|
|
<div class="label">Active Access Points</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<i class="fas fa-user-clock" style="color: var(--warning);"></i> |
|
|
<div class="value">12</div> |
|
|
<div class="label">Pending Requests</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<i class="fas fa-users" style="color: var(--success);"></i> |
|
|
<div class="value">24</div> |
|
|
<div class="label">Authorized Operators</div> |
|
|
</div> |
|
|
<div class="stat-card"> |
|
|
<i class="fas fa-stopwatch" style="color: var(--danger);"></i> |
|
|
<div class="value">3:42:15</div> |
|
|
<div class="label">Avg. Session Duration</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="section-title"><i class="fas fa-database"></i> Access Catalog</h2> |
|
|
|
|
|
<div class="filter-bar"> |
|
|
<div class="filter-group"> |
|
|
<label for="environment">Environment</label> |
|
|
<select id="environment"> |
|
|
<option value="all">All Environments</option> |
|
|
<option value="prod">Production</option> |
|
|
<option value="staging">Staging</option> |
|
|
<option value="dev">Development</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="filter-group"> |
|
|
<label for="asset-type">Asset Type</label> |
|
|
<select id="asset-type"> |
|
|
<option value="all">All Types</option> |
|
|
<option value="server">Server</option> |
|
|
<option value="network">Network Device</option> |
|
|
<option value="api">API Endpoint</option> |
|
|
<option value="db">Database</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="filter-group"> |
|
|
<label for="status">Status</label> |
|
|
<select id="status"> |
|
|
<option value="all">All Statuses</option> |
|
|
<option value="active">Active</option> |
|
|
<option value="pending">Pending</option> |
|
|
<option value="expired">Expired</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="filter-group"> |
|
|
<label for="search"><i class="fas fa-search"></i> Search</label> |
|
|
<input type="text" id="search" placeholder="IP, Hostname, or Description"> |
|
|
</div> |
|
|
<button class="btn btn-primary" onclick="openNewAccessModal()"><i class="fas fa-plus"></i> New Access Request</button> |
|
|
</div> |
|
|
|
|
|
<table class="access-table"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>ID</th> |
|
|
<th>Asset Name</th> |
|
|
<th>Type</th> |
|
|
<th>Environment</th> |
|
|
<th>Access Method</th> |
|
|
<th>Status</th> |
|
|
<th>Expires</th> |
|
|
<th>Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td>#RED-4829</td> |
|
|
<td>prod-web-srv-01</td> |
|
|
<td>Web Server</td> |
|
|
<td>Production</td> |
|
|
<td>SSH Key</td> |
|
|
<td><span class="status-badge status-active">Active</span></td> |
|
|
<td>2023-08-14</td> |
|
|
<td> |
|
|
<button class="action-btn view"><i class="fas fa-eye"></i> View</button> |
|
|
<button class="action-btn revoke"><i class="fas fa-ban"></i> Revoke</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>#RED-5731</td> |
|
|
<td>payment-api-gateway</td> |
|
|
<td>API Endpoint</td> |
|
|
<td>Staging</td> |
|
|
<td>API Token</td> |
|
|
<td><span class="status-badge status-active">Active</span></td> |
|
|
<td>2023-08-12</td> |
|
|
<td> |
|
|
<button class="action-btn view"><i class="fas fa-eye"></i> View</button> |
|
|
<button class="action-btn revoke"><i class="fas fa-ban"></i> Revoke</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>#RED-6194</td> |
|
|
<td>internal-db-02</td> |
|
|
<td>Database</td> |
|
|
<td>Development</td> |
|
|
<td>Credentials</td> |
|
|
<td><span class="status-badge status-pending">Pending</span></td> |
|
|
<td>N/A</td> |
|
|
<td> |
|
|
<button class="action-btn view"><i class="fas fa-eye"></i> View</button> |
|
|
<button class="action-btn request"><i class="fas fa-check"></i> Approve</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>#RED-5023</td> |
|
|
<td>vpn-edge-router</td> |
|
|
<td>Network Device</td> |
|
|
<td>Production</td> |
|
|
<td>SSH Key</td> |
|
|
<td><span class="status-badge status-expired">Expired</span></td> |
|
|
<td>2023-07-29</td> |
|
|
<td> |
|
|
<button class="action-btn view"><i class="fas fa-eye"></i> View</button> |
|
|
<button class="action-btn request"><i class="fas fa-sync"></i> Renew</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td>#RED-6921</td> |
|
|
<td>auth-service</td> |
|
|
<td>API Endpoint</td> |
|
|
<td>Staging</td> |
|
|
<td>API Token</td> |
|
|
<td><span class="status-badge status-active">Active</span></td> |
|
|
<td>2023-08-18</td> |
|
|
<td> |
|
|
<button class="action-btn view"><i class="fas fa-eye"></i> View</button> |
|
|
<button class="action-btn revoke"><i class="fas fa-ban"></i> Revoke</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
|
|
|
<div class="pagination"> |
|
|
<button class="pagination-btn"><i class="fas fa-angle-left"></i></button> |
|
|
<button class="pagination-btn active">1</button> |
|
|
<button class="pagination-btn">2</button> |
|
|
<button class="pagination-btn">3</button> |
|
|
<button class="pagination-btn"><i class="fas fa-angle-right"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer> |
|
|
<div class="footer-content"> |
|
|
<div class="footer-section"> |
|
|
<h3>Cerberus Gate</h3> |
|
|
<p>Controlled access platform for authorized red team operations and security research.</p> |
|
|
</div> |
|
|
<div class="footer-section"> |
|
|
<h3>Quick Links</h3> |
|
|
<ul> |
|
|
<li><a href="#">Documentation</a></li> |
|
|
<li><a href="#">Training Materials</a></li> |
|
|
<li><a href="#">Incident Response</a></li> |
|
|
<li><a href="#">Acceptable Use Policy</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-section"> |
|
|
<h3>Support</h3> |
|
|
<ul> |
|
|
<li><a href="#"><i class="fas fa-envelope"></i> [email protected]</a></li> |
|
|
<li><a href="#"><i class="fas fa-phone"></i> (555) SEC-REDS</a></li> |
|
|
<li><a href="#"><i class="fas fa-calendar"></i> Schedule Rotation</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="copyright"> |
|
|
<p>© 2023 Cerberus Gate Internal Red Team. All rights reserved. Unauthorized access prohibited.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="newAccessModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h2><i class="fas fa-plus-circle"></i> New Access Request</h2> |
|
|
<button class="close-btn" onclick="closeModal()">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="form-group"> |
|
|
<label for="target-asset">Target Asset</label> |
|
|
<select id="target-asset"> |
|
|
<option value="">Select an asset...</option> |
|
|
<option value="prod-web-srv-01">prod-web-srv-01</option> |
|
|
<option value="payment-api-gateway">payment-api-gateway</option> |
|
|
<option value="internal-db-02">internal-db-02</option> |
|
|
<option value="vpn-edge-router">vpn-edge-router</option> |
|
|
<option value="auth-service">auth-service</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="access-type">Access Type</label> |
|
|
<select id="access-type"> |
|
|
<option value="">Select access type...</option> |
|
|
<option value="ssh">SSH Key</option> |
|
|
<option value="api">API Token</option> |
|
|
<option value="credentials">User Credentials</option> |
|
|
<option value="session">Temporary Session</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="duration">Duration</label> |
|
|
<select id="duration"> |
|
|
<option value="6">6 hours</option> |
|
|
<option value="12">12 hours</option> |
|
|
<option value="24" selected>24 hours</option> |
|
|
<option value="48">48 hours</option> |
|
|
<option value="72">72 hours</option> |
|
|
<option value="custom">Custom</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="justification">Justification (Required)</label> |
|
|
<textarea id="justification" placeholder="Describe why you need this access and how it will be used..."></textarea> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="ticket-ref">Ticket/Reference #</label> |
|
|
<input type="text" id="ticket-ref" placeholder="ITSM-XXXXXX or SECOPS-XXXXXX"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-outline" onclick="closeModal()">Cancel</button> |
|
|
<button class="btn btn-primary">Submit Request</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="viewAccessModal" class="modal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h2><i class="fas fa-eye"></i> Access Details</h2> |
|
|
<button class="close-btn" onclick="closeModal()">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 1.5rem;"> |
|
|
<div> |
|
|
<h3>prod-web-srv-01</h3> |
|
|
<span class="status-badge status-active">Active</span> |
|
|
</div> |
|
|
<div style="text-align: right;"> |
|
|
<p><strong>ID:</strong> #RED-4829</p> |
|
|
<p><strong>Expires:</strong> 2023-08-14 23:59 UTC</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="info-box" style="margin-bottom: 1.5rem;"> |
|
|
<h4><i class="fas fa-info-circle"></i> Connection Details</h4> |
|
|
<p><strong>Access Method:</strong> SSH Key</p> |
|
|
<p><strong>Host:</strong> 192.168.10.15</p> |
|
|
<p><strong>Port:</strong> 2222</p> |
|
|
<p><strong>Username:</strong> redteam-4829</p> |
|
|
<div style="margin-top: 1rem;"> |
|
|
<button class="btn btn-primary" style="width: 100%;"> |
|
|
<i class="fas fa-key"></i> Download SSH Key (encrypted) |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<h4><i class="fas fa-history"></i> Activity Log</h4> |
|
|
<div style="background: #f9f9f9; padding: 1rem; border-radius: 4px; max-height: 200px; overflow-y: auto;"> |
|
|
<p><small>2023-08-10 14:32 - Access granted to operatord</small></p> |
|
|
<p><small>2023-08-10 14:45 - First login detected from 10.20.30.45</small></p> |
|
|
<p><small>2023-08-10 15:12 - Session established for vulnerability scan</small></p> |
|
|
<p><small>2023-08-11 09:15 - Second login from 10.20.30.45</small></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-outline">Extend Access</button> |
|
|
<button class="btn btn-danger" onclick="showConfirmationModal()">Revoke Access</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="confirmModal" class="modal"> |
|
|
<div class="modal-content" style="max-width: 500px;"> |
|
|
<div class="modal-header" style="background-color: var(--danger);"> |
|
|
<h2><i class="fas fa-exclamation-triangle"></i> Confirm Action</h2> |
|
|
<button class="close-btn" onclick="closeModal()">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<p>Are you sure you want to revoke access to <strong>prod-web-srv-01 (RED-4829)</strong>?</p> |
|
|
<p>This action cannot be undone. All active sessions will be terminated immediately.</p> |
|
|
<div class="form-group" style="margin-top: 1rem;"> |
|
|
<label for="revoke-reason">Reason for Revocation (Required)</label> |
|
|
<textarea id="revoke-reason" placeholder="Provide a reason for revoking this access..."></textarea> |
|
|
</div> |
|
|
</div> |
|
|
<div class="modal-footer"> |
|
|
<button class="btn btn-outline" onclick="closeModal()">Cancel</button> |
|
|
<button class="btn btn-danger">Confirm Revocation</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function openNewAccessModal() { |
|
|
document.getElementById('newAccessModal').style.display = 'flex'; |
|
|
} |
|
|
|
|
|
function openViewAccessModal() { |
|
|
document.getElementById('viewAccessModal').style.display = 'flex'; |
|
|
} |
|
|
|
|
|
function showConfirmationModal() { |
|
|
closeModal(); |
|
|
document.getElementById('confirmModal').style.display = 'flex'; |
|
|
} |
|
|
|
|
|
function closeModal() { |
|
|
document.querySelectorAll('.modal').forEach(modal => { |
|
|
modal.style.display = 'none'; |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
window.onclick = function(event) { |
|
|
if (event.target.classList.contains('modal')) { |
|
|
closeModal(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.access-table tbody tr').forEach(row => { |
|
|
row.addEventListener('click', function(e) { |
|
|
|
|
|
if (!e.target.closest('button')) { |
|
|
openViewAccessModal(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('search').addEventListener('input', function() { |
|
|
const searchTerm = this.value.toLowerCase(); |
|
|
filterTable(searchTerm); |
|
|
}); |
|
|
|
|
|
function filterTable(searchTerm) { |
|
|
const rows = document.querySelectorAll('.access-table tbody tr'); |
|
|
|
|
|
rows.forEach(row => { |
|
|
const textContent = row.textContent.toLowerCase(); |
|
|
if (textContent.includes(searchTerm)) { |
|
|
row.style.display = ''; |
|
|
} else { |
|
|
row.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('status').addEventListener('change', function() { |
|
|
const status = this.value; |
|
|
const rows = document.querySelectorAll('.access-table tbody tr'); |
|
|
|
|
|
rows.forEach(row => { |
|
|
const rowStatus = row.querySelector('.status-badge').textContent.toLowerCase(); |
|
|
|
|
|
if (status === 'all' || rowStatus.includes(status)) { |
|
|
row.style.display = ''; |
|
|
} else { |
|
|
row.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
