apiVersion: v1
kind: ConfigMap
metadata:
  name: static-demo-html
data:
  index.html: |
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Agentic OS | Autonomous Deployments</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
        <style>
            :root {
                --bg-primary: #0f172a;
                --text-primary: #f8fafc;
                --accent-primary: #3b82f6;
                --accent-secondary: #8b5cf6;
            }
            body, html {
                margin: 0; padding: 0;
                height: 100%; width: 100%;
                font-family: 'Inter', sans-serif;
                background-color: var(--bg-primary);
                color: var(--text-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .background-blobs {
                position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                z-index: 0; overflow: hidden; filter: blur(80px);
            }
            .blob {
                position: absolute; border-radius: 50%; opacity: 0.6;
                animation: float 10s infinite alternate ease-in-out;
            }
            .blob-1 {
                top: -10%; left: -10%; width: 50vw; height: 50vw;
                background: radial-gradient(circle, var(--accent-primary) 0%, transparent 70%);
            }
            .blob-2 {
                bottom: -10%; right: -10%; width: 40vw; height: 40vw;
                background: radial-gradient(circle, var(--accent-secondary) 0%, transparent 70%);
                animation-delay: -5s;
            }
            @keyframes float {
                0% { transform: translate(0, 0) scale(1); }
                100% { transform: translate(10%, 10%) scale(1.1); }
            }
            .glass-card {
                position: relative; z-index: 10;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 24px;
                padding: 3rem; max-width: 600px; width: 90%;
                text-align: center;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
                transform: translateY(20px);
                opacity: 0;
                animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            }
            @keyframes fadeUp {
                to { transform: translateY(0); opacity: 1; }
            }
            .glass-card h1 {
                font-weight: 800; font-size: 2.5rem; margin-top: 0; margin-bottom: 1rem;
                background: linear-gradient(to right, #60a5fa, #c084fc);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .glass-card p {
                font-size: 1.1rem; line-height: 1.6; color: #cbd5e1; margin-bottom: 2rem;
            }
            .badge {
                display: inline-block; padding: 0.5rem 1rem; border-radius: 9999px;
                background: rgba(59, 130, 246, 0.2); color: #93c5fd;
                font-weight: 600; font-size: 0.875rem; margin-bottom: 1.5rem;
                border: 1px solid rgba(59, 130, 246, 0.3);
            }
            .btn {
                display: inline-block; padding: 0.75rem 2rem; border-radius: 12px;
                background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
                color: white; font-weight: 600; text-decoration: none;
                transition: transform 0.2s, box-shadow 0.2s;
                border: none; cursor: pointer; font-size: 1rem;
            }
            .btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 20px -10px var(--accent-secondary);
            }
        </style>
    </head>
    <body>
        <div class="background-blobs">
            <div class="blob blob-1"></div>
            <div class="blob blob-2"></div>
        </div>
        
        <div class="glass-card">
            <div class="badge">Deployed Autonomously</div>
            <h1>Hello from the AI!</h1>
            <p>This entire webpage, infrastructure configuration, and Kubernetes deployment was written, committed to Gitea, and synced via ArgoCD instantly through natural language.</p>
            <a href="#" class="btn" onclick="alert('GitOps is amazing!')">Click to Verify</a>
        </div>
    </body>
    </html>
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: static-demo
  namespace: ai-agents-gumbo
spec:
  replicas: 1
  selector:
    matchLabels:
      app: static-demo
  template:
    metadata:
      labels:
        app: static-demo
    spec:
      containers:
      - name: nginx
        image: nginx:alpine
        ports:
        - containerPort: 80
        volumeMounts:
        - name: html-volume
          mountPath: /usr/share/nginx/html
      volumes:
      - name: html-volume
        configMap:
          name: static-demo-html
---
apiVersion: v1
kind: Service
metadata:
  name: static-demo
  namespace: ai-agents-gumbo
spec:
  ports:
  - port: 80
    targetPort: 80
  selector:
    app: static-demo
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: static-demo-ingress
  namespace: ai-agents-gumbo
  annotations:
    kubernetes.io/ingress.class: apisix
spec:
  rules:
  - host: demo.applaude.net
    http:
      paths:
      - path: /
        pathType: Prefix
        backend:
          service:
            name: static-demo
            port:
              number: 80
