templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>EE Server</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: #f8f9fa; }
        .card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
        .status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; }
        .dot-green { background: #28a745; box-shadow: 0 0 6px #28a745; animation: pulse 2s infinite; }
        .dot-gray  { background: #adb5bd; }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
    </style>
</head>
<body class="container mt-5" style="max-width:600px">

    <div class="text-center mb-4">
        <h2 class="fw-bold">Equivariant Encryption Server</h2>
        <p class="text-muted">Secure inference endpoint</p>
    </div>

    <!-- Status Card -->
    <div class="card p-4 mb-4">
        {% if server_ready %}
            <div class="d-flex align-items-center mb-3">
                <span class="status-dot dot-green"></span>
                <strong class="text-success fs-5">Server Running</strong>
            </div>
            <p class="mb-1 text-muted">Model loaded:</p>
            <p class="fw-semibold mb-3">{{ model_name }}</p>
            <p class="mb-1 text-muted">Inference endpoint:</p>
            <a href="{{ space_url }}/generate" target="_blank" class="btn btn-outline-primary btn-sm">
                🔗 {{ space_url }}/generate
            </a>
        {% else %}
            <div class="d-flex align-items-center mb-3">
                <span class="status-dot dot-gray"></span>
                <strong class="text-secondary fs-5">Server Not Started</strong>
            </div>

            <form method="POST">
                <input type="hidden" name="action" value="start_server">
                <div class="mb-3">
                    <label class="form-label fw-semibold">EE Model from Hub</label>
                    <input class="form-control" name="ee_model_name" placeholder="org/model-name" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">HF Token</label>
                    <input type="password" class="form-control" name="hf_token" placeholder="hf_..." required>
                </div>
                <button class="btn btn-success w-100">▶ Load &amp; Start Server</button>
            </form>
        {% endif %}
    </div>

    <!-- Flash messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, msg in messages %}
                <div class="alert alert-{{ category }} rounded-3">{{ msg }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}

</body>
</html>