Upload 10 files

.gitignore

@@ -0,0 +1,17 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+venv/
+
+# Database
+*.db
+instance/
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all files
+COPY . .
+
+# Expose port (HF Spaces uses 7860)
+EXPOSE 7860
+
+# Run the app
+CMD ["python", "app.py"]

README.md

@@ -1,11 +1,33 @@
----
-title: Ai Cms Platform
-emoji: 🚀
-colorFrom: blue
-colorTo: indigo
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: AI CMS Platform
+emoji: 🚀
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+---
+
+# AI CMS Platform
+
+A dynamic API builder powered by AI prompts.
+
+## Features
+
+- 🤖 Create API endpoints with AI prompts
+- 📊 Monitor usage and costs
+- 🔐 Secure with API keys
+- 📥 Export logs to CSV
+
+## Usage
+
+1. Register an account
+2. Create your first API endpoint
+3. Test with Postman or curl
+4. Monitor usage in dashboard
+
+## Tech Stack
+
+- Flask (Python)
+- SQLite Database
+- Modern UI with CSS3

app.py

@@ -0,0 +1,416 @@
+from flask import Flask, render_template, request, jsonify, redirect, url_for, send_file, flash
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
+from flask_bcrypt import Bcrypt
+from datetime import datetime, timedelta
+from flask_cors import CORS
+import time
+import random
+import json
+import csv
+import io
+import secrets
+import os
+
+app = Flask(__name__)
+CORS(app, supports_credentials=True)
+# --- CONFIGURATION ---
+app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL', 'sqlite:///ai_cms.db')
+app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'dev-key-change-in-production')
+app.config['SQLALCHEMY_ENGINE_OPTIONS'] = {
+    'pool_recycle': 300,
+    'pool_pre_ping': True,
+}
+
+db = SQLAlchemy(app)
+bcrypt = Bcrypt(app)
+login_manager = LoginManager(app)
+login_manager.login_view = 'login'
+
+# --- DATABASE MODELS ---
+
+class User(UserMixin, db.Model):
+    __tablename__ = 'users'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    password_hash = db.Column(db.String(120), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    is_admin = db.Column(db.Boolean, default=False)
+    
+    def set_password(self, password):
+        self.password_hash = bcrypt.generate_password_hash(password).decode('utf-8')
+    
+    def check_password(self, password):
+        return bcrypt.check_password_hash(self.password_hash, password)
+
+class APIKey(db.Model):
+    __tablename__ = 'api_keys'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    key = db.Column(db.String(64), unique=True, nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id', ondelete='CASCADE'), nullable=False)
+    name = db.Column(db.String(100))
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    last_used = db.Column(db.DateTime)
+    is_active = db.Column(db.Boolean, default=True)
+    usage_count = db.Column(db.Integer, default=0)
+    
+    user = db.relationship('User', backref='api_keys')
+    
+    @staticmethod
+    def generate_key():
+        return secrets.token_hex(32)
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'key': self.key,
+            'created_at': self.created_at.strftime("%Y-%m-%d %H:%M:%S"),
+            'last_used': self.last_used.strftime("%Y-%m-%d %H:%M:%S") if self.last_used else 'Never',
+            'usage_count': self.usage_count,
+            'is_active': self.is_active
+        }
+
+class APIEndpoint(db.Model):
+    __tablename__ = 'api_endpoints'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('users.id', ondelete='CASCADE'), nullable=False)
+    route = db.Column(db.String(100), nullable=False)
+    model = db.Column(db.String(50), nullable=False)
+    prompt = db.Column(db.Text, nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    is_active = db.Column(db.Boolean, default=True)
+    
+    total_calls = db.Column(db.Integer, default=0)
+    total_tokens = db.Column(db.Integer, default=0)
+    total_cost = db.Column(db.Float, default=0.0)
+    
+    user = db.relationship('User', backref='endpoints')
+    # Add cascade delete for logs
+    logs = db.relationship('APILog', backref='endpoint', lazy=True, cascade='all, delete-orphan')
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'route': self.route,
+            'model': self.model,
+            'prompt': self.prompt,
+            'created_at': self.created_at.strftime("%Y-%m-%d %H:%M:%S"),
+            'is_active': self.is_active,
+            'total_calls': self.total_calls,
+            'total_tokens': self.total_tokens,
+            'total_cost': round(self.total_cost, 4)
+        }
+
+class APILog(db.Model):
+    __tablename__ = 'api_logs'
+    
+    id = db.Column(db.Integer, primary_key=True)
+    endpoint_id = db.Column(db.Integer, db.ForeignKey('api_endpoints.id', ondelete='CASCADE'), nullable=False)
+    api_key_id = db.Column(db.Integer, db.ForeignKey('api_keys.id', ondelete='SET NULL'), nullable=True)
+    timestamp = db.Column(db.DateTime, default=datetime.utcnow)
+    input_data = db.Column(db.Text)
+    output_data = db.Column(db.Text)
+    tokens_used = db.Column(db.Integer)
+    latency = db.Column(db.Float)
+    cost = db.Column(db.Float)
+    status_code = db.Column(db.Integer, default=200)
+    
+    api_key = db.relationship('APIKey', backref='logs')
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'endpoint_id': self.endpoint_id,
+            'timestamp': self.timestamp.strftime("%Y-%m-%d %H:%M:%S"),
+            'tokens_used': self.tokens_used,
+            'latency': round(self.latency, 3),
+            'cost': round(self.cost, 4),
+            'status_code': self.status_code
+        }
+
+# --- LOGIN MANAGER ---
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
+# --- MOCK AI RESPONSE ---
+def generate_mock_response(prompt, input_data):
+    time.sleep(random.uniform(0.5, 1.5))
+    return f"AI Response based on prompt: '{prompt[:30]}...' and input: {json.dumps(input_data)}"
+
+# --- AUTH ROUTES ---
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if current_user.is_authenticated:
+        return redirect(url_for('dashboard'))
+    
+    if request.method == 'POST':
+        data = request.json if request.is_json else request.form
+        username = data.get('username')
+        password = data.get('password')
+        
+        user = User.query.filter_by(username=username).first()
+        
+        if user and user.check_password(password):
+            login_user(user)
+            if request.is_json:
+                return jsonify({"status": "success", "message": "Login successful"})
+            return redirect(url_for('dashboard'))
+        
+        if request.is_json:
+            return jsonify({"status": "error", "message": "Invalid credentials"}), 401
+        flash('Invalid username or password', 'error')
+    
+    return render_template('login.html')
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if current_user.is_authenticated:
+        return redirect(url_for('dashboard'))
+    
+    if request.method == 'POST':
+        data = request.json if request.is_json else request.form
+        username = data.get('username')
+        password = data.get('password')
+        
+        if User.query.filter_by(username=username).first():
+            if request.is_json:
+                return jsonify({"status": "error", "message": "Username exists"}), 400
+            flash('Username already exists', 'error')
+            return render_template('register.html')
+        
+        user = User(username=username)
+        user.set_password(password)
+        
+        # First user becomes admin
+        if User.query.count() == 0:
+            user.is_admin = True
+        
+        db.session.add(user)
+        db.session.commit()
+        
+        if request.is_json:
+            return jsonify({"status": "success", "message": "Registration successful"})
+        return redirect(url_for('login'))
+    
+    return render_template('register.html')
+
+@app.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('login'))
+
+# --- FRONTEND ROUTES ---
+
+@app.route('/')
+@login_required
+def dashboard():
+    return render_template('index.html')
+
+# --- CMS API ENDPOINTS ---
+
+@app.route('/api/cms/create', methods=['POST'])
+@login_required
+def create_api():
+    data = request.json
+    
+    existing = APIEndpoint.query.filter_by(route=data['route'], user_id=current_user.id).first()
+    if existing:
+        return jsonify({"status": "error", "message": "Route already exists"}), 400
+    
+    new_api = APIEndpoint(
+        user_id=current_user.id,
+        route=data['route'],
+        model=data['model'],
+        prompt=data['prompt']
+    )
+    
+    db.session.add(new_api)
+    db.session.commit()
+    
+    return jsonify({"status": "success", "message": "API Created Successfully", "api": new_api.to_dict()})
+
+@app.route('/api/cms/list', methods=['GET'])
+@login_required
+def list_apis():
+    apis = APIEndpoint.query.filter_by(user_id=current_user.id).all()
+    return jsonify([api.to_dict() for api in apis])
+
+@app.route('/api/cms/stats', methods=['GET'])
+@login_required
+def get_stats():
+    apis = APIEndpoint.query.filter_by(user_id=current_user.id).all()
+    
+    total_calls = sum(api.total_calls for api in apis)
+    total_tokens = sum(api.total_tokens for api in apis)
+    total_cost = sum(api.total_cost for api in apis)
+    
+    return jsonify({
+        "total_calls": total_calls,
+        "total_tokens": total_tokens,
+        "total_cost": round(total_cost, 4),
+        "active_apis": len([api for api in apis if api.is_active])
+    })
+
+@app.route('/api/cms/logs', methods=['GET'])
+@login_required
+def get_logs():
+    user_endpoint_ids = [api.id for api in APIEndpoint.query.filter_by(user_id=current_user.id).all()]
+    logs = APILog.query.filter(APILog.endpoint_id.in_(user_endpoint_ids)).order_by(APILog.timestamp.desc()).limit(50).all()
+    return jsonify([log.to_dict() for log in logs])
+
+@app.route('/api/cms/delete/<int:api_id>', methods=['DELETE'])
+@login_required
+def delete_api(api_id):
+    api = APIEndpoint.query.filter_by(id=api_id, user_id=current_user.id).first_or_404()
+    db.session.delete(api)
+    db.session.commit()
+    return jsonify({"status": "success", "message": "API Deleted"})
+
+@app.route('/api/cms/export', methods=['GET'])
+@login_required
+def export_logs():
+    user_endpoint_ids = [api.id for api in APIEndpoint.query.filter_by(user_id=current_user.id).all()]
+    logs = APILog.query.filter(APILog.endpoint_id.in_(user_endpoint_ids)).order_by(APILog.timestamp.desc()).all()
+    
+    output = io.StringIO()
+    writer = csv.writer(output)
+    writer.writerow(['Timestamp', 'Endpoint', 'Tokens', 'Latency', 'Cost', 'Status'])
+    
+    for log in logs:
+        writer.writerow([
+            log.timestamp.strftime("%Y-%m-%d %H:%M:%S"),
+            log.endpoint.route,
+            log.tokens_used,
+            round(log.latency, 3),
+            round(log.cost, 4),
+            log.status_code
+        ])
+    
+    output.seek(0)
+    return send_file(
+        io.BytesIO(output.getvalue().encode('utf-8')),
+        mimetype='text/csv',
+        as_attachment=True,
+        download_name=f'api_logs_{datetime.now().strftime("%Y%m%d_%H%M%S")}.csv'
+    )
+
+# --- API KEY MANAGEMENT ---
+
+@app.route('/api/cms/keys', methods=['GET'])
+@login_required
+def list_keys():
+    keys = APIKey.query.filter_by(user_id=current_user.id).all()
+    return jsonify([k.to_dict() for k in keys])
+
+@app.route('/api/cms/keys', methods=['POST'])
+@login_required
+def create_key():
+    data = request.json
+    new_key = APIKey(
+        user_id=current_user.id,
+        key=APIKey.generate_key(),
+        name=data.get('name', 'Unnamed Key')
+    )
+    db.session.add(new_key)
+    db.session.commit()
+    return jsonify({"status": "success", "key": new_key.key})
+
+@app.route('/api/cms/keys/<int:key_id>', methods=['DELETE'])
+@login_required
+def delete_key(key_id):
+    key = APIKey.query.filter_by(id=key_id, user_id=current_user.id).first_or_404()
+    db.session.delete(key)
+    db.session.commit()
+    return jsonify({"status": "success", "message": "Key Deleted"})
+
+@app.route('/api/cms/keys/<int:key_id>/toggle', methods=['POST'])
+@login_required
+def toggle_key(key_id):
+    key = APIKey.query.filter_by(id=key_id, user_id=current_user.id).first_or_404()
+    key.is_active = not key.is_active
+    db.session.commit()
+    return jsonify({"status": "success", "is_active": key.is_active})
+
+# --- DYNAMIC USER API ENDPOINTS ---
+
+@app.route('/user-api/<path:route>', methods=['GET', 'POST'])
+def dynamic_endpoint(route):
+    api_key = request.headers.get('X-API-Key') or request.args.get('api_key')
+    
+    target_api = APIEndpoint.query.filter_by(route=route, is_active=True).first()
+    
+    if not target_api:
+        return jsonify({"error": "Endpoint not found"}), 404
+    
+    api_key_obj = None
+    if api_key:
+        api_key_obj = APIKey.query.filter_by(key=api_key, is_active=True).first()
+        if not api_key_obj:
+            return jsonify({"error": "Invalid API Key"}), 401
+        
+        api_key_obj.last_used = datetime.utcnow()
+        api_key_obj.usage_count += 1
+    
+    start_time = time.time()
+    input_data = request.json if request.is_json else request.args.to_dict()
+    
+    response_text = generate_mock_response(target_api.prompt, input_data)
+    
+    latency = time.time() - start_time
+    tokens_used = len(response_text) // 4
+    cost = (tokens_used / 1000) * 0.002
+    
+    target_api.total_calls += 1
+    target_api.total_tokens += tokens_used
+    target_api.total_cost += cost
+    
+    log = APILog(
+        endpoint_id=target_api.id,
+        api_key_id=api_key_obj.id if api_key_obj else None,
+        input_data=json.dumps(input_data),
+        output_data=response_text,
+        tokens_used=tokens_used,
+        latency=latency,
+        cost=cost,
+        status_code=200
+    )
+    
+    db.session.add(log)
+    db.session.commit()
+    
+    return jsonify({
+        "response": response_text,
+        "meta": {
+            "model": target_api.model,
+            "latency": round(latency, 3),
+            "tokens": tokens_used,
+            "cost": round(cost, 4)
+        }
+    })
+
+# --- INITIALIZE DATABASE ---
+def init_db():
+    with app.app_context():
+        db.create_all()
+        
+        if User.query.count() == 0:
+            admin = User(username='admin', is_admin=True)
+            admin.set_password('admin123')
+            db.session.add(admin)
+            db.session.commit()
+            print("✅ Default admin created (username: admin, password: admin123)")
+        
+        print("✅ Database initialized!")
+
+if __name__ == '__main__':
+    init_db()
+    # Hugging Face Spaces uses port 7860
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False)

