williamGao/iot-dboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Push

Browse Source
This commit is contained in:
喆OvO
2026-08-06 11:11:11 +08:00
commit 0fef309972
551 changed files with 15793 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/templates/display.html
+248
View File
@@ -0,0 +1,248 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Cal Display</title>
<link rel="stylesheet" href="/static/css/display.css">
</head>
<body>
<div id="app">
<!-- Left sidebar: small cards -->
<div id="sidebar">
<div class="card card-time" data-card="time" id="card-time">
<div class="card-left">
<div class="card-icon"><svg class="card-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg></div>
<div class="card-label">时间</div>
</div>
<div class="card-value" id="time-value">--:--</div>
</div>
<div class="card card-weather" data-card="weather" id="card-weather">
<div class="card-left">
<img class="card-icon card-weather-icon" id="weather-card-icon" src="" alt="" style="display:none;">
<div class="card-label">天气</div>
</div>
<div class="card-value" id="weather-temp">--°</div>
</div>
<div class="card card-calendar" data-card="calendar" id="card-calendar">
<div class="card-left">
<div class="card-icon"><svg class="card-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></div>
<div class="card-label">日历</div>
</div>
<div class="card-value" id="calendar-next">无日程</div>
</div>
<div class="card card-alarm" data-card="alarm" id="card-alarm">
<div class="card-left">
<div class="card-icon"><svg class="card-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div>
<div class="card-label">闹钟</div>
</div>
<div class="card-value" id="alarm-next">无闹钟</div>
</div>
<div class="card card-countdown" data-card="countdown" id="card-countdown">
<div class="card-left">
<div class="card-icon"><svg class="card-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="14" r="8"/><path d="M9.5 2h5"/><path d="M12 2v4"/><path d="M12 14l3.5-2.5"/></svg></div>
<div class="card-label">倒计时</div>
</div>
<div class="card-value" id="countdown-next">无</div>
</div>
<div class="card card-pomodoro" data-card="pomodoro" id="card-pomodoro">
<div class="pomo-sidebar-row">
<div class="pomo-sidebar-btns" id="pomo-sidebar-btns">
<button id="pomo-card-start" class="pomo-mini-btn pomo-mini-primary">开始</button>
<button id="pomo-card-pause" class="pomo-mini-btn pomo-mini-secondary" style="display:none;">暂停</button>
<button id="pomo-card-skip" class="pomo-mini-btn pomo-mini-secondary" style="display:none;">跳过</button>
<button id="pomo-card-stop" class="pomo-mini-btn pomo-mini-danger" style="display:none;">停止</button>
</div>
<div class="pomo-sidebar-info">
<div class="card-left">
<div class="card-icon"><svg class="card-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="15.5" r="6.5"/><path d="M12 9v-2.5"/><path d="M12 6.5c-2.2-.3-3.4-1.4-3.7-3 1.4.2 2.5 1 3.7 3z"/><path d="M12 6.5c2.2-.3 3.4-1.4 3.7-3-1.4.2-2.5 1-3.7 3z"/></svg></div>
<div class="card-label">番茄钟</div>
</div>
<div class="card-value" id="pomodoro-value">--:--</div>
</div>
</div>
</div>
</div>
<!-- Right panel: expanded content -->
<div id="panel">
<div class="panel-header-btns">
<button id="refresh-btn" class="lock-btn" title="刷新">&#8635;</button>
<button id="fullscreen-btn" class="lock-btn" title="全屏">&#9974;</button>
<button id="lock-btn" class="lock-btn" title="锁定">&#128274;</button>
</div>
<div id="panel-time" class="panel-content">
<h2>时间</h2>
<div id="detailed-time" class="big-clock">--:--:--</div>
<div class="date-str" id="date-str"></div>
</div>
<div id="panel-weather" class="panel-content">
<h2>天气</h2>
<div class="weather-main">
<span class="weather-temp-big" id="weather-temp-big">--°</span>
<span class="weather-desc" id="weather-desc"></span>
<img class="weather-icon" id="weather-icon" src="" alt="" style="display:none;">
</div>
<div class="weather-details" id="weather-details"></div>
<div class="hourly-section">
<div class="hourly-title">逐小时预报</div>
<div class="hourly-list" id="hourly-list"></div>
</div>
<!-- Minutely Precipitation -->
<div class="hourly-section" id="minutely-section" style="display:none;">
<div class="section-title-row">
<span class="hourly-title">分钟级降水</span>
<button class="mini-refresh-btn" id="minutely-refresh-btn">刷新</button>
</div>
<div id="minutely-content"></div>
</div>
<!-- Weather Warnings -->
<div class="hourly-section" id="warning-section" style="display:none;">
<div class="section-title-row">
<span class="hourly-title">天气预警</span>
<button class="mini-refresh-btn" id="warning-refresh-btn">刷新</button>
</div>
<div id="warning-content"></div>
</div>
</div>
<div id="panel-calendar" class="panel-content">
<h2>日程</h2>
<div class="event-list" id="event-list"></div>
</div>
<div id="panel-alarm" class="panel-content">
<h2>闹钟</h2>
<div class="alarm-list" id="alarm-list"></div>
<button id="alarm-add-btn" class="panel-add-btn">+ 添加闹钟</button>
</div>
<div id="panel-countdown" class="panel-content">
<h2>倒计时</h2>
<div class="countdown-list" id="countdown-list"></div>
<button id="countdown-add-btn" class="panel-add-btn">+ 添加倒计时</button>
</div>
<div id="panel-pomodoro" class="panel-content">
<div class="pomo-bg-wrap">
<div class="pomo-bg-img"></div>
<div class="pomo-content">
<h2>番茄钟</h2>
<div id="pomodoro-display">
<div class="pomo-glass">
<div id="pomodoro-phase" class="pomo-phase-text">工作中</div>
<div id="pomodoro-timer" class="big-clock">--:--</div>
<div id="pomodoro-cycles">已完成 0 组</div>
<div id="pomodoro-next-break" class="pomo-next-break">下次: 短休息</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Alarm triggered overlay (hidden by default) -->
<div id="alarm-overlay" class="alarm-overlay hidden">
<div class="alarm-overlay-box">
<div class="alarm-overlay-icon">&#128276;</div>
<div class="alarm-overlay-title">闹钟</div>
<div class="alarm-overlay-info" id="alarm-overlay-info"></div>
<button id="alarm-dismiss" class="alarm-dismiss-btn">关闭闹钟</button>
</div>
</div>
<!-- Pomodoro triggered overlay (hidden by default) -->
<div id="pomodoro-overlay" class="alarm-overlay hidden">
<div class="alarm-overlay-box">
<div class="alarm-overlay-icon">&#127813;</div>
<div class="alarm-overlay-title" id="pomodoro-overlay-title">番茄钟</div>
<div class="alarm-overlay-info" id="pomodoro-overlay-info"></div>
<button id="pomodoro-dismiss" class="alarm-dismiss-btn">关闭铃声</button>
</div>
</div>
<!-- Custom notification overlay (hidden by default) -->
<div id="custom-notify-overlay" class="alarm-overlay hidden">
<div class="alarm-overlay-box">
<div class="alarm-overlay-icon" id="custom-notify-icon">&#128276;</div>
<div class="alarm-overlay-title" id="custom-notify-title">提醒</div>
<div class="alarm-overlay-info" id="custom-notify-info"></div>
<button id="custom-notify-dismiss" class="alarm-dismiss-btn">知道了</button>
</div>
</div>
<!-- Alarm add/edit modal -->
<div id="alarm-modal" class="modal-overlay hidden">
<div class="modal-box">
<div class="modal-title" id="alarm-modal-title">添加闹钟</div>
<div class="modal-body">
<!-- Name (read-only when editing, auto-generated when adding) -->
<div class="modal-field">
<div class="modal-label">名称</div>
<div class="alarm-modal-name" id="alarm-modal-name">闹钟 1</div>
</div>
<!-- Mouse-only time picker: hours + minutes -->
<div class="modal-field">
<div class="modal-label">时间</div>
<div class="time-picker">
<div class="tp-col">
<button class="tp-btn tp-up" data-target="hours">&#9650;</button>
<div class="tp-value" id="tp-hours">08</div>
<button class="tp-btn tp-down" data-target="hours">&#9660;</button>
</div>
<div class="tp-sep">:</div>
<div class="tp-col">
<button class="tp-btn tp-up" data-target="minutes">&#9650;</button>
<div class="tp-value" id="tp-minutes">00</div>
<button class="tp-btn tp-down" data-target="minutes">&#9660;</button>
</div>
<div class="tp-sep">:</div>
<div class="tp-col">
<button class="tp-btn tp-up" data-target="seconds">&#9650;</button>
<div class="tp-value" id="tp-seconds">00</div>
<button class="tp-btn tp-down" data-target="seconds">&#9660;</button>
</div>
</div>
</div>
<!-- Once-only toggle (alarm mode only) -->
<div class="modal-field" id="alarm-once-field">
<label class="toggle-label">
<input type="checkbox" id="alarm-modal-once">
<span class="toggle-slider"></span>
<span>仅一次</span>
</label>
</div>
<!-- Day-of-week picker (hidden when once is on) -->
<div class="modal-field" id="alarm-days-field">
<div class="modal-label">重复</div>
<div class="day-picker" id="alarm-modal-days">
<button class="day-btn active" data-day="1">一</button>
<button class="day-btn active" data-day="2">二</button>
<button class="day-btn active" data-day="3">三</button>
<button class="day-btn active" data-day="4">四</button>
<button class="day-btn active" data-day="5">五</button>
<button class="day-btn active" data-day="6">六</button>
<button class="day-btn active" data-day="7">日</button>
</div>
</div>
<!-- Enabled toggle -->
<div class="modal-field">
<label class="toggle-label">
<input type="checkbox" id="alarm-modal-enabled" checked>
<span class="toggle-slider"></span>
<span>启用</span>
</label>
</div>
</div>
<div class="modal-actions">
<button id="alarm-modal-save" class="pomo-btn pomo-btn-primary">保存</button>
<button id="alarm-modal-cancel" class="pomo-btn pomo-btn-secondary">取消</button>
</div>
</div>
</div>
<!-- Hidden audio for custom ringtone -->
<audio id="alarm-audio" loop preload="auto" style="display:none"></audio>
</div>
<script src="/static/js/theme.js"></script>
<script src="/static/js/display.js"></script>
</body>
</html>