diff --git a/app/css/all.css b/app/css/all.css index 59f43cbb..3cdbfd85 100644 --- a/app/css/all.css +++ b/app/css/all.css @@ -377,3 +377,242 @@ button > i.fas { border: 1px solid #ced4da; } + + +.card-wrapper { + margin: 1rem; +} + +.dashboard-container { + display: flex; + position: relative; + width: 100%; + min-height: 400px; + padding: 2rem; +} + +.connections-left, +.connections-right { + position: relative; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.connection-item { + display: flex; + align-items: center; + gap: 0.5rem; + z-index: 5; +} + +.connection-right { + justify-content: flex-end; +} + +.connections-left i { + height: 40px; + display: flex; + align-items: center; + justify-content: left; +} + +.connections-left i:first-child { + margin-top: 0; +} + +.connections-left i:last-child { + margin-bottom: 0; +} + +.center-device { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + position: relative; + z-index: 1; +} + +.client-group { + display: flex; + align-items: center; + flex-direction: row-reverse; + gap: 0.5rem; +} + +.client-count { + text-align: right; +} + +.clients-status { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + padding-right: 1rem; +} + +.dashed-lines, +.solid-lines { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: contain; + padding: 1rem; + left: 112px; + z-index: 0; +} + +.dashed-lines-right, +.solid-lines-right { + left: -80px; +} + +.device-status { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; + margin: 1rem 0; +} + +.wifi-bands { + display: flex; + gap: 0.5rem; +} + +.band { + padding: 0.25rem 1rem; + border: 2px solid #7D7E7E; + border-radius: 4px; + background: transparent; + font-weight: 600; + color: #7D7E7E; +} + +.band.active { + border-color: #008281; + color: #008281; +} + +.device-label { + font-size: 1.5rem; + text-align: center; + color: #008281; + margin-top: 1rem; +} + +.status-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.3rem; +} + +.bottom { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.3rem; + width: 100%; +} + +.connection-item>i { + color: #7D7E7E; +} + +.connections-left>.connection-item>span { + color: #7D7E7E; + margin-right: 0.5rem; +} + +@media (max-width: 1200px) { + .connection-item > span:not(.fa-stack) { + display: none!important; + } +} + +@media (max-width: 991px) { + .connections-right, + .connections-left { + display: none!important; + } + .dashboard-container { + width: auto; + padding: 0; + + } + .device-status { + gap: 0.5rem; + } + .clients-mobile { + display: flex!important; + flex-direction: row!important; + } +} +.connection-item.active > span { + color: #008281!important; +} +.connection-item.active > i { + color: #008281!important; +} +.status-item.active > span { + color: #008281!important; +} +.status-item.active > i { + color: #008281!important; +} +.clients-mobile { + display: none; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; +} + +.client-type { + position: relative; + display: inline-flex; + align-items: center; + gap: 1rem; +} + +.client-type i { + font-size: 1.5rem; + color: #008281; + background: #fff; + width: 45px; + height: 45px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid #008281; +} + +.client-type i.badge-icon { + font-size: 0.7rem; + background: #008281; + color: white; + width: 20px; + height: 20px; + border: none; +} + +.client-count { + position: absolute; + top: -5px; + right: -5px; + background: #008281; + color: white; + border-radius: 50%; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; +} \ No newline at end of file diff --git a/app/img/dashed.svg b/app/img/dashed.svg new file mode 100644 index 00000000..d5d57e59 --- /dev/null +++ b/app/img/dashed.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/app/img/device.svg b/app/img/device.svg new file mode 100644 index 00000000..6c7d2e61 --- /dev/null +++ b/app/img/device.svg @@ -0,0 +1,4445 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/img/right-dashed.svg b/app/img/right-dashed.svg new file mode 100644 index 00000000..5a41449e --- /dev/null +++ b/app/img/right-dashed.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/img/right-solid.php b/app/img/right-solid.php new file mode 100644 index 00000000..98d425c1 --- /dev/null +++ b/app/img/right-solid.php @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/img/solid.php b/app/img/solid.php new file mode 100644 index 00000000..5cb5ecf0 --- /dev/null +++ b/app/img/solid.php @@ -0,0 +1,62 @@ + + + + 0.75, + 'out' => 297.75, + 'device-2' => 198.75, + 'device-3' => 397.058, + 'device-4' => 595.211 +]; + +// Calculate joint line segments +if ($showJoint) { + $activeDevices = array_filter([$showDevice1, $showDevice2, $showDevice3, $showDevice4]); + $activeYs = []; + + foreach ($devicePositions as $device => $y) { + if (isset($_GET[$device])) { + $activeYs[] = $y; + } + } + + // Add top/bottom if first/last device is connected + if ($showDevice1) array_unshift($activeYs, 0); + if ($showDevice4) $activeYs[] = 596; + + // Draw segments between consecutive points + for ($i = 1; $i < count($activeYs); $i++) { + $y1 = $activeYs[$i-1]; + $y2 = $activeYs[$i]; + echo ""; + } +} +?> + + + + + + + + + + + + + + + + + diff --git a/templates/dashboard.php b/templates/dashboard.php index d85653c8..e9e373ef 100755 --- a/templates/dashboard.php +++ b/templates/dashboard.php @@ -3,140 +3,159 @@
-
- -
-
- -
+
+ + +
+
+ +
+
-
-
+
-
-
-
-

-
-
-
- +
+

+ +

+ +
+
+
+ Ethernet + +
+
+ Repeater + +
+
+ Tethering + +
+
+ Cellular + +
+ + +
+ +
+
+ Raspberry Pi +
Raspberry Pi 3 Model B+
+
+ +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + + + + +
+
+ +
+ 5G + 2.4G
-
-
-
-
-
-
-

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ +
+
-
- -
- -
+
+ + 3
-
-
-
-
-
-
-
-

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 2) : ?> -
- -
- -
- -
-
-
-
-
+
+
-
-
-
- - - - " name="ifup_wlan0" /> - - " name="ifdown_wlan0" /> - - -
-
+
+ +
+
+
+ + + + " name="ifup_wlan0" /> + + " name="ifdown_wlan0" /> + + +
+
+ + +
@@ -144,6 +163,7 @@ + t[' send'] = ''; + t['receive'] = ' + '; + \ No newline at end of file