static/script.js

@@ -0,0 +1,211 @@
+// Navigation Logic
+function showSection(sectionId) {
+    document.querySelectorAll('.section').forEach(el => el.classList.remove('active'));
+    document.querySelectorAll('.nav-links li').forEach(el => el.classList.remove('active'));
+    
+    document.getElementById(sectionId).classList.add('active');
+    event.target.classList.add('active');
+
+    if(sectionId === 'dashboard') loadStats();
+    if(sectionId === 'list') loadApis();
+}
+
+// Load Stats
+async function loadStats() {
+    const res = await fetch('/api/cms/stats');
+    const data = await res.json();
+    
+    document.getElementById('stat-calls').innerText = data.total_calls;
+    document.getElementById('stat-tokens').innerText = data.total_tokens;
+    document.getElementById('stat-cost').innerText = '$' + data.total_cost.toFixed(4);
+    document.getElementById('stat-apis').innerText = data.active_apis;
+}
+
+// Create API
+document.getElementById('create-form').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const payload = {
+        route: document.getElementById('api-route').value,
+        model: document.getElementById('api-model').value,
+        prompt: document.getElementById('api-prompt').value
+    };
+
+    const res = await fetch('/api/cms/create', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(payload)
+    });
+
+    if(res.ok) {
+        alert('API Created! You can now POST to: http://localhost:5000/user-api/' + payload.route);
+        document.getElementById('create-form').reset();
+        showSection('list');
+    }
+});
+
+async function loadLogs() {
+    const res = await fetch('/api/cms/logs');
+    const logs = await res.json();
+    const container = document.getElementById('logs-container');
+    
+    if (logs.length === 0) {
+        container.innerHTML = '<p class="sub-text">No API calls yet</p>';
+        return;
+    }
+    
+    let html = '<table style="width:100%; font-size:0.85rem;">';
+    html += '<tr><th>Time</th><th>Tokens</th><th>Latency</th><th>Cost</th></tr>';
+    
+    logs.slice(0, 10).forEach(log => {
+        html += `
+            <tr>
+                <td>${log.timestamp.split(' ')[1]}</td>
+                <td>${log.tokens_used}</td>
+                <td>${log.latency}s</td>
+                <td>$${log.cost}</td>
+            </tr>
+        `;
+    });
+    
+    html += '</table>';
+    container.innerHTML = html;
+}
+
+// Update showSection function to load logs
+function showSection(sectionId) {
+    document.querySelectorAll('.section').forEach(el => el.classList.remove('active'));
+    document.querySelectorAll('.nav-links li').forEach(el => el.classList.remove('active'));
+    
+    document.getElementById(sectionId).classList.add('active');
+    event.target.classList.add('active');
+
+    if(sectionId === 'dashboard') {
+        loadStats();
+        loadLogs();
+    }
+    if(sectionId === 'list') loadApis();
+}
+
+// Load API List
+async function loadApis() {
+    const res = await fetch('/api/cms/list');
+    const apis = await res.json();
+    const tbody = document.getElementById('api-table-body');
+    
+    tbody.innerHTML = '';
+    
+    apis.forEach(api => {
+        const row = `
+            <tr>
+                <td><span class="endpoint-url">/user-api/${api.route}</span></td>
+                <td>${api.model}</td>
+                <td>${api.total_calls}</td>
+                <td>
+                    <button onclick="testApi('${api.route}')" style="padding:5px; cursor:pointer;">Test</button>
+                    <button onclick="deleteApi(${api.id})" style="padding:5px; cursor:pointer; color:red;">Delete</button>
+                </td>
+            </tr>
+        `;
+        tbody.innerHTML += row;
+    });
+}
+
+// Add delete function
+async function deleteApi(id) {
+    if(confirm('Are you sure you want to delete this API?')) {
+        await fetch(`/api/cms/delete/${id}`, { method: 'DELETE' });
+        loadApis();
+        loadStats();
+    }
+}
+
+// API Keys Functions
+async function loadKeys() {
+    const res = await fetch('/api/cms/keys');
+    const keys = await res.json();
+    const tbody = document.getElementById('keys-table-body');
+    
+    tbody.innerHTML = '';
+    
+    keys.forEach(key => {
+        const row = `
+            <tr>
+                <td>${key.name}</td>
+                <td><code style="background:#eee; padding:2px 6px; font-size:0.75rem;">${key.key}</code></td>
+                <td>${key.usage_count}</td>
+                <td><span style="color:${key.is_active ? 'green' : 'red'}">● ${key.is_active ? 'Active' : 'Inactive'}</span></td>
+                <td>
+                    <button onclick="toggleKey(${key.id})" style="padding:5px; cursor:pointer;">${key.is_active ? 'Deactivate' : 'Activate'}</button>
+                    <button onclick="deleteKey(${key.id})" style="padding:5px; cursor:pointer; color:red;">Delete</button>
+                </td>
+            </tr>
+        `;
+        tbody.innerHTML += row;
+    });
+}
+
+async function createKey() {
+    const name = document.getElementById('key-name').value || 'Unnamed Key';
+    
+    const res = await fetch('/api/cms/keys', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({name})
+    });
+    
+    const data = await res.json();
+    
+    if (res.ok) {
+        alert('New API Key Generated:\n\n' + data.key + '\n\nSave this key! It won\'t be shown again.');
+        document.getElementById('key-name').value = '';
+        loadKeys();
+    }
+}
+
+async function toggleKey(id) {
+    await fetch(`/api/cms/keys/${id}/toggle`, {method: 'POST'});
+    loadKeys();
+}
+
+async function deleteKey(id) {
+    if(confirm('Delete this API Key?')) {
+        await fetch(`/api/cms/keys/${id}`, {method: 'DELETE'});
+        loadKeys();
+    }
+}
+
+// Export Function
+function exportLogs() {
+    window.open('/api/cms/export', '_blank');
+}
+
+// Update showSection to handle keys
+function showSection(sectionId) {
+    document.querySelectorAll('.section').forEach(el => el.classList.remove('active'));
+    document.querySelectorAll('.nav-links li').forEach(el => el.classList.remove('active'));
+    
+    document.getElementById(sectionId).classList.add('active');
+    event.target.classList.add('active');
+
+    if(sectionId === 'dashboard') {
+        loadStats();
+        loadLogs();
+    }
+    if(sectionId === 'list') loadApis();
+    if(sectionId === 'keys') loadKeys();
+}
+
+// Simple Test Function
+async function testApi(route) {
+    const res = await fetch(`/user-api/${route}`, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({test: "data"})
+    });
+    const data = await res.json();
+    alert("Response:\n" + JSON.stringify(data, null, 2));
+}
+
+// Initial Load
+loadStats();

