Imdroid/weather-station
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 大屏幕的页面

Browse Source
This commit is contained in:
yarnom 2025-11-03 17:14:36 +08:00
parent 573ef9ef3e
commit dd3912545d
1 changed files with 61 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
templates/bigscreen.html
View File

@ -191,6 +191,8 @@
color: #bd6718; color: #bd6718;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: 600; font-weight: 600;
padding: 0.1rem 0.35rem;
border-radius: var(--radius-1);
} }
/* 预警时：pastAccuracySummary 字体稍微变大，颜色保持 #bcd0ff */ /* 预警时：pastAccuracySummary 字体稍微变大，颜色保持 #bcd0ff */
.summary-panel.alert-on .summary-sub { .summary-panel.alert-on .summary-sub {
@ -209,6 +211,8 @@
color: #b81f1f; color: #b81f1f;
font-size: 1.7rem; font-size: 1.7rem;
font-weight: 600; font-weight: 600;
padding: 0.1rem 0.35rem;
border-radius: var(--radius-1);
} }
.summary-panel.alert-red .summary-sub { .summary-panel.alert-red .summary-sub {
color: #bcd0ff; color: #bcd0ff;
@ -220,17 +224,74 @@
box-shadow: box-shadow:
inset 0 0 20rem var(--orange-shadow-3), inset 0 0 20rem var(--orange-shadow-3),
inset 0 0 20rem var(--orange-shadow-1); inset 0 0 20rem var(--orange-shadow-1);
animation: screenGlowOrange 1.8s ease-in-out infinite;
}
@keyframes screenGlowOrange {
0%, 100% { box-shadow:
inset 0 0 20rem var(--orange-shadow-3),
inset 0 0 20rem var(--orange-shadow-1);
}
50% { box-shadow: none; }
} }
.screen.alert-red { .screen.alert-red {
box-shadow: box-shadow:
inset 0 0 20rem rgba(255, 107, 107, 0.25), inset 0 0 20rem rgba(255, 107, 107, 0.25),
inset 0 0 20rem rgba(255, 107, 107, 0.35); inset 0 0 20rem rgba(255, 107, 107, 0.35);
animation: screenGlowRed 1.8s ease-in-out infinite;
}
@keyframes screenGlowRed {
0%, 100% { box-shadow:
inset 0 0 20rem rgba(255, 107, 107, 0.25),
inset 0 0 20rem rgba(255, 107, 107, 0.35);
}
50% { box-shadow: none; }
} }
/* 减少动画偏好时关闭动画（目前无动画，但作为扩展） */ /* 减少动画偏好时关闭动画（目前无动画，但作为扩展） */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
* { animation: none !important; } * { animation: none !important; }
} }
/* Panel 与文字整体闪烁：橙色 */
.summary-panel.alert-on { animation: panelGlowOrange 1.8s ease-in-out infinite; }
.summary-panel.alert-on .summary-title,
.summary-panel.alert-on .summary-sub { animation: textPulseOrange 1.8s ease-in-out infinite; }
@keyframes panelGlowOrange {
0%, 100% {
background: linear-gradient(180deg, var(--orange-bg-1), var(--orange-bg-2));
border-color: var(--orange-border);
box-shadow: 0 0.375rem 1.125rem var(--orange-shadow-1), 0 0 0 1px var(--orange-shadow-2) inset, 0 0 1.5rem var(--orange-shadow-3) inset;
}
50% {
background: var(--color-bg);
border-color: var(--panel-border);
box-shadow: none;
}
}
@keyframes textPulseOrange {
0%, 100% { /* 使用各自定义色 */ }
50% { color: var(--color-fg); }
}
/* Panel 与文字整体闪烁：红色 */
.summary-panel.alert-red { animation: panelGlowRed 1.8s ease-in-out infinite; }
.summary-panel.alert-red .summary-title,
.summary-panel.alert-red .summary-sub { animation: textPulseRed 1.8s ease-in-out infinite; }
@keyframes panelGlowRed {
0%, 100% {
background: linear-gradient(180deg, rgba(255, 107, 107, 0.22), rgba(255, 107, 107, 0.12));
border-color: rgba(200, 40, 40, 0.6);
box-shadow: 0 0.375rem 1.125rem rgba(255, 107, 107, 0.35), 0 0 0 1px rgba(255,107,107,0.10) inset, 0 0 1.5rem rgba(255, 107, 107, 0.25) inset;
}
50% {
background: var(--color-bg);
border-color: var(--panel-border);
box-shadow: none;
}
}
@keyframes textPulseRed {
0%, 100% { /* 使用各自定义色 */ }
50% { color: var(--color-fg); }
}
</style> </style>
</head> </head>
<body> <body>