Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +469 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 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: atm-management
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: green
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,469 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>ATM Portfolio Management</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.sidebar {
|
| 11 |
+
transition: all 0.3s ease;
|
| 12 |
+
transform: translateX(-100%);
|
| 13 |
+
}
|
| 14 |
+
.sidebar.open {
|
| 15 |
+
transform: translateX(0);
|
| 16 |
+
}
|
| 17 |
+
.overlay {
|
| 18 |
+
display: none;
|
| 19 |
+
background-color: rgba(0,0,0,0.5);
|
| 20 |
+
}
|
| 21 |
+
.overlay.open {
|
| 22 |
+
display: block;
|
| 23 |
+
}
|
| 24 |
+
.sortable:hover {
|
| 25 |
+
cursor: pointer;
|
| 26 |
+
background-color: rgba(30, 58, 138, 0.1);
|
| 27 |
+
}
|
| 28 |
+
.sort-asc::after {
|
| 29 |
+
content: " ↑";
|
| 30 |
+
}
|
| 31 |
+
.sort-desc::after {
|
| 32 |
+
content: " ↓";
|
| 33 |
+
}
|
| 34 |
+
.status-indicator {
|
| 35 |
+
width: 10px;
|
| 36 |
+
height: 10px;
|
| 37 |
+
border-radius: 50%;
|
| 38 |
+
display: inline-block;
|
| 39 |
+
margin-right: 6px;
|
| 40 |
+
}
|
| 41 |
+
.status-active {
|
| 42 |
+
background-color: #10B981;
|
| 43 |
+
}
|
| 44 |
+
.status-warning {
|
| 45 |
+
background-color: #F59E0B;
|
| 46 |
+
}
|
| 47 |
+
.status-critical {
|
| 48 |
+
background-color: #EF4444;
|
| 49 |
+
}
|
| 50 |
+
.status-offline {
|
| 51 |
+
background-color: #6B7280;
|
| 52 |
+
}
|
| 53 |
+
</style>
|
| 54 |
+
</head>
|
| 55 |
+
<body class="bg-gray-50 font-sans">
|
| 56 |
+
<!-- Header -->
|
| 57 |
+
<header class="bg-navy-900 text-white p-4 shadow-md">
|
| 58 |
+
<div class="container mx-auto flex justify-between items-center">
|
| 59 |
+
<div class="flex items-center space-x-4">
|
| 60 |
+
<button id="menuToggle" class="text-white focus:outline-none">
|
| 61 |
+
<i class="fas fa-bars text-xl"></i>
|
| 62 |
+
</button>
|
| 63 |
+
<h1 class="text-xl font-bold">ATM Portfolio Management</h1>
|
| 64 |
+
</div>
|
| 65 |
+
<div class="flex items-center space-x-4">
|
| 66 |
+
<div class="relative">
|
| 67 |
+
<i class="fas fa-bell text-xl"></i>
|
| 68 |
+
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
|
| 69 |
+
</div>
|
| 70 |
+
<div class="flex items-center space-x-2">
|
| 71 |
+
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
|
| 72 |
+
<span class="text-white font-medium">AD</span>
|
| 73 |
+
</div>
|
| 74 |
+
<span class="hidden md:inline">Admin</span>
|
| 75 |
+
</div>
|
| 76 |
+
</div>
|
| 77 |
+
</div>
|
| 78 |
+
</header>
|
| 79 |
+
|
| 80 |
+
<!-- Sidebar -->
|
| 81 |
+
<div class="fixed inset-0 z-40">
|
| 82 |
+
<div id="overlay" class="overlay fixed inset-0 bg-black bg-opacity-50 z-40"></div>
|
| 83 |
+
<aside id="sidebar" class="sidebar fixed top-0 left-0 h-full w-64 bg-navy-800 text-white z-50 shadow-xl">
|
| 84 |
+
<div class="p-4 border-b border-navy-700">
|
| 85 |
+
<h2 class="text-xl font-bold">ATM Network</h2>
|
| 86 |
+
</div>
|
| 87 |
+
<nav class="p-4">
|
| 88 |
+
<ul class="space-y-2">
|
| 89 |
+
<li>
|
| 90 |
+
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-navy-700 bg-navy-700">
|
| 91 |
+
<i class="fas fa-tachometer-alt"></i>
|
| 92 |
+
<span>Dashboard</span>
|
| 93 |
+
</a>
|
| 94 |
+
</li>
|
| 95 |
+
<li>
|
| 96 |
+
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-navy-700">
|
| 97 |
+
<i class="fas fa-map-marker-alt"></i>
|
| 98 |
+
<span>ATM Locations</span>
|
| 99 |
+
</a>
|
| 100 |
+
</li>
|
| 101 |
+
<li>
|
| 102 |
+
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-navy-700">
|
| 103 |
+
<i class="fas fa-chart-line"></i>
|
| 104 |
+
<span>Performance Analytics</span>
|
| 105 |
+
</a>
|
| 106 |
+
</li>
|
| 107 |
+
<li>
|
| 108 |
+
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-navy-700">
|
| 109 |
+
<i class="fas fa-exclamation-triangle"></i>
|
| 110 |
+
<span>Alerts & Incidents</span>
|
| 111 |
+
</a>
|
| 112 |
+
</li>
|
| 113 |
+
<li>
|
| 114 |
+
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-navy-700">
|
| 115 |
+
<i class="fas fa-cog"></i>
|
| 116 |
+
<span>Settings</span>
|
| 117 |
+
</a>
|
| 118 |
+
</li>
|
| 119 |
+
<li>
|
| 120 |
+
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-navy-700">
|
| 121 |
+
<i class="fas fa-question-circle"></i>
|
| 122 |
+
<span>Support</span>
|
| 123 |
+
</a>
|
| 124 |
+
</li>
|
| 125 |
+
</ul>
|
| 126 |
+
</nav>
|
| 127 |
+
<div class="absolute bottom-0 left-0 right-0 p-4 border-t border-navy-700">
|
| 128 |
+
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-navy-700">
|
| 129 |
+
<i class="fas fa-sign-out-alt"></i>
|
| 130 |
+
<span>Logout</span>
|
| 131 |
+
</a>
|
| 132 |
+
</div>
|
| 133 |
+
</aside>
|
| 134 |
+
</div>
|
| 135 |
+
|
| 136 |
+
<!-- Main Content -->
|
| 137 |
+
<main class="container mx-auto p-4 pt-6">
|
| 138 |
+
<div class="bg-white rounded-lg shadow-md p-6">
|
| 139 |
+
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
| 140 |
+
<h2 class="text-2xl font-bold text-navy-900">ATM Terminal Status</h2>
|
| 141 |
+
<div class="flex space-x-3 mt-4 md:mt-0">
|
| 142 |
+
<div class="relative">
|
| 143 |
+
<input type="text" placeholder="Search terminals..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
| 144 |
+
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
|
| 145 |
+
</div>
|
| 146 |
+
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
|
| 147 |
+
<i class="fas fa-plus"></i>
|
| 148 |
+
<span>Add Terminal</span>
|
| 149 |
+
</button>
|
| 150 |
+
</div>
|
| 151 |
+
</div>
|
| 152 |
+
|
| 153 |
+
<!-- Status Summary Cards -->
|
| 154 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
| 155 |
+
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
| 156 |
+
<div class="flex justify-between items-center">
|
| 157 |
+
<div>
|
| 158 |
+
<p class="text-gray-500 text-sm">Active Terminals</p>
|
| 159 |
+
<p class="text-2xl font-bold text-navy-900">142</p>
|
| 160 |
+
</div>
|
| 161 |
+
<div class="bg-green-100 p-3 rounded-full">
|
| 162 |
+
<i class="fas fa-check-circle text-green-600 text-xl"></i>
|
| 163 |
+
</div>
|
| 164 |
+
</div>
|
| 165 |
+
</div>
|
| 166 |
+
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
| 167 |
+
<div class="flex justify-between items-center">
|
| 168 |
+
<div>
|
| 169 |
+
<p class="text-gray-500 text-sm">Warning Status</p>
|
| 170 |
+
<p class="text-2xl font-bold text-navy-900">8</p>
|
| 171 |
+
</div>
|
| 172 |
+
<div class="bg-yellow-100 p-3 rounded-full">
|
| 173 |
+
<i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
| 178 |
+
<div class="flex justify-between items-center">
|
| 179 |
+
<div>
|
| 180 |
+
<p class="text-gray-500 text-sm">Critical Status</p>
|
| 181 |
+
<p class="text-2xl font-bold text-navy-900">3</p>
|
| 182 |
+
</div>
|
| 183 |
+
<div class="bg-red-100 p-3 rounded-full">
|
| 184 |
+
<i class="fas fa-times-circle text-red-600 text-xl"></i>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
|
| 189 |
+
<div class="flex justify-between items-center">
|
| 190 |
+
<div>
|
| 191 |
+
<p class="text-gray-500 text-sm">Offline Terminals</p>
|
| 192 |
+
<p class="text-2xl font-bold text-navy-900">5</p>
|
| 193 |
+
</div>
|
| 194 |
+
<div class="bg-gray-100 p-3 rounded-full">
|
| 195 |
+
<i class="fas fa-power-off text-gray-600 text-xl"></i>
|
| 196 |
+
</div>
|
| 197 |
+
</div>
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
|
| 201 |
+
<!-- Terminal Table -->
|
| 202 |
+
<div class="overflow-x-auto">
|
| 203 |
+
<table class="min-w-full divide-y divide-gray-200">
|
| 204 |
+
<thead class="bg-gray-50">
|
| 205 |
+
<tr>
|
| 206 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sortable" data-column="terminalId">
|
| 207 |
+
Terminal ID
|
| 208 |
+
</th>
|
| 209 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sortable" data-column="location">
|
| 210 |
+
Location
|
| 211 |
+
</th>
|
| 212 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sortable" data-column="status">
|
| 213 |
+
Status
|
| 214 |
+
</th>
|
| 215 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sortable" data-column="lastTransaction">
|
| 216 |
+
Last Transaction
|
| 217 |
+
</th>
|
| 218 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sortable" data-column="cashLevel">
|
| 219 |
+
Cash Level
|
| 220 |
+
</th>
|
| 221 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sortable" data-column="uptime">
|
| 222 |
+
Uptime
|
| 223 |
+
</th>
|
| 224 |
+
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
| 225 |
+
Actions
|
| 226 |
+
</th>
|
| 227 |
+
</tr>
|
| 228 |
+
</thead>
|
| 229 |
+
<tbody class="bg-white divide-y divide-gray-200">
|
| 230 |
+
<tr class="hover:bg-gray-50">
|
| 231 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 232 |
+
<div class="text-sm font-medium text-blue-600">ATM-1001</div>
|
| 233 |
+
</td>
|
| 234 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 235 |
+
<div class="text-sm text-gray-900">123 Main St, Downtown</div>
|
| 236 |
+
</td>
|
| 237 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 238 |
+
<span class="status-indicator status-active"></span>
|
| 239 |
+
<span class="text-sm text-gray-900">Active</span>
|
| 240 |
+
</td>
|
| 241 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 242 |
+
<div class="text-sm text-gray-900">2 min ago</div>
|
| 243 |
+
</td>
|
| 244 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 245 |
+
<div class="flex items-center">
|
| 246 |
+
<div class="w-16 bg-gray-200 rounded-full h-2">
|
| 247 |
+
<div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
|
| 248 |
+
</div>
|
| 249 |
+
<span class="ml-2 text-sm text-gray-600">85%</span>
|
| 250 |
+
</div>
|
| 251 |
+
</td>
|
| 252 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 253 |
+
<div class="text-sm text-gray-900">99.8%</div>
|
| 254 |
+
</td>
|
| 255 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 256 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a>
|
| 257 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-cog"></i></a>
|
| 258 |
+
<a href="#" class="text-blue-600 hover:text-blue-900"><i class="fas fa-chart-line"></i></a>
|
| 259 |
+
</td>
|
| 260 |
+
</tr>
|
| 261 |
+
<tr class="hover:bg-gray-50">
|
| 262 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 263 |
+
<div class="text-sm font-medium text-blue-600">ATM-1002</div>
|
| 264 |
+
</td>
|
| 265 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 266 |
+
<div class="text-sm text-gray-900">456 Oak Ave, Midtown</div>
|
| 267 |
+
</td>
|
| 268 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 269 |
+
<span class="status-indicator status-warning"></span>
|
| 270 |
+
<span class="text-sm text-gray-900">Warning</span>
|
| 271 |
+
</td>
|
| 272 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 273 |
+
<div class="text-sm text-gray-900">15 min ago</div>
|
| 274 |
+
</td>
|
| 275 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 276 |
+
<div class="flex items-center">
|
| 277 |
+
<div class="w-16 bg-gray-200 rounded-full h-2">
|
| 278 |
+
<div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
|
| 279 |
+
</div>
|
| 280 |
+
<span class="ml-2 text-sm text-gray-600">45%</span>
|
| 281 |
+
</div>
|
| 282 |
+
</td>
|
| 283 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 284 |
+
<div class="text-sm text-gray-900">98.1%</div>
|
| 285 |
+
</td>
|
| 286 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 287 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a>
|
| 288 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-cog"></i></a>
|
| 289 |
+
<a href="#" class="text-blue-600 hover:text-blue-900"><i class="fas fa-chart-line"></i></a>
|
| 290 |
+
</td>
|
| 291 |
+
</tr>
|
| 292 |
+
<tr class="hover:bg-gray-50">
|
| 293 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 294 |
+
<div class="text-sm font-medium text-blue-600">ATM-1003</div>
|
| 295 |
+
</td>
|
| 296 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 297 |
+
<div class="text-sm text-gray-900">789 Elm St, Uptown</div>
|
| 298 |
+
</td>
|
| 299 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 300 |
+
<span class="status-indicator status-critical"></span>
|
| 301 |
+
<span class="text-sm text-gray-900">Critical</span>
|
| 302 |
+
</td>
|
| 303 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 304 |
+
<div class="text-sm text-gray-900">1 hr ago</div>
|
| 305 |
+
</td>
|
| 306 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 307 |
+
<div class="flex items-center">
|
| 308 |
+
<div class="w-16 bg-gray-200 rounded-full h-2">
|
| 309 |
+
<div class="bg-red-500 h-2 rounded-full" style="width: 12%"></div>
|
| 310 |
+
</div>
|
| 311 |
+
<span class="ml-2 text-sm text-gray-600">12%</span>
|
| 312 |
+
</div>
|
| 313 |
+
</td>
|
| 314 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 315 |
+
<div class="text-sm text-gray-900">95.4%</div>
|
| 316 |
+
</td>
|
| 317 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 318 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a>
|
| 319 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-cog"></i></a>
|
| 320 |
+
<a href="#" class="text-blue-600 hover:text-blue-900"><i class="fas fa-chart-line"></i></a>
|
| 321 |
+
</td>
|
| 322 |
+
</tr>
|
| 323 |
+
<tr class="hover:bg-gray-50">
|
| 324 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 325 |
+
<div class="text-sm font-medium text-blue-600">ATM-1004</div>
|
| 326 |
+
</td>
|
| 327 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 328 |
+
<div class="text-sm text-gray-900">321 Pine Rd, Suburb</div>
|
| 329 |
+
</td>
|
| 330 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 331 |
+
<span class="status-indicator status-offline"></span>
|
| 332 |
+
<span class="text-sm text-gray-900">Offline</span>
|
| 333 |
+
</td>
|
| 334 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 335 |
+
<div class="text-sm text-gray-900">4 hrs ago</div>
|
| 336 |
+
</td>
|
| 337 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 338 |
+
<div class="flex items-center">
|
| 339 |
+
<div class="w-16 bg-gray-200 rounded-full h-2">
|
| 340 |
+
<div class="bg-gray-500 h-2 rounded-full" style="width: 0%"></div>
|
| 341 |
+
</div>
|
| 342 |
+
<span class="ml-2 text-sm text-gray-600">N/A</span>
|
| 343 |
+
</div>
|
| 344 |
+
</td>
|
| 345 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 346 |
+
<div class="text-sm text-gray-900">89.7%</div>
|
| 347 |
+
</td>
|
| 348 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 349 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a>
|
| 350 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-cog"></i></a>
|
| 351 |
+
<a href="#" class="text-blue-600 hover:text-blue-900"><i class="fas fa-chart-line"></i></a>
|
| 352 |
+
</td>
|
| 353 |
+
</tr>
|
| 354 |
+
<tr class="hover:bg-gray-50">
|
| 355 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 356 |
+
<div class="text-sm font-medium text-blue-600">ATM-1005</div>
|
| 357 |
+
</td>
|
| 358 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 359 |
+
<div class="text-sm text-gray-900">654 Maple Blvd, Financial District</div>
|
| 360 |
+
</td>
|
| 361 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 362 |
+
<span class="status-indicator status-active"></span>
|
| 363 |
+
<span class="text-sm text-gray-900">Active</span>
|
| 364 |
+
</td>
|
| 365 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 366 |
+
<div class="text-sm text-gray-900">5 min ago</div>
|
| 367 |
+
</td>
|
| 368 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 369 |
+
<div class="flex items-center">
|
| 370 |
+
<div class="w-16 bg-gray-200 rounded-full h-2">
|
| 371 |
+
<div class="bg-green-500 h-2 rounded-full" style="width: 72%"></div>
|
| 372 |
+
</div>
|
| 373 |
+
<span class="ml-2 text-sm text-gray-600">72%</span>
|
| 374 |
+
</div>
|
| 375 |
+
</td>
|
| 376 |
+
<td class="px-6 py-4 whitespace-nowrap">
|
| 377 |
+
<div class="text-sm text-gray-900">99.5%</div>
|
| 378 |
+
</td>
|
| 379 |
+
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
| 380 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></a>
|
| 381 |
+
<a href="#" class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-cog"></i></a>
|
| 382 |
+
<a href="#" class="text-blue-600 hover:text-blue-900"><i class="fas fa-chart-line"></i></a>
|
| 383 |
+
</td>
|
| 384 |
+
</tr>
|
| 385 |
+
</tbody>
|
| 386 |
+
</table>
|
| 387 |
+
</div>
|
| 388 |
+
|
| 389 |
+
<!-- Pagination -->
|
| 390 |
+
<div class="flex items-center justify-between mt-6">
|
| 391 |
+
<div class="text-sm text-gray-500">
|
| 392 |
+
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">153</span> terminals
|
| 393 |
+
</div>
|
| 394 |
+
<div class="flex space-x-2">
|
| 395 |
+
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
| 396 |
+
Previous
|
| 397 |
+
</button>
|
| 398 |
+
<button class="px-3 py-1 border border-blue-500 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
|
| 399 |
+
1
|
| 400 |
+
</button>
|
| 401 |
+
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
| 402 |
+
2
|
| 403 |
+
</button>
|
| 404 |
+
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
| 405 |
+
3
|
| 406 |
+
</button>
|
| 407 |
+
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
|
| 408 |
+
Next
|
| 409 |
+
</button>
|
| 410 |
+
</div>
|
| 411 |
+
</div>
|
| 412 |
+
</div>
|
| 413 |
+
</main>
|
| 414 |
+
|
| 415 |
+
<script>
|
| 416 |
+
// Sidebar toggle
|
| 417 |
+
const menuToggle = document.getElementById('menuToggle');
|
| 418 |
+
const sidebar = document.getElementById('sidebar');
|
| 419 |
+
const overlay = document.getElementById('overlay');
|
| 420 |
+
|
| 421 |
+
menuToggle.addEventListener('click', () => {
|
| 422 |
+
sidebar.classList.toggle('open');
|
| 423 |
+
overlay.classList.toggle('open');
|
| 424 |
+
});
|
| 425 |
+
|
| 426 |
+
overlay.addEventListener('click', () => {
|
| 427 |
+
sidebar.classList.remove('open');
|
| 428 |
+
overlay.classList.remove('open');
|
| 429 |
+
});
|
| 430 |
+
|
| 431 |
+
// Table sorting functionality
|
| 432 |
+
document.querySelectorAll('.sortable').forEach(header => {
|
| 433 |
+
header.addEventListener('click', () => {
|
| 434 |
+
const column = header.getAttribute('data-column');
|
| 435 |
+
const isAscending = header.classList.contains('sort-asc');
|
| 436 |
+
const isDescending = header.classList.contains('sort-desc');
|
| 437 |
+
|
| 438 |
+
// Reset all sort indicators
|
| 439 |
+
document.querySelectorAll('.sortable').forEach(h => {
|
| 440 |
+
h.classList.remove('sort-asc', 'sort-desc');
|
| 441 |
+
});
|
| 442 |
+
|
| 443 |
+
// Set new sort indicator
|
| 444 |
+
if (!isAscending && !isDescending) {
|
| 445 |
+
header.classList.add('sort-asc');
|
| 446 |
+
} else if (isAscending) {
|
| 447 |
+
header.classList.add('sort-desc');
|
| 448 |
+
}
|
| 449 |
+
|
| 450 |
+
// Here you would implement actual sorting logic for the table
|
| 451 |
+
// For demo purposes, we'll just log the sort action
|
| 452 |
+
console.log(`Sorting by ${column} ${header.classList.contains('sort-asc') ? 'ascending' : 'descending'}`);
|
| 453 |
+
});
|
| 454 |
+
});
|
| 455 |
+
|
| 456 |
+
// Simulate loading data
|
| 457 |
+
setTimeout(() => {
|
| 458 |
+
const loadingIndicator = document.createElement('div');
|
| 459 |
+
loadingIndicator.className = 'fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50';
|
| 460 |
+
loadingIndicator.innerHTML = '<div class="bg-white p-6 rounded-lg shadow-xl"><div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div><p class="mt-4 text-center">Loading terminal data...</p></div>';
|
| 461 |
+
document.body.appendChild(loadingIndicator);
|
| 462 |
+
|
| 463 |
+
setTimeout(() => {
|
| 464 |
+
loadingIndicator.remove();
|
| 465 |
+
}, 1500);
|
| 466 |
+
}, 500);
|
| 467 |
+
</script>
|
| 468 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sonofawalter/atm-management" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 469 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
Create a modern functional portal screen for ATM portfolio management. Table view with vital terminal health and transaction data and links to more detailed information. Sortable table. side menu for navigation that pops out. Navy, royal blue, white, and lite gray color scheme.
|