Upload 9 files

Dockerfile

@@ -0,0 +1,40 @@
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY app_requirements.txt ./
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r app_requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create data directory with proper permissions
+RUN mkdir -p data && chmod 755 data
+
+# Create non-root user for security
+RUN useradd -m -u 1000 appuser && chown -R appuser:appuser /app
+USER appuser
+
+# Expose port
+EXPOSE 5000
+
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV FLASK_APP=main.py
+ENV FLASK_ENV=production
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:5000/ || exit 1
+
+# Start application
+CMD ["gunicorn", "--bind", "0.0.0.0:5000", "--workers", "1", "--timeout", "120", "--keep-alive", "5", "--max-requests", "1000", "--max-requests-jitter", "100", "main:app"]

app.py

@@ -0,0 +1,275 @@
+import os
+import json
+import logging
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, send_file, flash, redirect, url_for
+from openpyxl import Workbook
+from openpyxl.styles import Font, PatternFill, Alignment
+import tempfile
+import re
+
+# Configure logging
+logging.basicConfig(level=logging.DEBUG)
+
+app = Flask(__name__)
+app.secret_key = os.environ.get("SESSION_SECRET", "your-secret-key-for-development")
+
+# Ensure data directory exists
+DATA_DIR = "data"
+TICKETS_FILE = os.path.join(DATA_DIR, "tickets.json")
+
+if not os.path.exists(DATA_DIR):
+    os.makedirs(DATA_DIR)
+
+def load_tickets():
+    """Load tickets from JSON file"""
+    try:
+        if os.path.exists(TICKETS_FILE):
+            with open(TICKETS_FILE, 'r', encoding='utf-8') as f:
+                return json.load(f)
+        return []
+    except Exception as e:
+        logging.error(f"Error loading tickets: {e}")
+        return []
+
+def save_tickets(tickets):
+    """Save tickets to JSON file"""
+    try:
+        with open(TICKETS_FILE, 'w', encoding='utf-8') as f:
+            json.dump(tickets, f, indent=2, ensure_ascii=False)
+        return True
+    except Exception as e:
+        logging.error(f"Error saving tickets: {e}")
+        return False
+
+def validate_email(email):
+    """Validate email format"""
+    pattern = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
+    return re.match(pattern, email) is not None
+
+def validate_phone(phone):
+    """Validate phone number format"""
+    # Allow digits, spaces, hyphens, parentheses, and plus sign
+    pattern = r'^[\+\(\)\-\s\d]{7,20}$'
+    return re.match(pattern, phone) is not None
+
+@app.route('/')
+def index():
+    """Main page with API documentation"""
+    return render_template('index.html')
+
+@app.route('/admin')
+def admin():
+    """Admin dashboard to view all tickets"""
+    tickets = load_tickets()
+    return render_template('admin.html', tickets=tickets, total_tickets=len(tickets))
+
+@app.route('/add_data/<email>/<phone>/<name>/<int:tickets>/<ticket_number>/<country>/<region>')
+def add_ticket_data(email, phone, name, tickets, ticket_number, country, region):
+    """Add ticket data via URL parameters"""
+    try:
+        # Validate input data
+        errors = []
+        
+        if not validate_email(email):
+            errors.append("Invalid email format")
+        
+        if not validate_phone(phone):
+            errors.append("Invalid phone number format")
+        
+        if not name.strip():
+            errors.append("Name cannot be empty")
+        
+        if tickets <= 0:
+            errors.append("Number of tickets must be greater than 0")
+        
+        if not ticket_number.strip():
+            errors.append("Ticket number cannot be empty")
+        
+        if not country.strip():
+            errors.append("Country cannot be empty")
+        
+        if not region.strip():
+            errors.append("Region cannot be empty")
+        
+        if errors:
+            return jsonify({
+                "success": False,
+                "message": "Validation errors",
+                "errors": errors
+            }), 400
+        
+        # Create ticket record
+        ticket_data = {
+            "email": email.lower().strip(),
+            "phone": phone.strip(),
+            "name": name.strip(),
+            "tickets": tickets,
+            "ticket_number": ticket_number.strip(),
+            "country": country.strip(),
+            "region": region.strip(),
+            "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        }
+        
+        # Load existing tickets
+        all_tickets = load_tickets()
+        
+        # Check for duplicate ticket numbers
+        existing_ticket_numbers = [t.get('ticket_number') for t in all_tickets]
+        if ticket_number in existing_ticket_numbers:
+            return jsonify({
+                "success": False,
+                "message": "Ticket number already exists"
+            }), 409
+        
+        # Add new ticket
+        all_tickets.append(ticket_data)
+        
+        # Save to file
+        if save_tickets(all_tickets):
+            logging.info(f"New ticket added: {ticket_number} for {name}")
+            return jsonify({
+                "success": True,
+                "message": "Ticket data added successfully",
+                "ticket_id": ticket_number,
+                "total_tickets": len(all_tickets)
+            })
+        else:
+            return jsonify({
+                "success": False,
+                "message": "Failed to save ticket data"
+            }), 500
+            
+    except Exception as e:
+        logging.error(f"Error adding ticket data: {e}")
+        return jsonify({
+            "success": False,
+            "message": "Internal server error"
+        }), 500
+
+@app.route('/api/tickets')
+def get_tickets_api():
+    """API endpoint to get all tickets"""
+    tickets = load_tickets()
+    return jsonify({
+        "success": True,
+        "tickets": tickets,
+        "total": len(tickets)
+    })
+
+@app.route('/export/excel')
+def export_excel():
+    """Export tickets data to Excel file"""
+    try:
+        tickets = load_tickets()
+        
+        if not tickets:
+            flash("No ticket data available to export", "warning")
+            return redirect(url_for('admin'))
+        
+        # Create workbook and worksheet
+        wb = Workbook()
+        ws = wb.active
+        ws.title = "Ticket Data"
+        
+        # Define headers
+        headers = ['Email', 'Phone', 'Name', 'Tickets', 'Ticket Number', 'Country', 'Region', 'Timestamp']
+        
+        # Style for headers
+        header_font = Font(bold=True, color='FFFFFF')
+        header_fill = PatternFill(start_color='366092', end_color='366092', fill_type='solid')
+        header_alignment = Alignment(horizontal='center', vertical='center')
+        
+        # Add headers
+        for col, header in enumerate(headers, 1):
+            cell = ws.cell(row=1, column=col, value=header)
+            cell.font = header_font
+            cell.fill = header_fill
+            cell.alignment = header_alignment
+        
+        # Add data
+        for row, ticket in enumerate(tickets, 2):
+            ws.cell(row=row, column=1, value=ticket.get('email', ''))
+            ws.cell(row=row, column=2, value=ticket.get('phone', ''))
+            ws.cell(row=row, column=3, value=ticket.get('name', ''))
+            ws.cell(row=row, column=4, value=ticket.get('tickets', ''))
+            ws.cell(row=row, column=5, value=ticket.get('ticket_number', ''))
+            ws.cell(row=row, column=6, value=ticket.get('country', ''))
+            ws.cell(row=row, column=7, value=ticket.get('region', ''))
+            ws.cell(row=row, column=8, value=ticket.get('timestamp', ''))
+        
+        # Auto-adjust column widths
+        for col in ws.columns:
+            max_length = 0
+            column = col[0].column_letter
+            for cell in col:
+                try:
+                    if len(str(cell.value)) > max_length:
+                        max_length = len(str(cell.value))
+                except:
+                    pass
+            adjusted_width = min(max_length + 2, 50)
+            ws.column_dimensions[column].width = adjusted_width
+        
+        # Create temporary file
+        temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.xlsx')
+        wb.save(temp_file.name)
+        temp_file.close()
+        
+        # Generate filename with timestamp
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        filename = f"ticket_data_{timestamp}.xlsx"
+        
+        return send_file(
+            temp_file.name,
+            as_attachment=True,
+            download_name=filename,
+            mimetype='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        )
+        
+    except Exception as e:
+        logging.error(f"Error exporting Excel: {e}")
+        flash("Error exporting data to Excel", "error")
+        return redirect(url_for('admin'))
+
+@app.route('/delete_ticket/<ticket_number>', methods=['POST'])
+def delete_ticket(ticket_number):
+    """Delete a specific ticket"""
+    try:
+        tickets = load_tickets()
+        original_count = len(tickets)
+        
+        # Filter out the ticket to delete
+        tickets = [t for t in tickets if t.get('ticket_number') != ticket_number]
+        
+        if len(tickets) < original_count:
+            if save_tickets(tickets):
+                flash(f"Ticket {ticket_number} deleted successfully", "success")
+            else:
+                flash("Error deleting ticket", "error")
+        else:
+            flash("Ticket not found", "warning")
+        
+        return redirect(url_for('admin'))
+        
+    except Exception as e:
+        logging.error(f"Error deleting ticket: {e}")
+        flash("Error deleting ticket", "error")
+        return redirect(url_for('admin'))
+
+@app.errorhandler(404)
+def not_found(error):
+    return jsonify({
+        "success": False,
+        "message": "Endpoint not found"
+    }), 404
+
+@app.errorhandler(500)
+def internal_error(error):
+    return jsonify({
+        "success": False,
+        "message": "Internal server error"
+    }), 500
+
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=5000)

data/tickets.json

@@ -0,0 +1,12 @@
+[
+  {
+    "email": "[email protected]",
+    "phone": "03037191639",
+    "name": "Abdullah Ali",
+    "tickets": 3,
+    "ticket_number": "283598",
+    "country": "pakistan",
+    "region": "punjab",
+    "timestamp": "2025-08-10 15:04:34"
+  }
+]

main.py

@@ -0,0 +1,4 @@
+from app import app
+
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=5000)

