Skip to content
Snippets Groups Projects
Verified Commit 74e8e423 authored by Tony Bonnin's avatar Tony Bonnin
Browse files

Change Color & Disk Template

parent 2f82ec6c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 140 additions and 37 deletions
app/acf-util/welcome-html.lsp
+ 34
− 13
View file @ 74e8e423
......@@ -260,43 +260,64 @@
<div class="disk-list">
<p class="dashboard-title"><i class="fa-solid fa-square"></i> Disk List</p>
<%
local function get_random_number(limit)
return math.floor(math.random() * limit)
-- Random Colors in Range Function without Duplicate Colors
local used_colors = {}
local function get_random_number(min, max)
return math.floor(math.random() * (max - min + 1)) + min
end
local function table_size(tbl)
local count = 0
for _ in pairs(tbl) do count = count + 1 end
return count
end
local function get_random_color()
local h = get_random_number(360)
local color = string.format("hsl(%d, 70%%, 55%%)", h)
local hue_ranges = {
{min = 100, max = 160}, -- Green
{min = 50, max = 80}, -- Yellow
{min = 210, max = 260} -- Blue
}
if table_size(used_colors) >= 25 then
used_colors = {}
end
local color
repeat
local range = hue_ranges[get_random_number(1, #hue_ranges)]
local h = get_random_number(range.min, range.max)
color = string.format("hsl(%d, 60%%, 60%%)", h)
until not used_colors[color]
used_colors[color] = true
return color
end
%>
<% displaydisk = function(disk, name)
local used_color = get_random_color()
io.write('<table id="legend-title" style="margin:0px;padding:0px;border:0px;margin-top:5px;">\n')
io.write('<div id="disk-listing">\n')
io.write('<table id="legend-title">\n')
io.write(" <tr>\n")
io.write(' <td id="legend-object" width="100px"><b><span class="linux-name"><i class="fa-solid fa-database icon-disk">')
io.write('</i> Disk '..html.html_escape(name)..'</span> - <span class="brand-name" style="color:'..used_color..'">'..html.html_escape(disk.model)..'</span>')
io.write(' <td id="legend-object" width="100px"><b><span class="linux-name"><i class="fa-solid fa-database icon-disk">\n')
io.write('</i> Disk '..html.html_escape(name)..'</span> | <span class="brand-name" style="color:'..used_color..'">'..html.html_escape(disk.model)..'</span>\n')
io.write('<span class="disk-right-inf"><span class="mount-point"><i class="fa-solid fa-folder-closed icon-disk icon-disk-right"></i> '..html.html_escape(disk.mount_point)..'</span>')
io.write('<i class="fa-solid fa-chart-simple icon-disk icon-disk-right"></i> Used <span class="disk-used" style="background-color:'..used_color..'">'..html.html_escape(disk.used) .. "%" .. '</span></span></b></td>\n')
io.write('<i class="fa-solid fa-chart-simple icon-disk icon-disk-right"></i> Used <span class="disk-used" style="color:'..used_color..'">'..html.html_escape(disk.used) .. "%" .. '</span></span></b></td>\n')
io.write(" </tr>\n")
io.write("</table>\n")
io.write('<table class="chart-bar chart-storage">\n')
io.write(" <tr>\n")
io.write(" <td>0%</td>\n")
if tonumber(disk.used) >= 0 and tonumber(disk.used) <= 5 then
io.write(' <td id="capacity-used" class="capacity-used" width="5%" style="margin:0; border:none; background-color:'..used_color..'">')
io.write(' <td id="capacity-used" class="capacity-used" width="5%" style="margin:0; border:none; background-color:'..used_color..'">\n')
io.write('<center><b>'.. bytesToSize(tonumber(disk.use) * 1024) ..'</b></center></td>\n')
elseif tonumber(disk.used) > 10 then
io.write(' <td id="capacity-used" class="capacity-used" width="'..html.html_escape(disk.used)..'%" style="margin:0; border:none; background-color:'..used_color..'">')
io.write(' <td id="capacity-used" class="capacity-used" width="'..html.html_escape(disk.used)..'%" style="margin:0; border:none; background-color:'..used_color..'; transition: width 0.5s ease-in-out;">\n')
io.write('<center><b>'.. bytesToSize(tonumber(disk.use) * 1024) ..'</b></center></td>\n')
end
if tonumber(disk.used) < 100 then
io.write(' <td id="capacity-free" class="capacity-free" width="'..(100-tonumber(disk.used))..'%" style="margin:0; border:none;">')
io.write('<center><b>'.. bytesToSize(tonumber(disk.available) * 1024) ..'</b></center></td>\n')
io.write(' <td id="capacity-free" class="capacity-free" width="'..(100-tonumber(disk.used))..'%" style="margin:0; border:none;">\n')
io.write('<center><b>'.. bytesToSize(tonumber(disk.available) * 1024) ..' <span class="free-chart-disk">(Free)</span></b></center></td>\n')
end
io.write(' <td>100%</td>\n')
io.write(" </tr>\n")
io.write("</table>\n")
io.write("</div>\n")
end
%>
<%
......
www/skins/dashboard/css/dashboard-main/dark.css
+ 13
− 0
View file @ 74e8e423
......@@ -122,3 +122,16 @@ html.app-logon.dark-theme {
.dark-theme .fa-solid.fa-circle-half-stroke {
color: rgb(99 0 210) !important;
}
.dark-theme #disk-listing {
background: inherit !important;
}
.dark-theme .page-welcome #capacity-free {
color: #c9c9c9 !important;
background: #404040 !important;
}
.dark-theme .welcome .dashboard-title {
border-top: 1px solid #505050 !important;
}
\ No newline at end of file
www/skins/dashboard/css/dashboard-main/icons.css
+ 40
− 2
View file @ 74e8e423
......@@ -46,7 +46,7 @@
display: inline-block;
position: relative;
margin: 0 0.5rem 0 0;
color: #e5e5e5 !important;;
color: #e5e5e5 !important;
font-size: 1.5rem;
top: -0.2rem;
}
......@@ -160,6 +160,20 @@
color: #adadad
}
#system #subnav::before {
font-family: "Font Awesome 6 Free";
content: '\F21E';
font-weight: bold;
margin: 0 1rem 0 0;
color: white;
position: relative;
font-size: 1.5rem;
top: 1.5rem;
background: #5a329f;
padding: 1.5rem;
border-radius: 8rem;
}
.health #subnav::before {
font-family: "Font Awesome 6 Free";
content: '\F21E';
......@@ -185,10 +199,14 @@
}
#section-hardware-information #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
content: '\F2DB' !important;
}
#section-storage #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
content: '\F0A0' !important;
}
......@@ -201,44 +219,62 @@
}
.apk #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
padding: 1.5rem 1.4rem !important;
content: '\F49E' !important;
}
.cron #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
padding: 1.4rem 1.5rem !important;
content: '\F1DA' !important;
}
.syslog #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
content: '\F06E' !important;
}
.logfiles #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
padding: 1.2rem 1.5rem !important;
content: '\F15C' !important;
}
.password #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
padding: 1.33rem 1.5rem !important;
content: '\F13E' !important;
}
.roles #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
padding: 1.5rem 1.35rem !important;
content: '\E595' !important;
}
.rc #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
padding: 1.4rem 1.5rem !important;
content: '\F469' !important;
}
.modules #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
content: '\F1B3' !important;
}
.skins #subnav::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
padding: 1.2rem 1.5rem !important;
content: '\F043' !important;
}
......@@ -259,6 +295,8 @@
}
.welcome .dashboard-title-memory::before {
font-family: "Font Awesome 6 Free";
font-weight: bold;
content: '\F538' !important;
}
......@@ -379,7 +417,7 @@
.icon-disk {
margin: 0 0.25rem 0 0;
opacity: 0.6;
opacity: 0.45;
}
.welcome .dashboard-title .fa-solid.fa-square {
......
www/skins/dashboard/css/dashboard-main/mobile.css
+ 14
− 0
View file @ 74e8e423
......@@ -249,6 +249,20 @@
flex-wrap: wrap !important;
}
.welcome .disk-right-inf {
float: right;
position: relative;
top: -0.75rem;
}
#legend-object {
padding: 0rem 0.1rem !important;
}
#disk-listing {
height: 9rem !important;
}
.data-block.data-system-up-time {
margin: 0 !important;
}
......
www/skins/dashboard/css/dashboard-pages/health.css
+ 3
− 2
View file @ 74e8e423
......@@ -71,9 +71,10 @@
#legend-object {
text-align: left !important;
font-size: 0.75rem;
color: #a7a7a7;
color: #cbcbcb !important;
border-color: #fbfbfb !important;
border-radius: 4px;
padding: 0.75rem 0.1rem !important;
padding: 0.75rem 0.1rem;
}
#legend b {
......
www/skins/dashboard/css/dashboard-pages/welcome.css
+ 36
− 20
View file @ 74e8e423
......@@ -805,8 +805,12 @@ input:checked + .slider:before {
}
.page-welcome #capacity-free {
background: #f3f3f3;
margin: 0 !important;
color: grey !important;
font-family: monospace;
font-size: 0.75rem;
border-right: none;
border-radius: 0 8px 8px 0;
background: #f1f1f1;
}
.page-welcome #capacity-used {
......@@ -930,26 +934,20 @@ input:checked + .slider:before {
.welcome #content .chart-storage {
width: 100%;
height: 10rem;
height: 5rem;
border: none !important;
font-size: 0.75rem;
margin: -1.25rem auto 2rem !important;
margin: -1.25rem auto 1.5rem !important;
transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.welcome #capacity-used {
color: white !important;
font-family: "Arial Black", sans-serif;
font-size: 0.75rem;
width: 0;
border-right: none;
border-radius: 8px 0 0 8px;
}
.welcome #capacity-free {
color: grey !important;
font-family: monospace;
font-size: 0.75rem;
border-right: none;
border-radius: 0 8px 8px 0;
transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.welcome .disk-right-inf {
......@@ -957,23 +955,24 @@ input:checked + .slider:before {
}
.welcome .disk-used {
color: white;
color: grey;
font-family: monospace;
font-weight: 600 !important;
font-size: 0.65rem;
position: relative;
margin: 0 0 0 0.25rem;
padding: 0.25rem 0.55rem;
padding: 0.25rem 0 0.55rem;
border-radius: 2px;
top: -0.1rem;
font-weight: 900 !important;
}
.welcome .icon-disk-right {
opacity: 0.2;
opacity: 0.45;
margin: 0 0.25rem 0 3rem;
}
.welcome .brand-name {
font-weight: 900;
font-weight: bold;
font-size: 0.7rem;
letter-spacing: -0.05rem;
}
.welcome .dashboard-title {
......@@ -985,4 +984,21 @@ input:checked + .slider:before {
letter-spacing: -0.05rem;
text-transform: capitalize;
font-size: 0.85rem;
}
.free-chart-disk {
opacity: 0.55;
}
#disk-listing {
box-shadow: 2px 2px 30px #00000020;
margin: 0.5rem auto;
background: #fbfbfb;
padding: 0.5rem 1rem;
border-radius: 4px;
}
.welcome center {
position: relative;
top: -0.5rem;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment