187 lines
4.8 KiB
HTML
187 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
|
|
<link href="https://cdn.jsdelivr.net/npm/quasar@2.16.0/dist/quasar.prod.css" rel="stylesheet" type="text/css">
|
|
<link href="./src/app.css" rel="stylesheet" type="text/css">
|
|
<link href="./src/components/app-header/app-header.css" rel="stylesheet" type="text/css">
|
|
<link href="./src/components/left-drawer/left-drawer.css" rel="stylesheet" type="text/css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script>
|
|
// Define global variables to suppress warnings
|
|
window.__VUE_PROD_DEVTOOLS__ = false;
|
|
window.__QUASAR_SSR_CLIENT__ = false;
|
|
window.__QUASAR_SSR__ = false;
|
|
|
|
// Debug: log Quasar availability
|
|
console.log('Preloading Quasar...');
|
|
</script>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js"
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/quasar@2.16.0/dist/quasar.umd.prod.js"></script>
|
|
<script>
|
|
// Ensure Quasar is loaded before modules execute
|
|
console.log('Quasar loaded:', typeof window.Quasar);
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
/* Component-specific styles that haven't been extracted yet */
|
|
.bg-weekend { background-color: #f1f5f9 !important; }
|
|
.text-sat { color: #166534 !important; }
|
|
.text-sun { color: #991b1b !important; }
|
|
|
|
.q-field--outlined.q-field--rounded .q-field__control { border-radius: 12px; }
|
|
.q-btn--rounded { border-radius: 10px; }
|
|
|
|
.dense-date-card { width: 290px; }
|
|
.dense-date-card .q-date { width: 100%; min-height: unset; }
|
|
|
|
.shift-tooltip {
|
|
padding: 10px 12px;
|
|
max-width: 220px;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.filter-section-title {
|
|
font-size: 10px;
|
|
font-weight: 900;
|
|
letter-spacing: 0.1em;
|
|
color: #94a3b8;
|
|
margin-top: 24px;
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.filter-btn-active {
|
|
background-color: #e0e7ff !important; /* bg-indigo-1 */
|
|
border: 1px solid #c7d2fe !important; /* border-indigo-2 */
|
|
}
|
|
|
|
.filter-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #f59e0b; /* amber-500 */
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
box-shadow: 0 0 0 2px #e0e7ff;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* --- PERSISTENT READING HELPER STYLES (Toggle Eye) --- */
|
|
.bg-reading-mode {
|
|
background-color: #fff9c4 !important;
|
|
}
|
|
.bg-reading-mode-intersection {
|
|
background-color: #fff176 !important;
|
|
}
|
|
.reading-active-header {
|
|
background-color: #fef08a !important;
|
|
border-bottom: 2px solid #eab308;
|
|
}
|
|
|
|
/* MODIFIED: Removed borders to match user request */
|
|
.row-highlighted .left-col {
|
|
background-color: #fff9c4 !important;
|
|
}
|
|
|
|
.agent-row-hover-trigger .agent-highlight-btn {
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.agent-row-hover-trigger:hover .agent-highlight-btn,
|
|
.agent-highlight-btn.is-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.date-header-hover-trigger .header-highlight-btn {
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
.date-header-hover-trigger:hover .header-highlight-btn,
|
|
.header-highlight-btn.is-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* --- GROUP HEADER STYLES --- */
|
|
/* Level 1 Header (e.g., Hub) */
|
|
.group-header-l1 {
|
|
background: #eef2ff; /* Indigo-50 */
|
|
font-size: 12px;
|
|
font-weight: 900;
|
|
color: #3730a3; /* Indigo-800 */
|
|
letter-spacing: 0.05em;
|
|
height: 36px;
|
|
border-top: 1px solid #c7d2fe;
|
|
border-bottom: 1px solid #e0e7ff;
|
|
}
|
|
.group-header-l1 .left-col {
|
|
background: #eef2ff;
|
|
color: #3730a3;
|
|
}
|
|
|
|
/* Level 2 Header (e.g., Division) */
|
|
.group-header-l2 {
|
|
background: #f8fafc; /* Slate-50 */
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: #64748b; /* Slate-500 */
|
|
letter-spacing: 0.025em;
|
|
height: 32px;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
.group-header-l2 .left-col {
|
|
background: #f8fafc;
|
|
color: #64748b;
|
|
padding-left: 24px; /* Indent */
|
|
}
|
|
|
|
.locked-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(241, 245, 249, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 5;
|
|
}
|
|
|
|
.grid-search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="q-app">
|
|
<!-- Vue app will be mounted here -->
|
|
</div>
|
|
|
|
<script type="module" src="./src/main.js"></script>
|
|
</body>
|
|
</html> |