index.html

#!/bin/bash
set -euo pipefail

echo "🔨 Building all Docker images and pushing..."

for app in ../spaces/*; do
  appname=$(basename "$app")
  docker build -t ghcr.io/agentcyone/$appname:latest "$app"
  docker push ghcr.io/agentcyone/$appname:latest
done

echo "🚀 Deploying Helm charts..."

for app in ../helm_charts/*; do
  appname=$(basename "$app")
  helm upgrade --install $appname "$app" --namespace totality --create-namespace
done

echo "✅ Build and deploy complete."


apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: totality-ingress
  namespace: totality
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - http:
      paths: {{- range $app := (list "space_app_1" "space_app_2") }}
      - path: /api/{{ $app }}
        pathType: Prefix
        backend:
          service:
            name: {{ $app }}-service
            port:
              number: 80 {{- end }}


apiVersion: apps/v1
kind: Deployment
metadata:
  name: prometheus
  namespace: totality
spec:
  replicas: 1
  selector:
    matchLabels:
      app: prometheus
  template:
    metadata:
      labels:
        app: prometheus
    spec:
      containers:
      - name: prometheus
        image: prom/prometheus:latest
        ports:
        - containerPort: 9090
        volumeMounts:
        - mountPath: /etc/prometheus
          name: config
      volumes:
      - name: config
        configMap:
          name: prometheus-config
---
apiVersion: v1
kind: Service
metadata:
  name: prometheus
  namespace: totality
spec:
  type: ClusterIP
  ports:
  - port: 9090
  selector:
    app: prometheus


name: Totality Spaces CI/CD

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

env:
  REGISTRY: ghcr.io
  IMAGE_NAME: ${{ github.repository }}

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write

    steps:
    - name: Checkout code
      uses: actions/checkout@v3
    
    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v2
    
    - name: Login to GitHub Container Registry
      uses: docker/login-action@v2
      with:
        registry: ${{ env.REGISTRY }}
        username: ${{ github.actor }}
        password: ${{ secrets.GITHUB_TOKEN }}
    
    - name: Build and push images
      run: |
        for app in spaces/*; do
          appname=$(basename "$app")
          echo "Building $appname..."
          docker build -t ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}/$appname:latest $app
          docker push ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}/$appname:latest
        done
    
    - name: Set up Helm
      uses: azure/setup-helm@v3
      with:
        version: 'v3.11.1'
    
    - name: Deploy to Kubernetes
      run: |
        for app in helm_charts/*; do
          appname=$(basename "$app")
          echo "Deploying $appname..."
          helm upgrade --install $appname $app \
            --namespace totality \
            --create-namespace \
            --wait \
            --timeout 5m
        done
    
    - name: Verify deployments
      run: |
        kubectl get pods -n totality


# Default values for space_app_1
replicaCount: 2

image:
  repository: ghcr.io/agentcyone/space_app_1
  tag: latest
  pullPolicy: IfNotPresent

service:
  type: ClusterIP
  port: 80
  targetPort: 7860
  annotations: {}

ingress:
  enabled: false
  className: ""
  annotations: {}
  hosts:
    - host: chart-example.local
      paths:
        - path: /
          pathType: ImplementationSpecific
  tls: []

resources:
  requests:
    cpu: 250m
    memory: 512Mi
  limits:
    cpu: 500m
    memory: 1Gi

autoscaling:
  enabled: true
  minReplicas: 2
  maxReplicas: 10
  targetCPUUtilizationPercentage: 50
  targetMemoryUtilizationPercentage: 50

nodeSelector: {}

tolerations: []

affinity: {}


# Generic Dockerfile template for Spaces applications
FROM python:3.10-slim

WORKDIR /app

# Install dependencies first for better caching
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Copy application code
COPY . .

# Expose default Gradio port
EXPOSE 7860

# Health check
HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
    CMD curl -f http://localhost:7860/ || exit 1

# Run the application
CMD ["python", "app.py"]


# Totality SaaS Platform

Enterprise-grade mathematical knowledge platform with scalable deployment architecture.

## Features
- Dockerized Spaces applications
- Helm charts for Kubernetes deployment
- CI/CD pipelines
- Monitoring stack (Prometheus + Grafana)
- API Gateway with NGINX
- Ray Serve for distributed computing
- Multi-cloud Terraform configs

## Quick Start

```bash
# Build and deploy all spaces
./scripts/build_and_deploy.sh
```

## Repository Structure

```
totality_saas/
├── README.md
├── spaces/
│   ├── space_app_1/
│   │   ├── app.py
│   │   ├── requirements.txt
│   │    └── Dockerfile
│    └── space_app_2/
│       ├── app.py
│       ├── requirements.txt
│        └── Dockerfile
├── dockerfiles/
│   └── generic.Dockerfile
├── helm_charts/
│   ├── space_app_1/
│   │   ├── Chart.yaml
│   │   ├── values.yaml
│   │   └── templates/
│   │       ├── deployment.yaml
│   │       └── service.yaml
│   └── space_app_2/
│       ├── Chart.yaml
│       ├── values.yaml
│       └── templates/
│           ├── deployment.yaml
│           └── service.yaml
├── ci_cd/
│   └── github-actions.yaml
├── monitoring/
│   ├── prometheus-deployment.yaml
│   ├── grafana-deployment.yaml
│   └── dashboards/
│       └── totality-dashboard.json
├── api_gateway/
│    └── nginx-ingress.yaml
├── ray_serve/
│   └── ray-serve-cluster.yaml
├── terraform/
│    └── multi-cloud-clusters.tf
└── scripts/
    ├── build_and_deploy.sh
    └── scale_autoscaler.yaml
```

## Architecture

![Architecture Diagram](docs/architecture.png)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knowledge Whisper - Enterprise Agents</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .search-container {
            position: relative;
        }
        .search-container:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }
        .search-container:focus-within:after {
            transform: scaleX(1);
        }
        .timeline-item:before {
            content: "";
            position: absolute;
            left: -1.5rem;
            top: 0;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #3b82f6;
            border: 2px solid white;
        }
        .timeline-line:before {
            content: "";
            position: absolute;
            left: -1.125rem;
            top: 0;
            width: 2px;
            height: 100%;
            background: #e5e7eb;
        }
        .floating-btn {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans antialiased">
    <!-- Header -->
    <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg">
        <div class="container mx-auto px-4 py-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fas fa-brain text-3xl mr-3"></i>
                    <div>
                        <h1 class="text-2xl font-bold">Knowledge Whisper</h1>
                        <p class="text-blue-100 text-sm">Enterprise Agents Portal</p>
                    </div>
                </div>
                <div class="relative w-full md:w-1/3 search-container">
                    <input type="text" placeholder="Search mathematicians..." 
                           class="w-full bg-white/20 backdrop-blur-sm rounded-lg py-2 px-4 pl-10 text-white placeholder-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
                    <i class="fas fa-search absolute left-3 top-3 text-blue-100"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="mb-12 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-8 shadow-inner">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-8">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Mathematical Legacy Explorer</h2>
                    <p class="text-gray-600 mb-6 text-lg">Discover the interconnected knowledge of history's greatest mathematical minds. Explore their contributions, relationships, and impact on modern mathematics.</p>
                    <div class="flex flex-wrap gap-3">
                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all flex items-center">
                            <i class="fas fa-play mr-2"></i> Interactive Tour
                        </button>
                        <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-2 rounded-full font-medium transition-all flex items-center">
                            <i class="fas fa-book-open mr-2"></i> View Timeline
                        </button>
                    </div>
                </div>
                <div class="lg:w-1/2 relative">
                    <div class="bg-white p-6 rounded-xl shadow-lg">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-bold text-gray-800">Top Influential Mathematicians</h3>
                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">By Impact Score</span>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center p-3 bg-blue-50 rounded-lg">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-bold mr-4">1</div>
                                <div>
                                    <h4 class="font-medium">Leonhard Euler</h4>
                                    <p class="text-xs text-gray-500">12% influence score</p>
                                </div>
                                <div class="ml-auto text-blue-600">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                            <div class="flex items-center p-3 hover:bg-blue-50 rounded-lg transition-colors">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-bold mr-4">2</div>
                                <div>
                                    <h4 class="font-medium">Carl Gauss</h4>
                                    <p class="text-xs text-gray-500">10% influence score</p>
                                </div>
                                <div class="ml-auto text-gray-400 hover:text-blue-600 transition-colors">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                            <div class="flex items-center p-3 hover:bg-blue-50 rounded-lg transition-colors">
                                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-bold mr-4">3</div>
                                <div>
                                    <h4 class="font-medium">Archimedes</h4>
                                    <p class="text-xs text-gray-500">10% influence score</p>
                                </div>
                                <div class="ml-auto text-gray-400 hover:text-blue-600 transition-colors">
                                    <i class="fas fa-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg w-32 h-32 flex items-center justify-center floating-btn">
                        <div class="text-center">
                            <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-1">
                                <i class="fas fa-plus text-indigo-600"></i>
                            </div>
                            <p class="text-xs font-medium text-gray-600">Add Agent</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Categories Section -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <i class="fas fa-tags text-blue-500 mr-3"></i> Explore by Categories
            </h2>
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-3">
                        <i class="fas fa-calculator"></i>
                    </div>
                    <h3 class="font-medium text-gray-800">Calculus</h3>
                    <p class="text-xs text-gray-500 mt-1">Newton, Leibniz, Euler</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-3">
                        <i class="fas fa-shapes"></i>
                    </div>
                    <h3 class="font-medium text-gray-800">Geometry</h3>
                    <p class="text-xs text-gray-500 mt-1">Euclid, Pythagoras</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-3">
                        <i class="fas fa-infinity"></i>
                    </div>
                    <h3 class="font-medium text-gray-800">Number Theory</h3>
                    <p class="text-xs text-gray-500 mt-1">Fermat, Gauss</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mb-3">
                        <i class="fas fa-project-diagram"></i>
                    </div>
                    <h3 class="font-medium text-gray-800">Algebra</h3>
                    <p class="text-xs text-gray-500 mt-1">Galois, Abel</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center text-red-600 mb-3">
                        <i class="fas fa-wave-square"></i>
                    </div>
                    <h3 class="font-medium text-gray-800">Analysis</h3>
                    <p class="text-xs text-gray-500 mt-1">Cauchy, Weierstrass</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow card-hover flex flex-col items-center text-center">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-3">
                        <i class="fas fa-atom"></i>
                    </div>
                    <h3 class="font-medium text-gray-800">Physics</h3>
                    <p class="text-xs text-gray-500 mt-1">Newton, Lagrange</p>
                </div>
            </div>
        </section>

        <!-- Mathematicians Grid -->
        <section class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                    <i class="fas fa-users text-blue-500 mr-3"></i> All Mathematicians
                </h2>
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-500">Filter:</span>
                    <select class="bg-white border border-gray-200 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-300">
                        <option>All Time Periods</option>
                        <option>Ancient</option>
                        <option>Medieval</option>
                        <option>Renaissance</option>
                        <option>Modern</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                <!-- Mathematician Cards -->
                <!-- We'll generate these dynamically with JavaScript -->
                <div id="mathematicians-container"></div>
            </div>

            <div class="mt-8 flex justify-center">
                <button class="bg-white border border-gray-200 hover:border-blue-300 text-blue-600 px-6 py-2 rounded-full font-medium transition-all flex items-center">
                    <i class="fas fa-redo mr-2"></i> Load More
                </button>
            </div>
        </section>

        <!-- Timeline Section -->
        <section class="mb-12 bg-white rounded-xl shadow-sm p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <i class="fas fa-history text-blue-500 mr-3"></i> Mathematical Timeline
            </h2>
            
            <div class="relative pl-8">
                <div class="timeline-line absolute left-0 top-0 bottom-0"></div>
                
                <div class="mb-8 timeline-item relative pl-6">
                    <div class="bg-blue-50 rounded-xl p-4">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="font-bold text-blue-800">Ancient Mathematics</h3>
                            <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">600 BCE - 500 CE</span>
                        </div>
                        <p class="text-sm text-gray-600">Thales, Pythagoras, Euclid, Archimedes, Ptolemy, Diophantus</p>
                    </div>
                </div>
                
                <div class="mb-8 timeline-item relative pl-6">
                    <div class="bg-indigo-50 rounded-xl p-4">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="font-bold text-indigo-800">Medieval Mathematics</h3>
                            <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">500 - 1500</span>
                        </div>
                        <p class="text-sm text-gray-600">Al-Khwarizmi, Fibonacci, Bhaskara II, Omar Khayyam</p>
                    </div>
                </div>
                
                <div class="mb-8 timeline-item relative pl-6">
                    <div class="bg-purple-50 rounded-xl p-4">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="font-bold text-purple-800">Renaissance Mathematics</h3>
                            <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">1500 - 1700</span>
                        </div>
                        <p class="text-sm text-gray-600">Cardano, Viete, Napier, Descartes, Fermat, Pascal</p>
                    </div>
                </div>
                
                <div class="mb-8 timeline-item relative pl-6">
                    <div class="bg-pink-50 rounded-xl p-4">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="font-bold text-pink-800">Age of Enlightenment</h3>
                            <span class="text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded-full">1700 - 1800</span>
                        </div>
                        <p class="text-sm text-gray-600">Newton, Leibniz, Euler, Bernoulli family, Lagrange, Laplace</p>
                    </div>
                </div>
                
                <div class="timeline-item relative pl-6">
                    <div class="bg-green-50 rounded-xl p-4">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="font-bold text-green-800">Modern Mathematics</h3>
                            <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">1800 - Present</span>
                        </div>
                        <p class="text-sm text-gray-600">Gauss, Cauchy, Galois, Riemann, Poincaré, Hilbert, Grothendieck</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Connections Graph -->
        <section class="mb-12 bg-gray-900 rounded-xl p-6 text-white">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold flex items-center">
                    <i class="fas fa-project-diagram text-blue-300 mr-3"></i> Knowledge Connections
                </h2>
                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-full text-sm font-medium transition-all">
                    <i class="fas fa-expand mr-1"></i> Fullscreen
                </button>
            </div>
            
            <div class="bg-gray-800 rounded-lg p-4 h-96 flex items-center justify-center">
                <div class="text-center">
                    <i class="fas fa-network-wired text-5xl text-gray-600 mb-4"></i>
                    <h3 class="text-xl font-medium mb-2">Interactive Graph Visualization</h3>
                    <p class="text-gray-400 max-w-md mx-auto">This area would display an interactive network graph showing connections between mathematicians, their influences, and collaborations.</p>
                    <button class="mt-4 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all">
                        <i class="fas fa-play mr-2"></i> Launch Visualizer
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-brain text-2xl text-blue-300 mr-2"></i>
                        <span class="text-xl font-bold">Knowledge Whisper</span>
                    </div>
                    <p class="text-gray-400 max-w-xs">Exploring the interconnected legacy of mathematical thought through history.</p>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h3 class="text-lg font-medium mb-4">Resources</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Tutorials</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium mb-4">Company</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-lg font-medium mb-4">Connect</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <i class="fab fa-github"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <i class="fab fa-linkedin"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p>© 2023 Knowledge Whisper. All rights reserved.</p>
                    <div class="flex space-x-6 mt-4 md:mt-0">
                        <a href="#" class="hover:text-white transition-colors">Privacy</a>
                        <a href="#" class="hover:text-white transition-colors">Terms</a>
                        <a href="#" class="hover:text-white transition-colors">Cookies</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Mathematicians data
        const mathematicians = [
            { id: 1, name: "Isaac Newton", era: "17th-18th", field: "Calculus, Physics", influence: 1 },
            { id: 2, name: "Gottfried Leibniz", era: "17th-18th", field: "Calculus", influence: 6 },
            { id: 3, name: "Joseph Lagrange", era: "18th", field: "Analysis", influence: 6 },
            { id: 4, name: "Leonhard Euler", era: "18th", field: "All", influence: 12 },
            { id: 5, name: "Pierre Laplace", era: "18th-19th", field: "Analysis", influence: 1 },
            { id: 6, name: "Euclid", era: "Ancient", field: "Geometry", influence: 8 },
            { id: 7, name: "Carl Gauss", era: "18th-19th", field: "All", influence: 10 },
            { id: 8, name: "Archimedes", era: "Ancient", field: "Geometry", influence: 10 },
            { id: 9, name: "Rene Descartes", era: "17th", field: "Algebra", influence: 2 },
            { id: 10, name: "Gerolamo Cardano", era: "16th", field: "Algebra", influence: 3 },
            { id: 11, name: "Adrien-Marie Legendre", era: "18th-19th", field: "Number Theory", influence: 0 },
            { id: 12, name: "Pythagoras", era: "Ancient", field: "Geometry", influence: 3 },
            { id: 13, name: "Gaspard Monge", era: "18th-19th", field: "Geometry", influence: 0 },
            { id: 14, name: "Jean d'Alembert", era: "18th", field: "Analysis", influence: 0 },
            { id: 15, name: "Augustin Cauchy", era: "19th", field: "Analysis", influence: 9 },
            { id: 16, name: "Joseph Fourier", era: "18th-19th", field: "Analysis", influence: 0 },
            { id: 17, name: "Pierre Fermat", era: "17th", field: "Number Theory", influence: 13 },
            { id: 18, name: "John Napier", era: "16th-17th", field: "Logarithms", influence: 0 },
            { id: 19, name: "Blaise Pascal", era: "17th", field: "Probability", influence: 10 },
            { id: 20, name: "Apollonius", era: "Ancient", field: "Geometry", influence: 0 },
            { id: 21, name: "Leonardo Fibonacci", era: "Medieval", field: "Number Theory", influence: 30 },
            { id: 22, name: "François Viete", era: "16th-17th", field: "Algebra", influence: 48 },
            { id: 23, name: "Ptolemy", era: "Ancient", field: "Astronomy", influence: 0 },
            { id: 24, name: "Christiaan Huygens", era: "17th", field: "Physics", influence: 0 },
            { id: 25, name: "Regiomontanus", era: "15th", field: "Trigonometry", influence: 0 },
            { id: 26, name: "Diophantus", era: "Ancient", field: "Algebra", influence: 38 },
            { id: 27, name: "Colin Maclaurin", era: "18th", field: "Calculus", influence: 0 },
            { id: 28, name: "Jacob Bernoulli", era: "17th-18th", field: "Calculus", influence: 53 },
            { id: 29, name: "Pappus", era: "Ancient", field: "Geometry", influence: 0 },
            { id: 30, name: "Bonaventura Cavalieri", era: "17th", field: "Geometry", influence: 0 },
            { id: 31, name: "Carl Jacobi", era: "19th", field: "Analysis", influence: 18 },
            { id: 32, name: "Johann Bernoulli", era: "17th-18th", field: "Calculus", influence: 0 },
            { id: 33, name: "John Wallis", era: "17th", field: "Calculus", influence: 0 },
            { id: 34, name: "William Hamilton", era: "19th", field: "Algebra", influence: 39 },
            { id: 35, name: "Niccolò Tartaglia", era: "16th", field: "Algebra", influence: 0 },
            { id: 36, name: "Heron", era: "Ancient", field: "Geometry", influence: 0 },
            { id: 37, name: "Jean-Victor Poncelet", era: "19th", field: "Geometry", influence: 51 },
            { id: 38, name: "Bernhard Riemann", era: "19th", field: "Analysis", influence: 21 },
            { id: 39, name: "Siméon Poisson", era: "18th-19th", field: "Analysis", influence: 0 },
            { id: 40, name: "Niels Abel", era: "19th", field: "Algebra", influence: 18 },
            { id: 41, name: "Michel Chasles", era: "19th", field: "Geometry", influence: 0 },
            { id: 42, name: "Luigi Cremona", era: "19th", field: "Geometry", influence: 0 },
            { id: 43, name: "Gilles Roberval", era: "17th", field: "Calculus", influence: 0 },
            { id: 44, name: "Roger Boscovich", era: "18th", field: "Physics", influence: 0 },
            { id: 45, name: "Galileo Galilei", era: "16th-17th", field: "Physics", influence: 37 },
            { id: 46, name: "Alexis Clairaut", era: "18th", field: "Analysis", influence: 46 },
            { id: 47, name: "Johann Lambert", era: "18th", field: "Geometry", influence: 49 },
            { id: 48, name: "Isaac Barrow", era: "17th", field: "Calculus", influence: 0 },
            { id: 49, name: "Jacques Strum", era: "19th", field: "Algebra", influence: 0 },
            { id: 50, name: "Simon Stevin", era: "16th-17th", field: "Decimal System", influence: 0 },
            { id: 51, name: "Augustus de Morgan", era: "19th", field: "Logic", influence: 0 },
            { id: 52, name: "Brook Taylor", era: "18th", field: "Analysis", influence: 0 },
            { id: 53, name: "Johannes Kepler", era: "16th-17th", field: "Astronomy", influence: 33 },
            { id: 54, name: "Daniel Bernoulli", era: "18th", field: "Physics", influence: 0 },
            { id: 55, name: "Girard Desargues", era: "17th", field: "Geometry", influence: 0 },
            { id: 56, name: "Henri Briggs", era: "16th-17th", field: "Logarithms", influence: 0 },
            { id: 57, name: "James Sylvester", era: "19th", field: "Algebra", influence: 0 },
            { id: 58, name: "Lazare Carnot", era: "18th-19th", field: "Geometry", influence: 0 },
            { id: 59, name: "Pierre Maupertuis", era: "18th", field: "Physics", influence: 0 },
            { id: 60, name: "Charles Babbage", era: "19th", field: "Computing", influence: 0 },
            { id: 61, name: "Charles Hermite", era: "19th", field: "Number Theory", influence: 52 },
            { id: 62, name: "Thales", era: "Ancient", field: "Geometry", influence: 0 },
            { id: 63, name: "Henry Smith", era: "19th", field: "Number Theory", influence: 0 },
            { id: 64, name: "Sofia Kovalevskaya", era: "19th", field: "Analysis", influence: 0 },
            { id: 65, name: "Luca Pacioli", era: "15th-16th", field: "Accounting", influence: 0 },
            { id: 66, name: "Hippocrates", era: "Ancient", field: "Geometry", influence: 35 },
            { id: 67, name: "Gerbert", era: "10th", field: "Arithmetic", influence: 0 },
            { id: 68, name: "Alfred Clebsch", era: "19th", field: "Algebra", influence: 0 },
            { id: 69, name: "Julius Plucker", era: "19th", field: "Geometry", influence: 0 },
            { id: 70, name: "Hermann Grassmann", era: "19th", field: "Algebra", influence: 0 },
            { id: 71, name: "Peter Dirichlet", era: "19th", field: "Number Theory", influence: 27 },
            { id: 72, name: "Arthur Cayley", era: "19th", field: "Algebra", influence: 27 },
            { id: 73, name: "Muhammed al-Khwārizmi", era: "9th", field: "Algebra", influence: 31 },
            { id: 74, name: "Roger Cotes", era: "18th", field: "Analysis", influence: 0 },
            { id: 75, name: "Abraham De Moivre", era: "17th-18th", field: "Probability", influence: 0 },
            { id: 76, name: "George Boole", era: "19th", field: "Logic", influence: 54 },
            { id: 77, name: "Karl Weierstrass", era: "19th", field: "Analysis", influence: 26 },
            { id: 78, name: "Sophus Lie", era: "19th", field: "Algebra", influence: 0 },
            { id: 79, name: "Nikolai Lobachevsky", era: "19th", field: "Geometry", influence: 45 },
            { id: 80, name: "Ahmes", era: "Ancient", field: "Arithmetic", influence: 0 },
            { id: 81, name: "Jean-Charles Borda", era: "18th", field: "Geometry", influence: 0 },
            { id: 82, name: "Eugenio Beltrami", era: "19th", field: "Geometry", influence: 0 },
            { id: 83, name: "Paolo Frisi", era: "18th", field: "Physics", influence: 0 },
            { id: 84, name: "Evariste Galois", era: "19th", field: "Algebra", influence: 23 },
            { id: 85, name: "Evangelista Torricelli", era: "17th", field: "Physics", influence: 0 },
            { id: 86, name: "Jean-Étienne Montucla", era: "18th", field: "History", influence: 0 },
            { id: 87, name: "Otto Hesse", era: "19th", field: "Algebra", influence: 0 },
            { id: 88, name: "Jordanus de Nemore", era: "13th", field: "Mechanics", influence: 0 },
            { id: 89, name: "Plato", era: "Ancient", field: "Philosophy", influence: 0 },
            { id: 90, name: "Henri Poincare", era: "19th-20th", field: "Topology", influence: 20 },
            { id: 91, name: "Jakob Steiner", era: "19th", field: "Geometry", influence: 38 },
            { id: 92, name: "Edmond Halley", era: "17th-18th", field: "Astronomy", influence: 0 },
            { id: 93, name: "Andre Ampere", era: "18th-19th", field: "Physics", influence: 0 },
            { id: 94, name: "Guillaume L'Hospital", era: "17th-18th", field: "Calculus", influence: 0 },
            { id: 95, name: "William Thomson", era: "19th", field: "Physics", influence: 0 },
            { id: 96, name: "Boethius", era: "5th-6th", field: "Arithmetic", influence: 0 },
            { id: 97, name: "Ehrenfried Tschirnhausen", era: "17th-18th", field: "Algebra", influence: 0 },
            { id: 98, name: "Bhaskara II", era: "12th", field: "Algebra", influence: 0 },
            { id: 99, name: "Eratosthenes", era: "Ancient", field: "Geometry", influence: 0 },
            { id: 100, name: "Zeno of Elea", era: "Ancient", field: "Philosophy", influence: 0 }
        ];

        // Function to get a random color class
        function getRandomColor() {
            const colors = ['blue', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'green', 'teal', 'cyan'];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // Function to render mathematician cards
        function renderMathematicians() {
            const container = document.getElementById('mathematicians-container');
            container.innerHTML = '';
            
            mathematicians.forEach(math => {
                const color = getRandomColor();
                const card = document.createElement('div');
                card.className = 'bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-all card-hover fade-in';
                card.innerHTML = `
                    <div class="flex items-center mb-3">
                        <div class="w-10 h-10 bg-${color}-100 rounded-full flex items-center justify-center text-${color}-600 font-bold mr-3">
                            ${math.name.charAt(0)}
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-800">${math.name}</h3>
                            <p class="text-xs text-gray-500">${math.era} century</p>
                        </div>
                    </div>
                    <div class="text-xs text-gray-600 mb-2">${math.field}</div>
                    <div class="flex justify-between items-center">
                        <div class="text-xs">
                            <span class="font-medium text-${color}-600">Influence:</span>
                            <span> ${math.influence}%</span>
                        </div>
                        <button class="text-xs bg-${color}-50 text-${color}-600 hover:bg-${color}-100 px-2 py-1 rounded-full transition-colors">
                            <i class="fas fa-arrow-right text-xs"></i>
                        </button>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        // Initialize the page
        document.addEventListener('DOMContentLoaded', () => {
            renderMathematicians();
            
            // Add animation to cards as they appear
            const cards = document.querySelectorAll('.fade-in');
            cards.forEach((card, index) => {
                card.style.animationDelay = `${index * 0.05}s`;
            });
            
            // Simple search functionality
            const searchInput = document.querySelector('input[type="text"]');
            searchInput.addEventListener('input', (e) => {
                const searchTerm = e.target.value.toLowerCase();
                const filtered = mathematicians.filter(math => 
                    math.name.toLowerCase().includes(searchTerm) || 
                    math.field.toLowerCase().includes(searchTerm) ||
                    math.era.toLowerCase().includes(searchTerm)
                );
                
                // Re-render with filtered results
                if (searchTerm.length > 0) {
                    const container = document.getElementById('mathematicians-container');
                    container.innerHTML = '';
                    
                    if (filtered.length === 0) {
                        container.innerHTML = `
                            <div class="col-span-full text-center py-12">
                                <i class="fas fa-search text-4xl text-gray-300 mb-4"></i>
                                <h3 class="text-lg font-medium text-gray-500">No mathematicians found</h3>
                                <p class="text-gray-400">Try a different search term</p>
                            </div>
                        `;
                    } else {
                        filtered.forEach(math => {
                            const color = getRandomColor();
                            const card = document.createElement('div');
                            card.className = 'bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition-all card-hover fade-in';
                            card.innerHTML = `
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 bg-${color}-100 rounded-full flex items-center justify-center text-${color}-600 font-bold mr-3">
                                        ${math.name.charAt(0)}
                                    </div>
                                    <div>
                                        <h3 class="font-medium text-gray-800">${math.name}</h3>
                                        <p class="text-xs text-gray-500">${math.era} century</p>
                                    </div>
                                </div>
                                <div class="text-xs text-gray-600 mb-2">${math.field}</div>
                                <div class="flex justify-between items-center">
                                    <div class="text-xs">
                                        <span class="font-medium text-${color}-600">Influence:</span>
                                        <span> ${math.influence}%</span>
                                    </div>
                                    <button class="text-xs bg-${color}-50 text-${color}-600 hover:bg-${color}-100 px-2 py-1 rounded-full transition-colors">
                                        <i class="fas fa-arrow-right text-xs"></i>
                                    </button>
                                </div>
                            `;
                            container.appendChild(card);
                        });
                    }
                } else {
                    renderMathematicians();
                }
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=agentcyone/knowledge-whisper" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>