Hugging Face's logo

Spaces:
privateuserh
/
privateaq-ble
Running

App Files Community
privateuserh commited on
Commit
c2c7073
·
verified ·
1 Parent(s): 889337f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +99 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Privateaq Ble
3
- emoji: 💻
4
  colorFrom: pink
5
- colorTo: red
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: privateaq-ble
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: blue
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,99 @@
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>AquaNet Maritime Network</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
+ @keyframes pulse {
11
+ 0% { opacity: 0.6; }
12
+ 50% { opacity: 1; }
13
+ 100% { opacity: 0.6; }
14
+ }
15
+ .pulse {
16
+ animation: pulse 2s infinite;
17
+ }
18
+ .network-node {
19
+ transition: all 0.3s ease;
20
+ }
21
+ .network-node:hover {
22
+ transform: scale(1.1);
23
+ z-index: 10;
24
+ }
25
+ .wave-bg {
26
+ background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
27
+ }
28
+ .card-hover:hover {
29
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
30
+ transform: translateY(-2px);
31
+ }
32
+ .blink {
33
+ animation: blink 1s step-end infinite;
34
+ }
35
+ @keyframes blink {
36
+ 50% { opacity: 0; }
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-100 font-sans">
41
+ <!-- Navigation -->
42
+ <nav class="wave-bg text-white shadow-lg">
43
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
44
+ <div class="flex items-center space-x-2">
45
+ <i class="fas fa-water text-2xl"></i>
46
+ <span class="text-xl font-bold">AquaNet</span>
47
+ </div>
48
+ <div class="hidden md:flex space-x-6">
49
+ <a href="#dashboard" class="hover:text-blue-200">Dashboard</a>
50
+ <a href="#network" class="hover:text-blue-200">Network</a>
51
+ <a href="#devices" class="hover:text-blue-200">Devices</a>
52
+ <a href="#security" class="hover:text-blue-200">Security</a>
53
+ <a href="#settings" class="hover:text-blue-200">Settings</a>
54
+ </div>
55
+ <div class="flex items-center space-x-4">
56
+ <div class="relative">
57
+ <i class="fas fa-bell text-xl cursor-pointer"></i>
58
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-xs">3</span>
59
+ </div>
60
+ <div class="w-8 h-8 rounded-full bg-blue-300 flex items-center justify-center">
61
+ <span class="text-sm font-semibold">JD</span>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ </nav>
66
+
67
+ <!-- Main Content -->
68
+ <div class="container mx-auto px-4 py-6">
69
+ <!-- Dashboard Section -->
70
+ <section id="dashboard" class="mb-12">
71
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
72
+ <i class="fas fa-tachometer-alt mr-2 text-blue-600"></i> System Dashboard
73
+ </h2>
74
+
75
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
76
+ <!-- Network Status Card -->
77
+ <div class="bg-white rounded-lg shadow-md p-6 card-hover">
78
+ <div class="flex justify-between items-start">
79
+ <div>
80
+ <h3 class="text-gray-500 text-sm font-medium">Network Status</h3>
81
+ <p class="text-2xl font-bold text-green-600 mt-2">Active</p>
82
+ </div>
83
+ <div class="bg-green-100 p-2 rounded-full">
84
+ <i class="fas fa-network-wired text-green-600"></i>
85
+ </div>
86
+ </div>
87
+ <div class="mt-4">
88
+ <p class="text-sm text-gray-500">Nodes: <span class="font-medium text-gray-700">24</span></p>
89
+ <p class="text-sm text-gray-500">Gateways: <span class="font-medium text-gray-700">3</span></p>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Environmental Conditions Card -->
94
+ <div class="bg-white rounded-lg shadow-md p-6 card-hover">
95
+ <div class="flex justify-between items-start">
96
+ <div>
97
+ <h3 class="text-gray-500 text-sm font-medium">Environment</h3>
98
+ <p class="text-2xl font-bold text-blue-600 mt-2">
99
+ </html>