webpass/templates/dashboard.html

{% extends "base.html" %}
{% block title %}Command Center{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="row g-4 mb-4">
    <div class="col-md-3 fade-in-up" style="animation-delay: 0.1s;">
        <div class="cyber-card p-3 d-flex justify-content-between align-items-center">
            <div>
                <h6 class="text-muted text-uppercase small">Identity</h6>
                <h4 class="mb-0">{{ credential.username if credential else 'Guest' }}</h4>
            </div>
            <div class="bg-primary bg-opacity-10 p-3 rounded-circle">
                <i class="bi bi-person-bounding-box fs-4 text-primary"></i>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 fade-in-up" style="animation-delay: 0.2s;">
        <div class="cyber-card p-3 d-flex justify-content-between align-items-center">
            <div>
                <h6 class="text-muted text-uppercase small">System Status</h6>
                <h4 class="mb-0 text-success">Online</h4>
            </div>
            <div class="bg-success bg-opacity-10 p-3 rounded-circle">
                <i class="bi bi-cpu fs-4 text-success"></i>
            </div>
        </div>
    </div>

    <div class="col-md-3 fade-in-up" style="animation-delay: 0.3s;">
        <div class="cyber-card p-3 d-flex justify-content-between align-items-center">
            <div>
                <h6 class="text-muted text-uppercase small">Encryption</h6>
                <h4 class="mb-0">AES-GCM</h4>
            </div>
            <div class="bg-warning bg-opacity-10 p-3 rounded-circle">
                <i class="bi bi-shield-check fs-4 text-warning"></i>
            </div>
        </div>
    </div>

    <div class="col-md-3 fade-in-up" style="animation-delay: 0.4s;">
        <div class="cyber-card p-3 d-flex justify-content-between align-items-center">
            <div>
                <h6 class="text-muted text-uppercase small">Connection</h6>
                <h4 class="mb-0">Secure</h4>
            </div>
            <div class="bg-danger bg-opacity-10 p-3 rounded-circle">
                <i class="bi bi-wifi fs-4 text-danger"></i>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8 fade-in-up" style="animation-delay: 0.5s;">
        <div class="cyber-card h-100 p-4 border-start border-4 border-info">
            <h4 class="mb-4 text-white"><i class="bi bi-grid-fill me-2 text-info"></i>Operations Grid</h4>
            
            <div class="row g-3">
                <div class="col-md-4">
                    {% if has_credentials %}
                        <a href="{{ url_for('dashboard.secure_tools') }}" class="btn btn-outline-info w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-2">
                            <i class="bi bi-file-earmark-lock fs-1"></i> 
                            <span class="fw-bold">File Vault</span>
                        </a>
                    {% else %}
                        <a href="{{ url_for('dashboard.profile') }}" class="btn btn-dark w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-secondary text-muted">
                            <i class="bi bi-lock-fill fs-1"></i> 
                            <span>Setup Vault</span>
                        </a>
                    {% endif %}
                </div>

                <div class="col-md-4">
                    {% if has_credentials %}
                        <a href="{{ url_for('share.share_ui') }}" class="btn btn-outline-warning w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-2">
                            <i class="bi bi-send-exclamation fs-1"></i> 
                            <span class="fw-bold">Dead Drop</span>
                        </a>
                    {% else %}
                        <button class="btn btn-dark w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-secondary text-muted" disabled>
                            <i class="bi bi-lock-fill fs-1"></i>
                        </button>
                    {% endif %}
                </div>

                <div class="col-md-4">
                    {% if has_credentials %}
                        <a href="{{ url_for('stego.ui') }}" class="btn btn-outline-success w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-2">
                            <i class="bi bi-eye-slash-fill fs-1"></i> 
                            <span class="fw-bold">Steganography</span>
                        </a>
                    {% else %}
                        <button class="btn btn-dark w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-secondary text-muted" disabled>
                            <i class="bi bi-lock-fill fs-1"></i>
                        </button>
                    {% endif %}
                </div>

                <div class="col-md-4 mt-3">
                    {% if has_credentials %}
                        <a href="{{ url_for('tools.metadata_ui') }}" class="btn btn-outline-light w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-2">
                            <i class="bi bi-eraser-fill fs-1"></i> 
                            <span class="fw-bold">Ghost Wiper</span>
                        </a>
                    {% else %}
                         <button class="btn btn-dark w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-secondary text-muted" disabled>
                            <i class="bi bi-lock-fill fs-1"></i>
                        </button>
                    {% endif %}
                </div>

                 <div class="col-md-4 mt-3">
                    {% if has_credentials %}
                        <a href="{{ url_for('tools.breach_ui') }}" class="btn btn-outline-danger w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-2">
                            <i class="bi bi-shield-lock-fill fs-1"></i> 
                            <span class="fw-bold">Breach Check</span>
                        </a>
                    {% else %}
                         <button class="btn btn-dark w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-secondary text-muted" disabled>
                            <i class="bi bi-lock-fill fs-1"></i>
                        </button>
                    {% endif %}
                </div>
                 
                 <div class="col-md-4 mt-3">
                    {% if has_credentials %}
                        <a href="{{ url_for('dashboard.network_monitor') }}" class="btn btn-outline-primary w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-2">
                            <i class="bi bi-activity fs-1"></i> 
                            <span class="fw-bold">Net Monitor</span>
                        </a>
                    {% else %}
                         <button class="btn btn-dark w-100 py-4 d-flex flex-column align-items-center justify-content-center gap-2 h-100 border-secondary text-muted" disabled>
                            <i class="bi bi-lock-fill fs-1"></i>
                        </button>
                    {% endif %}
                </div>

                <div class="col-12 mt-4">
                    <label class="text-muted small mb-2 text-uppercase fw-bold">Quick Watchtower Check</label>
                    <div class="input-group">
                        <span class="input-group-text bg-dark border-secondary text-danger"><i class="bi bi-tower"></i></span>
                        <input type="password" id="watchtower-input" class="form-control watchtower-monitor" placeholder="Test a password for leaks (k-Anonymity)...">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 fade-in-up" style="animation-delay: 0.6s;">
        <div class="cyber-card h-100 p-4">
            <h4 class="mb-3 text-white">System Log</h4>
            <div class="border-start border-secondary ps-3 ms-2">
                <div class="mb-3">
                    <small class="text-muted d-block">10:42:01 AM</small>
                    <span class="text-success"><i class="bi bi-check-circle me-1"></i> Zero-Knowledge Engine Ready</span>
                </div>
                <div class="mb-3">
                    <small class="text-muted d-block">10:42:05 AM</small>
                    <span class="text-info"><i class="bi bi-database me-1"></i> Database Connected</span>
                </div>
                <div class="mb-3">
                    <small class="text-muted d-block">10:42:06 AM</small>
                    <span class="text-warning"><i class="bi bi-shield-exclamation me-1"></i> HIBP API Latency: 45ms</span>
                </div>
                 <div class="mb-3">
                    <small class="text-muted d-block">10:42:08 AM</small>
                    <span class="text-light"><i class="bi bi-eye-slash me-1"></i> Steganography Module Loaded</span>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-top border-secondary">
                <small class="text-muted text-uppercase">Current Session</small>
                <div class="d-flex align-items-center mt-2">
                    <img src="{{ current_user.profile_image }}" class="rounded-circle me-3 border border-secondary" width="40" height="40">
                    <div>
                        <div class="text-white small fw-bold">{{ current_user.email }}</div>
                        <div class="text-success x-small" style="font-size: 0.75rem;">● Active</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/watchtower.js') }}"></script>
{% endblock %}