Spaces:

api-ix
/

Paid

Running

App Files Files Community

api-ix commited on Nov 26, 2025

Commit

8a0305e

verified ·

1 Parent(s): f2f5d8f

Update index.html

Browse files

Files changed (1) hide show

index.html +647 -18

index.html CHANGED Viewed

@@ -1,19 +1,648 @@
-<!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>SentinelGuard | Enterprise Cyber Security Solutions</title>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* --- CSS VARIABLES & RESET --- */
+        :root {
+            --primary-color: #00ff88; /* Cyber Green */
+            --secondary-color: #00d2ff; /* Cyber Blue */
+            --bg-dark: #0a0b10;
+            --bg-card: #14161f;
+            --text-main: #e0e0e0;
+            --text-muted: #94a3b8;
+            --font-main: 'Inter', sans-serif;
+            --font-code: 'JetBrains Mono', monospace;
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: var(--font-main);
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        a { text-decoration: none; color: inherit; }
+        ul { list-style: none; }
+        /* --- UTILITIES --- */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        .btn {
+            display: inline-block;
+            padding: 12px 28px;
+            border-radius: 4px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            cursor: pointer;
+            transition: var(--transition);
+            font-size: 0.9rem;
+        }
+        .btn-primary {
+            background: transparent;
+            border: 1px solid var(--primary-color);
+            color: var(--primary-color);
+            box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
+        }
+        .btn-primary:hover {
+            background: var(--primary-color);
+            color: var(--bg-dark);
+            box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
+        }
+        .section-title {
+            text-align: center;
+            margin-bottom: 60px;
+        }
+        .section-title h2 {
+            font-size: 2.5rem;
+            margin-bottom: 15px;
+        }
+        .section-title span {
+            color: var(--primary-color);
+            font-family: var(--font-code);
+            font-size: 0.9rem;
+        }
+        /* --- HEADER --- */
+        header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: rgba(10, 11, 16, 0.9);
+            backdrop-filter: blur(10px);
+            z-index: 1000;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 80px;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 800;
+            color: white;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .logo i { color: var(--primary-color); }
+        .nav-links {
+            display: flex;
+            gap: 30px;
+        }
+        .nav-links a {
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: var(--text-muted);
+            transition: var(--transition);
+        }
+        .nav-links a:hover { color: var(--primary-color); }
+        .mobile-menu-btn {
+            display: none;
+            color: white;
+            font-size: 1.5rem;
+            cursor: pointer;
+        }
+        /* --- HERO SECTION --- */
+        .hero {
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            background: radial-gradient(circle at center, #1a1d29 0%, var(--bg-dark) 70%);
+            padding-top: 80px;
+            position: relative;
+        }
+        /* Background Grid Effect */
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; width: 100%; height: 100%;
+            background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+            background-size: 50px 50px;
+            pointer-events: none;
+        }
+        .hero-content {
+            z-index: 1;
+            max-width: 800px;
+            animation: fadeIn 1s ease-out;
+        }
+        .status-badge {
+            display: inline-block;
+            background: rgba(0, 255, 136, 0.1);
+            color: var(--primary-color);
+            padding: 5px 15px;
+            border-radius: 20px;
+            font-family: var(--font-code);
+            font-size: 0.8rem;
+            margin-bottom: 20px;
+            border: 1px solid rgba(0, 255, 136, 0.2);
+        }
+        .hero h1 {
+            font-size: 3.5rem;
+            margin-bottom: 20px;
+            line-height: 1.2;
+        }
+        .hero p {
+            color: var(--text-muted);
+            font-size: 1.1rem;
+            margin-bottom: 30px;
+        }
+        /* --- SERVICES SECTION --- */
+        .services {
+            padding: 100px 0;
+        }
+        .services-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+        }
+        .service-card {
+            background: var(--bg-card);
+            padding: 40px;
+            border-radius: 8px;
+            border: 1px solid rgba(255,255,255,0.05);
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+        .service-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--primary-color);
+        }
+        .service-card i {
+            font-size: 2.5rem;
+            color: var(--secondary-color);
+            margin-bottom: 25px;
+        }
+        .service-card h3 {
+            margin-bottom: 15px;
+            font-size: 1.3rem;
+        }
+        .service-card p {
+            color: var(--text-muted);
+            font-size: 0.95rem;
+        }
+        /* --- STATS SECTION --- */
+        .stats {
+            background: linear-gradient(90deg, #0f1118 0%, #161922 100%);
+            padding: 60px 0;
+            border-top: 1px solid rgba(255,255,255,0.05);
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        .stats-container {
+            display: flex;
+            justify-content: space-around;
+            flex-wrap: wrap;
+            text-align: center;
+        }
+        .stat-item h3 {
+            font-size: 2.5rem;
+            color: white;
+            margin-bottom: 5px;
+        }
+        .stat-item p {
+            color: var(--primary-color);
+            font-family: var(--font-code);
+            font-size: 0.9rem;
+        }
+        /* --- ABOUT/WHY US --- */
+        .about {
+            padding: 100px 0;
+            display: flex;
+            align-items: center;
+        }
+        .about-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 50px;
+            align-items: center;
+        }
+        .about-image {
+            background: #14161f;
+            height: 400px;
+            border-radius: 8px;
+            position: relative;
+            border: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        /* Simulated Terminal Graphics */
+        .terminal-window {
+            width: 80%;
+            background: #000;
+            border-radius: 5px;
+            padding: 15px;
+            font-family: var(--font-code);
+            font-size: 0.8rem;
+            box-shadow: 0 0 20px rgba(0,0,0,0.5);
+        }
+        .code-line { margin-bottom: 5px; display: block;}
+        .green-text { color: var(--primary-color); }
+        .blue-text { color: var(--secondary-color); }
+        .about-content ul {
+            margin-top: 20px;
+        }
+        .about-content li {
+            margin-bottom: 15px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .about-content li i {
+            color: var(--primary-color);
+        }
+        /* --- CONTACT SECTION --- */
+        .contact {
+            padding: 100px 0;
+            background: #0e0f14;
+        }
+        .contact-container {
+            max-width: 600px;
+            margin: 0 auto;
+            background: var(--bg-card);
+            padding: 40px;
+            border-radius: 8px;
+            border: 1px solid rgba(255,255,255,0.05);
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+            font-family: var(--font-code);
+        }
+        .form-control {
+            width: 100%;
+            padding: 12px;
+            background: var(--bg-dark);
+            border: 1px solid rgba(255,255,255,0.1);
+            color: white;
+            border-radius: 4px;
+            font-family: var(--font-main);
+        }
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary-color);
+        }
+        /* --- FOOTER --- */
+        footer {
+            padding: 50px 0 20px;
+            border-top: 1px solid rgba(255,255,255,0.05);
+            text-align: center;
+        }
+        .footer-logo {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 20px;
+            display: block;
+        }
+        .social-links {
+            margin-bottom: 20px;
+        }
+        .social-links a {
+            margin: 0 10px;
+            font-size: 1.2rem;
+            color: var(--text-muted);
+            transition: var(--transition);
+        }
+        .social-links a:hover { color: var(--primary-color); }
+        .copyright {
+            color: var(--text-muted);
+            font-size: 0.8rem;
+        }
+        /* --- RESPONSIVE --- */
+        @media (max-width: 768px) {
+            .hero h1 { font-size: 2.5rem; }
+            .nav-links {
+                display: none;
+                flex-direction: column;
+                position: absolute;
+                top: 80px;
+                left: 0;
+                width: 100%;
+                background: var(--bg-card);
+                padding: 20px;
+                text-align: center;
+            }
+            .nav-links.active { display: flex; }
+            .mobile-menu-btn { display: block; }
+            .about-grid { grid-template-columns: 1fr; }
+            .stats-container { gap: 30px; }
+        }
+        /* --- ANIMATION --- */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container">
+            <nav>
+                <a href="#" class="logo">
+                    <i class="fa-solid fa-shield-halved"></i> SentinelGuard
+                </a>
+                <ul class="nav-links">
+                    <li><a href="#services">Services</a></li>
+                    <li><a href="#about">About</a></li>
+                    <li><a href="#stats">Impact</a></li>
+                    <li><a href="#contact" style="color: var(--primary-color);">Contact Us</a></li>
+                </ul>
+                <div class="mobile-menu-btn">
+                    <i class="fa-solid fa-bars"></i>
+                </div>
+            </nav>
+        </div>
+    </header>
+    <section class="hero">
+        <div class="container hero-content">
+            <span class="status-badge"><i class="fa-solid fa-circle-check"></i> Systems Operational</span>
+            <h1>Fortify Your Digital Infrastructure</h1>
+            <p>Advanced penetration testing, real-time threat monitoring, and enterprise compliance solutions. We protect your data so you can focus on your business.</p>
+            <a href="#contact" class="btn btn-primary">Secure Your Assets</a>
+        </div>
+    </section>
+    <section class="stats" id="stats">
+        <div class="container stats-container">
+            <div class="stat-item">
+                <h3>500+</h3>
+                <p>Vulnerabilities Patched</p>
+            </div>
+            <div class="stat-item">
+                <h3>24/7</h3>
+                <p>SOC Monitoring</p>
+            </div>
+            <div class="stat-item">
+                <h3>100%</h3>
+                <p>Compliance Rate</p>
+            </div>
+        </div>
+    </section>
+    <section class="services" id="services">
+        <div class="container">
+            <div class="section-title">
+                <span>/ OUR CAPABILITIES</span>
+                <h2>Defense Mechanisms</h2>
+            </div>
+            <div class="services-grid">
+                <div class="service-card">
+                    <i class="fa-solid fa-bug"></i>
+                    <h3>Penetration Testing</h3>
+                    <p>Our ethical hackers simulate real-world attacks to identify weak points in your web apps, mobile apps, and network infrastructure before bad actors do.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fa-solid fa-network-wired"></i>
+                    <h3>Network Security</h3>
+                    <p>Implementation of next-gen firewalls, intrusion detection systems (IDS), and secure architecture design to harden your internal perimeter.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fa-solid fa-file-shield"></i>
+                    <h3>Compliance & Audit</h3>
+                    <p>Full-scale consultancy for GDPR, HIPAA, SOC2, and ISO 27001 compliance. We generate detailed reports to satisfy auditors and regulators.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fa-solid fa-tower-broadcast"></i>
+                    <h3>Incident Response</h3>
+                    <p>A rapid-response team on standby 24/7. When a breach occurs, we contain the threat, eradicate the malware, and recover your data.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fa-solid fa-user-secret"></i>
+                    <h3>Phishing Simulations</h3>
+                    <p>Train your employees to recognize social engineering attacks through customized, safe email phishing campaigns and educational workshops.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fa-solid fa-cloud-lock"></i>
+                    <h3>Cloud Security</h3>
+                    <p>Specialized security configurations for AWS, Azure, and Google Cloud environments, ensuring your S3 buckets and instances are locked down.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="about" id="about">
+        <div class="container">
+            <div class="about-grid">
+                <div class="about-image">
+                    <div class="terminal-window">
+                        <span class="code-line blue-text">root@sentinel:~#</span> <span class="code-line">./scan_network.sh -v</span>
+                        <br>
+                        <span class="code-line">Initializing scan... [OK]</span>
+                        <span class="code-line">Checking firewall ports... <span class="green-text">SECURE</span></span>
+                        <span class="code-line">Analyzing traffic patterns... <span class="green-text">NORMAL</span></span>
+                        <span class="code-line">Detecting anomalies... <span class="green-text">NONE FOUND</span></span>
+                        <br>
+                        <span class="code-line blue-text">root@sentinel:~#</span> <span class="code-line">_</span>
+                    </div>
+                </div>
+                <div class="about-content">
+                    <div class="section-title" style="text-align: left; margin-bottom: 20px;">
+                        <span>/ WHO WE ARE</span>
+                        <h2>Elite Cyber Intelligence</h2>
+                    </div>
+                    <p>SentinelGuard was founded by former military intelligence officers and Fortune 500 security architects. We don't just use tools; we understand the psychology of the attacker.</p>
+                    <ul>
+                        <li><i class="fa-solid fa-check"></i> Certified Ethical Hackers (CEH)</li>
+                        <li><i class="fa-solid fa-check"></i> CISSP Certified Consultants</li>
+                        <li><i class="fa-solid fa-check"></i> Military-Grade Encryption Standards</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="contact" id="contact">
+        <div class="container">
+            <div class="section-title">
+                <span>/ GET IN TOUCH</span>
+                <h2>Request a Consultation</h2>
+            </div>
+            <div class="contact-container">
+                <form id="contactForm">
+                    <div class="form-group">
+                        <label>Company Name</label>
+                        <input type="text" class="form-control" placeholder="e.g. Acme Corp" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Email Address</label>
+                        <input type="email" class="form-control" placeholder="security@acme.com" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Service of Interest</label>
+                        <select class="form-control">
+                            <option>Penetration Testing</option>
+                            <option>Compliance Audit</option>
+                            <option>Incident Response Retainer</option>
+                            <option>General Inquiry</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Message</label>
+                        <textarea class="form-control" rows="4" placeholder="Briefly describe your security needs..."></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary" style="width: 100%;">Initialize Comm Link</button>
+                </form>
+            </div>
+        </div>
+    </section>
+    <footer>
+        <div class="container">
+            <a href="#" class="footer-logo">SentinelGuard</a>
+            <div class="social-links">
+                <a href="#"><i class="fa-brands fa-linkedin"></i></a>
+                <a href="#"><i class="fa-brands fa-twitter"></i></a>
+                <a href="#"><i class="fa-brands fa-github"></i></a>
+            </div>
+            <p class="copyright">&copy; 2023 SentinelGuard Security Inc. All Systems Operational.</p>
+        </div>
+    </footer>
+    <script>
+        // Mobile Menu Toggle
+        const mobileBtn = document.querySelector('.mobile-menu-btn');
+        const navLinks = document.querySelector('.nav-links');
+        mobileBtn.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+        // Smooth Scrolling for Anchors
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                navLinks.classList.remove('active'); // Close menu on click
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        // Simple Form Handler (Prevents refresh for demo)
+        document.getElementById('contactForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const btn = this.querySelector('button');
+            const originalText = btn.innerText;
+            btn.innerText = "Transmitting...";
+            btn.style.opacity = "0.7";
+            setTimeout(() => {
+                btn.innerText = "Message Sent Successfully";
+                btn.style.background = "var(--primary-color)";
+                btn.style.color = "var(--bg-dark)";
+                this.reset();
+                setTimeout(() => {
+                    btn.innerText = originalText;
+                    btn.style.background = "transparent";
+                    btn.style.color = "var(--primary-color)";
+                    btn.style.opacity = "1";
+                }, 3000);
+            }, 1500);
+        });
+        // Scroll Animation (Fade Up)
+        const observerOptions = {
+            threshold: 0.1
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = "1";
+                    entry.target.style.transform = "translateY(0)";
+                }
+            });
+        }, observerOptions);
+        document.querySelectorAll('.service-card, .section-title, .about-grid').forEach(el => {
+            el.style.opacity = "0";
+            el.style.transform = "translateY(20px)";
+            el.style.transition = "all 0.6s ease-out";
+            observer.observe(el);
+        });
+    </script>
+</body>
 </html>