Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>WMS Gate Dashboard</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--card-bg-1: #3b82f6;
--card-bg-2: #2563eb;
--card-bg-3: #1d4ed8;
--text: #ffffff;
--muted: #b6c6ff;
--body-bg: linear-gradient(180deg,#041447,#223261);
--sidebar-bg: rgba(255,255,255,0.08);
--header-bg: #223261;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
background: var(--body-bg);
color: var(--text);
}
/* HEADER */
.header {
background: var(--header-bg);
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
min-height: 50px; /* taller */
box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* drop shadow */
margin-bottom: 12px; /* push content down */
}
.title { font-weight: 700; font-size: 20px; color: #fff; }
.subtitle { font-size: 12px; color: var(--muted); }
.theme-select {
padding: 6px 12px;
border-radius: 8px;
border: none;
cursor: pointer;
background: rgba(255,255,255,0.1);
color: #fff;
}
/* MAIN LAYOUT */
.layout-wrapper {
width: 100%;
display: flex;
min-height: calc(100vh - 180px);
}
.center {
flex: 1;
padding: 18px;
}
/* SIDEBARS */
.sidebar {
width: 220px;
padding: 12px;
overflow-y: auto;
background: var(--sidebar-bg);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(2,6,23,0.08);
}
.sidebar.left { margin-right: 16px; }
.sidebar.right { margin-left: 16px; }
.buttonbar.vertical { display: flex; flex-direction: column; gap: 10px; }
.buttonbar.vertical button {
display: flex; align-items: center; gap: 10px;
padding: 16px 14px; border-radius: 10px; border: none;
background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 50%,var(--card-bg-3));
color: white; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
text-align: left;
}
.buttonbar.vertical button i { width: 18px; text-align: center; }
/* GRID & CARDS */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
@media (max-width: 1300px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.card {
border-radius: 12px;
background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 50%,var(--card-bg-3));
box-shadow: 0 6px 18px rgba(2,6,23,0.12);
padding: 12px;
cursor: pointer;
color: var(--text);
transition: transform .18s ease, box-shadow .18s ease;
min-height: 100px;
display: flex; align-items: center;
}
.card1 {
border-radius: 12px;
background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 50%,var(--card-bg-3));
box-shadow: 0 6px 18px rgba(2,6,23,0.12);
padding: 12px;
cursor: pointer;
color: var(--text);
transition: transform .18s ease, box-shadow .18s ease;
min-height: 140px;
display: flex; align-items: center;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
.card1:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
.meta { display: flex; align-items: center; gap: 12px; }
.iconwrap {
background: rgba(255,255,255,0.14);
padding: 8px;
border-radius: 10px;
display: grid;
place-items: center;
color: white;
}
.label { font-size: 13px; }
.value { font-weight: 700; font-size: 20px; margin-top: 4px; }
/* FOOTER */
.footer { text-align: center; color: #ccc; margin: 2px; font-size: 13px; }
/* Smaller screens: hide sidebars */
@media (max-width: 900px) {
.sidebar { display: none; }
.layout-wrapper { flex-direction: column; }
}
</style>
</head>
<body>
<!-- HEADER -->
<header class="header">
<div>
<h1 class="title">WMS Gate</h1>
<div class="subtitle" id="today"></div>
</div>
</select><div class="buttonbar vertical">
<button onclick="toggleFullScreen()"> Toggle Fullscreen</button></div>
<div class="buttonbar vertical">
<button onclick="nuGetBreadcrumb(0);"><i class="fa-solid fa-home"></i> Home Screen</button>
</div>
<div class="buttonbar vertical">
<button onclick="nuForm('68d561854fa9b04', '', '', '', '0');"><i class="fa-solid fa-stapler"></i> Admin Screen</button>
</div>
<div class="buttonbar vertical">
<button onclick="nuForm('68da7e9bf2820f2', '', '', '', '0');"><i class="fa-solid fa-layer-group"></i> Stock Screen</button>
</div>
<select class="theme-select" onchange="switchTheme(this.value)">
<option value="darkblue">Dark Blue</option>
<option value="blue">Light Blue</option>
<option value="blackwhite">Black & White</option>
<option value="gold">Gold</option>
<option value="green">Green</option>
<option value="sun">Sun</option>
<option value="red">Red</option>
</select><div class="buttonbar vertical">
<button onclick="nuLogout()"><i class="fa-solid fa-right-from-bracket"></i> Log Out</button>
</div>
</header>
<!-- MAIN LAYOUT -->
<div class="layout-wrapper">
<!-- LEFT SIDEBAR -->
<aside class="sidebar left">
<div class="subtitle" style="text-align:center; font-weight:bold; text-decoration:underline;"><h1>IN</h1></div>
<div class="buttonbar vertical">
<!-- button onclick="nuPopup('67d811e19526543', '-1', '');"><i class="fa fa-plus"></i> ALL VEHICLES</button -->
<button onclick="nuForm('68c01aa790edb84', '-1', '', '', '0');"><i class="fa-solid fa-truck"></i> TRUCK ONLY</button>
<button onclick="nuForm('68c03fae5dd754f', '-1', '', '', '0');"><i class="fa-solid fa-truck-moving"></i> TRUCK + TRAILER</button>
<button onclick="nuForm('68d26808ac37987', '-1', '', '', '0');"><i class="fa-solid fa-car-side"></i> CAR</button>
<button onclick="nuForm('68c3de1765e73f1', '-1', '', '', '0');"><i class="fa-solid fa-truck-ramp-box"></i> TRANSPORTER</button>
<button onclick="nuForm('68c3e0dd50c23f9', '-1', '', '', '0');"><i class="fa-solid fa-van-shuttle"></i> VAN</button>
<button onclick="nuForm('68c3e69196add8a', '-1', '', '', '0');"><i class="fa-solid fa-caravan"></i> MOTORHOME</button>
<button onclick="nuForm('68c3e74ceea8250', '-1', '', '', '0');"><i class="fa-solid fa-bridge"></i> W/BRIDGE</button>
<button onclick="nuForm('68c3e8601fc0642', '-1', '', '', '0');"><i class="fa-solid fa-motorcycle"></i> MOTOR BIKE</button>
<!-- div class="subtitle" style="text-align:center; font-weight:bold; text-decoration:underline;">LIST</div>
<button onclick="nuPopup('67e51e833d95e38', '', '', '', '0');"><i class="fa fa-bars"></i> List All Gate Outs</button>
<button onclick="nuPopup('67d811e19526543', '', '', '', '0');"><i class="fa fa-bars"></i> List All Gate Ins</button>
<button onclick="nuPopup('67e2bbce127785c', '', '', '', '0');"><i class="fa fa-bars"></i> List All Expected</button>
</div -->
</aside>
<!-- CENTER CONTENT -->
<main class="center">
<!-- ROW 1 -->
<section class="grid row1" aria-label="Row 1 Metrics">
<article class="card1" onclick="nuForm('67ee51988f60b4d', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-calendar"></i></div>
<div>
<div class="label"><b>Vehicles Expected Today</b></div>
<div class="value" id="vehicleexpected3_total">12</div>
</div>
</div>
</article>
<article class="card1" onclick="nuForm('68aee737c1e81b2', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-calendar"></i></div>
<div>
<div class="label"><b>Expected Received Today</b></div>
<div class="value" id="vehicleexpected2c_total">7</div>
</div>
</div>
</article>
<article class="card1" onclick="nuForm('67f905a2d379c9f', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa fa-arrow-down"></i></div>
<div>
<div class="label">Vehicles In Today</div>
<div class="value" id="vehicleins3_total">15</div>
</div>
</div>
</article>
<article class="card1" onclick="nuForm('67ee9ceeded21ff', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa fa-arrow-up"></i></div>
<div>
<div class="label">Vehicles Out Today</div>
<div class="value" id="vehicleout3_total">9</div>
</div>
</div>
</article>
</section>
<!-- ROW 2 -->
<section class="grid" aria-label="Row 2 Metrics">
<article class="card" onclick="nuForm('686503564c58733', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-truck"></i></div>
<div>
<div class="label">Vehicles on site</div>
<div class="value" id="vehiclestk3_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('6881fd8470431a6', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-truck"></i></div>
<div>
<div class="label">Trailers on site</div>
<div class="value" id="vehiclestk2b_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('68ad8e7e90dfb4a', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-truck"></i></div>
<div>
<div class="label">Collections on site</div>
<div class="value" id="vehiclestkcollection2_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('68ad958fcb4f699', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-truck"></i></div>
<div>
<div class="label">Deliveries on site</div>
<div class="value" id="vehiclestkdelivery2_total">0</div>
</div>
</div>
</article>
</section>
<!-- ROW 3 -->
<section class="grid" aria-label="Row 3 Metrics">
<article class="card" onclick="nuForm('68a320938301d0b', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-regular fa-truck"></i></div>
<div>
<div class="label">Empty on site</div>
<div class="value" id="vehiclestkempty2_total">12</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('68aebc16a9c85a0', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-truck-ramp-box"></i></div>
<div>
<div class="label">Transporters on site</div>
<div class="value" id="transporter3_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('68aebdfb45ae30f', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-car-side"></i></div>
<div>
<div class="label">Cars/Vans on site</div>
<div class="value" id="carvan2_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('68aec61e06476e0', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-caravan"></i></div>
<div>
<div class="label">Motorhomes on site</div>
<div class="value" id="motorhome2_total">0</div>
</div>
</div>
</article>
</section>
<!-- ROW 4 -->
<section class="grid" aria-label="Row 4 Metrics">
<article class="card" onclick="nuForm('68c13298014cafa', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-bridge"></i></div>
<div>
<div class="label">Weighbridge Today</div>
<div class="value" id="weighbridge3_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('68aebc16a9c85a0', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-person"></i></div>
<div>
<div class="label">Staff On Site</div>
<div class="value" id="staff3_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('68b59454987ed0f', '', '', '', '0');">
<div class="meta">
<div class="iconwrap">
<svg class="icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
<rect x="3" y="4" width="18" height="18" rx="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
</div>
<div>
<div class="label">Loaded to Empty</div>
<div class="value" id="extra_total">0</div>
</div>
</div>
</article>
<article class="card" onclick="nuForm('67dd923ac7743ee', '', '', '', '0');">
<div class="meta">
<div class="iconwrap"><i class="fa-solid fa-car-side"></i></div>
<div>
<div class="label">Vehicle Register</div>
<div class="value" id="vehicleregister_total">0</div>
</div>
</div>
</article>
</main>
<!-- RIGHT SIDEBAR -->
<aside class="sidebar right">
<div class="subtitle" style="text-align:center; font-weight:bold; text-decoration:underline;"><h1>OUT</h1></div>
<div class="buttonbar vertical">
<!-- button onclick="nuPopup('67e51e833d95e38', '-1', '', '', '0');"><i class="fa fa-minus"></i> ALL VEHICLES</button -->
<button onclick="nuForm('68c40cbbe82d146', '-1', '', '', '0');"><i class="fa-solid fa-truck"></i> TRUCK ONLY</button>
<button onclick="nuForm('68c7fd9cc360f59', '-1', '', '', '0');"><i class="fa-solid fa-truck-moving"></i> TRUCK + TRAILER</button>
<button onclick="nuForm('68c92b1f74e62ce', '-1', '', '', '0');"><i class="fa-solid fa-car-side"></i> CAR</button>
<button onclick="nuForm('68c92e96132c2ea', '-1', '', '', '0');"><i class="fa-solid fa-truck-ramp-box"></i> TRANSPORTER</button>
<button onclick="nuForm('68c930159e04c9d', '-1', '', '', '0');"><i class="fa-solid fa-van-shuttle"></i> VAN</button>
<button onclick="nuForm('68c931b1ef653a0', '-1', '', '', '0');"><i class="fa-solid fa-caravan"></i> MOTORHOME</button>
<button onclick="nuForm('68da6b20935e9fe', '-1', '', '', '0');"><i class="fa-solid fa-bridge"></i> W/BRIDGE</button>
<button onclick="nuForm('68c9337c411e93f', '-1', '', '', '0');"><i class="fa-solid fa-motorcycle"></i> MOTOR BIKE</button>
<!-- button onclick="nuPopup('67dd923ac7743ee', '', '', '', '0');"><i class="fa-solid fa-truck-moving"></i> Vehicle Register</button -->
</div>
</aside>
</div>
<!-- FOOTER -->
<footer class="footer">.</footer>
<script>
const allThemes2 = {
blue: {
'--card-bg-1': '#3b82f6',
'--card-bg-2': '#2563eb',
'--card-bg-3': '#1d4ed8',
'--text': '#ffffff',
'--muted': '#94a3b8',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(59,130,246,0.1)',
'--header-bg': '#1d4ed8'
},
darkblue: {
'--card-bg-1': '#1e40af',
'--card-bg-2': '#1d4ed8',
'--card-bg-3': '#2563eb',
'--text': '#ffffff',
'--muted': '#64748b',
'--body-bg': 'linear-gradient(180deg,#041447,#223261)',
'--sidebar-bg': 'rgba(2,6,23,0.15)',
'--header-bg': '#223261'
},
gold: {
'--card-bg-1': '#facc15',
'--card-bg-2': '#eab308',
'--card-bg-3': '#b45309',
'--text': '#04121a',
'--muted': '#7c5c00',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(250,204,21,0.1)',
'--header-bg': '#eab308'
},
green: {
'--card-bg-1': '#34d399',
'--card-bg-2': '#059669',
'--card-bg-3': '#065f46',
'--text': '#052014',
'--muted': '#6ee7b7',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(52,211,153,0.1)',
'--header-bg': '#059669'
},
red: {
'--card-bg-1': '#ef4444',
'--card-bg-2': '#dc2626',
'--card-bg-3': '#991b1b',
'--text': '#fffafa',
'--muted': '#fca5a5',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(239,68,68,0.1)',
'--header-bg': '#dc2626'
},
sun: {
'--card-bg-1': '#b45309',
'--card-bg-2': '#b45309',
'--card-bg-3': '#b45309',
'--text': '#080808',
'--muted': '#94a3b8',
'--body-bg': '#fef3c7',
'--sidebar-bg': '#fef3c7',
'--header-bg': '#fef3c7'
},
blackwhite: {
'--card-bg-1': '#444',
'--card-bg-2': '#222',
'--card-bg-3': '#000',
'--text': '#ffffff',
'--muted': '#aaaaaa',
'--body-bg': '#ffffff',
'--sidebar-bg': '#f0f0f0',
'--header-bg': '#000'
}
};
function switchTheme(name){
const theme = allThemes2[name] || allThemes2.darkblue;
for(const k in theme){
document.documentElement.style.setProperty(k, theme[k]);
}
}
// Default theme
switchTheme('darkblue');
// Show today's date
document.getElementById('today').textContent =
new Date().toLocaleDateString(undefined, {weekday:'long', month:'short', day:'numeric', year:'numeric'});
</script>
<script>
function toggleFullScreen() {
if (!document.fullscreenElement) {
// Enter fullscreen
let elem = document.documentElement; // whole page
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // Chrome, Safari, Opera
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE/Edge
elem.msRequestFullscreen();
}
} else {
// Exit fullscreen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
</body>
</html>
I have tried to attach the form from the cloner but whatever file I save it as it wont let me attach.
The theme works for Forms but not for popups.