Spaces:

amarck
/

sitetest

Running

App Files Files Community

amarck commited on Mar 31

Commit

121c5ee

verified ·

1 Parent(s): d08bad2

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +937 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Sitetest
-emoji: 🌍
-colorFrom: purple
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: sitetest
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,937 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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 styles */
+        .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;
+        }
+        /* Responsive adjustments */
+        @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>&copy; 2023 Cerberus Gate Internal Red Team. All rights reserved. Unauthorized access prohibited.</p>
+        </div>
+    </footer>
+    <!-- New Access Request Modal -->
+    <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()">&times;</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>
+    <!-- View Access Modal -->
+    <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()">&times;</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>
+    <!-- Confirmation Modal -->
+    <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()">&times;</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>
+        // Modal functions
+        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';
+            });
+        }
+        // Close modal when clicking outside content
+        window.onclick = function(event) {
+            if (event.target.classList.contains('modal')) {
+                closeModal();
+            }
+        }
+        // Table row click handler (for view modal)
+        document.querySelectorAll('.access-table tbody tr').forEach(row => {
+            row.addEventListener('click', function(e) {
+                // Don't open if clicking on a button
+                if (!e.target.closest('button')) {
+                    openViewAccessModal();
+                }
+            });
+        });
+        // Filter functionality
+        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';
+                }
+            });
+        }
+        // Status filter
+        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>