Hugging Face's logo

Spaces:
emanoelopes
/
labbyte-smart-campus-computer-tracker
Running

App Files Community
emanoelopes commited on
Commit
457a188
·
verified ·
1 Parent(s): 61af383

inventory crud for university computers laboratories with pc and macs

Browse files
Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +151 -19
  3. style.css +6 -26
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Labbyte Smart Campus Computer Tracker
3
- emoji: 🐨
4
- colorFrom: blue
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: LabByte - Smart Campus Computer Tracker 🖥️
3
+ colorFrom: green
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,151 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>LabByte - Computer Inventory</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="components/navbar.js"></script>
12
+ <script src="components/footer.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 min-h-screen flex flex-col">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="flex-grow container mx-auto px-4 py-8">
18
+ <div class="flex justify-between items-center mb-8">
19
+ <h1 class="text-3xl font-bold text-gray-800">Computer Inventory</h1>
20
+ <button id="add-machine-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition">
21
+ <i data-feather="plus" class="mr-2"></i> Add Machine
22
+ </button>
23
+ </div>
24
+
25
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
26
+ <!-- Stats Cards -->
27
+ <div class="bg-white rounded-lg shadow p-6">
28
+ <div class="flex items-center">
29
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
30
+ <i data-feather="monitor"></i>
31
+ </div>
32
+ <div class="ml-4">
33
+ <h3 class="text-gray-500">Total Machines</h3>
34
+ <p class="text-2xl font-semibold" id="total-machines">0</p>
35
+ </div>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="bg-white rounded-lg shadow p-6">
40
+ <div class="flex items-center">
41
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
42
+ <i data-feather="cpu"></i>
43
+ </div>
44
+ <div class="ml-4">
45
+ <h3 class="text-gray-500">Windows PCs</h3>
46
+ <p class="text-2xl font-semibold" id="total-pcs">0</p>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="bg-white rounded-lg shadow p-6">
52
+ <div class="flex items-center">
53
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
54
+ <i data-feather="cpu"></i>
55
+ </div>
56
+ <div class="ml-4">
57
+ <h3 class="text-gray-500">Mac Computers</h3>
58
+ <p class="text-2xl font-semibold" id="total-macs">0</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="mt-8 bg-white rounded-lg shadow overflow-hidden">
65
+ <div class="px-6 py-4 border-b border-gray-200">
66
+ <h2 class="text-xl font-semibold text-gray-800">All Machines</h2>
67
+ </div>
68
+ <div class="overflow-x-auto">
69
+ <table class="min-w-full divide-y divide-gray-200">
70
+ <thead class="bg-gray-50">
71
+ <tr>
72
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
73
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
74
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
75
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
76
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
77
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
78
+ </tr>
79
+ </thead>
80
+ <tbody id="inventory-table" class="bg-white divide-y divide-gray-200">
81
+ <!-- Machines will be loaded here -->
82
+ </tbody>
83
+ </table>
84
+ </div>
85
+ </div>
86
+ </main>
87
+
88
+ <!-- Add/Edit Machine Modal -->
89
+ <div id="machine-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center p-4 z-50">
90
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
91
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
92
+ <h3 class="text-lg font-semibold" id="modal-title">Add New Machine</h3>
93
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
94
+ <i data-feather="x"></i>
95
+ </button>
96
+ </div>
97
+ <div class="p-6">
98
+ <form id="machine-form">
99
+ <input type="hidden" id="machine-id">
100
+ <div class="mb-4">
101
+ <label for="machine-type" class="block text-sm font-medium text-gray-700 mb-1">Type</label>
102
+ <select id="machine-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
103
+ <option value="windows">Windows PC</option>
104
+ <option value="mac">Mac Computer</option>
105
+ </select>
106
+ </div>
107
+ <div class="mb-4">
108
+ <label for="machine-model" class="block text-sm font-medium text-gray-700 mb-1">Model</label>
109
+ <input type="text" id="machine-model" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
110
+ </div>
111
+ <div class="mb-4">
112
+ <label for="machine-serial" class="block text-sm font-medium text-gray-700 mb-1">Serial Number</label>
113
+ <input type="text" id="machine-serial" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
114
+ </div>
115
+ <div class="mb-4">
116
+ <label for="machine-location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
117
+ <select id="machine-location" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
118
+ <option value="Lab A">Lab A</option>
119
+ <option value="Lab B">Lab B</option>
120
+ <option value="Lab C">Lab C</option>
121
+ <option value="Lab D">Lab D</option>
122
+ </select>
123
+ </div>
124
+ <div class="mb-4">
125
+ <label for="machine-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
126
+ <select id="machine-status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
127
+ <option value="Operational">Operational</option>
128
+ <option value="Maintenance">Maintenance</option>
129
+ <option value="Retired">Retired</option>
130
+ </select>
131
+ </div>
132
+ </form>
133
+ </div>
134
+ <div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
135
+ <button id="cancel-modal" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancel</button>
136
+ <button id="save-machine" class="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700">Save</button>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <custom-footer></custom-footer>
142
+
143
+ <script src="components/navbar.js"></script>
144
+ <script src="components/footer.js"></script>
145
+ <script src="script.js"></script>
146
+ <script>
147
+ feather.replace();
148
+ </script>
149
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
150
+ </body>
151
+ </html>
style.css CHANGED
@@ -1,28 +1,8 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
1
+ /* Custom styles that can't be easily achieved with Tailwind */
2
+ #inventory-table tr:hover {
3
+ background-color: #f9fafb;
4
  }
5
 
6
+ .status-operational {
7
+ background-color: #ecfdf5;
8
+ color: #059669;