Changed icons & minor graphical review

diff --git a/frontend/aliases.html b/frontend/aliases.html
index 43210029f6ae81d6a939b845f4d3fa8ffe7bcc1c..0e77aea04a39f3d7fe04e42f18c966786276081c 100644 (file)
--- a/frontend/aliases.html
+++ b/frontend/aliases.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-diagram-2"></i></span>
                         <span class="section-title">Aliases List</span>
                     </h2>
                 </div>

diff --git a/frontend/css/layout.css b/frontend/css/layout.css
index 82a079a12b3f4a86a1f8d6c4f59c95f1a044f261..d2a4c1bd90aa3b42a4fed029549fb93c1346dede 100644 (file)
--- a/frontend/css/layout.css
+++ b/frontend/css/layout.css
@@ -430,10 +430,26 @@ td.actions {
     padding: 20px 24px;
     border-left: 4px solid var(--accent);
     border-radius: 6px;
-    width: 320px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.25);
 }
 
+.modal-content-sm {
+    width: 320px;
+}
+
+.modal-content-md {
+    width: 500px;
+}
+
+.modal-content-lg {
+    width: 800px;
+}
+
+.modal-content-xl {
+    width: 95vw;
+    max-width: 1200px;
+}
+
 .modal-content h3 {
     margin: 0 0 14px 0;
     font-size: 1.2rem;

diff --git a/frontend/css/variables.css b/frontend/css/variables.css
index 2b1d835e26bf05669d4d6f5df3a8a5dc5c336fc4..add5ba161cef9bc0ee054e04cee894a875466867 100644 (file)
--- a/frontend/css/variables.css
+++ b/frontend/css/variables.css
@@ -3,6 +3,7 @@
    ================================ */
 :root {
     --accent: #4da3ff;
+    --accent-rgb: 77, 163, 255;
     --accent-hover: #1f8bff;
 
     --bg-dark: #111;
@@ -20,4 +21,10 @@
 
     --icon-color: var(--accent);
     --icon-color-hover: var(--accent-hover);
-}
+
+    --bg-hover: rgba(0, 0, 0, 0.04);
+    --bg-hover-accent: rgba(var(--accent-rgb), 0.08);
+
+    --bg-selected: rgba(var(--accent-rgb), 0.12);
+    --border-selected: rgba(var(--accent-rgb), 0.4);
+}
\ No newline at end of file

diff --git a/frontend/devices.html b/frontend/devices.html
index 3b9d8575f6aceb6ec9a37128f52fef4581118d55..fc245257244c4cfc94538c3af021a2c2892c59c1 100644 (file)
--- a/frontend/devices.html
+++ b/frontend/devices.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-diagram-3-fill"></i></span>
                         <span class="section-title">Devices List</span>
                     </h2>
                 </div>

diff --git a/frontend/hosts.html b/frontend/hosts.html
index 00bd53b49c1b880cd837e7e93d4b4556b4fb9e33..d995379071652156891c40c4deedec8c86f9e680 100644 (file)
--- a/frontend/hosts.html
+++ b/frontend/hosts.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-hdd-network"></i></span>
                         <span class="section-title">Hosts List</span>
                     </h2>
                 </div>

diff --git a/frontend/index.html b/frontend/index.html
index f317eedbc1baea274060088d8e05361e6822182c..13b38404d5691ab4d4971c67490b50830366b17c 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -65,7 +65,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-grid me-2"></i></span>
                         <span class="section-title">Dashboard</span>
                     </h2>
                 </div>
@@ -94,7 +94,7 @@
 
             <!-- DHCP -->
             <div class="tile">
-                <div class="tile-icon"><i class="bi bi-database-gear"></i></div>
+                <div class="tile-icon"><i class="bi bi-broadcast"></i></div>
                 <h3>DHCP (Kea)</h3>
                 <p>Pools, leases, reservations.</p>
                 <div class="mt-2 d-flex gap-2 flex-wrap">
@@ -117,16 +117,14 @@
 
             <!-- Aliases -->
             <a href="/aliases" class="tile text-decoration-none">
-                <div class="tile-icon"><i class="bi bi-hdd-network"></i></div>
+                <div class="tile-icon"><i class="bi bi-diagram-2"></i></div>
                 <h3>Aliases</h3>
                 <p>Inventario alias DNS.</p>
             </a>
 
             <!-- Devices Status -->
             <a href="/devices" class="tile text-decoration-none">
-                <div class="tile-icon">
-                    <i class="bi bi-card-list"></i>
-                </div>
+                <div class="tile-icon"><i class="bi bi-diagram-3-fill"></i></div>
                 <h3>Devices</h3>
                 <p>Device status (Host + DHCP).</p>
             </a>
