Spaces:
Running
Running
| <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"> | |
| <style> | |
| body { | |
| background-color: #f8f9fa; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .navbar { | |
| background-color: #343a40; | |
| } | |
| .navbar-brand, .nav-link { | |
| color: white ; | |
| } | |
| .card { | |
| border: none; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| } | |
| .code-block { | |
| font-family: 'Courier New', Courier, monospace; | |
| } | |
| .password-modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.7); | |
| z-index: 1000; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .password-box { | |
| background-color: white; | |
| padding: 30px; | |
| border-radius: 10px; | |
| width: 400px; | |
| max-width: 90%; | |
| } | |
| </style> | |
| </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="#" id="adminLink"> | |
| <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 text-center"> | |
| <h1>Ticket Data Collection API</h1> | |
| <p class="lead">Submit and manage ticket data through our secure API</p> | |
| </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/<email>/<phone>/<name>/<tickets>/<ticket_number>/<country>/<region></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> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><code>email</code></td> | |
| <td>string</td> | |
| <td>Customer email address</td> | |
| </tr> | |
| <tr> | |
| <td><code>phone</code></td> | |
| <td>string</td> | |
| <td>Customer phone number</td> | |
| </tr> | |
| <tr> | |
| <td><code>ticket_number</code></td> | |
| <td>string</td> | |
| <td>Unique ticket identifier</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Password Modal --> | |
| <div class="password-modal" id="passwordModal"> | |
| <div class="password-box"> | |
| <h3 class="text-center mb-4">Admin Access</h3> | |
| <div class="form-group mb-3"> | |
| <label for="passwordInput" class="form-label">Enter Password:</label> | |
| <input type="password" class="form-control" id="passwordInput" placeholder="Password"> | |
| </div> | |
| <div class="d-flex justify-content-between"> | |
| <button class="btn btn-secondary" id="cancelBtn">Cancel</button> | |
| <button class="btn btn-primary" id="submitPassword">Submit</button> | |
| </div> | |
| <div id="errorMessage" class="text-danger mt-2" style="display: none;"></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> | |
| Ticket Data Collection System | |
| </p> | |
| </div> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const adminLink = document.getElementById('adminLink'); | |
| const passwordModal = document.getElementById('passwordModal'); | |
| const passwordInput = document.getElementById('passwordInput'); | |
| const submitPassword = document.getElementById('submitPassword'); | |
| const cancelBtn = document.getElementById('cancelBtn'); | |
| const errorMessage = document.getElementById('errorMessage'); | |
| // Set your password here (in a real application, this would be server-side) | |
| const correctPassword = "tarqeemnoor"; // Change this to your desired password | |
| adminLink.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| passwordModal.style.display = 'flex'; | |
| passwordInput.focus(); | |
| }); | |
| submitPassword.addEventListener('click', function() { | |
| if (passwordInput.value === correctPassword) { | |
| // Password is correct - redirect to admin page | |
| window.location.href = "{{ url_for('admin') }}"; | |
| } else { | |
| // Show error message | |
| errorMessage.textContent = "Incorrect password. Please try again."; | |
| errorMessage.style.display = 'block'; | |
| passwordInput.value = ''; | |
| passwordInput.focus(); | |
| } | |
| }); | |
| cancelBtn.addEventListener('click', function() { | |
| passwordModal.style.display = 'none'; | |
| errorMessage.style.display = 'none'; | |
| passwordInput.value = ''; | |
| }); | |
| // Allow submitting with Enter key | |
| passwordInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| submitPassword.click(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |