277 lines
7.1 KiB
HTML
277 lines
7.1 KiB
HTML
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');
|
||
|
||
/* SCALE: align 100% zoom with prior 125% appearance */
|
||
:root {
|
||
font-size: 125%;
|
||
--bg-0: #0c1117;
|
||
--bg-1: #131a23;
|
||
--panel: #151e2b;
|
||
--panel-hi: #1a2433;
|
||
--text: #ecf3ff;
|
||
--muted: #96a5b7;
|
||
--accent: #2ea3ff;
|
||
--accent-2: #1f8cf3;
|
||
--good: #24d06f;
|
||
--warn: #ffd100;
|
||
--bad: #ff4d4f;
|
||
--radius: 0.75rem;
|
||
--shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);
|
||
--sidebar-width: 3.75rem;
|
||
--sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);
|
||
--content-max: 70rem;
|
||
--content-pad: clamp(1rem, 1.2vw, 1.4rem);
|
||
--section-gap: clamp(0.75rem, 1vw, 1rem);
|
||
--card-pad: clamp(1rem, 1.1vw, 1.25rem);
|
||
--fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);
|
||
--fs-section-title: clamp(1rem, 0.9vw + 0.3rem, 1.35rem);
|
||
--fs-body: clamp(0.85rem, 0.7vw + 0.3rem, 1.05rem);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#oee {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow-x: hidden;
|
||
background: var(--bg-0);
|
||
color: var(--text);
|
||
font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;
|
||
font-weight: 600;
|
||
}
|
||
|
||
body {
|
||
overflow: hidden;
|
||
}
|
||
|
||
body > md-content,
|
||
body > md-content > md-content,
|
||
.nr-dashboard-template,
|
||
.nr-dashboard-template md-content,
|
||
.nr-dashboard-cardpanel,
|
||
.nr-dashboard-cardpanel md-content {
|
||
background: transparent !important;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.nr-dashboard-cardpanel,
|
||
.nr-dashboard-cardpanel md-card,
|
||
.nr-dashboard-cardpanel md-card-content {
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* LAYOUT: lock sidebar + content grid across tabs */
|
||
#oee {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar {
|
||
width: var(--sidebar-width);
|
||
background: #0b1119;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);
|
||
}
|
||
|
||
.side-top {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--sidebar-gap);
|
||
align-items: center;
|
||
}
|
||
|
||
.sb-btn {
|
||
width: 2.75rem;
|
||
height: 2.75rem;
|
||
border-radius: 0.75rem;
|
||
background: #0f1721;
|
||
border: 1px solid #19222e;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #8fb3d9;
|
||
cursor: pointer;
|
||
transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;
|
||
}
|
||
|
||
.sb-btn.active {
|
||
border-color: #2fd289;
|
||
box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);
|
||
color: #2fd289;
|
||
}
|
||
|
||
.sb-ico {
|
||
font-size: clamp(1.1rem, 1.2vw, 1.25rem);
|
||
line-height: 1;
|
||
}
|
||
|
||
.sb-foot {
|
||
font-size: clamp(0.6rem, 0.6vw, 0.7rem);
|
||
color: #6c7b8d;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.main {
|
||
flex: 1;
|
||
overflow: auto;
|
||
padding: var(--content-pad);
|
||
}
|
||
|
||
.container {
|
||
max-width: var(--content-max);
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--section-gap);
|
||
}
|
||
|
||
.card {
|
||
background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
/* HEADER: maintain title styling */
|
||
.page-heading {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 0.25rem;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0;
|
||
font-size: var(--fs-page-title);
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* HELP CARDS: keep text hierarchy + spacing clean */
|
||
.help-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: clamp(0.9rem, 1vw, 1.1rem);
|
||
padding: var(--card-pad);
|
||
}
|
||
|
||
.help-title {
|
||
margin: 0;
|
||
font-size: var(--fs-section-title);
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--text);
|
||
}
|
||
|
||
.help-body {
|
||
margin: 0;
|
||
line-height: 1.65;
|
||
color: var(--muted);
|
||
font-size: var(--fs-body);
|
||
font-weight: 500;
|
||
}
|
||
|
||
</style>
|
||
<link rel="stylesheet" href="styles/oee-theme-override.css">
|
||
|
||
<div id="oee">
|
||
<aside class="sidebar">
|
||
<div class="side-top">
|
||
<button class="sb-btn" data-label="Home" ng-click="gotoTab('Home')"><span class="sb-ico">🏠</span></button>
|
||
<button class="sb-btn" data-label="Work Orders" ng-click="gotoTab('Work Orders')"><span class="sb-ico">📋</span></button>
|
||
<button class="sb-btn" data-label="Alerts" ng-click="gotoTab('Alerts')"><span class="sb-ico">⚠️</span></button>
|
||
<button class="sb-btn" data-label="Graphs" ng-click="gotoTab('Graphs')"><span class="sb-ico">📊</span></button>
|
||
<button class="sb-btn active" data-label="Help" ng-click="gotoTab('Help')"><span class="sb-ico">❓</span></button>
|
||
<button class="sb-btn" data-label="Settings" ng-click="gotoTab('Settings')"><span class="sb-ico">⚙️</span></button>
|
||
</div>
|
||
<div class="sb-foot">OEE V1.0</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<div class="container">
|
||
<section class="page-heading">
|
||
<h1 class="page-title">Help</h1>
|
||
</section>
|
||
|
||
<section class="card help-card">
|
||
<h2 class="help-title">About this Dashboard</h2>
|
||
<p class="help-body">This interface centralizes Overall Equipment Effectiveness metrics, real-time production details, and critical status indicators. Each tab follows a unified layout so operators can scan performance, alerts, and configuration without relearning navigation.</p>
|
||
</section>
|
||
|
||
<section class="card help-card">
|
||
<h2 class="help-title">How to Start / Stop Production</h2>
|
||
<p class="help-body">Navigate to the Work Orders tab, select the required job, and use the primary controls to begin or end production. Always log the reason for stoppages using the Alerts tab, and confirm machine readiness before resuming. Follow your facility’s standard operating procedure for approvals and sign-off.</p>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
(function(scope) {
|
||
scope.gotoTab = function(tabName) {
|
||
scope.send({ ui_control: { tab: tabName } });
|
||
};
|
||
})(scope);
|
||
|
||
(function ensureNoMaterialTint(){
|
||
setTimeout(() => {
|
||
const root = document.getElementById('oee') || document.body;
|
||
|
||
const targets = root.querySelectorAll([
|
||
'.md-toolbar','md-toolbar',
|
||
'.md-subheader','md-subheader',
|
||
'.md-toolbar-tools','.md-card-title'
|
||
].join(','));
|
||
|
||
targets.forEach(el => {
|
||
if (el && el.style) {
|
||
el.style.background = 'transparent';
|
||
el.style.backgroundColor = 'transparent';
|
||
}
|
||
if (el && el.classList) {
|
||
el.classList.remove(
|
||
'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',
|
||
'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'
|
||
);
|
||
}
|
||
});
|
||
|
||
if (!document.getElementById('oee-theme-sentinel')) {
|
||
const style = document.createElement('style');
|
||
style.id = 'oee-theme-sentinel';
|
||
style.textContent = `
|
||
#oee .md-toolbar::before, #oee .md-toolbar::after,
|
||
#oee .md-subheader::before, #oee .md-subheader::after,
|
||
#oee md-toolbar::before, #oee md-toolbar::after,
|
||
#oee md-subheader::before, #oee md-subheader::after {
|
||
display: none !important;
|
||
content: none !important;
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
}
|
||
}, 300);
|
||
})();
|
||
|
||
|
||
// optional render trigger
|
||
scope.$evalAsync(function() {});
|
||
</script>
|