feat: add YouTube link to header

feat: add initial web UI for scan configuration, status, and reporting with associated assets
Implement Logo.svg in webui index and reports
2026-04-17 18:26:00 +00:00 · 2026-01-03 12:11:52 +11:00 · 2026-01-03 10:27:04 +11:00 · 2026-01-03 10:25:38 +11:00
9 changed files with 2282 additions and 32 deletions
--- a/BCT-Base/Logo.png
+++ b/BCT-Base/Logo.png
--- a/BCT-Base/Logo.svg
+++ b/BCT-Base/Logo.svg
--- a/BCT-Base/index.html
+++ b/BCT-Base/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Beyond Cloud Technology Project Base">
+    <title>Beyond Cloud Technology - Project Base</title>
+    <link rel="icon" type="image/png" href="Logo.png">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="header-content">
+                <h1 class="title">
+                    <img src="Logo.png" alt="BCT Logo" class="title-icon">
+                    Beyond Cloud Technology - Project Title
+                </h1>
+                <p class="subtitle">Project Description Goes Here</p>
+                <a href="https://www.youtube.com/@beyondcloudtechnology" target="_blank" rel="noopener noreferrer"
+                    class="youtube-link">
+                    <svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
+                        <path
+                            d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                    </svg>
+                    Watch on YouTube @beyondcloudtechnology
+                </a>
+            </div>
+            <div class="header-controls">
+                <!-- Theme toggle or other controls can go here -->
+            </div>
+        </header>
+
+        <!-- Main Content Area -->
+        <main class="main-content">
+            <div class="panel">
+                <div class="panel-header">
+                    <div class="panel-icon">🚀</div>
+                    <h2 class="panel-title">Project Content</h2>
+                </div>
+                <p>This is the base template. Add your project content here.</p>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <p>&copy; 2025 Beyond Cloud Technology. All rights reserved.</p>
+        </footer>
+    </div>
+</body>
+
+</html>
--- a/BCT-Base/styles.css
+++ b/BCT-Base/styles.css
@@ -0,0 +1,297 @@
+/* ===================================
+   BEYOND CLOUD TECHNOLOGY - BASE DESIGN SYSTEM
+   =================================== */
+
+/* Import Modern Typography */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* ===================================
+   CSS VARIABLES - DESIGN TOKENS
+   =================================== */
+:root {
+    /* Dark Theme Colors */
+    --color-bg-primary: #0a0e1a;
+    --color-bg-secondary: #131829;
+    --color-bg-tertiary: #1a2035;
+    --color-bg-glass: rgba(26, 32, 53, 0.7);
+    --color-bg-glass-hover: rgba(26, 32, 53, 0.85);
+
+    /* Accent Colors */
+    --color-accent-primary: #6366f1;
+    --color-accent-secondary: #8b5cf6;
+    --color-accent-success: #10b981;
+    --color-accent-warning: #f59e0b;
+    --color-accent-danger: #ef4444;
+    --color-accent-info: #3b82f6;
+
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+
+    /* Text Colors */
+    --color-text-primary: #f8fafc;
+    --color-text-secondary: #cbd5e1;
+    --color-text-tertiary: #94a3b8;
+    --color-text-muted: #64748b;
+
+    /* Border & Shadow */
+    --color-border: rgba(148, 163, 184, 0.1);
+    --color-border-hover: rgba(148, 163, 184, 0.2);
+    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
+
+    /* Spacing */
+    --spacing-xs: 0.5rem;
+    --spacing-sm: 0.75rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+
+    /* Border Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+
+    /* Typography */
+    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
+
+    /* Transitions */
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===================================
+   GLOBAL RESET & BASE STYLES
+   =================================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-primary);
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+    transition: background var(--transition-base), color var(--transition-base);
+}
+
+/* Animated Background */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:
+        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* ===================================
+   LAYOUT STRUCTURE
+   =================================== */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: var(--spacing-xl);
+    position: relative;
+    z-index: 1;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.main-content {
+    flex: 1;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    margin-bottom: var(--spacing-lg);
+    animation: fadeInDown 0.6s ease-out;
+    position: relative;
+    display: block;
+}
+
+.header-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title {
+    font-size: 3rem;
+    font-weight: 700;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: var(--spacing-xs);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    line-height: 1.2;
+}
+
+.title-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    stroke: url(#gradient);
+    color: var(--color-accent-primary);
+    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
+    margin-bottom: var(--spacing-xs);
+}
+
+.subtitle {
+    font-size: 1.125rem;
+    color: var(--color-text-secondary);
+    font-weight: 300;
+    margin-bottom: var(--spacing-sm);
+}
+
+/* YouTube Link */
+.youtube-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
+    color: white;
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    font-size: 0.875rem;
+    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
+    transition: all var(--transition-base);
+    animation: pulse-glow 2s ease-in-out infinite;
+    margin-top: var(--spacing-md);
+}
+
+.youtube-link:hover {
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5);
+    animation: none;
+    color: white;
+}
+
+.youtube-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+}
+
+@keyframes pulse-glow {
+
+    0%,
+    100% {
+        box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 2px 15px rgba(255, 0, 0, 0.5);
+    }
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    margin-top: var(--spacing-2xl);
+    padding: var(--spacing-xl) 0;
+    border-top: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+}
+
+/* ===================================
+   GLASS PANEL COMPONENT
+   =================================== */
+.panel {
+    background: var(--color-bg-glass);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-xl);
+    box-shadow: var(--shadow-md);
+    transition: all var(--transition-base);
+}
+
+.panel:hover {
+    background: var(--color-bg-glass-hover);
+    border-color: var(--color-border-hover);
+    box-shadow: var(--shadow-lg);
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+    padding-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.panel-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-md);
+    font-size: 1.25rem;
+}
+
+.panel-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-text-primary);
+}
+
+/* Animations */
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+    .container {
+        padding: var(--spacing-md);
+    }
+
+    .title {
+        font-size: 2rem;
+    }
+}
--- a/Logo.svg
+++ b/Logo.svg
--- a/webui/assets/Logo.svg
+++ b/webui/assets/Logo.svg
--- a/webui/assets/style.css
+++ b/webui/assets/style.css
@@ -380,3 +380,43 @@ select {
 .tab-content.active {
  display: block;
 }
+
+/* YouTube Link */
+.youtube-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
+    color: white;
+    text-decoration: none;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.875rem;
+    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: pulse-glow 2s ease-in-out infinite;
+    margin-top: 1rem;
+}
+
+.youtube-link:hover {
+    transform: translateY(-2px) scale(1.03);
+    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5);
+    animation: none;
+    color: white;
+}
+
+.youtube-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+}
+
+@keyframes pulse-glow {
+    0%, 100% {
+        box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
+    }
+    50% {
+        box-shadow: 0 2px 15px rgba(255, 0, 0, 0.5);
+    }
+}
--- a/webui/index.php
+++ b/webui/index.php
@@ -7,15 +7,28 @@
    <title>UltyScan - Web Interface</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/style.css">
