Spaces:
Running
Running
Update templates/index.html
Browse files- templates/index.html +105 -104
templates/index.html
CHANGED
@@ -6,7 +6,45 @@
|
|
6 |
<title>Ticket Data Collection System</title>
|
7 |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
8 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
9 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
10 |
</head>
|
11 |
<body>
|
12 |
<nav class="navbar navbar-expand-lg">
|
@@ -16,7 +54,7 @@
|
|
16 |
Ticket Collection System
|
17 |
</a>
|
18 |
<div class="navbar-nav ms-auto">
|
19 |
-
<a class="nav-link" href="
|
20 |
<i class="fas fa-chart-bar me-1"></i>
|
21 |
Admin Dashboard
|
22 |
</a>
|
@@ -27,41 +65,9 @@
|
|
27 |
<div class="container mt-5">
|
28 |
<div class="row justify-content-center">
|
29 |
<div class="col-lg-10">
|
30 |
-
<div class="hero-section mb-5">
|
31 |
-
<h1>
|
32 |
-
|
33 |
-
</h1>
|
34 |
-
<p class="lead">Professional ticket data collection system with real-time storage and Excel export capabilities</p>
|
35 |
-
</div>
|
36 |
-
|
37 |
-
<div class="row g-4 mb-5">
|
38 |
-
<div class="col-md-4">
|
39 |
-
<div class="feature-card text-center p-4">
|
40 |
-
<div class="feature-icon mb-3">
|
41 |
-
<i class="fas fa-link fa-3x text-primary"></i>
|
42 |
-
</div>
|
43 |
-
<h5>URL-based Submission</h5>
|
44 |
-
<p class="text-muted">Submit ticket data directly through URL parameters</p>
|
45 |
-
</div>
|
46 |
-
</div>
|
47 |
-
<div class="col-md-4">
|
48 |
-
<div class="feature-card text-center p-4">
|
49 |
-
<div class="feature-icon mb-3">
|
50 |
-
<i class="fas fa-database fa-3x text-success"></i>
|
51 |
-
</div>
|
52 |
-
<h5>JSON Storage</h5>
|
53 |
-
<p class="text-muted">Persistent data storage using JSON files</p>
|
54 |
-
</div>
|
55 |
-
</div>
|
56 |
-
<div class="col-md-4">
|
57 |
-
<div class="feature-card text-center p-4">
|
58 |
-
<div class="feature-icon mb-3">
|
59 |
-
<i class="fas fa-file-excel fa-3x text-warning"></i>
|
60 |
-
</div>
|
61 |
-
<h5>Excel Export</h5>
|
62 |
-
<p class="text-muted">Download complete dataset in Excel format</p>
|
63 |
-
</div>
|
64 |
-
</div>
|
65 |
</div>
|
66 |
|
67 |
<div class="api-documentation">
|
@@ -92,7 +98,6 @@
|
|
92 |
<th>Parameter</th>
|
93 |
<th>Type</th>
|
94 |
<th>Description</th>
|
95 |
-
<th>Example</th>
|
96 |
</tr>
|
97 |
</thead>
|
98 |
<tbody>
|
@@ -100,88 +105,40 @@
|
|
100 |
<td><code>email</code></td>
|
101 |
<td>string</td>
|
102 |
<td>Customer email address</td>
|
103 |
-
<td>[email protected]</td>
|
104 |
</tr>
|
105 |
<tr>
|
106 |
<td><code>phone</code></td>
|
107 |
<td>string</td>
|
108 |
<td>Customer phone number</td>
|
109 |
-
<td>+1234567890</td>
|
110 |
-
</tr>
|
111 |
-
<tr>
|
112 |
-
<td><code>name</code></td>
|
113 |
-
<td>string</td>
|
114 |
-
<td>Customer full name</td>
|
115 |
-
<td>John Doe</td>
|
116 |
-
</tr>
|
117 |
-
<tr>
|
118 |
-
<td><code>tickets</code></td>
|
119 |
-
<td>integer</td>
|
120 |
-
<td>Number of tickets purchased</td>
|
121 |
-
<td>2</td>
|
122 |
</tr>
|
123 |
<tr>
|
124 |
<td><code>ticket_number</code></td>
|
125 |
<td>string</td>
|
126 |
<td>Unique ticket identifier</td>
|
127 |
-
<td>TKT123456</td>
|
128 |
-
</tr>
|
129 |
-
<tr>
|
130 |
-
<td><code>country</code></td>
|
131 |
-
<td>string</td>
|
132 |
-
<td>Customer country</td>
|
133 |
-
<td>USA</td>
|
134 |
-
</tr>
|
135 |
-
<tr>
|
136 |
-
<td><code>region</code></td>
|
137 |
-
<td>string</td>
|
138 |
-
<td>Customer region/state</td>
|
139 |
-
<td>California</td>
|
140 |
</tr>
|
141 |
</tbody>
|
142 |
</table>
|
143 |
</div>
|
144 |
-
|
145 |
-
<h6>Example Request:</h6>
|
146 |
-
<div class="code-block p-3 bg-light border rounded mb-4">
|
147 |
-
<code class="text-dark">
|
148 |
-
https://yourserver.com/add_data/[email protected]/+1234567890/John%20Doe/2/TKT123456/USA/California
|
149 |
-
</code>
|
150 |
-
</div>
|
151 |
-
|
152 |
-
<h6>Success Response:</h6>
|
153 |
-
<div class="code-block p-3 bg-success text-light rounded mb-4">
|
154 |
-
<pre><code>{
|
155 |
-
"success": true,
|
156 |
-
"message": "Ticket data added successfully",
|
157 |
-
"ticket_id": "TKT123456",
|
158 |
-
"total_tickets": 1
|
159 |
-
}</code></pre>
|
160 |
-
</div>
|
161 |
-
|
162 |
-
<h6>Error Response:</h6>
|
163 |
-
<div class="code-block p-3 bg-danger text-light rounded">
|
164 |
-
<pre><code>{
|
165 |
-
"success": false,
|
166 |
-
"message": "Validation errors",
|
167 |
-
"errors": ["Invalid email format"]
|
168 |
-
}</code></pre>
|
169 |
-
</div>
|
170 |
</div>
|
171 |
</div>
|
172 |
</div>
|
|
|
|
|
|
|
173 |
|
174 |
-
|
175 |
-
|
176 |
-
|
177 |
-
|
178 |
-
|
179 |
-
|
180 |
-
|
181 |
-
|
182 |
-
|
183 |
-
</
|
|
|
184 |
</div>
|
|
|
185 |
</div>
|
186 |
</div>
|
187 |
|
@@ -189,12 +146,56 @@
|
|
189 |
<div class="container text-center">
|
190 |
<p class="mb-0">
|
191 |
<i class="fas fa-ticket-alt me-2"></i>
|
192 |
-
|
193 |
</p>
|
194 |
</div>
|
195 |
</footer>
|
196 |
|
197 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
198 |
-
<script
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
199 |
</body>
|
200 |
-
</html>
|
|
|
6 |
<title>Ticket Data Collection System</title>
|
7 |
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
8 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
9 |
+
<style>
|
10 |
+
body {
|
11 |
+
background-color: #f8f9fa;
|
12 |
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
13 |
+
}
|
14 |
+
.navbar {
|
15 |
+
background-color: #343a40;
|
16 |
+
}
|
17 |
+
.navbar-brand, .nav-link {
|
18 |
+
color: white !important;
|
19 |
+
}
|
20 |
+
.card {
|
21 |
+
border: none;
|
22 |
+
border-radius: 10px;
|
23 |
+
overflow: hidden;
|
24 |
+
}
|
25 |
+
.code-block {
|
26 |
+
font-family: 'Courier New', Courier, monospace;
|
27 |
+
}
|
28 |
+
.password-modal {
|
29 |
+
display: none;
|
30 |
+
position: fixed;
|
31 |
+
top: 0;
|
32 |
+
left: 0;
|
33 |
+
width: 100%;
|
34 |
+
height: 100%;
|
35 |
+
background-color: rgba(0,0,0,0.7);
|
36 |
+
z-index: 1000;
|
37 |
+
justify-content: center;
|
38 |
+
align-items: center;
|
39 |
+
}
|
40 |
+
.password-box {
|
41 |
+
background-color: white;
|
42 |
+
padding: 30px;
|
43 |
+
border-radius: 10px;
|
44 |
+
width: 400px;
|
45 |
+
max-width: 90%;
|
46 |
+
}
|
47 |
+
</style>
|
48 |
</head>
|
49 |
<body>
|
50 |
<nav class="navbar navbar-expand-lg">
|
|
|
54 |
Ticket Collection System
|
55 |
</a>
|
56 |
<div class="navbar-nav ms-auto">
|
57 |
+
<a class="nav-link" href="#" id="adminLink">
|
58 |
<i class="fas fa-chart-bar me-1"></i>
|
59 |
Admin Dashboard
|
60 |
</a>
|
|
|
65 |
<div class="container mt-5">
|
66 |
<div class="row justify-content-center">
|
67 |
<div class="col-lg-10">
|
68 |
+
<div class="hero-section mb-5 text-center">
|
69 |
+
<h1>Ticket Data Collection API</h1>
|
70 |
+
<p class="lead">Submit and manage ticket data through our secure API</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
71 |
</div>
|
72 |
|
73 |
<div class="api-documentation">
|
|
|
98 |
<th>Parameter</th>
|
99 |
<th>Type</th>
|
100 |
<th>Description</th>
|
|
|
101 |
</tr>
|
102 |
</thead>
|
103 |
<tbody>
|
|
|
105 |
<td><code>email</code></td>
|
106 |
<td>string</td>
|
107 |
<td>Customer email address</td>
|
|
|
108 |
</tr>
|
109 |
<tr>
|
110 |
<td><code>phone</code></td>
|
111 |
<td>string</td>
|
112 |
<td>Customer phone number</td>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
113 |
</tr>
|
114 |
<tr>
|
115 |
<td><code>ticket_number</code></td>
|
116 |
<td>string</td>
|
117 |
<td>Unique ticket identifier</td>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
118 |
</tr>
|
119 |
</tbody>
|
120 |
</table>
|
121 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
122 |
</div>
|
123 |
</div>
|
124 |
</div>
|
125 |
+
</div>
|
126 |
+
</div>
|
127 |
+
</div>
|
128 |
|
129 |
+
<!-- Password Modal -->
|
130 |
+
<div class="password-modal" id="passwordModal">
|
131 |
+
<div class="password-box">
|
132 |
+
<h3 class="text-center mb-4">Admin Access</h3>
|
133 |
+
<div class="form-group mb-3">
|
134 |
+
<label for="passwordInput" class="form-label">Enter Password:</label>
|
135 |
+
<input type="password" class="form-control" id="passwordInput" placeholder="Password">
|
136 |
+
</div>
|
137 |
+
<div class="d-flex justify-content-between">
|
138 |
+
<button class="btn btn-secondary" id="cancelBtn">Cancel</button>
|
139 |
+
<button class="btn btn-primary" id="submitPassword">Submit</button>
|
140 |
</div>
|
141 |
+
<div id="errorMessage" class="text-danger mt-2" style="display: none;"></div>
|
142 |
</div>
|
143 |
</div>
|
144 |
|
|
|
146 |
<div class="container text-center">
|
147 |
<p class="mb-0">
|
148 |
<i class="fas fa-ticket-alt me-2"></i>
|
149 |
+
Ticket Data Collection System
|
150 |
</p>
|
151 |
</div>
|
152 |
</footer>
|
153 |
|
154 |
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
155 |
+
<script>
|
156 |
+
document.addEventListener('DOMContentLoaded', function() {
|
157 |
+
const adminLink = document.getElementById('adminLink');
|
158 |
+
const passwordModal = document.getElementById('passwordModal');
|
159 |
+
const passwordInput = document.getElementById('passwordInput');
|
160 |
+
const submitPassword = document.getElementById('submitPassword');
|
161 |
+
const cancelBtn = document.getElementById('cancelBtn');
|
162 |
+
const errorMessage = document.getElementById('errorMessage');
|
163 |
+
|
164 |
+
// Set your password here (in a real application, this would be server-side)
|
165 |
+
const correctPassword = "admin123"; // Change this to your desired password
|
166 |
+
|
167 |
+
adminLink.addEventListener('click', function(e) {
|
168 |
+
e.preventDefault();
|
169 |
+
passwordModal.style.display = 'flex';
|
170 |
+
passwordInput.focus();
|
171 |
+
});
|
172 |
+
|
173 |
+
submitPassword.addEventListener('click', function() {
|
174 |
+
if (passwordInput.value === correctPassword) {
|
175 |
+
// Password is correct - redirect to admin page
|
176 |
+
window.location.href = "{{ url_for('admin') }}";
|
177 |
+
} else {
|
178 |
+
// Show error message
|
179 |
+
errorMessage.textContent = "Incorrect password. Please try again.";
|
180 |
+
errorMessage.style.display = 'block';
|
181 |
+
passwordInput.value = '';
|
182 |
+
passwordInput.focus();
|
183 |
+
}
|
184 |
+
});
|
185 |
+
|
186 |
+
cancelBtn.addEventListener('click', function() {
|
187 |
+
passwordModal.style.display = 'none';
|
188 |
+
errorMessage.style.display = 'none';
|
189 |
+
passwordInput.value = '';
|
190 |
+
});
|
191 |
+
|
192 |
+
// Allow submitting with Enter key
|
193 |
+
passwordInput.addEventListener('keypress', function(e) {
|
194 |
+
if (e.key === 'Enter') {
|
195 |
+
submitPassword.click();
|
196 |
+
}
|
197 |
+
});
|
198 |
+
});
|
199 |
+
</script>
|
200 |
</body>
|
201 |
+
</html>
|