static/style.css

@@ -0,0 +1,217 @@
+:root {
+    --bg-color: #F0F4F8; /* Light Blue/Grey background */
+    --card-bg: #FFFFFF;
+    --primary: #0055FF; /* Electric Blue */
+    --primary-hover: #0044CC;
+    --text-main: #000000;
+    --text-sub: #555555;
+    --border: #000000;
+    --border-width: 3px; /* Bold Stroke */
+    --shadow: 6px 6px 0px #000000; /* Hard Shadow */
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Inter', sans-serif;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-main);
+    display: flex;
+    min-height: 100vh;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 250px;
+    background: var(--card-bg);
+    border-right: var(--border-width) solid var(--border);
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin-bottom: 3rem;
+    letter-spacing: -1px;
+}
+
+.logo span {
+    color: var(--primary);
+}
+
+.nav-links {
+    list-style: none;
+}
+
+.nav-links li {
+    padding: 1rem;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: all 0.2s;
+}
+
+.nav-links li:hover, .nav-links li.active {
+    border: 2px solid var(--border);
+    background: var(--primary);
+    color: white;
+    box-shadow: 4px 4px 0px var(--border);
+    transform: translate(-2px, -2px);
+}
+
+/* Main Content */
+.content {
+    flex: 1;
+    padding: 3rem;
+    overflow-y: auto;
+}
+
+.section {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.section.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+header {
+    margin-bottom: 2rem;
+    border-bottom: 2px solid var(--border);
+    padding-bottom: 1rem;
+}
+
+h1 {
+    font-size: 2.5rem;
+    font-weight: 800;
+    letter-spacing: -1px;
+    text-transform: uppercase;
+}
+
+p {
+    color: var(--text-sub);
+    font-size: 0.9rem;
+}
+
+/* Cards & UI Elements */
+.card {
+    background: var(--card-bg);
+    border: var(--border-width) solid var(--border);
+    box-shadow: var(--shadow);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-radius: 4px; /* Slight rounding */
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.stat-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.label {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--text-sub);
+    margin-bottom: 0.5rem;
+}
+
+.value {
+    font-size: 2rem;
+    font-weight: 800;
+    color: var(--primary);
+}
+
+/* Forms */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+
+input, select, textarea {
+    width: 100%;
+    padding: 1rem;
+    border: 2px solid var(--border);
+    background: #FAFAFA;
+    font-size: 1rem;
+    outline: none;
+    transition: 0.2s;
+}
+
+input:focus, select:focus, textarea:focus {
+    background: #E0F0FF; /* Light Blue focus */
+    border-color: var(--primary);
+}
+
+.btn-primary {
+    width: 100%;
+    padding: 1rem;
+    background: var(--primary);
+    color: white;
+    border: 2px solid var(--border);
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: 4px 4px 0px var(--border);
+    transition: all 0.2s;
+}
+
+.btn-primary:active {
+    transform: translate(2px, 2px);
+    box-shadow: 2px 2px 0px var(--border);
+}
+
+/* Table */
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+th, td {
+    text-align: left;
+    padding: 1rem;
+    border-bottom: 2px solid var(--border);
+}
+
+th {
+    background: #000;
+    color: #fff;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+}
+
+td {
+    font-weight: 600;
+}
+
+.endpoint-url {
+    font-family: monospace;
+    background: #eee;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+}

templates/index.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI CMS Platform</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <!-- Sidebar Navigation -->
+    <nav class="sidebar">
+        <div class="logo">AI<span>CMS</span></div>
+        <ul class="nav-links">
+            <li onclick="showSection('dashboard')" class="active">Dashboard</li>
+            <li onclick="showSection('create')">Create API</li>
+            <li onclick="showSection('list')">API List</li>
+            <li onclick="showSection('keys')">API Keys</li>
+        </ul>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="content">
+        
+        <!-- SECTION: DASHBOARD -->
+        <div class="card recent-logs">
+            <h3>Recent API Calls</h3>
+            <div id="logs-container" style="margin-top: 1rem;">
+                <p class="sub-text">Loading logs...</p>
+            </div>
+        </div>
+        <section id="dashboard" class="section active">
+            <header>
+                <h1>Overview</h1>
+                <p>Monitor your AI endpoints in real-time.</p>
+            </header>
+            
+            <div class="stats-grid">
+                <div class="card stat-card">
+                    <span class="label">Total Calls</span>
+                    <span class="value" id="stat-calls">0</span>
+                </div>
+                <div class="card stat-card">
+                    <span class="label">Tokens Used</span>
+                    <span class="value" id="stat-tokens">0</span>
+                </div>
+                <div class="card stat-card">
+                    <span class="label">Est. Cost</span>
+                    <span class="value" id="stat-cost">$0.00</span>
+                </div>
+                <div class="card stat-card">
+                    <span class="label">Active Endpoints</span>
+                    <span class="value" id="stat-apis">0</span>
+                </div>
+            </div>
+
+            <div class="card recent-logs">
+                <h3>System Status</h3>
+                <p class="status-ok">● System Operational</p>
+                <p class="sub-text">All dynamic routes are live.</p>
+            </div>
+        </section>
+
+        <!-- SECTION: CREATE API -->
+        <section id="create" class="section">
+            <header>
+                <h1>Create New Endpoint</h1>
+                <p>Define logic using natural language.</p>
+            </header>
+
+            <form id="create-form" class="card form-card">
+                <div class="form-group">
+                    <label>Endpoint Route</label>
+                    <input type="text" id="api-route" placeholder="e.g. summarize-text" required>
+                </div>
+                
+                <div class="form-group">
+                    <label>AI Model</label>
+                    <select id="api-model">
+                        <option value="gpt-4o">GPT-4o</option>
+                        <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
+                        <option value="claude-3">Claude 3.5 Sonnet</option>
+                        <option value="llama-3">Llama 3 (Local)</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>System Prompt (Logic)</label>
+                    <textarea id="api-prompt" rows="5" placeholder="e.g. You are a helpful assistant that summarizes text..." required></textarea>
+                </div>
+
+                <button type="submit" class="btn-primary">Deploy Endpoint</button>
+            </form>
+        </section>
+
+        <!-- SECTION: API LIST -->
+        <section id="list" class="section">
+            <header>
+                <h1>Active Endpoints</h1>
+                <p>Copy the URL below to test in Postman.</p>
+            </header>
+            
+            <div class="card table-card">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Route</th>
+                            <th>Model</th>
+                            <th>Calls</th>
+                            <th>Action</th>
+                        </tr>
+                    </thead>
+                    <tbody id="api-table-body">
+                        <!-- Populated by JS -->
+                    </tbody>
+                </table>
+            </div>
+        </section>
+        <section id="keys" class="section">
+    <header>
+        <h1>API Keys</h1>
+        <p>Manage keys for securing your endpoints.</p>
+    </header>
+    
+    <div class="card form-card" style="margin-bottom: 1.5rem;">
+        <div class="form-group">
+            <label>Key Name</label>
+            <input type="text" id="key-name" placeholder="e.g. Production Key">
+        </div>
+        <button onclick="createKey()" class="btn-primary">Generate New Key</button>
+    </div>
+    
+    <div class="card table-card">
+        <table>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Key</th>
+                    <th>Usage</th>
+                    <th>Status</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody id="keys-table-body"></tbody>
+        </table>
+    </div>
+</section>
+
+<div class="card recent-logs" style="margin-top: 1rem;">
+    <div style="display: flex; justify-content: space-between; align-items: center;">
+        <h3>Recent API Calls</h3>
+        <button onclick="exportLogs()" class="btn-primary" style="width: auto; padding: 0.5rem 1rem;">📥 Export CSV</button>
+    </div>
+    <div id="logs-container" style="margin-top: 1rem;">
+        <p class="sub-text">Loading logs...</p>
+    </div>
+</div>
+
+<!-- Add Logout in Sidebar -->
+<div style="margin-top: auto; padding-top: 2rem; border-top: 2px solid var(--border);">
+    <a href="/logout" style="color: var(--text-main); text-decoration: none; font-weight: 600;">Logout →</a>
+</div>
+
+</main>
+
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - AI CMS</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* Animated Background */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            overflow: hidden;
+        }
+
+        .bg-animation span {
+            position: absolute;
+            display: block;
+            width: 20px;
+            height: 20px;
+            background: rgba(0, 85, 255, 0.1);
+            animation: float 25s linear infinite;
+            bottom: -150px;
+            border-radius: 4px;
+        }
+
+        .bg-animation span:nth-child(1) { left: 5%; width: 80px; height: 80px; animation-delay: 0s; }
+        .bg-animation span:nth-child(2) { left: 15%; width: 40px; height: 40px; animation-delay: 2s; animation-duration: 18s; }
+        .bg-animation span:nth-child(3) { left: 25%; width: 60px; height: 60px; animation-delay: 4s; }
+        .bg-animation span:nth-child(4) { left: 35%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 22s; }
+        .bg-animation span:nth-child(5) { left: 45%; width: 50px; height: 50px; animation-delay: 6s; }
+        .bg-animation span:nth-child(6) { left: 55%; width: 90px; height: 90px; animation-delay: 3s; }
+        .bg-animation span:nth-child(7) { left: 65%; width: 30px; height: 30px; animation-delay: 7s; }
+        .bg-animation span:nth-child(8) { left: 75%; width: 70px; height: 70px; animation-delay: 2s; animation-duration: 20s; }
+        .bg-animation span:nth-child(9) { left: 85%; width: 45px; height: 45px; animation-delay: 5s; }
+        .bg-animation span:nth-child(10) { left: 95%; width: 85px; height: 85px; animation-delay: 1s; }
+
+        @keyframes float {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-1200px) rotate(720deg);
+                opacity: 0;
+            }
+        }
+
+        /* Grid Pattern Overlay */
+        .bg-grid {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                linear-gradient(rgba(0, 85, 255, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 85, 255, 0.03) 1px, transparent 1px);
+            background-size: 50px 50px;
+            z-index: 1;
+        }
+
+        /* 3D Card Container */
+        .auth-container {
+            position: relative;
+            z-index: 10;
+            perspective: 1000px;
+            padding: 2rem;
+        }
+
+        .auth-card {
+            width: 100%;
+            max-width: 500px;
+            padding: 3rem;
+            background: rgba(255, 255, 255, 0.95);
+            border: 3px solid #000000;
+            box-shadow: 
+                15px 15px 0px #000000,
+                0 0 40px rgba(0, 85, 255, 0.3);
+            border-radius: 8px;
+            transform-style: preserve-3d;
+            animation: cardFloat 6s ease-in-out infinite;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .auth-card:hover {
+            transform: translate(-3px, -3px) rotateX(2deg) rotateY(-2deg);
+            box-shadow: 
+                18px 18px 0px #000000,
+                0 0 60px rgba(0, 85, 255, 0.5);
+        }
+
+        @keyframes cardFloat {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .auth-card h1 {
+            text-align: center;
+            margin-bottom: 0.5rem;
+            font-size: 3rem;
+            letter-spacing: -2px;
+            font-weight: 800;
+            transform: translateZ(20px);
+        }
+
+        .auth-card .subtitle {
+            text-align: center;
+            color: #555555;
+            margin-bottom: 2.5rem;
+            font-size: 1rem;
+            transform: translateZ(10px);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            transform: translateZ(5px);
+        }
+
+        label {
+            display: block;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        input {
+            width: 100%;
+            padding: 1rem;
+            border: 2px solid #000000;
+            background: #FAFAFA;
+            font-size: 1rem;
+            outline: none;
+            transition: all 0.2s;
+            border-radius: 4px;
+        }
+
+        input:focus {
+            background: #E0F0FF;
+            border-color: #0055FF;
+            box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.2);
+        }
+
+        .btn-primary {
+            width: 100%;
+            padding: 1rem;
+            background: #0055FF;
+            color: white;
+            border: 2px solid #000000;
+            font-weight: 700;
+            cursor: pointer;
+            box-shadow: 4px 4px 0px #000000;
+            transition: all 0.2s;
+            font-size: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            border-radius: 4px;
+            margin-top: 1rem;
+        }
+
+        .btn-primary:hover {
+            background: #0044CC;
+            transform: translate(-2px, -2px);
+            box-shadow: 6px 6px 0px #000000;
+        }
+
+        .btn-primary:active {
+            transform: translate(2px, 2px);
+            box-shadow: 2px 2px 0px #000000;
+        }
+
+        .auth-links {
+            text-align: center;
+            margin-top: 2rem;
+            padding-top: 1.5rem;
+            border-top: 2px solid #000000;
+            transform: translateZ(10px);
+        }
+
+        .auth-links a {
+            color: #0055FF;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.2s;
+        }
+
+        .auth-links a:hover {
+            text-decoration: underline;
+            color: #0044CC;
+        }
+
+        .error-message {
+            background: #f8d7da;
+            border: 2px solid #dc3545;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border-radius: 4px;
+            text-align: center;
+            font-weight: 600;
+            color: #721c24;
+            animation: shake 0.5s ease;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            75% { transform: translateX(5px); }
+        }
+
+        /* Logo Animation */
+        .logo-text {
+            display: inline-block;
+            animation: logoPulse 2s ease-in-out infinite;
+        }
+
+        @keyframes logoPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+        }
+    </style>
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="bg-animation">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+    
+    <!-- Grid Overlay -->
+    <div class="bg-grid"></div>
+
+    <div class="auth-container">
+        <div class="card auth-card">
+            <h1><span class="logo-text">AI</span><span style="color:#0055FF">CMS</span></h1>
+            <p class="subtitle">Sign in to your account</p>
+            
+            <div id="message-container"></div>
+            
+            <form id="login-form">
+                <div class="form-group">
+                    <label>Username</label>
+                    <input type="text" id="username" placeholder="Enter your username" required autocomplete="username">
+                </div>
+                <div class="form-group">
+                    <label>Password</label>
+                    <input type="password" id="password" placeholder="Enter your password" required autocomplete="current-password">
+                </div>
+                <button type="submit" class="btn-primary">Sign In</button>
+            </form>
+            
+            <div class="auth-links">
+                <p>Don't have an account? <a href="/register">Create one here</a></p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 3D Tilt Effect
+        const card = document.querySelector('.auth-card');
+        const container = document.querySelector('.auth-container');
+
+        container.addEventListener('mousemove', (e) => {
+            const rect = container.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            const rotateX = (y - centerY) / 20;
+            const rotateY = (centerX - x) / 20;
+            
+            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        });
+
+        container.addEventListener('mouseleave', () => {
+            card.style.transform = 'rotateX(0) rotateY(0)';
+        });
+
+        // Login Form
+        document.getElementById('login-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const res = await fetch('/login', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    username: document.getElementById('username').value,
+                    password: document.getElementById('password').value
+                })
+            });
+            
+            const data = await res.json();
+            const messageContainer = document.getElementById('message-container');
+            
+            if (res.ok) {
+                messageContainer.innerHTML = '<div style="background:#d4edda;border:2px solid #28a745;padding:1rem;margin-bottom:1rem;border-radius:4px;text-align:center;font-weight:600;color:#155724;">Login successful! Redirecting...</div>';
+                setTimeout(() => {
+                    window.location.href = '/';
+                }, 1000);
+            } else {
+                messageContainer.innerHTML = `<div class="error-message">${data.message}</div>`;
+            }
+        });
+    </script>
+</body>
+</html>

