969 lines
28 KiB
HTML
Executable File
969 lines
28 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Imperial Command Center - Preview</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--imperial-black: #0a0a0a;
|
||
--imperial-dark: #1a1a1a;
|
||
--imperial-medium: #2a2a2a;
|
||
--imperial-light: #3a3a3a;
|
||
--imperial-red: #cc0000;
|
||
--imperial-red-light: #ff3333;
|
||
--status-armed: #cc0000;
|
||
--status-disarmed: #00cc00;
|
||
--status-pending: #ff8800;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background-color: var(--imperial-black);
|
||
color: #ffffff;
|
||
overflow: hidden;
|
||
height: 100vh;
|
||
}
|
||
|
||
.font-display {
|
||
font-family: 'Orbitron', sans-serif;
|
||
}
|
||
|
||
/* Header */
|
||
.header {
|
||
height: 64px;
|
||
background: var(--imperial-dark);
|
||
border-bottom: 1px solid var(--imperial-medium);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: var(--imperial-red);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.header-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 1.25rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.header-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.time {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 1.875rem;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.date {
|
||
font-size: 0.875rem;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.header-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--status-disarmed);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 8px 16px;
|
||
background: var(--imperial-medium);
|
||
border: 1px solid var(--imperial-light);
|
||
border-radius: 4px;
|
||
color: white;
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 0.875rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn:hover {
|
||
border-color: var(--imperial-red);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--imperial-red);
|
||
border-color: var(--imperial-red);
|
||
}
|
||
|
||
/* Main Content */
|
||
.main {
|
||
height: calc(100vh - 64px);
|
||
padding: 16px;
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
/* Widget Base */
|
||
.widget {
|
||
background: var(--imperial-dark);
|
||
border: 1px solid var(--imperial-medium);
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.widget-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 1rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--imperial-red);
|
||
border-bottom: 1px solid var(--imperial-medium);
|
||
padding-bottom: 8px;
|
||
margin-bottom: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.widget-content {
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
|
||
/* Calendar Column */
|
||
.calendar-col {
|
||
grid-column: span 4;
|
||
}
|
||
|
||
.calendar-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.calendar-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
gap: 2px;
|
||
}
|
||
|
||
.calendar-day-header {
|
||
text-align: center;
|
||
font-size: 0.75rem;
|
||
color: #6b7280;
|
||
padding: 4px;
|
||
}
|
||
|
||
.calendar-day {
|
||
aspect-ratio: 1;
|
||
background: var(--imperial-medium);
|
||
border: 1px solid var(--imperial-light);
|
||
padding: 4px;
|
||
font-size: 0.75rem;
|
||
min-height: 60px;
|
||
}
|
||
|
||
.calendar-day.today {
|
||
border-color: var(--imperial-red);
|
||
}
|
||
|
||
.calendar-day.today .day-num {
|
||
background: var(--imperial-red);
|
||
border-radius: 50%;
|
||
width: 20px;
|
||
height: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.calendar-day.other-month {
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.calendar-event {
|
||
font-size: 0.625rem;
|
||
background: rgba(204, 0, 0, 0.3);
|
||
color: var(--imperial-red-light);
|
||
padding: 2px 4px;
|
||
border-radius: 2px;
|
||
margin-top: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Middle Column */
|
||
.middle-col {
|
||
grid-column: span 4;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.thermostat-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.thermostat {
|
||
text-align: center;
|
||
}
|
||
|
||
.temp-current-label {
|
||
font-size: 0.75rem;
|
||
color: #9ca3af;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.temp-current {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 3rem;
|
||
color: #f97316;
|
||
}
|
||
|
||
.temp-unit {
|
||
font-size: 1.5rem;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.temp-action {
|
||
font-size: 0.875rem;
|
||
color: #f97316;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.temp-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.temp-btn {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: var(--imperial-medium);
|
||
border: 1px solid var(--imperial-light);
|
||
border-radius: 4px;
|
||
color: white;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.temp-target {
|
||
text-align: center;
|
||
}
|
||
|
||
.temp-target-label {
|
||
font-size: 0.625rem;
|
||
color: #9ca3af;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.temp-target-value {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
/* Alarmo */
|
||
.alarm-status {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 24px;
|
||
}
|
||
|
||
.alarm-circle {
|
||
width: 96px;
|
||
height: 96px;
|
||
border-radius: 50%;
|
||
background: var(--status-disarmed);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 0 20px rgba(0, 204, 0, 0.3);
|
||
}
|
||
|
||
.alarm-state {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 1.25rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.alarm-buttons {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
width: 100%;
|
||
}
|
||
|
||
.alarm-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 16px;
|
||
background: var(--imperial-medium);
|
||
border: 1px solid var(--imperial-light);
|
||
border-radius: 4px;
|
||
color: white;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.alarm-btn:hover {
|
||
border-color: var(--imperial-red);
|
||
}
|
||
|
||
.alarm-btn-label {
|
||
font-size: 0.75rem;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* Right Column */
|
||
.right-col {
|
||
grid-column: span 4;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* Lights */
|
||
.lights-widget {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
.room-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.room-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.room-name {
|
||
font-size: 0.75rem;
|
||
color: #9ca3af;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.room-controls {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.room-btn {
|
||
font-size: 0.625rem;
|
||
padding: 4px 8px;
|
||
background: var(--imperial-medium);
|
||
border-radius: 4px;
|
||
color: #9ca3af;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.light-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: var(--imperial-medium);
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.light-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.light-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.light-dot.on {
|
||
background: #facc15;
|
||
box-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
|
||
}
|
||
|
||
.light-dot.off {
|
||
background: #4b5563;
|
||
}
|
||
|
||
.toggle {
|
||
width: 48px;
|
||
height: 24px;
|
||
background: var(--imperial-light);
|
||
border-radius: 12px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toggle.on {
|
||
background: var(--imperial-red);
|
||
}
|
||
|
||
.toggle-thumb {
|
||
width: 20px;
|
||
height: 20px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.toggle.on .toggle-thumb {
|
||
transform: translateX(24px);
|
||
}
|
||
|
||
/* Locks */
|
||
.lock-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px;
|
||
background: var(--imperial-medium);
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.lock-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.lock-icon {
|
||
color: var(--status-disarmed);
|
||
}
|
||
|
||
.lock-status {
|
||
font-size: 0.875rem;
|
||
color: var(--status-disarmed);
|
||
}
|
||
|
||
.lock-btn {
|
||
padding: 8px 16px;
|
||
background: var(--status-armed);
|
||
border: none;
|
||
border-radius: 4px;
|
||
color: white;
|
||
font-family: 'Orbitron', sans-serif;
|
||
text-transform: uppercase;
|
||
font-size: 0.75rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* Todo */
|
||
.todo-input {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.todo-input input {
|
||
flex: 1;
|
||
background: var(--imperial-medium);
|
||
border: 1px solid var(--imperial-light);
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
color: white;
|
||
}
|
||
|
||
.todo-input input:focus {
|
||
outline: none;
|
||
border-color: var(--imperial-red);
|
||
}
|
||
|
||
.todo-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px;
|
||
background: var(--imperial-medium);
|
||
border-radius: 4px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.todo-checkbox {
|
||
width: 20px;
|
||
height: 20px;
|
||
border: 2px solid var(--imperial-light);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.todo-checkbox.checked {
|
||
background: var(--status-disarmed);
|
||
border-color: var(--status-disarmed);
|
||
}
|
||
|
||
/* SVG Icons */
|
||
svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
stroke: currentColor;
|
||
stroke-width: 2;
|
||
fill: none;
|
||
}
|
||
|
||
.icon-sm svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
/* Package Alert */
|
||
.package-alert {
|
||
background: rgba(255, 136, 0, 0.2);
|
||
border: 1px solid var(--status-pending);
|
||
border-radius: 4px;
|
||
padding: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
|
||
.package-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: var(--status-pending);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.package-icon svg {
|
||
color: var(--imperial-black);
|
||
}
|
||
|
||
.package-text {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-size: 0.875rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--status-pending);
|
||
}
|
||
|
||
.package-desc {
|
||
font-size: 0.75rem;
|
||
color: #9ca3af;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header class="header">
|
||
<div class="header-left">
|
||
<div class="logo">
|
||
<svg viewBox="0 0 24 24" style="width: 24px; height: 24px; fill: white; stroke: none;">
|
||
<circle cx="12" cy="12" r="4"/>
|
||
</svg>
|
||
</div>
|
||
<h1 class="header-title">Imperial Command Center</h1>
|
||
</div>
|
||
|
||
<div class="header-center">
|
||
<div class="time" id="time">14:32</div>
|
||
<div class="date" id="date">Tuesday, February 4, 2025</div>
|
||
</div>
|
||
|
||
<div class="header-right">
|
||
<div style="display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: #9ca3af;">
|
||
<div class="status-dot"></div>
|
||
Connected
|
||
</div>
|
||
<button class="btn">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||
</svg>
|
||
Cameras
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Dashboard -->
|
||
<main class="main">
|
||
<!-- Left Column - Calendar -->
|
||
<div class="calendar-col">
|
||
<div class="widget" style="height: 100%;">
|
||
<div class="widget-title">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||
</svg>
|
||
Calendar
|
||
<div style="margin-left: auto; display: flex; align-items: center; gap: 8px;">
|
||
<button style="background: none; border: none; color: white; cursor: pointer;">◀</button>
|
||
<span style="font-size: 0.875rem;">February 2025</span>
|
||
<button style="background: none; border: none; color: white; cursor: pointer;">▶</button>
|
||
</div>
|
||
</div>
|
||
<div class="widget-content">
|
||
<div class="calendar-grid">
|
||
<div class="calendar-day-header">Sun</div>
|
||
<div class="calendar-day-header">Mon</div>
|
||
<div class="calendar-day-header">Tue</div>
|
||
<div class="calendar-day-header">Wed</div>
|
||
<div class="calendar-day-header">Thu</div>
|
||
<div class="calendar-day-header">Fri</div>
|
||
<div class="calendar-day-header">Sat</div>
|
||
|
||
<div class="calendar-day other-month"><div class="day-num">26</div></div>
|
||
<div class="calendar-day other-month"><div class="day-num">27</div></div>
|
||
<div class="calendar-day other-month"><div class="day-num">28</div></div>
|
||
<div class="calendar-day other-month"><div class="day-num">29</div></div>
|
||
<div class="calendar-day other-month"><div class="day-num">30</div></div>
|
||
<div class="calendar-day other-month"><div class="day-num">31</div></div>
|
||
<div class="calendar-day"><div class="day-num">1</div></div>
|
||
|
||
<div class="calendar-day"><div class="day-num">2</div></div>
|
||
<div class="calendar-day"><div class="day-num">3</div><div class="calendar-event">Team Meeting</div></div>
|
||
<div class="calendar-day today"><div class="day-num">4</div><div class="calendar-event">Doctor Appt</div></div>
|
||
<div class="calendar-day"><div class="day-num">5</div></div>
|
||
<div class="calendar-day"><div class="day-num">6</div></div>
|
||
<div class="calendar-day"><div class="day-num">7</div><div class="calendar-event">Dinner</div></div>
|
||
<div class="calendar-day"><div class="day-num">8</div></div>
|
||
|
||
<div class="calendar-day"><div class="day-num">9</div></div>
|
||
<div class="calendar-day"><div class="day-num">10</div></div>
|
||
<div class="calendar-day"><div class="day-num">11</div></div>
|
||
<div class="calendar-day"><div class="day-num">12</div><div class="calendar-event">Birthday</div></div>
|
||
<div class="calendar-day"><div class="day-num">13</div></div>
|
||
<div class="calendar-day"><div class="day-num">14</div><div class="calendar-event">Valentine's</div></div>
|
||
<div class="calendar-day"><div class="day-num">15</div></div>
|
||
|
||
<div class="calendar-day"><div class="day-num">16</div></div>
|
||
<div class="calendar-day"><div class="day-num">17</div></div>
|
||
<div class="calendar-day"><div class="day-num">18</div></div>
|
||
<div class="calendar-day"><div class="day-num">19</div></div>
|
||
<div class="calendar-day"><div class="day-num">20</div></div>
|
||
<div class="calendar-day"><div class="day-num">21</div></div>
|
||
<div class="calendar-day"><div class="day-num">22</div></div>
|
||
|
||
<div class="calendar-day"><div class="day-num">23</div></div>
|
||
<div class="calendar-day"><div class="day-num">24</div></div>
|
||
<div class="calendar-day"><div class="day-num">25</div></div>
|
||
<div class="calendar-day"><div class="day-num">26</div></div>
|
||
<div class="calendar-day"><div class="day-num">27</div></div>
|
||
<div class="calendar-day"><div class="day-num">28</div></div>
|
||
<div class="calendar-day other-month"><div class="day-num">1</div></div>
|
||
</div>
|
||
|
||
<!-- Selected Day Details -->
|
||
<div style="margin-top: 16px; padding: 16px; background: var(--imperial-medium); border-radius: 4px;">
|
||
<h4 style="font-family: 'Orbitron', sans-serif; font-size: 0.875rem; color: var(--imperial-red); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px;">Tuesday, February 4</h4>
|
||
<div style="font-size: 0.875rem;">
|
||
<div style="display: flex; gap: 8px; margin-bottom: 8px;">
|
||
<span style="color: var(--imperial-red);">10:00 AM</span>
|
||
<span>Doctor Appointment</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Middle Column -->
|
||
<div class="middle-col">
|
||
<!-- Thermostats -->
|
||
<div class="thermostat-row">
|
||
<div class="widget">
|
||
<div class="widget-title">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||
</svg>
|
||
Upstairs
|
||
</div>
|
||
<div class="thermostat">
|
||
<div class="temp-current-label">Current</div>
|
||
<div class="temp-current">72<span class="temp-unit">°F</span></div>
|
||
<div class="temp-action">Heating</div>
|
||
<div class="temp-controls">
|
||
<button class="temp-btn">−</button>
|
||
<div class="temp-target">
|
||
<div class="temp-target-label">Target</div>
|
||
<div class="temp-target-value">70°</div>
|
||
</div>
|
||
<button class="temp-btn">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="widget">
|
||
<div class="widget-title">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||
</svg>
|
||
Downstairs
|
||
</div>
|
||
<div class="thermostat">
|
||
<div class="temp-current-label">Current</div>
|
||
<div class="temp-current" style="color: #9ca3af;">68<span class="temp-unit">°F</span></div>
|
||
<div class="temp-action" style="color: #9ca3af;">Idle</div>
|
||
<div class="temp-controls">
|
||
<button class="temp-btn">−</button>
|
||
<div class="temp-target">
|
||
<div class="temp-target-label">Target</div>
|
||
<div class="temp-target-value">68°</div>
|
||
</div>
|
||
<button class="temp-btn">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alarmo -->
|
||
<div class="widget">
|
||
<div class="widget-title">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||
</svg>
|
||
Alarmo
|
||
</div>
|
||
<div class="alarm-status">
|
||
<div class="alarm-circle">
|
||
<svg viewBox="0 0 24 24" style="width: 48px; height: 48px; color: var(--imperial-black);">
|
||
<path d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="alarm-state">Disarmed</div>
|
||
<div class="alarm-buttons">
|
||
<button class="alarm-btn">
|
||
<svg viewBox="0 0 24 24" style="width: 32px; height: 32px;">
|
||
<path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||
</svg>
|
||
<span class="alarm-btn-label">Home</span>
|
||
</button>
|
||
<button class="alarm-btn">
|
||
<svg viewBox="0 0 24 24" style="width: 32px; height: 32px;">
|
||
<path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
|
||
</svg>
|
||
<span class="alarm-btn-label">Away</span>
|
||
</button>
|
||
<button class="alarm-btn">
|
||
<svg viewBox="0 0 24 24" style="width: 32px; height: 32px;">
|
||
<path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
|
||
</svg>
|
||
<span class="alarm-btn-label">Night</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Package Alert -->
|
||
<div class="package-alert">
|
||
<div class="package-icon">
|
||
<svg viewBox="0 0 24 24" style="width: 24px; height: 24px;">
|
||
<path d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="package-text">Package Detected</div>
|
||
<div class="package-desc">A package has been detected at your door</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column -->
|
||
<div class="right-col">
|
||
<!-- Lights -->
|
||
<div class="widget lights-widget">
|
||
<div class="widget-title" style="justify-content: space-between;">
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||
</svg>
|
||
Lights
|
||
</div>
|
||
<button class="btn-primary" style="font-size: 0.625rem; padding: 4px 12px;">All Off</button>
|
||
</div>
|
||
<div class="widget-content">
|
||
<!-- Living Room -->
|
||
<div class="room-section">
|
||
<div class="room-header">
|
||
<span class="room-name">Living Room</span>
|
||
<div class="room-controls">
|
||
<button class="room-btn">All On</button>
|
||
<button class="room-btn">All Off</button>
|
||
</div>
|
||
</div>
|
||
<div class="light-row">
|
||
<div class="light-info">
|
||
<div class="light-dot on"></div>
|
||
<span>Main Light</span>
|
||
</div>
|
||
<div class="toggle on"><div class="toggle-thumb"></div></div>
|
||
</div>
|
||
<div class="light-row">
|
||
<div class="light-info">
|
||
<div class="light-dot off"></div>
|
||
<span style="color: #9ca3af;">Lamp</span>
|
||
</div>
|
||
<div class="toggle"><div class="toggle-thumb"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Kitchen -->
|
||
<div class="room-section">
|
||
<div class="room-header">
|
||
<span class="room-name">Kitchen</span>
|
||
<div class="room-controls">
|
||
<button class="room-btn">All On</button>
|
||
<button class="room-btn">All Off</button>
|
||
</div>
|
||
</div>
|
||
<div class="light-row">
|
||
<div class="light-info">
|
||
<div class="light-dot on"></div>
|
||
<span>Main Light</span>
|
||
</div>
|
||
<div class="toggle on"><div class="toggle-thumb"></div></div>
|
||
</div>
|
||
<div class="light-row">
|
||
<div class="light-info">
|
||
<div class="light-dot on"></div>
|
||
<span>Under Cabinet</span>
|
||
</div>
|
||
<div class="toggle on"><div class="toggle-thumb"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Locks -->
|
||
<div class="widget">
|
||
<div class="widget-title" style="justify-content: space-between;">
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||
</svg>
|
||
Door Locks
|
||
</div>
|
||
<button style="font-size: 0.625rem; padding: 4px 12px; background: var(--status-disarmed); border: none; border-radius: 4px; color: var(--imperial-black); cursor: pointer;">Lock All</button>
|
||
</div>
|
||
<div class="widget-content">
|
||
<div class="lock-row">
|
||
<div class="lock-info">
|
||
<svg class="lock-icon" viewBox="0 0 24 24" style="width: 24px; height: 24px;">
|
||
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||
</svg>
|
||
<div>
|
||
<div>Front Door</div>
|
||
<div class="lock-status">Locked</div>
|
||
</div>
|
||
</div>
|
||
<button class="lock-btn">Unlock</button>
|
||
</div>
|
||
<div class="lock-row">
|
||
<div class="lock-info">
|
||
<svg class="lock-icon" viewBox="0 0 24 24" style="width: 24px; height: 24px;">
|
||
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||
</svg>
|
||
<div>
|
||
<div>Back Door</div>
|
||
<div class="lock-status">Locked</div>
|
||
</div>
|
||
</div>
|
||
<button class="lock-btn">Unlock</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Todo -->
|
||
<div class="widget">
|
||
<div class="widget-title">
|
||
<svg viewBox="0 0 24 24" style="width: 20px; height: 20px;">
|
||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||
</svg>
|
||
To-Do List
|
||
<span style="margin-left: auto; background: var(--imperial-red); padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem;">3</span>
|
||
</div>
|
||
<div class="widget-content">
|
||
<div class="todo-input">
|
||
<input type="text" placeholder="Add new item...">
|
||
<button class="btn-primary" style="padding: 8px 12px;">+</button>
|
||
</div>
|
||
<div class="todo-item">
|
||
<div class="todo-checkbox"></div>
|
||
<span>Buy groceries</span>
|
||
</div>
|
||
<div class="todo-item">
|
||
<div class="todo-checkbox"></div>
|
||
<span>Schedule HVAC maintenance</span>
|
||
</div>
|
||
<div class="todo-item">
|
||
<div class="todo-checkbox"></div>
|
||
<span>Update firewall rules</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
// Update time
|
||
function updateTime() {
|
||
const now = new Date();
|
||
document.getElementById('time').textContent = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
|
||
document.getElementById('date').textContent = now.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
||
}
|
||
updateTime();
|
||
setInterval(updateTime, 1000);
|
||
</script>
|
||
</body>
|
||
</html>
|