@@ -140,7 +138,7 @@
 
             <!-- Backup & Restore -->
             <div class="tile">
-                <div class="tile-icon"><i class="bi bi-save"></i></div>
+                <div class="tile-icon"><i class="bi bi-arrow-counterclockwise"></i></div>
                 <h3>Backup &amp; Restore</h3>
                 <p>Esecuzione backup e gestione archivi.</p>
 

diff --git a/frontend/leases.html b/frontend/leases.html
index ad29feb891aa150aac1c808a0d8713494d4f3c20..b6df99613fb4110b32cd12beb5acf5bc5c0da014 100644 (file)
--- a/frontend/leases.html
+++ b/frontend/leases.html
@@ -68,7 +68,7 @@
                 <!-- Title -->
                 <div class="col-12 col-md-auto">
                     <h2 class="mb-0 d-flex align-items-center gap-2 lh-1">
-                        <span class="title-icon">🖧</span>
+                        <span class="title-icon"><i class="bi bi-broadcast"></i></span>
                         <span class="section-title">DHCP Leases</span>
                     </h2>
                 </div>

diff --git a/frontend/modals.html b/frontend/modals.html
index adcd026a4b6a5859b357928a5ec1604d697fa40c..42c65c19648156ff60e41a75900e0ac04c2e755f 100644 (file)
--- a/frontend/modals.html
+++ b/frontend/modals.html
@@ -1,12 +1,12 @@
 <!-- AddHost -->
 <div class="modal fade" id="addHostModal" tabindex="-1" aria-labelledby="addHostTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered"><!-- modal-sm|md|lg se vuoi cambiare -->
-        <div class="modal-content addhost-modal">
+        <div class="modal-content modal-content-sm addhost-modal">
             <!-- Header scuro con logo/brand -->
             <div class="modal-header addhost-header">
                 <div class="d-flex align-items-center gap-2">
                     <!-- Emoji o icona -->
-                    <span class="title-icon" aria-hidden="true">🖧</span>
+                    <span class="title-icon" aria-hidden="true"><i class="bi bi-hdd-network"></i></span>
                     <h5 class="modal-title mb-0" id="addHostTitle">Aggiungi Host</h5>
                 </div>
                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Chiudi"></button>
@@ -76,12 +76,12 @@
 <!-- AddAlias -->
 <div class="modal fade" id="addAliasModal" tabindex="-1" aria-labelledby="addAliasTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered"><!-- modal-sm|md|lg se vuoi cambiare -->
-        <div class="modal-content addhost-modal">
+        <div class="modal-content modal-content-sm addhost-modal">
             <!-- Header scuro con logo/brand -->
             <div class="modal-header addhost-header">
                 <div class="d-flex align-items-center gap-2">
                     <!-- Emoji o icona -->
-                    <span class="title-icon" aria-hidden="true">🖧</span>
+                    <span class="title-icon" aria-hidden="true"><i class="bi bi-diagram-2"></i></span>
                     <h5 class="modal-title mb-0" id="addAliasTitle">Aggiungi Alias</h5>
                 </div>
                 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Chiudi"></button>
@@ -138,13 +138,13 @@
     </div>
 </div>
 
-<!-- Modal Restorebackup -->
+<!-- Modal Restore backup -->
 <div id="restoreModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="restoreTitle">
-    <div class="modal-content addhost-modal">
+    <div class="modal-content modal-content-xl addhost-modal">
         <div class="addhost-header d-flex justify-content-between align-items-center">
             <div class="d-flex align-items-center gap-2">
-                <span class="title-icon">💾</span>
-                <span id="restoreTitle" class="modal-title">Execute Restore</span>
+                <span class="title-icon"><i class="bi bi-arrow-counterclockwise"></i></span>
+                <span id="restoreTitle" class="modal-title">Restore Backup</span>
             </div>
             <button type="button" class="btn-close" title="Close" aria-label="Close" data-action="closeRestoreModal"></button>
         </div>
@@ -165,10 +165,10 @@
 <!-- Modal Health -->
 <div id="healthModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="healthTitle">
     <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content addhost-modal">
+        <div class="modal-content modal-content-md addhost-modal">
             <div class="addhost-header d-flex justify-content-between align-items-center">
                 <div class="d-flex align-items-center gap-2">
-                    <span class="title-icon">❤️‍🩹</span>
+                    <span class="title-icon"><i class="bi bi-heart-pulse"></i></span>
                     <span id="healthTitle" class="modal-title">Health Status</span>
                 </div>
                 <button type="button" class="btn-close" title="Close" aria-label="Close" data-action="closeHealthModal"></button>