templates/register.html

@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - AI CMS</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* Animated Background */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            overflow: hidden;
+        }
+
+        .bg-animation span {
+            position: absolute;
+            display: block;
+            width: 20px;
+            height: 20px;
+            background: rgba(0, 85, 255, 0.1);
+            animation: float 25s linear infinite;
+            bottom: -150px;
+            border-radius: 4px;
+        }
+
+        .bg-animation span:nth-child(1) { left: 5%; width: 80px; height: 80px; animation-delay: 0s; }
+        .bg-animation span:nth-child(2) { left: 15%; width: 40px; height: 40px; animation-delay: 2s; animation-duration: 18s; }
+        .bg-animation span:nth-child(3) { left: 25%; width: 60px; height: 60px; animation-delay: 4s; }
+        .bg-animation span:nth-child(4) { left: 35%; width: 100px; height: 100px; animation-delay: 0s; animation-duration: 22s; }
+        .bg-animation span:nth-child(5) { left: 45%; width: 50px; height: 50px; animation-delay: 6s; }
+        .bg-animation span:nth-child(6) { left: 55%; width: 90px; height: 90px; animation-delay: 3s; }
+        .bg-animation span:nth-child(7) { left: 65%; width: 30px; height: 30px; animation-delay: 7s; }
+        .bg-animation span:nth-child(8) { left: 75%; width: 70px; height: 70px; animation-delay: 2s; animation-duration: 20s; }
+        .bg-animation span:nth-child(9) { left: 85%; width: 45px; height: 45px; animation-delay: 5s; }
+        .bg-animation span:nth-child(10) { left: 95%; width: 85px; height: 85px; animation-delay: 1s; }
+
+        @keyframes float {
+            0% {
+                transform: translateY(0) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-1200px) rotate(720deg);
+                opacity: 0;
+            }
+        }
+
+        /* Grid Pattern Overlay */
+        .bg-grid {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                linear-gradient(rgba(0, 85, 255, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 85, 255, 0.03) 1px, transparent 1px);
+            background-size: 50px 50px;
+            z-index: 1;
+        }
+
+        /* 3D Card Container */
+        .auth-container {
+            position: relative;
+            z-index: 10;
+            perspective: 1000px;
+            padding: 2rem;
+        }
+
+        .auth-card {
+            width: 100%;
+            max-width: 550px;
+            padding: 3rem;
+            background: rgba(255, 255, 255, 0.95);
+            border: 3px solid #000000;
+            box-shadow: 
+                15px 15px 0px #000000,
+                0 0 40px rgba(0, 85, 255, 0.3);
+            border-radius: 8px;
+            transform-style: preserve-3d;
+            animation: cardFloat 6s ease-in-out infinite;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .auth-card:hover {
+            transform: translate(-3px, -3px) rotateX(2deg) rotateY(-2deg);
+            box-shadow: 
+                18px 18px 0px #000000,
+                0 0 60px rgba(0, 85, 255, 0.5);
+        }
+
+        @keyframes cardFloat {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .auth-card h1 {
+            text-align: center;
+            margin-bottom: 0.5rem;
+            font-size: 3rem;
+            letter-spacing: -2px;
+            font-weight: 800;
+            transform: translateZ(20px);
+        }
+
+        .auth-card .subtitle {
+            text-align: center;
+            color: #555555;
+            margin-bottom: 2.5rem;
+            font-size: 1rem;
+            transform: translateZ(10px);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+            transform: translateZ(5px);
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+
+        label {
+            display: block;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        input {
+            width: 100%;
+            padding: 1rem;
+            border: 2px solid #000000;
+            background: #FAFAFA;
+            font-size: 1rem;
+            outline: none;
+            transition: all 0.2s;
+            border-radius: 4px;
+        }
+
+        input:focus {
+            background: #E0F0FF;
+            border-color: #0055FF;
+            box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.2);
+        }
+
+        .btn-primary {
+            width: 100%;
+            padding: 1rem;
+            background: #0055FF;
+            color: white;
+            border: 2px solid #000000;
+            font-weight: 700;
+            cursor: pointer;
+            box-shadow: 4px 4px 0px #000000;
+            transition: all 0.2s;
+            font-size: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            border-radius: 4px;
+            margin-top: 1rem;
+        }
+
+        .btn-primary:hover {
+            background: #0044CC;
+            transform: translate(-2px, -2px);
+            box-shadow: 6px 6px 0px #000000;
+        }
+
+        .btn-primary:active {
+            transform: translate(2px, 2px);
+            box-shadow: 2px 2px 0px #000000;
+        }
+
+        .auth-links {
+            text-align: center;
+            margin-top: 2rem;
+            padding-top: 1.5rem;
+            border-top: 2px solid #000000;
+            transform: translateZ(10px);
+        }
+
+        .auth-links a {
+            color: #0055FF;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.2s;
+        }
+
+        .auth-links a:hover {
+            text-decoration: underline;
+            color: #0044CC;
+        }
+
+        .password-strength {
+            margin-top: 0.5rem;
+            font-size: 0.75rem;
+            color: #555555;
+        }
+
+        .success-message {
+            background: #d4edda;
+            border: 2px solid #28a745;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border-radius: 4px;
+            text-align: center;
+            font-weight: 600;
+            color: #155724;
+            animation: slideIn 0.3s ease;
+        }
+
+        .error-message {
+            background: #f8d7da;
+            border: 2px solid #dc3545;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border-radius: 4px;
+            text-align: center;
+            font-weight: 600;
+            color: #721c24;
+            animation: shake 0.5s ease;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            75% { transform: translateX(5px); }
+        }
+
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Logo Animation */
+        .logo-text {
+            display: inline-block;
+            animation: logoPulse 2s ease-in-out infinite;
+        }
+
+        @keyframes logoPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+        }
+    </style>
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="bg-animation">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+    
+    <!-- Grid Overlay -->
+    <div class="bg-grid"></div>
+
+    <div class="auth-container">
+        <div class="card auth-card">
+            <h1><span class="logo-text">AI</span><span style="color:#0055FF">CMS</span></h1>
+            <p class="subtitle">Create your account to get started</p>
+            
+            <div id="message-container"></div>
+            
+            <form id="register-form">
+                <div class="form-group">
+                    <label>Username</label>
+                    <input type="text" id="username" placeholder="Choose a username" required autocomplete="username">
+                </div>
+                
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Password</label>
+                        <input type="password" id="password" placeholder="Min. 6 characters" required autocomplete="new-password" minlength="6">
+                    </div>
+                    <div class="form-group">
+                        <label>Confirm Password</label>
+                        <input type="password" id="confirm-password" placeholder="Re-enter password" required autocomplete="new-password">
+                    </div>
+                </div>
+                <p class="password-strength">🔒 Must be at least 6 characters</p>
+                
+                <button type="submit" class="btn-primary">Create Account</button>
+            </form>
+            
+            <div class="auth-links">
+                <p>Already have an account? <a href="/login">Login here</a></p>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 3D Tilt Effect
+        const card = document.querySelector('.auth-card');
+        const container = document.querySelector('.auth-container');
+
+        container.addEventListener('mousemove', (e) => {
+            const rect = container.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            const rotateX = (y - centerY) / 20;
+            const rotateY = (centerX - x) / 20;
+            
+            card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        });
+
+        container.addEventListener('mouseleave', () => {
+            card.style.transform = 'rotateX(0) rotateY(0)';
+        });
+
+        // Register Form
+        document.getElementById('register-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
+            const password = document.getElementById('password').value;
+            const confirmPassword = document.getElementById('confirm-password').value;
+            const messageContainer = document.getElementById('message-container');
+            
+            if (password !== confirmPassword) {
+                messageContainer.innerHTML = '<div class="error-message">❌ Passwords do not match!</div>';
+                return;
+            }
+            
+            if (password.length < 6) {
+                messageContainer.innerHTML = '<div class="error-message">❌ Password must be at least 6 characters!</div>';
+                return;
+            }
+            
+            const res = await fetch('/register', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    username: document.getElementById('username').value,
+                    password: password
+                })
+            });
+            
+            const data = await res.json();
+            
+            if (res.ok) {
+                messageContainer.innerHTML = '<div class="success-message">✅ Account created successfully! Redirecting...</div>';
+                setTimeout(() => {
+                    window.location.href = '/login';
+                }, 1500);
+            } else {
+                messageContainer.innerHTML = `<div class="error-message">❌ ${data.message}</div>`;
+            }
+        });
+        
+        // Real-time password match validation
+        document.getElementById('confirm-password').addEventListener('input', function() {
+            const password = document.getElementById('password').value;
+            const confirmPassword = this.value;
+            
+            if (confirmPassword && password !== confirmPassword) {
+                this.style.borderColor = '#dc3545';
+                this.style.background = '#fff5f5';
+            } else {
+                this.style.borderColor = '#000000';
+                this.style.background = '#FAFAFA';
+            }
+        });
+    </script>
+</body>
+</html>