Hugging Face's logo

Spaces:
abdullahalioo
/
Ananserver
Build error

App Files Community
abdullahalioo commited on
Commit
6ca7c5f
·
verified ·
1 Parent(s): a24f761

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +181 -0
index.html ADDED
@@ -0,0 +1,181 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ticket Management System</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
8
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <link rel="stylesheet" href="style.css">
10
+ </head>
11
+ <body>
12
+ <div class="dashboard">
13
+ <div class="sidebar">
14
+ <div class="logo">
15
+ <i class="fas fa-ticket-alt"></i>
16
+ <span>TicketSys Pro</span>
17
+ </div>
18
+ <ul class="menu">
19
+ <li class="active"><a href="#"><i class="fas fa-home"></i> Dashboard</a></li>
20
+ <li><a href="#"><i class="fas fa-chart-bar"></i> Analytics</a></li>
21
+ <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
22
+ </ul>
23
+ </div>
24
+ <div class="main-content">
25
+ <header>
26
+ <h1>Ticket Management Dashboard</h1>
27
+ <div class="user-actions">
28
+ <button id="downloadBtn" class="btn btn-success">
29
+ <i class="fas fa-file-excel"></i> Export to Excel
30
+ </button>
31
+ <div class="user-profile">
32
+ <img src="https://via.placeholder.com/40" alt="User">
33
+ <span>Admin</span>
34
+ </div>
35
+ </div>
36
+ </header>
37
+ <div class="stats-cards">
38
+ <div class="card stat-card">
39
+ <div class="card-body">
40
+ <h5 class="card-title">Total Tickets</h5>
41
+ <h2 class="stat-value">{{ tickets|length }}</h2>
42
+ <p class="stat-change"><i class="fas fa-arrow-up"></i> 12% from last week</p>
43
+ </div>
44
+ </div>
45
+ <div class="card stat-card">
46
+ <div class="card-body">
47
+ <h5 class="card-title">Today's Tickets</h5>
48
+ <h2 class="stat-value">24</h2>
49
+ <p class="stat-change"><i class="fas fa-arrow-down"></i> 5% from yesterday</p>
50
+ </div>
51
+ </div>
52
+ <div class="card stat-card">
53
+ <div class="card-body">
54
+ <h5 class="card-title">Top Region</h5>
55
+ <h2 class="stat-value">Punjab</h2>
56
+ <p class="stat-change">35% of total tickets</p>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ <div class="data-table-container">
61
+ <div class="table-header">
62
+ <h3>Recent Tickets</h3>
63
+ <div class="table-actions">
64
+ <div class="search-box">
65
+ <input type="text" placeholder="Search...">
66
+ <i class="fas fa-search"></i>
67
+ </div>
68
+ <button class="btn btn-primary refresh-btn">
69
+ <i class="fas fa-sync-alt"></i> Refresh
70
+ </button>
71
+ </div>
72
+ </div>
73
+ <div class="table-responsive">
74
+ <table class="table table-striped table-hover">
75
+ <thead>
76
+ <tr>
77
+ <th>Ticket #</th>
78
+ <th>Name</th>
79
+ <th>Email</th>
80
+ <th>Phone</th>
81
+ <th>Country</th>
82
+ <th>Region</th>
83
+ <th>Qty</th>
84
+ <th>Date</th>
85
+ <th>Actions</th>
86
+ </tr>
87
+ </thead>
88
+ <tbody>
89
+ {% for ticket in tickets %}
90
+ <tr>
91
+ <td>{{ ticket.ticket_number }}</td>
92
+ <td>{{ ticket.name }}</td>
93
+ <td>{{ ticket.email }}</td>
94
+ <td>{{ ticket.phone }}</td>
95
+ <td>{{ ticket.country }}</td>
96
+ <td>{{ ticket.region }}</td>
97
+ <td>{{ ticket.ticket_count }}</td>
98
+ <td>{{ ticket.timestamp.strftime('%Y-%m-%d %H:%M') }}</td>
99
+ <td>
100
+ <button class="btn btn-sm btn-info view-btn" data-id="{{ ticket.id }}">
101
+ <i class="fas fa-eye"></i>
102
+ </button>
103
+ <button class="btn btn-sm btn-danger delete-btn" data-id="{{ ticket.id }}">
104
+ <i class="fas fa-trash"></i>
105
+ </button>
106
+ </td>
107
+ </tr>
108
+ {% endfor %}
109
+ </tbody>
110
+ </table>
111
+ </div>
112
+ <nav aria-label="Page navigation">
113
+ <ul class="pagination justify-content-center">
114
+ <li class="page-item disabled">
115
+ <a class="page-link" href="#" tabindex="-1">Previous</a>
116
+ </li>
117
+ <li class="page-item active"><a class="page-link" href="#">1</a></li>
118
+ <li class="page-item"><a class="page-link" href="#">2</a></li>
119
+ <li class="page-item"><a class="page-link" href="#">3</a></li>
120
+ <li class="page-item">
121
+ <a class="page-link" href="#">Next</a>
122
+ </li>
123
+ </ul>
124
+ </nav>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- View Ticket Modal -->
130
+ <div class="modal fade" id="viewTicketModal" tabindex="-1" aria-hidden="true">
131
+ <div class="modal-dialog">
132
+ <div class="modal-content">
133
+ <div class="modal-header">
134
+ <h5 class="modal-title">Ticket Details</h5>
135
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
136
+ </div>
137
+ <div class="modal-body">
138
+ <div class="ticket-details">
139
+ <div class="detail-row">
140
+ <span class="detail-label">Ticket Number:</span>
141
+ <span class="detail-value" id="modal-ticket-number">T-283598</span>
142
+ </div>
143
+ <div class="detail-row">
144
+ <span class="detail-label">Name:</span>
145
+ <span class="detail-value" id="modal-name">Abdullah Ali</span>
146
+ </div>
147
+ <div class="detail-row">
148
+ <span class="detail-label">Email:</span>
149
+ <span class="detail-value" id="modal-email">[email protected]</span>
150
+ </div>
151
+ <div class="detail-row">
152
+ <span class="detail-label">Phone:</span>
153
+ <span class="detail-value" id="modal-phone">03037191639</span>
154
+ </div>
155
+ <div class="detail-row">
156
+ <span class="detail-label">Quantity:</span>
157
+ <span class="detail-value" id="modal-quantity">3</span>
158
+ </div>
159
+ <div class="detail-row">
160
+ <span class="detail-label">Location:</span>
161
+ <span class="detail-value" id="modal-location">Punjab, Pakistan</span>
162
+ </div>
163
+ <div class="detail-row">
164
+ <span class="detail-label">Purchase Date:</span>
165
+ <span class="detail-value" id="modal-date">2023-06-15 14:30</span>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ <div class="modal-footer">
170
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
171
+ <button type="button" class="btn btn-primary">Print Ticket</button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
178
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
179
+ <script src="script.js"></script>
180
+ </body>
181
+ </html>