+    <link rel="icon" type="image/svg+xml" href="assets/Logo.svg">
 </head>

 <body>
    <div class="container">
        <!-- Header -->
        <header class="header">
-            <h1>🔍 UltyScan</h1>
+            <h1 style="display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
+                <img src="assets/Logo.svg" alt="UltyScan Logo" style="height: 1.5em;">
+                UltyScan
+            </h1>
            <p class="subtitle">Attack Surface Management Platform</p>
-            <div style="margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem;">
+
+            <!-- YouTube Link -->
+            <a href="https://www.youtube.com/@beyondcloudtechnology" target="_blank" rel="noopener noreferrer" class="youtube-link">
+                <svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                </svg>
+                Watch on YouTube @beyondcloudtechnology
+            </a>
+
+            <div style="margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem;">
                <span id="scan-status" class="status-badge status-idle">Idle</span>
                <button id="stop-scan-btn" class="btn btn-danger" style="display: none; padding: 0.5rem 1rem; font-size: 0.85rem;" onclick="stopAllScans()">
                    ⏹ Stop Scan
--- a/webui/report.php
+++ b/webui/report.php
@@ -26,9 +26,11 @@ $report = [
 // Helper function to read file safely
 function readFileContent($path, $maxLines = 500)
 {
-    if (!file_exists($path) || !is_readable($path)) return null;
+    if (!file_exists($path) || !is_readable($path))
+        return null;
    $content = file_get_contents($path);
-    if ($content === false) return null;
+    if ($content === false)
+        return null;
    // Limit very long files
    $lines = explode("\n", $content);
    if (count($lines) > $maxLines) {
@@ -42,17 +44,28 @@ function readFileContent($path, $maxLines = 500)
 function categorizeFile($filename)
 {
    $lower = strtolower($filename);
-    if (strpos($lower, 'nmap') !== false) return 'Port Scans';
-    if (strpos($lower, 'nuclei') !== false) return 'Vulnerability Findings';
-    if (strpos($lower, 'nikto') !== false) return 'Web Server Analysis';
-    if (strpos($lower, 'whatweb') !== false) return 'Technology Detection';
-    if (strpos($lower, 'dns') !== false || strpos($lower, 'subdomain') !== false) return 'DNS & Subdomains';
-    if (strpos($lower, 'whois') !== false) return 'WHOIS Information';
-    if (strpos($lower, 'ssl') !== false || strpos($lower, 'cert') !== false) return 'SSL/TLS Analysis';
-    if (strpos($lower, 'dir') !== false || strpos($lower, 'brute') !== false) return 'Directory Discovery';
-    if (strpos($lower, 'host') !== false) return 'Host Information';
-    if (strpos($lower, 'osint') !== false) return 'OSINT Data';
-    if (strpos($lower, 'screenshot') !== false) return 'Screenshots';
+    if (strpos($lower, 'nmap') !== false)
+        return 'Port Scans';
+    if (strpos($lower, 'nuclei') !== false)
+        return 'Vulnerability Findings';
+    if (strpos($lower, 'nikto') !== false)
+        return 'Web Server Analysis';
+    if (strpos($lower, 'whatweb') !== false)
+        return 'Technology Detection';
+    if (strpos($lower, 'dns') !== false || strpos($lower, 'subdomain') !== false)
+        return 'DNS & Subdomains';
+    if (strpos($lower, 'whois') !== false)
+        return 'WHOIS Information';
+    if (strpos($lower, 'ssl') !== false || strpos($lower, 'cert') !== false)
+        return 'SSL/TLS Analysis';
+    if (strpos($lower, 'dir') !== false || strpos($lower, 'brute') !== false)
+        return 'Directory Discovery';
+    if (strpos($lower, 'host') !== false)
+        return 'Host Information';
+    if (strpos($lower, 'osint') !== false)
+        return 'OSINT Data';
+    if (strpos($lower, 'screenshot') !== false)
+        return 'Screenshots';
    return 'Other Findings';
 }

@@ -60,11 +73,13 @@ function categorizeFile($filename)
 function scanWorkspaceFiles($dir, $prefix = '')
 {
    $files = [];
-    if (!is_dir($dir)) return $files;
+    if (!is_dir($dir))
+        return $files;

    $items = scandir($dir);
    foreach ($items as $item) {
-        if ($item === '.' || $item === '..') continue;
+        if ($item === '.' || $item === '..')
+            continue;
        $path = $dir . '/' . $item;
        $relativePath = $prefix . $item;

@@ -128,7 +143,10 @@ $sectionId = 0;
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UltyScan Report - <?php echo htmlspecialchars($name); ?></title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet">
+    <link rel="icon" type="image/svg+xml" href="assets/Logo.svg">
    <style>
        :root {
            --bg-primary: #0f1419;
@@ -521,7 +539,10 @@ $sectionId = 0;
        <!-- Sidebar / Table of Contents -->
        <aside class="sidebar">
            <div class="sidebar-header">
-                <h1>🔍 UltyScan Report</h1>
+                <h1 style="display: flex; align-items: center; gap: 0.5rem;">
+                    <img src="assets/Logo.svg" alt="UltyScan Logo" style="height: 1.25em;">
+                    UltyScan Report
+                </h1>
                <div class="meta"><?php echo htmlspecialchars($name); ?></div>
                <div class="meta"><?php echo $report['modified']; ?></div>
            </div>
@@ -562,10 +583,11 @@ $sectionId = 0;
                </div>
                <div class="stat-card">
                    <div class="number"><?php
-                                        $total = 0;
-                                        foreach ($allFiles as $f) $total += $f['size'];
-                                        echo number_format($total / 1024, 1);
-                                        ?> KB</div>
+                    $total = 0;
+                    foreach ($allFiles as $f)
+                        $total += $f['size'];
+                    echo number_format($total / 1024, 1);
+                    ?> KB</div>
                    <div class="label">Total Size</div>
                </div>
            </div>
@@ -579,15 +601,21 @@ $sectionId = 0;
            <?php
            $sectionId = 0;
            foreach ($sectionOrder as $section):
-                if (!isset($categorized[$section])) continue;
+                if (!isset($categorized[$section]))
+                    continue;
                $files = $categorized[$section];
                $iconClass = 'other';
-                if (strpos($section, 'Port') !== false) $iconClass = 'port';
-                elseif (strpos($section, 'Vuln') !== false) $iconClass = 'vuln';
-                elseif (strpos($section, 'Web') !== false) $iconClass = 'web';
-                elseif (strpos($section, 'DNS') !== false) $iconClass = 'dns';
-                elseif (strpos($section, 'SSL') !== false) $iconClass = 'ssl';
-            ?>
+                if (strpos($section, 'Port') !== false)
+                    $iconClass = 'port';
+                elseif (strpos($section, 'Vuln') !== false)
+                    $iconClass = 'vuln';
+                elseif (strpos($section, 'Web') !== false)
+                    $iconClass = 'web';
+                elseif (strpos($section, 'DNS') !== false)
+                    $iconClass = 'dns';
+                elseif (strpos($section, 'SSL') !== false)
+                    $iconClass = 'ssl';
+                ?>
                <section class="section" id="section-<?php echo $sectionId++; ?>">
                    <div class="section-header">
                        <span class="section-icon <?php echo $iconClass; ?>">
@@ -620,10 +648,12 @@ $sectionId = 0;
                        </div>
                    <?php else: ?>
                        <?php foreach ($files as $file): ?>
-                            <?php if ($file['isBinary']): continue;
+                            <?php if ($file['isBinary']):
+                                continue;
                            endif; ?>
                            <?php $content = readFileContent($file['fullPath']); ?>
-                            <?php if ($content === null || trim($content) === ''): continue;
+                            <?php if ($content === null || trim($content) === ''):
+                                continue;
                            endif; ?>

                            <div class="file-card">
Author	SHA1	Message	Date
DeNNiiInc	8e5ba47d7a	feat: add YouTube link to header	2026-01-03 12:11:52 +11:00
DeNNiiInc	5e005703ba	feat: add initial web UI for scan configuration, status, and reporting with associated assets	2026-01-03 10:27:04 +11:00
DeNNiiInc	3bad151b60	Implement Logo.svg in webui index and reports	2026-01-03 10:25:38 +11:00