diff --git a/dashboard/css/briefing.css b/dashboard/css/briefing.css new file mode 100644 index 0000000..43d71db --- /dev/null +++ b/dashboard/css/briefing.css @@ -0,0 +1,299 @@ +/* Morning Briefing Card Styles */ + +#briefing-card { + position: fixed; + top: 60px; + left: 50%; + transform: translateX(-50%); + width: 90%; + max-width: 600px; + background: rgba(26, 26, 46, 0.95); + border-radius: 12px; + padding: 24px; + z-index: 200; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(255, 255, 255, 0.1); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +#briefing-card.visible { + opacity: 1; + pointer-events: auto; +} + +#briefing-card .briefing-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +#briefing-card .briefing-title { + font-size: 20px; + font-weight: 600; + color: #4fc3f7; +} + +#briefing-card .briefing-date { + font-size: 13px; + color: #888; +} + +#briefing-card .briefing-close { + background: none; + border: none; + color: #888; + font-size: 20px; + cursor: pointer; + padding: 4px 8px; + transition: color 0.2s; +} + +#briefing-card .briefing-close:hover { + color: #fff; +} + +#briefing-card .briefing-content { + font-size: 15px; + line-height: 1.6; + color: #ddd; + white-space: pre-line; +} + +#briefing-card .briefing-section { + margin-bottom: 16px; + padding: 12px; + border-radius: 8px; + background: rgba(255, 255, 255, 0.03); +} + +#briefing-card .briefing-section.alert { + background: rgba(239, 83, 80, 0.1); + border-left: 3px solid #ef5350; +} + +#briefing-card .briefing-section.sleep { + background: rgba(102, 187, 106, 0.1); + border-left: 3px solid #66bb6a; +} + +#briefing-card .briefing-section.people { + background: rgba(33, 150, 243, 0.1); + border-left: 3px solid #2196f3; +} + +#briefing-card .briefing-section.anomaly { + background: rgba(255, 193, 7, 0.1); + border-left: 3px solid #ffc107; +} + +#briefing-card .briefing-section.health { + background: rgba(158, 158, 158, 0.1); + border-left: 3px solid #9e9e9e; +} + +#briefing-card .briefing-section.prediction { + background: rgba(156, 39, 176, 0.1); + border-left: 3px solid #9c27b0; +} + +#briefing-card .briefing-section.learning { + background: rgba(255, 112, 67, 0.1); + border-left: 3px solid #ff6f43; +} + +#briefing-card .briefing-actions { + display: flex; + gap: 12px; + margin-top: 16px; +} + +#briefing-card .briefing-btn { + flex: 1; + padding: 10px 16px; + border: none; + border-radius: 6px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; +} + +#briefing-card .briefing-btn.primary { + background: #4fc3f7; + color: #1a1a2e; +} + +#briefing-card .briefing-btn.primary:hover { + background: #29b6f6; +} + +#briefing-card .briefing-btn.secondary { + background: rgba(255, 255, 255, 0.1); + color: #ddd; +} + +#briefing-card .briefing-btn.secondary:hover { + background: rgba(255, 255, 255, 0.15); +} + +#briefing-card .briefing-loading { + text-align: center; + padding: 20px; + color: #888; +} + +#briefing-card .briefing-spinner { + display: inline-block; + width: 24px; + height: 24px; + border: 3px solid rgba(255, 255, 255, 0.1); + border-top-color: #4fc3f7; + border-radius: 50%; + animation: briefing-spin 1s linear infinite; +} + +@keyframes briefing-spin { + to { transform: rotate(360deg); } +} + +/* Simple mode briefing card */ +.simple-mode #briefing-card { + top: auto; + bottom: 20px; + transform: translateX(-50%); +} + +.simple-mode #briefing-card.visible { + opacity: 1; +} + +/* Ambient mode briefing */ +.ambient-mode #briefing-card { + background: rgba(0, 0, 0, 0.8); + backdrop-filter: blur(10px); + max-width: 500px; +} + +.ambient-mode #briefing-card .briefing-content { + font-size: 16px; +} + +/* Briefing indicator in status bar */ +#briefing-indicator { + position: fixed; + top: 50%; + right: 20px; + transform: translateY(-50%); + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(79, 195, 247, 0.2); + border: 2px solid #4fc3f7; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: 150; + opacity: 0; + transition: opacity 0.3s; +} + +#briefing-indicator.visible { + opacity: 1; +} + +#briefing-indicator:hover { + background: rgba(79, 195, 247, 0.3); +} + +#briefing-indicator svg { + width: 20px; + height: 20px; + fill: #4fc3f7; +} + +/* Briefing settings panel */ +#briefing-settings { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(26, 26, 46, 0.98); + border-radius: 12px; + padding: 24px; + z-index: 300; + min-width: 400px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(255, 255, 255, 0.1); + display: none; +} + +#briefing-settings.visible { + display: block; +} + +#briefing-settings h3 { + font-size: 18px; + color: #4fc3f7; + margin-bottom: 20px; +} + +#briefing-settings .setting-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +#briefing-settings .setting-label { + font-size: 14px; + color: #ddd; +} + +#briefing-settings .setting-input { + padding: 8px 12px; + border-radius: 6px; + border: 1px solid rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.05); + color: #ddd; + font-size: 14px; +} + +#briefing-settings .setting-toggle { + position: relative; + width: 44px; + height: 24px; + background: rgba(255, 255, 255, 0.1); + border-radius: 12px; + cursor: pointer; + transition: background 0.2s; +} + +#briefing-settings .setting-toggle.active { + background: #4fc3f7; +} + +#briefing-settings .setting-toggle::after { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + background: #fff; + border-radius: 50%; + transition: transform 0.2s; +} + +#briefing-settings .setting-toggle.active::after { + transform: translateX(20px); +} + +#briefing-settings .settings-actions { + display: flex; + gap: 12px; + margin-top: 24px; +} diff --git a/dashboard/index.html b/dashboard/index.html index 7f9b50b..2de30f8 100644 --- a/dashboard/index.html +++ b/dashboard/index.html @@ -20,6 +20,7 @@ +