requirements.txt

@@ -0,0 +1,3 @@
+Flask==3.0.0
+gunicorn==21.2.0
+openpyxl==3.1.2

static/css/style.css

@@ -0,0 +1,535 @@
+/* Premium Minimal Ticket Collection System */
+
+:root {
+    --primary-color: #1a1a1a;
+    --secondary-color: #6b7280;
+    --accent-color: #3b82f6;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --background-color: #fafbfc;
+    --card-background: #ffffff;
+    --border-color: #e5e7eb;
+    --text-primary: #111827;
+    --text-secondary: #6b7280;
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--background-color);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--text-primary);
+    margin: 0;
+    padding: 0;
+}
+
+/* Navigation */
+.navbar {
+    background-color: var(--card-background) !important;
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: none;
+    padding: 1rem 0;
+}
+
+.navbar-brand {
+    font-weight: 600;
+    font-size: 18px;
+    color: var(--text-primary) !important;
+    display: flex;
+    align-items: center;
+}
+
+.navbar-brand i {
+    font-size: 20px;
+    margin-right: 8px;
+    color: var(--accent-color);
+}
+
+.navbar-nav .nav-link {
+    color: var(--text-secondary) !important;
+    font-weight: 500;
+    transition: color 0.2s ease;
+}
+
+.navbar-nav .nav-link:hover {
+    color: var(--text-primary) !important;
+}
+
+/* Hero Section - Minimal */
+.hero-section {
+    background: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 3rem 2rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    box-shadow: var(--shadow-sm);
+}
+
+.hero-section h1 {
+    font-size: 2.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 1rem;
+    letter-spacing: -0.025em;
+}
+
+.hero-section .lead {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    font-weight: 400;
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+/* Feature Cards - Minimal */
+.feature-card {
+    background: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 2rem 1.5rem;
+    transition: all 0.2s ease;
+    height: 100%;
+    text-align: center;
+}
+
+.feature-card:hover {
+    border-color: var(--accent-color);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.feature-icon i {
+    font-size: 2.5rem;
+    color: var(--accent-color);
+    margin-bottom: 1rem;
+}
+
+.feature-card h5 {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin-bottom: 0.75rem;
+}
+
+.feature-card p {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+/* API Documentation */
+.api-documentation .card {
+    border: none;
+    border-radius: 15px;
+}
+
+.code-block {
+    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
+    font-size: 0.9rem;
+    line-height: 1.4;
+    overflow-x: auto;
+}
+
+.code-block code {
+    background: none !important;
+    color: inherit !important;
+}
+
+/* Stats Cards - Premium Minimal */
+.stats-card {
+    background: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.stats-card:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+.stats-card .stats-icon {
+    font-size: 1.75rem;
+    color: var(--accent-color);
+    margin-bottom: 0.75rem;
+    opacity: 1;
+}
+
+.stats-card .stats-content h3 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin: 0 0 0.25rem 0;
+    color: var(--text-primary);
+}
+
+.stats-card .stats-content p {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+/* Table Styling - Premium Minimal */
+.table-responsive {
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    background: var(--card-background);
+}
+
+.table {
+    margin-bottom: 0;
+    font-size: 13px;
+}
+
+.table thead {
+    background-color: #f8fafc;
+}
+
+.table thead th {
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    user-select: none;
+    padding: 1rem 0.75rem;
+    color: var(--text-primary);
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.table thead th:hover {
+    background-color: #f1f5f9;
+}
+
+.table thead th i.fas.fa-sort {
+    opacity: 0.4;
+    margin-left: 0.5rem;
+    transition: opacity 0.2s ease;
+    font-size: 10px;
+}
+
+.table thead th:hover i.fas.fa-sort {
+    opacity: 1;
+}
+
+.table tbody tr {
+    transition: background-color 0.2s ease;
+    border: none;
+}
+
+.table tbody tr:hover {
+    background-color: #f8fafc;
+}
+
+.table tbody td {
+    vertical-align: middle;
+    border-color: var(--border-color);
+    padding: 0.875rem 0.75rem;
+    color: var(--text-primary);
+    border-top: 1px solid #f1f5f9;
+}
+
+.table tbody td:first-child {
+    font-weight: 500;
+}
+
+/* Form Controls - Minimal */
+.table-controls {
+    background: var(--card-background);
+    padding: 1.5rem;
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-sm);
+}
+
+.form-control, .form-select {
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    transition: all 0.2s ease;
+    font-size: 14px;
+    padding: 0.625rem 0.875rem;
+    background-color: var(--card-background);
+    color: var(--text-primary);
+}
+
+.form-control:focus, .form-select:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    outline: none;
+}
+
+.form-control::placeholder {
+    color: var(--text-secondary);
+    opacity: 0.7;
+}
+
+/* Buttons - Premium Minimal */
+.btn {
+    border-radius: 8px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+    padding: 0.625rem 1.25rem;
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-primary {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #2563eb;
+    border-color: #2563eb;
+}
+
+.btn-success {
+    background: var(--success-color);
+    border-color: var(--success-color);
+    color: white;
+}
+
+.btn-success:hover {
+    background: #059669;
+    border-color: #059669;
+}
+
+.btn-outline-primary {
+    background: transparent;
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+
+.btn-outline-primary:hover {
+    background: var(--accent-color);
+    color: white;
+}
+
+.btn-outline-secondary {
+    background: transparent;
+    border-color: var(--border-color);
+    color: var(--text-secondary);
+}
+
+.btn-outline-secondary:hover {
+    background: var(--secondary-color);
+    border-color: var(--secondary-color);
+    color: white;
+}
+
+.btn-outline-danger {
+    background: transparent;
+    border-color: var(--danger-color);
+    color: var(--danger-color);
+}
+
+.btn-outline-danger:hover {
+    background: var(--danger-color);
+    border-color: var(--danger-color);
+    color: white;
+    transform: none;
+}
+
+
+
+/* Cards - Premium Minimal */
+.card {
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    box-shadow: var(--shadow-sm);
+    background: var(--card-background);
+}
+
+.card-header {
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    font-weight: 600;
+    background: var(--card-background);
+    padding: 1.5rem;
+    color: var(--text-primary);
+}
+
+.card-body {
+    padding: 1.5rem;
+}
+
+/* Badges */
+.badge {
+    border-radius: 6px;
+    font-weight: 500;
+    font-size: 12px;
+}
+
+/* Footer */
+footer {
+    margin-top: auto;
+    background: var(--card-background) !important;
+    border-top: 1px solid var(--border-color);
+    color: var(--text-secondary) !important;
+}
+
+footer p {
+    font-size: 13px;
+    color: var(--text-secondary) !important;
+}
+
+footer i {
+    color: var(--accent-color);
+}
+
+/* Empty State */
+.text-center.py-5 {
+    padding: 3rem 1rem !important;
+}
+
+.text-center.py-5 i {
+    opacity: 0.5;
+}
+
+/* Alerts */
+.alert {
+    border: none;
+    border-radius: 10px;
+    font-weight: 500;
+}
+
+.alert-dismissible .btn-close {
+    padding: 0.75rem 1rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 2rem 1rem;
+        text-align: center;
+    }
+    
+    .hero-section h1 {
+        font-size: 2rem;
+    }
+    
+    .stats-card {
+        text-align: center;
+    }
+    
+    .table-responsive {
+        font-size: 0.875rem;
+    }
+    
+    .d-flex.justify-content-between {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .d-flex.justify-content-between > div {
+        text-align: center;
+    }
+}
+
+@media (max-width: 576px) {
+    .container-fluid {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+    
+    .btn-group-sm > .btn, .btn-sm {
+        font-size: 0.75rem;
+    }
+    
+    .code-block {
+        font-size: 0.8rem;
+        padding: 0.75rem !important;
+    }
+}
+
+/* Loading Animation */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+/* Success/Error States */
+.success-highlight {
+    background-color: rgba(40, 167, 69, 0.1) !important;
+    border-left: 4px solid var(--success-color);
+    animation: highlight 2s ease-out;
+}
+
+.error-highlight {
+    background-color: rgba(220, 53, 69, 0.1) !important;
+    border-left: 4px solid var(--danger-color);
+    animation: highlight 2s ease-out;
+}
+
+@keyframes highlight {
+    0% {
+        background-color: rgba(13, 110, 253, 0.2);
+    }
+    100% {
+        background-color: transparent;
+    }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+
+/* Print Styles */
+@media print {
+    .navbar, .table-controls, .btn, footer {
+        display: none !important;
+    }
+    
+    .card {
+        box-shadow: none !important;
+        border: 1px solid #dee2e6 !important;
+    }
+    
+    .table {
+        font-size: 0.8rem;
+    }
+}

static/js/main.js

@@ -0,0 +1,320 @@
+// Main JavaScript functionality for Ticket Collection System
+
+document.addEventListener('DOMContentLoaded', function() {
+    initializeAdmin();
+});
+
+// Initialize admin dashboard functionality
+function initializeAdmin() {
+    if (window.location.pathname === '/admin') {
+        initializeTableFeatures();
+        initializeSearch();
+        initializeFilters();
+        updateLastUpdated();
+    }
+}
+
+// Initialize table sorting and filtering features
+function initializeTableFeatures() {
+    const table = document.getElementById('ticketsTable');
+    if (!table) return;
+
+    // Store original table data for filtering
+    window.originalTableData = Array.from(table.querySelectorAll('tbody tr'));
+    updateShowingCount();
+}
+
+// Table sorting functionality
+let sortDirection = {};
+function sortTable(columnIndex) {
+    const table = document.getElementById('ticketsTable');
+    const tbody = table.querySelector('tbody');
+    const rows = Array.from(tbody.querySelectorAll('tr'));
+    
+    // Determine sort direction
+    const currentDir = sortDirection[columnIndex] || 'asc';
+    const newDir = currentDir === 'asc' ? 'desc' : 'asc';
+    sortDirection[columnIndex] = newDir;
+    
+    // Update sort icons
+    updateSortIcons(columnIndex, newDir);
+    
+    // Sort rows
+    rows.sort((a, b) => {
+        const aText = a.cells[columnIndex].textContent.trim();
+        const bText = b.cells[columnIndex].textContent.trim();
+        
+        // Handle numeric columns
+        if (columnIndex === 3) { // Tickets column
+            const aNum = parseInt(aText) || 0;
+            const bNum = parseInt(bText) || 0;
+            return newDir === 'asc' ? aNum - bNum : bNum - aNum;
+        }
+        
+        // Handle date columns
+        if (columnIndex === 7) { // Timestamp column
+            const aDate = new Date(aText);
+            const bDate = new Date(bText);
+            return newDir === 'asc' ? aDate - bDate : bDate - aDate;
+        }
+        
+        // Handle text columns
+        const comparison = aText.localeCompare(bText);
+        return newDir === 'asc' ? comparison : -comparison;
+    });
+    
+    // Rebuild table
+    rows.forEach(row => tbody.appendChild(row));
+    updateShowingCount();
+}
+
+// Update sort direction icons
+function updateSortIcons(activeColumn, direction) {
+    const headers = document.querySelectorAll('#ticketsTable thead th');
+    headers.forEach((header, index) => {
+        const icon = header.querySelector('i.fa-sort, i.fa-sort-up, i.fa-sort-down');
+        if (icon) {
+            if (index === activeColumn) {
+                icon.className = direction === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down';
+            } else {
+                icon.className = 'fas fa-sort';
+            }
+        }
+    });
+}
+
+// Search functionality
+function initializeSearch() {
+    const searchInput = document.getElementById('searchInput');
+    if (!searchInput) return;
+    
+    searchInput.addEventListener('input', function() {
+        const searchTerm = this.value.toLowerCase();
+        filterTable();
+    });
+}
+
+// Filter functionality
+function initializeFilters() {
+    const countryFilter = document.getElementById('countryFilter');
+    if (!countryFilter) return;
+    
+    countryFilter.addEventListener('change', function() {
+        filterTable();
+    });
+}
+
+// Combined filter and search function
+function filterTable() {
+    if (!window.originalTableData) return;
+    
+    const searchTerm = document.getElementById('searchInput')?.value.toLowerCase() || '';
+    const countryFilter = document.getElementById('countryFilter')?.value || '';
+    const tbody = document.querySelector('#ticketsTable tbody');
+    
+    // Clear current table
+    tbody.innerHTML = '';
+    
+    let visibleCount = 0;
+    
+    window.originalTableData.forEach(row => {
+        const rowText = row.textContent.toLowerCase();
+        const countryCell = row.cells[5].textContent.trim();
+        
+        const matchesSearch = searchTerm === '' || rowText.includes(searchTerm);
+        const matchesCountry = countryFilter === '' || countryCell === countryFilter;
+        
+        if (matchesSearch && matchesCountry) {
+            tbody.appendChild(row.cloneNode(true));
+            visibleCount++;
+        }
+    });
+    
+    // Update showing count
+    document.getElementById('showingCount').textContent = visibleCount;
+    
+    // Show empty state if no results
+    if (visibleCount === 0) {
+        showEmptySearchResults();
+    }
+}
+
+// Show empty search results
+function showEmptySearchResults() {
+    const tbody = document.querySelector('#ticketsTable tbody');
+    const emptyRow = document.createElement('tr');
+    emptyRow.innerHTML = `
+        <td colspan="9" class="text-center py-4">
+            <i class="fas fa-search fa-2x text-muted mb-2"></i>
+            <p class="text-muted mb-0">No tickets match your search criteria</p>
+        </td>
+    `;
+    tbody.appendChild(emptyRow);
+}
+
+// Update showing count
+function updateShowingCount() {
+    const tbody = document.querySelector('#ticketsTable tbody');
+    if (!tbody) return;
+    
+    const visibleRows = tbody.querySelectorAll('tr').length;
+    const showingElement = document.getElementById('showingCount');
+    if (showingElement) {
+        showingElement.textContent = visibleRows;
+    }
+}
+
+// Refresh data function
+function refreshData() {
+    const refreshBtn = document.querySelector('button[onclick="refreshData()"]');
+    if (refreshBtn) {
+        refreshBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Refreshing...';
+        refreshBtn.disabled = true;
+    }
+    
+    // Simulate refresh delay
+    setTimeout(() => {
+        location.reload();
+    }, 500);
+}
+
+// Export visible data function
+function exportVisible() {
+    const table = document.getElementById('ticketsTable');
+    if (!table) return;
+    
+    const visibleRows = Array.from(table.querySelectorAll('tbody tr'));
+    if (visibleRows.length === 0) {
+        alert('No data to export');
+        return;
+    }
+    
+    // Create CSV content
+    let csvContent = 'Email,Phone,Name,Tickets,Ticket Number,Country,Region,Timestamp\n';
+    
+    visibleRows.forEach(row => {
+        const cells = Array.from(row.cells).slice(0, 8); // Exclude actions column
+        const rowData = cells.map(cell => {
+            let text = cell.textContent.trim();
+            // Clean up badge text
+            if (cell.querySelector('.badge')) {
+                text = cell.querySelector('.badge').textContent.trim();
+            }
+            // Clean up code text
+            if (cell.querySelector('code')) {
+                text = cell.querySelector('code').textContent.trim();
+            }
+            // Escape quotes and commas
+            if (text.includes(',') || text.includes('"')) {
+                text = '"' + text.replace(/"/g, '""') + '"';
+            }
+            return text;
+        });
+        csvContent += rowData.join(',') + '\n';
+    });
+    
+    // Download CSV
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    if (link.download !== undefined) {
+        const url = URL.createObjectURL(blob);
+        link.setAttribute('href', url);
+        link.setAttribute('download', `ticket_data_filtered_${new Date().toISOString().split('T')[0]}.csv`);
+        link.style.visibility = 'hidden';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+}
+
+// Update last updated timestamp
+function updateLastUpdated() {
+    const element = document.getElementById('lastUpdated');
+    if (element) {
+        const now = new Date();
+        element.textContent = now.toISOString().slice(0, 19).replace('T', ' ');
+    }
+}
+
+// Utility function to show notifications
+function showNotification(message, type = 'info') {
+    const alertDiv = document.createElement('div');
+    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
+    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
+    alertDiv.innerHTML = `
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    `;
+    
+    document.body.appendChild(alertDiv);
+    
+    // Auto-remove after 5 seconds
+    setTimeout(() => {
+        if (alertDiv.parentNode) {
+            alertDiv.parentNode.removeChild(alertDiv);
+        }
+    }, 5000);
+}
+
+// Handle form submissions with loading states
+document.addEventListener('submit', function(e) {
+    const form = e.target;
+    if (form.tagName === 'FORM') {
+        const submitBtn = form.querySelector('button[type="submit"]');
+        if (submitBtn) {
+            submitBtn.disabled = true;
+            const originalHtml = submitBtn.innerHTML;
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Processing...';
+            
+            // Re-enable after 3 seconds (fallback)
+            setTimeout(() => {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = originalHtml;
+            }, 3000);
+        }
+    }
+});
+
+// Add keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+    // Ctrl+R or F5 for refresh
+    if ((e.ctrlKey && e.key === 'r') || e.key === 'F5') {
+        if (window.location.pathname === '/admin') {
+            e.preventDefault();
+            refreshData();
+        }
+    }
+    
+    // Ctrl+F for search focus
+    if (e.ctrlKey && e.key === 'f') {
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput) {
+            e.preventDefault();
+            searchInput.focus();
+            searchInput.select();
+        }
+    }
+    
+    // Escape to clear search
+    if (e.key === 'Escape') {
+        const searchInput = document.getElementById('searchInput');
+        if (searchInput && searchInput.value) {
+            searchInput.value = '';
+            filterTable();
+        }
+    }
+});
+
+// Add smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});

templates/admin.html

@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Admin Dashboard - Ticket Collection System</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg">
+        <div class="container">
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-ticket-alt"></i>
+                Ticket Collection System
+            </a>
+            <div class="navbar-nav ms-auto">
+                <a class="nav-link" href="{{ url_for('index') }}">
+                    <i class="fas fa-home me-1"></i>
+                    Home
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid mt-4">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <div class="row mb-4">
+            <div class="col-12">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <h1 style="font-size: 1.75rem; font-weight: 600; margin: 0; color: var(--text-primary);">
+                            Admin Dashboard
+                        </h1>
+                        <p style="color: var(--text-secondary); margin: 0.25rem 0 0 0; font-size: 14px;">
+                            Manage and monitor ticket submissions
+                        </p>
+                    </div>
+                    <div class="d-flex gap-2">
+                        <button class="btn btn-outline-secondary btn-sm" onclick="refreshData()">
+                            <i class="fas fa-sync-alt"></i>
+                            Refresh
+                        </button>
+                        {% if tickets %}
+                        <a href="{{ url_for('export_excel') }}" class="btn btn-primary btn-sm">
+                            <i class="fas fa-file-excel"></i>
+                            Export Excel
+                        </a>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row mb-4">
+            <div class="col-md-3">
+                <div class="stats-card">
+                    <div class="stats-icon">
+                        <i class="fas fa-ticket-alt"></i>
+                    </div>
+                    <div class="stats-content">
+                        <h3>{{ total_tickets }}</h3>
+                        <p>Total Tickets</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="stats-card">
+                    <div class="stats-icon">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <div class="stats-content">
+                        <h3>{{ tickets|map(attribute='email')|unique|list|length }}</h3>
+                        <p>Unique Customers</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="stats-card">
+                    <div class="stats-icon">
+                        <i class="fas fa-globe"></i>
+                    </div>
+                    <div class="stats-content">
+                        <h3>{{ tickets|map(attribute='country')|unique|list|length }}</h3>
+                        <p>Countries</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="stats-card">
+                    <div class="stats-icon">
+                        <i class="fas fa-calendar"></i>
+                    </div>
+                    <div class="stats-content">
+                        <h3>{{ tickets|selectattr('timestamp')|list|length }}</h3>
+                        <p>Records Today</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-header">
+                        <h5 class="card-title mb-0" style="font-size: 16px; font-weight: 600;">
+                            <i class="fas fa-table me-2" style="color: var(--accent-color);"></i>
+                            Ticket Data Records
+                        </h5>
+                    </div>
+                    <div class="card-body">
+                        {% if tickets %}
+                        <div class="table-controls mb-3">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <input type="text" id="searchInput" class="form-control" placeholder="Search tickets...">
+                                </div>
+                                <div class="col-md-6">
+                                    <select id="countryFilter" class="form-select">
+                                        <option value="">All Countries</option>
+                                        {% for country in tickets|map(attribute='country')|unique|sort %}
+                                        <option value="{{ country }}">{{ country }}</option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="table-responsive">
+                            <table class="table" id="ticketsTable">
+                                <thead>
+                                    <tr>
+                                        <th onclick="sortTable(0)">
+                                            Email <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th onclick="sortTable(1)">
+                                            Phone <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th onclick="sortTable(2)">
+                                            Name <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th onclick="sortTable(3)">
+                                            Tickets <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th onclick="sortTable(4)">
+                                            Ticket Number <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th onclick="sortTable(5)">
+                                            Country <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th onclick="sortTable(6)">
+                                            Region <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th onclick="sortTable(7)">
+                                            Timestamp <i class="fas fa-sort"></i>
+                                        </th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="ticketsTableBody">
+                                    {% for ticket in tickets %}
+                                    <tr>
+                                        <td>{{ ticket.email }}</td>
+                                        <td>{{ ticket.phone }}</td>
+                                        <td>{{ ticket.name }}</td>
+                                        <td>
+                                            <span style="background: #f0f9ff; color: #0369a1; padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 12px; font-weight: 500;">{{ ticket.tickets }}</span>
+                                        </td>
+                                        <td>
+                                            <span style="background: #f8fafc; color: #475569; padding: 0.25rem 0.5rem; border-radius: 4px; font-family: 'Monaco', monospace; font-size: 12px;">{{ ticket.ticket_number }}</span>
+                                        </td>
+                                        <td>{{ ticket.country }}</td>
+                                        <td>{{ ticket.region }}</td>
+                                        <td>
+                                            <span style="color: var(--text-secondary); font-size: 12px;">{{ ticket.timestamp }}</span>
+                                        </td>
+                                        <td>
+                                            <form method="POST" action="{{ url_for('delete_ticket', ticket_number=ticket.ticket_number) }}" 
+                                                  style="display: inline;" 
+                                                  onsubmit="return confirm('Are you sure you want to delete this ticket?')">
+                                                <button type="submit" class="btn btn-outline-danger" style="padding: 0.375rem 0.5rem; font-size: 12px;">
+                                                    <i class="fas fa-trash" style="font-size: 11px;"></i>
+                                                </button>
+                                            </form>
+                                        </td>
+                                    </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div class="d-flex justify-content-between align-items-center mt-3">
+                            <div>
+                                <small class="text-muted">
+                                    Showing <span id="showingCount">{{ tickets|length }}</span> of {{ total_tickets }} records
+                                </small>
+                            </div>
+                            <div>
+                                <button class="btn btn-outline-primary btn-sm" onclick="exportVisible()">
+                                    <i class="fas fa-download me-1"></i>
+                                    Export Visible
+                                </button>
+                            </div>
+                        </div>
+                        {% else %}
+                        <div class="text-center py-5">
+                            <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
+                            <h4 class="text-muted">No Ticket Data Available</h4>
+                            <p class="text-muted">No tickets have been submitted yet. Use the API endpoint to add ticket data.</p>
+                            <a href="{{ url_for('index') }}" class="btn btn-primary">
+                                <i class="fas fa-plus me-1"></i>
+                                View API Documentation
+                            </a>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-dark text-light mt-5 py-4">
+        <div class="container text-center">
+            <p class="mb-0">
+                <i class="fas fa-shield-alt me-2"></i>
+                Secure Admin Dashboard - Last updated: <span id="lastUpdated"></span>
+            </p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    <script>
+        // Auto-refresh every 30 seconds
+        setInterval(function() {
+            document.getElementById('lastUpdated').textContent = new Date().toISOString().slice(0, 19).replace('T', ' ');
+        }, 30000);
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ticket Data Collection System</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg">
+        <div class="container">
+            <a class="navbar-brand" href="/">
+                <i class="fas fa-ticket-alt"></i>
+                Ticket Collection System
+            </a>
+            <div class="navbar-nav ms-auto">
+                <a class="nav-link" href="{{ url_for('admin') }}">
+                    <i class="fas fa-chart-bar me-1"></i>
+                    Admin Dashboard
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container mt-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-10">
+                <div class="hero-section mb-5">
+                    <h1>
+                        Ticket Data Collection API
+                    </h1>
+                    <p class="lead">Professional ticket data collection system with real-time storage and Excel export capabilities</p>
+                </div>
+
+                <div class="row g-4 mb-5">
+                    <div class="col-md-4">
+                        <div class="feature-card text-center p-4">
+                            <div class="feature-icon mb-3">
+                                <i class="fas fa-link fa-3x text-primary"></i>
+                            </div>
+                            <h5>URL-based Submission</h5>
+                            <p class="text-muted">Submit ticket data directly through URL parameters</p>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="feature-card text-center p-4">
+                            <div class="feature-icon mb-3">
+                                <i class="fas fa-database fa-3x text-success"></i>
+                            </div>
+                            <h5>JSON Storage</h5>
+                            <p class="text-muted">Persistent data storage using JSON files</p>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="feature-card text-center p-4">
+                            <div class="feature-icon mb-3">
+                                <i class="fas fa-file-excel fa-3x text-warning"></i>
+                            </div>
+                            <h5>Excel Export</h5>
+                            <p class="text-muted">Download complete dataset in Excel format</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="api-documentation">
+                    <div class="card shadow-lg">
+                        <div class="card-header bg-primary text-white">
+                            <h3 class="card-title mb-0">
+                                <i class="fas fa-code me-2"></i>
+                                API Documentation
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            <h5 class="text-primary mb-3">
+                                <i class="fas fa-plus-circle me-2"></i>
+                                Add Ticket Data
+                            </h5>
+                            <div class="api-endpoint mb-4">
+                                <h6>Endpoint:</h6>
+                                <div class="code-block p-3 bg-dark text-light rounded">
+                                    <code>GET /add_data/&lt;email&gt;/&lt;phone&gt;/&lt;name&gt;/&lt;tickets&gt;/&lt;ticket_number&gt;/&lt;country&gt;/&lt;region&gt;</code>
+                                </div>
+                            </div>
+
+                            <h6>Parameters:</h6>
+                            <div class="table-responsive">
+                                <table class="table table-striped">
+                                    <thead class="table-dark">
+                                        <tr>
+                                            <th>Parameter</th>
+                                            <th>Type</th>
+                                            <th>Description</th>
+                                            <th>Example</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td><code>email</code></td>
+                                            <td>string</td>
+                                            <td>Customer email address</td>
+                                            <td>[email protected]</td>
+                                        </tr>
+                                        <tr>
+                                            <td><code>phone</code></td>
+                                            <td>string</td>
+                                            <td>Customer phone number</td>
+                                            <td>+1234567890</td>
+                                        </tr>
+                                        <tr>
+                                            <td><code>name</code></td>
+                                            <td>string</td>
+                                            <td>Customer full name</td>
+                                            <td>John Doe</td>
+                                        </tr>
+                                        <tr>
+                                            <td><code>tickets</code></td>
+                                            <td>integer</td>
+                                            <td>Number of tickets purchased</td>
+                                            <td>2</td>
+                                        </tr>
+                                        <tr>
+                                            <td><code>ticket_number</code></td>
+                                            <td>string</td>
+                                            <td>Unique ticket identifier</td>
+                                            <td>TKT123456</td>
+                                        </tr>
+                                        <tr>
+                                            <td><code>country</code></td>
+                                            <td>string</td>
+                                            <td>Customer country</td>
+                                            <td>USA</td>
+                                        </tr>
+                                        <tr>
+                                            <td><code>region</code></td>
+                                            <td>string</td>
+                                            <td>Customer region/state</td>
+                                            <td>California</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+
+                            <h6>Example Request:</h6>
+                            <div class="code-block p-3 bg-light border rounded mb-4">
+                                <code class="text-dark">
+                                    https://yourserver.com/add_data/[email protected]/+1234567890/John%20Doe/2/TKT123456/USA/California
+                                </code>
+                            </div>
+
+                            <h6>Success Response:</h6>
+                            <div class="code-block p-3 bg-success text-light rounded mb-4">
+                                <pre><code>{
+  "success": true,
+  "message": "Ticket data added successfully",
+  "ticket_id": "TKT123456",
+  "total_tickets": 1
+}</code></pre>
+                            </div>
+
+                            <h6>Error Response:</h6>
+                            <div class="code-block p-3 bg-danger text-light rounded">
+                                <pre><code>{
+  "success": false,
+  "message": "Validation errors",
+  "errors": ["Invalid email format"]
+}</code></pre>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="text-center mt-5">
+                    <a href="{{ url_for('admin') }}" class="btn btn-primary btn-lg me-3">
+                        <i class="fas fa-chart-bar me-2"></i>
+                        View Admin Dashboard
+                    </a>
+                    <a href="/api/tickets" class="btn btn-outline-secondary btn-lg" target="_blank">
+                        <i class="fas fa-code me-2"></i>
+                        View API Data
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="bg-dark text-light mt-5 py-4">
+        <div class="container text-center">
+            <p class="mb-0">
+                <i class="fas fa-ticket-alt me-2"></i>
+                Professional Ticket Data Collection System
+            </p>
+        </div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>