Hugging Face's logo

Spaces:
Subham9126
/
helg
Running

App Files Community
Subham9126 commited on
Commit
23d7189
·
verified ·
1 Parent(s): 10c0e4c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +321 -11
index.html CHANGED
@@ -2,17 +2,327 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>NTES Iframe Test</title>
6
- <style>
7
- iframe {
8
- width: 100%;
9
- height: 100vh;
10
- border: 1px solid #ccc;
11
- }
12
- </style>
13
  </head>
14
  <body>
15
- <h1>NTES in Iframe (likely blocked)</h1>
16
- <iframe src="https://enquiry.indianrail.gov.in/mntes/"></iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </body>
18
- </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>Vehicle Maintenance Management System</title>
7
+ <link rel="stylesheet" href="styles.css">
 
 
 
 
 
8
  </head>
9
  <body>
10
+ <!-- Navigation Sidebar -->
11
+ <nav class="sidebar">
12
+ <div class="logo">
13
+ <h2>🚘 VMMS</h2>
14
+ </div>
15
+ <ul class="nav-menu">
16
+ <li><a href="#" data-page="dashboard" class="nav-link active">Dashboard</a></li>
17
+ <li><a href="#" data-page="vehicles" class="nav-link">Vehicles</a></li>
18
+ <li><a href="#" data-page="parts" class="nav-link">Parts</a></li>
19
+ <li><a href="#" data-page="logs" class="nav-link">Logs</a></li>
20
+ <li><a href="#" data-page="config" class="nav-link">Config</a></li>
21
+ </ul>
22
+ </nav>
23
+
24
+ <!-- Main Content -->
25
+ <main class="main-content">
26
+ <!-- Dashboard Page -->
27
+ <div id="dashboard" class="page active">
28
+ <h1>Dashboard</h1>
29
+ <div class="dashboard-cards">
30
+ <div class="card">
31
+ <h3>Total Vehicles</h3>
32
+ <p class="stat" id="total-vehicles">0</p>
33
+ </div>
34
+ <div class="card">
35
+ <h3>Total Parts</h3>
36
+ <p class="stat" id="total-parts">0</p>
37
+ </div>
38
+ <div class="card overdue">
39
+ <h3>Overdue Parts</h3>
40
+ <p class="stat" id="overdue-parts">0</p>
41
+ </div>
42
+ <div class="card upcoming">
43
+ <h3>Upcoming Parts</h3>
44
+ <p class="stat" id="upcoming-parts">0</p>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="alerts-section">
49
+ <h2>Maintenance Alerts</h2>
50
+ <div id="alerts-container">
51
+ <p class="no-alerts">No maintenance alerts at this time.</p>
52
+ </div>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Vehicles Page -->
57
+ <div id="vehicles" class="page">
58
+ <div class="page-header">
59
+ <h1>Vehicles</h1>
60
+ <button class="btn btn-primary" id="add-vehicle-btn">Add Vehicle</button>
61
+ </div>
62
+
63
+ <div class="table-container">
64
+ <table id="vehicles-table">
65
+ <thead>
66
+ <tr>
67
+ <th>ID</th>
68
+ <th>Name</th>
69
+ <th>Model</th>
70
+ <th>Year</th>
71
+ <th>Registration</th>
72
+ <th>Odometer (km)</th>
73
+ <th>Fuel Type</th>
74
+ <th>Actions</th>
75
+ </tr>
76
+ </thead>
77
+ <tbody>
78
+ <tr class="no-data">
79
+ <td colspan="8">No vehicles found. Add your first vehicle!</td>
80
+ </tr>
81
+ </tbody>
82
+ </table>
83
+ </div>
84
+
85
+ <!-- Vehicle Form Modal -->
86
+ <div id="vehicle-modal" class="modal">
87
+ <div class="modal-content">
88
+ <div class="modal-header">
89
+ <h2 id="vehicle-modal-title">Add Vehicle</h2>
90
+ <span class="close" id="vehicle-modal-close">&times;</span>
91
+ </div>
92
+ <form id="vehicle-form">
93
+ <input type="hidden" id="vehicle-id">
94
+ <div class="form-group">
95
+ <label for="vehicle-name">Name *</label>
96
+ <input type="text" id="vehicle-name" required>
97
+ </div>
98
+ <div class="form-group">
99
+ <label for="vehicle-model">Model *</label>
100
+ <input type="text" id="vehicle-model" required>
101
+ </div>
102
+ <div class="form-group">
103
+ <label for="vehicle-year">Year *</label>
104
+ <input type="number" id="vehicle-year" min="1900" max="2030" required>
105
+ </div>
106
+ <div class="form-group">
107
+ <label for="vehicle-registration">Registration Number *</label>
108
+ <input type="text" id="vehicle-registration" required>
109
+ </div>
110
+ <div class="form-group">
111
+ <label for="vehicle-odometer">Current Odometer (km) *</label>
112
+ <input type="number" id="vehicle-odometer" min="0" required>
113
+ </div>
114
+ <div class="form-group">
115
+ <label for="vehicle-fuel-type">Fuel Type *</label>
116
+ <select id="vehicle-fuel-type" required>
117
+ <option value="">Select Fuel Type</option>
118
+ <option value="Petrol">Petrol</option>
119
+ <option value="Diesel">Diesel</option>
120
+ <option value="CNG">CNG</option>
121
+ <option value="Electric">Electric</option>
122
+ </select>
123
+ </div>
124
+ <div class="modal-actions">
125
+ <button type="button" class="btn btn-secondary" id="vehicle-cancel-btn">Cancel</button>
126
+ <button type="submit" class="btn btn-primary">Save</button>
127
+ </div>
128
+ </form>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Parts Page -->
134
+ <div id="parts" class="page">
135
+ <div class="page-header">
136
+ <h1>Parts</h1>
137
+ <div class="page-controls">
138
+ <select id="parts-vehicle-select">
139
+ <option value="">Select Vehicle</option>
140
+ </select>
141
+ <button class="btn btn-primary" id="add-part-btn" disabled>Add Part</button>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="table-container">
146
+ <table id="parts-table">
147
+ <thead>
148
+ <tr>
149
+ <th>ID</th>
150
+ <th>Vehicle</th>
151
+ <th>Part Name</th>
152
+ <th>Replacement Type</th>
153
+ <th>Replacement Value</th>
154
+ <th>Notes</th>
155
+ <th>Actions</th>
156
+ </tr>
157
+ </thead>
158
+ <tbody>
159
+ <tr class="no-data">
160
+ <td colspan="7">Select a vehicle to view its parts.</td>
161
+ </tr>
162
+ </tbody>
163
+ </table>
164
+ </div>
165
+
166
+ <!-- Part Form Modal -->
167
+ <div id="part-modal" class="modal">
168
+ <div class="modal-content">
169
+ <div class="modal-header">
170
+ <h2 id="part-modal-title">Add Part</h2>
171
+ <span class="close" id="part-modal-close">&times;</span>
172
+ </div>
173
+ <form id="part-form">
174
+ <input type="hidden" id="part-id">
175
+ <input type="hidden" id="part-vehicle-id">
176
+ <div class="form-group">
177
+ <label for="part-name">Part Name *</label>
178
+ <input type="text" id="part-name" placeholder="e.g., Engine Oil, Brake Pads" required>
179
+ </div>
180
+ <div class="form-group">
181
+ <label for="part-replacement-type">Replacement Type *</label>
182
+ <select id="part-replacement-type" required>
183
+ <option value="">Select Type</option>
184
+ <option value="month">Time-based (months)</option>
185
+ <option value="km">Distance-based (km)</option>
186
+ <option value="custom">Custom</option>
187
+ </select>
188
+ </div>
189
+ <div class="form-group">
190
+ <label for="part-replacement-value">Replacement Value *</label>
191
+ <input type="text" id="part-replacement-value" placeholder="e.g., 6, 5000, As needed" required>
192
+ </div>
193
+ <div class="form-group">
194
+ <label for="part-notes">Notes</label>
195
+ <textarea id="part-notes" placeholder="Brand, warranty, cost, etc."></textarea>
196
+ </div>
197
+ <div class="modal-actions">
198
+ <button type="button" class="btn btn-secondary" id="part-cancel-btn">Cancel</button>
199
+ <button type="submit" class="btn btn-primary">Save</button>
200
+ </div>
201
+ </form>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Logs Page -->
207
+ <div id="logs" class="page">
208
+ <div class="page-header">
209
+ <h1>Maintenance Logs</h1>
210
+ <div class="page-controls">
211
+ <select id="logs-part-select">
212
+ <option value="">Select Part</option>
213
+ </select>
214
+ <button class="btn btn-primary" id="add-log-btn" disabled>Add Log</button>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="table-container">
219
+ <table id="logs-table">
220
+ <thead>
221
+ <tr>
222
+ <th>ID</th>
223
+ <th>Part</th>
224
+ <th>Vehicle</th>
225
+ <th>Date</th>
226
+ <th>Odometer (km)</th>
227
+ <th>Notes</th>
228
+ <th>Actions</th>
229
+ </tr>
230
+ </thead>
231
+ <tbody>
232
+ <tr class="no-data">
233
+ <td colspan="7">Select a part to view its maintenance logs.</td>
234
+ </tr>
235
+ </tbody>
236
+ </table>
237
+ </div>
238
+
239
+ <!-- Log Form Modal -->
240
+ <div id="log-modal" class="modal">
241
+ <div class="modal-content">
242
+ <div class="modal-header">
243
+ <h2 id="log-modal-title">Add Maintenance Log</h2>
244
+ <span class="close" id="log-modal-close">&times;</span>
245
+ </div>
246
+ <form id="log-form">
247
+ <input type="hidden" id="log-id">
248
+ <input type="hidden" id="log-part-id">
249
+ <div class="form-group">
250
+ <label for="log-date">Service Date *</label>
251
+ <input type="date" id="log-date" required>
252
+ </div>
253
+ <div class="form-group">
254
+ <label for="log-odometer">Odometer Reading (km) *</label>
255
+ <input type="number" id="log-odometer" min="0" required>
256
+ </div>
257
+ <div class="form-group">
258
+ <label for="log-notes">Notes</label>
259
+ <textarea id="log-notes" placeholder="Mechanic, cost, warranty, etc."></textarea>
260
+ </div>
261
+ <div class="modal-actions">
262
+ <button type="button" class="btn btn-secondary" id="log-cancel-btn">Cancel</button>
263
+ <button type="submit" class="btn btn-primary">Save</button>
264
+ </div>
265
+ </form>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <!-- Config Page -->
271
+ <div id="config" class="page">
272
+ <h1>Configuration</h1>
273
+ <div class="config-container">
274
+ <form id="config-form">
275
+ <div class="form-group">
276
+ <label for="sheet-id">Google Sheet Document ID *</label>
277
+ <input type="text" id="sheet-id" placeholder="1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms" required>
278
+ <small>Extract from your Google Sheet URL: https://docs.google.com/spreadsheets/d/[SHEET_ID]/edit</small>
279
+ </div>
280
+ <div class="form-group">
281
+ <label for="vehicles-tab">Vehicles Tab Name *</label>
282
+ <input type="text" id="vehicles-tab" value="Vehicles" required>
283
+ </div>
284
+ <div class="form-group">
285
+ <label for="parts-tab">Parts Tab Name *</label>
286
+ <input type="text" id="parts-tab" value="Parts" required>
287
+ </div>
288
+ <div class="form-group">
289
+ <label for="logs-tab">Maintenance Logs Tab Name *</label>
290
+ <input type="text" id="logs-tab" value="MaintenanceLogs" required>
291
+ </div>
292
+ <div class="config-actions">
293
+ <button type="button" class="btn btn-secondary" id="test-connection-btn">Test Connection</button>
294
+ <button type="submit" class="btn btn-primary">Save Configuration</button>
295
+ </div>
296
+ </form>
297
+
298
+ <div id="connection-status" class="status-message" style="display: none;"></div>
299
+
300
+ <div class="config-help">
301
+ <h3>Setup Instructions:</h3>
302
+ <ol>
303
+ <li>Create a new Google Sheet</li>
304
+ <li>Create three tabs: "Vehicles", "Parts", "MaintenanceLogs"</li>
305
+ <li>Set sharing to "Anyone with the link can edit"</li>
306
+ <li>Copy the Sheet ID from the URL and paste it above</li>
307
+ <li>Click "Test Connection" to verify setup</li>
308
+ <li>Save configuration to start using the system</li>
309
+ </ol>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </main>
314
+
315
+ <!-- Loading Overlay -->
316
+ <div id="loading-overlay" class="loading-overlay" style="display: none;">
317
+ <div class="loading-spinner">
318
+ <div class="spinner"></div>
319
+ <p>Loading...</p>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Toast Notifications -->
324
+ <div id="toast-container" class="toast-container"></div>
325
+
326
+ <script src="script.js"></script>
327
  </body>
328
+ </html>