新增: 电子相册全屏模式+开机启动+Win10兼容
This commit is contained in:
564
web/overlay.html
564
web/overlay.html
@@ -10,28 +10,69 @@ html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
color: #fff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
:root {
|
||||
--card-bg: rgba(22, 19, 28, 0.56);
|
||||
--card-bg-strong: rgba(24, 20, 30, 0.68);
|
||||
--card-line: rgba(255,255,255,0.10);
|
||||
--card-line-soft: rgba(255,255,255,0.06);
|
||||
--text-main: rgba(255,255,255,0.92);
|
||||
--text-soft: rgba(255,255,255,0.66);
|
||||
--text-faint: rgba(255,255,255,0.42);
|
||||
--accent-warm: #ffd86b;
|
||||
--accent-cool: #6bdcff;
|
||||
--shadow-card: 0 18px 60px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
|
||||
--layout-x: 48px;
|
||||
--layout-top: 38px;
|
||||
--layout-bottom: 72px;
|
||||
--layout-gap: 18px;
|
||||
--layout-col-gap: 24px;
|
||||
--right-panel: 400px;
|
||||
--knowledge-panel: 460px;
|
||||
--time-panel-h: 154px;
|
||||
--zodiac-panel-h: 326px;
|
||||
--photo-panel-h: 360px;
|
||||
}
|
||||
|
||||
/* ===== 公共卡片样式 ===== */
|
||||
.card {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-radius: 20px;
|
||||
padding: 24px 28px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255,255,255,0.08);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)), var(--card-bg);
|
||||
backdrop-filter: blur(28px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(1.2);
|
||||
border: 1px solid var(--card-line);
|
||||
border-radius: 8px;
|
||||
padding: 22px 24px;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255,255,255,0.13), transparent 34%),
|
||||
radial-gradient(circle at 12% 0%, rgba(255,216,107,0.13), transparent 38%);
|
||||
opacity: 0.55;
|
||||
}
|
||||
.card > * {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 72px;
|
||||
font-size: 66px;
|
||||
font-weight: 200;
|
||||
text-shadow: 0 2px 20px rgba(0,0,0,0.5);
|
||||
letter-spacing: -2px;
|
||||
text-shadow: 0 3px 28px rgba(0,0,0,0.42);
|
||||
letter-spacing: 0;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
color: rgba(255,255,255,0.96);
|
||||
}
|
||||
@keyframes hourlyGlow {
|
||||
0% { text-shadow: 0 0 30px rgba(255,255,255,1), 0 0 80px rgba(180,200,255,0.8), 0 0 120px rgba(100,150,255,0.5); color: #fff; }
|
||||
@@ -48,147 +89,155 @@ html, body {
|
||||
animation: hourlyGlow 6s ease-out forwards;
|
||||
}
|
||||
.date {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-soft);
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.current-weather {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.95);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
|
||||
margin-bottom: 14px;
|
||||
margin-bottom: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
.forecast-title {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.45);
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 9px;
|
||||
text-align: right;
|
||||
}
|
||||
.weather-forecast {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 6px;
|
||||
justify-content: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, minmax(60px, 1fr));
|
||||
gap: 7px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.forecast-item {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255,255,255,0.055);
|
||||
border-radius: 8px;
|
||||
padding: 9px 8px;
|
||||
text-align: center;
|
||||
min-width: 58px;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.85);
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--card-line-soft);
|
||||
}
|
||||
.forecast-icon { font-size: 20px; margin: 4px 0; }
|
||||
.forecast-time { opacity: 0.6; font-size: 10px; }
|
||||
.forecast-temp { font-weight: 600; margin-top: 2px; font-size: 13px; }
|
||||
.forecast-pop { font-size: 10px; opacity: 0.6; margin-top: 1px; }
|
||||
.forecast-icon { font-size: 22px; margin: 5px 0; }
|
||||
.forecast-time { color: var(--text-faint); font-size: 10px; }
|
||||
.forecast-temp { font-weight: 700; margin-top: 2px; font-size: 14px; }
|
||||
.forecast-pop { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
|
||||
.daily-forecast {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 6px;
|
||||
justify-content: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(64px, 1fr));
|
||||
gap: 7px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.daily-item {
|
||||
background: rgba(255,255,255,0.04);
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
padding: 9px 8px;
|
||||
text-align: center;
|
||||
min-width: 54px;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.85);
|
||||
border: 1px solid rgba(255,255,255,0.03);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--card-line-soft);
|
||||
}
|
||||
.daily-icon { font-size: 20px; margin: 3px 0; }
|
||||
.daily-icon { font-size: 22px; margin: 5px 0; }
|
||||
|
||||
.zodiac-text {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
color: var(--text-main);
|
||||
line-height: 1.6;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
.zodiac-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 2px;
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.zodiac-date {
|
||||
font-size: 11px;
|
||||
opacity: 0.4;
|
||||
margin-bottom: 14px;
|
||||
color: var(--text-faint);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.zodiac-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
margin-bottom: 7px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.zodiac-bar-label {
|
||||
width: 28px;
|
||||
opacity: 0.55;
|
||||
color: var(--text-soft);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.zodiac-bar-track {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border-radius: 2px;
|
||||
height: 5px;
|
||||
background: rgba(255,255,255,0.10);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.zodiac-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
border-radius: 999px;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
.zodiac-bar-val {
|
||||
width: 30px;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
color: var(--text-soft);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.zodiac-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: 7px;
|
||||
flex-wrap: wrap;
|
||||
margin: 12px 0;
|
||||
margin: 10px 0 9px;
|
||||
}
|
||||
.zodiac-tag {
|
||||
font-size: 10px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
padding: 2px 8px;
|
||||
border-radius: 5px;
|
||||
opacity: 0.6;
|
||||
background: rgba(255,255,255,0.08);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-soft);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
.zodiac-summary {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
line-height: 1.7;
|
||||
color: var(--text-soft);
|
||||
line-height: 1.65;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===== AI 资讯 ===== */
|
||||
.ainews-header {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255,255,255,0.45);
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--text-faint);
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.ainews-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||
gap: 14px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--card-line-soft);
|
||||
min-height: 58px;
|
||||
}
|
||||
.ainews-item:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -196,12 +245,13 @@ html, body {
|
||||
border-bottom: none;
|
||||
}
|
||||
.ainews-img {
|
||||
width: 80px;
|
||||
height: 54px;
|
||||
width: 92px;
|
||||
height: 58px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.85;
|
||||
opacity: 0.92;
|
||||
box-shadow: 0 8px 22px rgba(0,0,0,0.22);
|
||||
}
|
||||
.ainews-body {
|
||||
flex: 1;
|
||||
@@ -210,11 +260,12 @@ html, body {
|
||||
.ainews-title-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
gap: 10px;
|
||||
}
|
||||
.ainews-title {
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
color: var(--text-main);
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -224,48 +275,70 @@ html, body {
|
||||
}
|
||||
.ainews-source {
|
||||
font-size: 10px;
|
||||
opacity: 0.4;
|
||||
color: var(--text-faint);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ainews-desc {
|
||||
font-size: 11px;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
color: var(--text-soft);
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
margin-top: 5px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1500px) {
|
||||
:root {
|
||||
--layout-x: 32px;
|
||||
--layout-col-gap: 18px;
|
||||
--right-panel: 360px;
|
||||
--knowledge-panel: 380px;
|
||||
--time-panel-h: 144px;
|
||||
--zodiac-panel-h: 312px;
|
||||
--photo-panel-h: 320px;
|
||||
}
|
||||
.time {
|
||||
font-size: 64px;
|
||||
}
|
||||
.weather-forecast {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.daily-forecast {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== 知识卡片 ===== */
|
||||
.knowledge-header {
|
||||
font-size: 11px;
|
||||
color: rgba(255,255,255,0.45);
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-faint);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.knowledge-keyword-tag {
|
||||
background: rgba(255,255,255,0.08);
|
||||
padding: 1px 8px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255,255,255,0.09);
|
||||
padding: 3px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
color: var(--text-soft);
|
||||
}
|
||||
.knowledge-content {
|
||||
font-size: 14px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
line-height: 1.7;
|
||||
font-size: 16px;
|
||||
color: var(--text-main);
|
||||
line-height: 1.55;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||||
margin: 16px 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
#author {
|
||||
@@ -273,8 +346,8 @@ html, body {
|
||||
bottom: 60px;
|
||||
right: 30px;
|
||||
font-size: 16px;
|
||||
color: rgba(255,255,255,0.5);
|
||||
letter-spacing: 1px;
|
||||
color: rgba(255,255,255,0.42);
|
||||
letter-spacing: 0;
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -288,10 +361,11 @@ body.layout-single #layout-multi { display: none; }
|
||||
|
||||
body.layout-single #info {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
top: 42px;
|
||||
right: 42px;
|
||||
text-align: left;
|
||||
width: calc(50vw - 60px);
|
||||
width: min(760px, calc(50vw - 52px));
|
||||
max-height: calc(100vh - 84px);
|
||||
z-index: 10;
|
||||
}
|
||||
body.layout-single #info .date {
|
||||
@@ -300,57 +374,80 @@ body.layout-single #info .date {
|
||||
|
||||
/* ===== MULTI 布局（独立卡片） ===== */
|
||||
body.layout-multi #layout-single { display: none; }
|
||||
body.layout-multi #layout-multi { display: block; }
|
||||
body.layout-multi #layout-multi {
|
||||
position: fixed;
|
||||
inset: var(--layout-top) var(--layout-x) var(--layout-bottom);
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(420px, 1fr) minmax(360px, var(--knowledge-panel)) var(--right-panel);
|
||||
grid-template-rows: var(--time-panel-h) var(--layout-gap) var(--zodiac-panel-h) minmax(32px, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"photo knowledge time"
|
||||
"photo knowledge ."
|
||||
"photo knowledge zodiac"
|
||||
". . ."
|
||||
"news weather weather";
|
||||
column-gap: var(--layout-col-gap);
|
||||
row-gap: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
body.layout-multi #layout-multi > .card {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.layout-multi #card-time {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
grid-area: time;
|
||||
text-align: left;
|
||||
min-width: 280px;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 22px 30px;
|
||||
}
|
||||
body.layout-multi #card-zodiac {
|
||||
position: fixed;
|
||||
top: 160px;
|
||||
right: 40px;
|
||||
width: 280px;
|
||||
z-index: 10;
|
||||
grid-area: zodiac;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 22px 28px;
|
||||
}
|
||||
body.layout-multi #card-knowledge {
|
||||
grid-area: knowledge;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
padding: 22px 26px;
|
||||
}
|
||||
body.layout-multi #card-knowledge .knowledge-content {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
body.layout-multi #card-ainews {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
left: 40px;
|
||||
width: calc(50vw - 80px);
|
||||
z-index: 10;
|
||||
grid-area: news;
|
||||
align-self: end;
|
||||
width: 100%;
|
||||
max-height: 390px;
|
||||
}
|
||||
body.layout-multi #card-bottom {
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
width: calc(50vw - 60px);
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-end;
|
||||
z-index: 10;
|
||||
}
|
||||
body.layout-multi #card-right-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
body.layout-multi #card-weather {
|
||||
grid-area: weather;
|
||||
align-self: end;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
body.layout-multi #card-right-col #card-knowledge {
|
||||
text-align: left;
|
||||
}
|
||||
body.layout-multi #card-right-col #card-ainews {
|
||||
text-align: left;
|
||||
}
|
||||
body.layout-multi #card-bottom #card-weather {
|
||||
text-align: right;
|
||||
padding: 22px 28px 24px;
|
||||
}
|
||||
body.layout-multi #card-photo {
|
||||
grid-area: photo;
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
align-self: start;
|
||||
width: 100%;
|
||||
max-height: var(--photo-panel-h);
|
||||
padding: 16px;
|
||||
}
|
||||
body.layout-multi #card-photo img {
|
||||
max-height: calc(var(--photo-panel-h) - 32px);
|
||||
}
|
||||
|
||||
/* ===== 卡片隐藏 ===== */
|
||||
body.hide-time #card-time,
|
||||
body.hide-time #info .time,
|
||||
@@ -372,15 +469,16 @@ body.hide-photo #card-photo { display: none !important; }
|
||||
/* ===== 相册 ===== */
|
||||
#card-photo {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: calc(50vw - 80px);
|
||||
top: 44px;
|
||||
left: 48px;
|
||||
width: min(860px, calc(50vw - 72px));
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
padding: 16px;
|
||||
}
|
||||
.photo-wrap {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#card-photo img {
|
||||
@@ -388,7 +486,7 @@ body.hide-photo #card-photo { display: none !important; }
|
||||
max-height: 450px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.photo-info {
|
||||
@@ -417,6 +515,58 @@ body.hide-photo #card-photo { display: none !important; }
|
||||
background: rgba(255,255,255,0.6);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* ===== 电子相册模式 ===== */
|
||||
body.photo-frame-mode #bg-layer { display: none !important; }
|
||||
body.photo-frame-mode #card-photo { display: none !important; }
|
||||
body.photo-frame-mode #layout-multi { display: none !important; }
|
||||
body.photo-frame-mode #layout-single { display: none !important; }
|
||||
body.photo-frame-mode #author { display: none !important; }
|
||||
#photo-frame-bg {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 4;
|
||||
object-fit: cover;
|
||||
filter: blur(30px) brightness(0.5);
|
||||
transform: scale(1.1);
|
||||
transition: opacity 0.8s ease;
|
||||
}
|
||||
#photo-frame-img {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
z-index: 5;
|
||||
object-fit: contain;
|
||||
transition: opacity 0.8s ease;
|
||||
}
|
||||
body.photo-frame-mode #photo-frame-bg { display: block; }
|
||||
body.photo-frame-mode #photo-frame-img { display: block; }
|
||||
/* 相册时钟叠加层 */
|
||||
.photo-frame-clock {
|
||||
position: fixed; top: 28px; right: 36px; z-index: 10;
|
||||
font-family: -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
|
||||
font-size: 52px; font-weight: 200; letter-spacing: 2px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.9);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
body.photo-frame-mode .photo-frame-clock { opacity: 1; }
|
||||
.photo-frame-date {
|
||||
position: fixed; top: 86px; right: 38px; z-index: 10;
|
||||
font-family: -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
|
||||
font-size: 15px; font-weight: 400;
|
||||
color: rgba(255,255,255,0.8);
|
||||
text-shadow: 0 0 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.8);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
body.photo-frame-mode .photo-frame-date { opacity: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="layout-{{LAYOUT}} {{BODY_CLASSES}}">
|
||||
@@ -459,39 +609,41 @@ body.hide-photo #card-photo { display: none !important; }
|
||||
<div id="card-zodiac" class="card">
|
||||
<div class="zodiac-text" id="zodiac2">加载中...</div>
|
||||
</div>
|
||||
<div id="card-knowledge" class="card">
|
||||
<div class="knowledge-header">💡 知识卡片 <span class="knowledge-keyword-tag" id="knowledgeTag2"></span></div>
|
||||
<div class="knowledge-content" id="knowledge2">请设置知识关键字</div>
|
||||
</div>
|
||||
<div id="card-ainews" class="card">
|
||||
<div class="ainews-header">🤖 AI 资讯</div>
|
||||
<div id="ainews2">加载中...</div>
|
||||
</div>
|
||||
<div id="card-bottom">
|
||||
<div id="card-right-col">
|
||||
<div id="card-knowledge" class="card">
|
||||
<div class="knowledge-header">💡 知识卡片 <span class="knowledge-keyword-tag" id="knowledgeTag2"></span></div>
|
||||
<div class="knowledge-content" id="knowledge2">请设置知识关键字</div>
|
||||
</div>
|
||||
<div id="card-weather" class="card">
|
||||
<div class="current-weather" id="currentWeather2">加载中...</div>
|
||||
<div class="forecast-title">24小时预报</div>
|
||||
<div class="weather-forecast" id="hourlyForecast2"></div>
|
||||
<div class="forecast-title" style="margin-top:12px">7日预报</div>
|
||||
<div class="daily-forecast" id="dailyForecast2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="card-weather" class="card">
|
||||
<div class="current-weather" id="currentWeather2">加载中...</div>
|
||||
<div class="forecast-title">24小时预报</div>
|
||||
<div class="weather-forecast" id="hourlyForecast2"></div>
|
||||
<div class="forecast-title" style="margin-top:12px">7日预报</div>
|
||||
<div class="daily-forecast" id="dailyForecast2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="card-photo" class="card" style="display:none">
|
||||
<div class="photo-wrap">
|
||||
<img id="photoImg" src="" alt="">
|
||||
<div class="photo-info">
|
||||
<span class="photo-counter" id="photoCounter"></span>
|
||||
<div class="photo-progress"><div class="photo-progress-bar" id="photoProgress"></div></div>
|
||||
<div id="card-photo" class="card" style="display:none">
|
||||
<div class="photo-wrap">
|
||||
<img id="photoImg" src="" alt="">
|
||||
<div class="photo-info">
|
||||
<span class="photo-counter" id="photoCounter"></span>
|
||||
<div class="photo-progress"><div class="photo-progress-bar" id="photoProgress"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="author">绝尘</div>
|
||||
|
||||
<!-- 相册模式全屏图片 -->
|
||||
<img id="photo-frame-bg" src="" alt="">
|
||||
<img id="photo-frame-img" src="" alt="">
|
||||
<!-- 相册模式时钟 -->
|
||||
<div class="photo-frame-clock" id="photoFrameClock"></div>
|
||||
<div class="photo-frame-date" id="photoFrameDate"></div>
|
||||
|
||||
<script>
|
||||
var lastTimeStr='', lastDateStr='', lastZodiac='';
|
||||
var horoscopeInfo=null;
|
||||
@@ -523,6 +675,18 @@ function setText(id,txt){
|
||||
var e=document.getElementById(id);
|
||||
if(e) e.textContent=txt;
|
||||
}
|
||||
function escapeHTML(value){
|
||||
return String(value == null ? '' : value)
|
||||
.replace(/&/g,'&')
|
||||
.replace(/</g,'<')
|
||||
.replace(/>/g,'>')
|
||||
.replace(/"/g,'"')
|
||||
.replace(/'/g,''');
|
||||
}
|
||||
function safeImageURL(value){
|
||||
var url=String(value || '').trim();
|
||||
return /^(https?:|data:image\/)/i.test(url) ? url : '';
|
||||
}
|
||||
|
||||
function buildBar(label,val,color){
|
||||
var v=parseInt(val)||0;
|
||||
@@ -543,25 +707,17 @@ function buildZodiacHTML(name){
|
||||
html+=buildBar('财运',horoscopeInfo.money,barColors.money);
|
||||
html+=buildBar('健康',horoscopeInfo.health,barColors.health);
|
||||
html+='<div class="zodiac-tags">';
|
||||
if(horoscopeInfo.luckyColor) html+='<span class="zodiac-tag">🎨 '+horoscopeInfo.luckyColor+'</span>';
|
||||
if(horoscopeInfo.luckyNum) html+='<span class="zodiac-tag">🔢 '+horoscopeInfo.luckyNum+'</span>';
|
||||
if(horoscopeInfo.noble) html+='<span class="zodiac-tag">⭐ '+horoscopeInfo.noble+'</span>';
|
||||
if(horoscopeInfo.luckyColor) html+='<span class="zodiac-tag">🎨 '+escapeHTML(horoscopeInfo.luckyColor)+'</span>';
|
||||
if(horoscopeInfo.luckyNum) html+='<span class="zodiac-tag">🔢 '+escapeHTML(horoscopeInfo.luckyNum)+'</span>';
|
||||
if(horoscopeInfo.noble) html+='<span class="zodiac-tag">⭐ '+escapeHTML(horoscopeInfo.noble)+'</span>';
|
||||
html+='</div>';
|
||||
if(horoscopeInfo.summary) html+='<div class="zodiac-summary">'+horoscopeInfo.summary+'</div>';
|
||||
if(horoscopeInfo.summary) html+='<div class="zodiac-summary">'+escapeHTML(horoscopeInfo.summary)+'</div>';
|
||||
} else {
|
||||
html+='<div style="opacity:0.4;font-size:12px;margin-top:8px">运势加载中...</div>';
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
function syncZodiacHeight(){
|
||||
var zw=document.getElementById('card-zodiac');
|
||||
var ww=document.getElementById('card-weather');
|
||||
if(!zw||!ww||!document.body.classList.contains('layout-multi')) return;
|
||||
var wh=ww.getBoundingClientRect().height;
|
||||
zw.style.minHeight=wh+'px';
|
||||
}
|
||||
|
||||
function updateZodiacDisplay(){
|
||||
var name=getUserZodiac();
|
||||
if(name===lastZodiac) return;
|
||||
@@ -569,7 +725,6 @@ function updateZodiacDisplay(){
|
||||
var html=buildZodiacHTML(name);
|
||||
setEl('zodiac',html);
|
||||
setEl('zodiac2',html);
|
||||
syncZodiacHeight();
|
||||
}
|
||||
|
||||
var holidays=[
|
||||
@@ -615,6 +770,14 @@ window.setWallpaperVisible=function(visible){
|
||||
if(bg){bg.style.display=visible?'':'none';}
|
||||
};
|
||||
|
||||
window.setPhotoFrameMode=function(enabled){
|
||||
if(enabled){
|
||||
document.body.classList.add('photo-frame-mode');
|
||||
} else {
|
||||
document.body.classList.remove('photo-frame-mode');
|
||||
}
|
||||
};
|
||||
|
||||
window._showSeconds={{SHOW_SECONDS}};
|
||||
window.setShowSeconds=function(v){window._showSeconds=v; updateTime();};
|
||||
|
||||
@@ -648,6 +811,11 @@ function updateTime(){
|
||||
setEl('date',displayStr); setEl('date2',displayStr); lastDateStr=dateStr;
|
||||
}
|
||||
updateZodiacDisplay();
|
||||
// 相册模式时钟
|
||||
var fc=document.getElementById('photoFrameClock');
|
||||
var fd=document.getElementById('photoFrameDate');
|
||||
if(fc) fc.textContent=timeStr;
|
||||
if(fd) fd.textContent=dateStr;
|
||||
}
|
||||
|
||||
window.updateHoroscopeFromGo=function(data){
|
||||
@@ -657,7 +825,6 @@ window.updateHoroscopeFromGo=function(data){
|
||||
lastZodiac='';
|
||||
window.userZodiac=data.zodiac;
|
||||
updateZodiacDisplay();
|
||||
syncZodiacHeight();
|
||||
};
|
||||
|
||||
window.updateAINewsFromGo=function(items){
|
||||
@@ -670,12 +837,13 @@ window.updateAINewsFromGo=function(items){
|
||||
var time=n.ctime||'';
|
||||
if(time.length>10) time=time.substring(5,10);
|
||||
html+='<div class="ainews-item">';
|
||||
if(n.picUrl){
|
||||
html+='<img class="ainews-img" src="'+n.picUrl+'" loading="lazy" onerror="this.style.display=\'none\'">';
|
||||
var picUrl=safeImageURL(n.picUrl);
|
||||
if(picUrl){
|
||||
html+='<img class="ainews-img" src="'+escapeHTML(picUrl)+'" loading="lazy" onerror="this.style.display=\'none\'">';
|
||||
}
|
||||
html+='<div class="ainews-body">';
|
||||
html+='<div class="ainews-title-row"><span class="ainews-title">'+n.title+'</span><span class="ainews-source">'+n.source+' · '+time+'</span></div>';
|
||||
if(n.description) html+='<div class="ainews-desc">'+n.description+'</div>';
|
||||
html+='<div class="ainews-title-row"><span class="ainews-title">'+escapeHTML(n.title)+'</span><span class="ainews-source">'+escapeHTML(n.source)+' · '+escapeHTML(time)+'</span></div>';
|
||||
if(n.description) html+='<div class="ainews-desc">'+escapeHTML(n.description)+'</div>';
|
||||
html+='</div></div>';
|
||||
}
|
||||
setEl('ainews',html);
|
||||
@@ -703,7 +871,7 @@ window.updateWeatherFromGo=function(data){
|
||||
if(fel){
|
||||
if(data.hourly&&data.hourly.length>0){
|
||||
fel.innerHTML=data.hourly.map(function(item){
|
||||
return '<div class="forecast-item"><div class="forecast-time">'+item.time+'</div><div class="forecast-icon">'+item.icon+'</div><div class="forecast-temp">'+item.temp+'</div>'+(item.pop&&item.pop!=='0'?'<div class="forecast-pop">'+item.pop+'%</div>':'')+'</div>';
|
||||
return '<div class="forecast-item"><div class="forecast-time">'+escapeHTML(item.time)+'</div><div class="forecast-icon">'+escapeHTML(item.icon)+'</div><div class="forecast-temp">'+escapeHTML(item.temp)+'</div>'+(item.pop&&item.pop!=='0'?'<div class="forecast-pop">'+escapeHTML(item.pop)+'%</div>':'')+'</div>';
|
||||
}).join('');
|
||||
} else { fel.innerHTML='<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
|
||||
}
|
||||
@@ -711,7 +879,7 @@ window.updateWeatherFromGo=function(data){
|
||||
if(del){
|
||||
if(data.daily&&data.daily.length>0){
|
||||
del.innerHTML=data.daily.map(function(item){
|
||||
return '<div class="daily-item"><div style="opacity:0.6;font-size:10px">'+item.date+'</div><div class="daily-icon">'+item.icon+'</div><div class="forecast-temp">'+item.tempMin+'°~'+item.tempMax+'°</div></div>';
|
||||
return '<div class="daily-item"><div style="opacity:0.6;font-size:10px">'+escapeHTML(item.date)+'</div><div class="daily-icon">'+escapeHTML(item.icon)+'</div><div class="forecast-temp">'+escapeHTML(item.tempMin)+'°~'+escapeHTML(item.tempMax)+'°</div></div>';
|
||||
}).join('');
|
||||
} else { del.innerHTML='<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
|
||||
}
|
||||
@@ -719,7 +887,6 @@ window.updateWeatherFromGo=function(data){
|
||||
|
||||
renderWeather('currentWeather','hourlyForecast','dailyForecast');
|
||||
renderWeather('currentWeather2','hourlyForecast2','dailyForecast2');
|
||||
syncZodiacHeight();
|
||||
};
|
||||
|
||||
updateTime();
|
||||
@@ -727,6 +894,19 @@ setInterval(updateTime,1000);
|
||||
|
||||
window.updatePhotoFromGo=function(data){
|
||||
if(typeof data==='string') data=JSON.parse(data);
|
||||
var pfImg=document.getElementById('photo-frame-img');
|
||||
var pfBg=document.getElementById('photo-frame-bg');
|
||||
if(document.body.classList.contains('photo-frame-mode')&&pfImg){
|
||||
if(!data||!data.src) return;
|
||||
pfImg.style.opacity='0';
|
||||
pfBg.style.opacity='0';
|
||||
setTimeout(function(){
|
||||
pfBg.src=data.src;
|
||||
pfImg.src=data.src;
|
||||
pfImg.onload=function(){pfImg.style.opacity='1';pfBg.style.opacity='1';};
|
||||
},400);
|
||||
return;
|
||||
}
|
||||
var card=document.getElementById('card-photo');
|
||||
if(!card) return;
|
||||
if(!data||!data.src){card.style.display='none';return;}
|
||||
|
||||
@@ -189,6 +189,10 @@ input[type="text"]:focus { border-color: var(--input-border-focus); }
|
||||
<div class="section">
|
||||
<div class="section-label">显示控制</div>
|
||||
<div class="card">
|
||||
<div class="item">
|
||||
<div><div class="item-label">开机启动</div><div class="item-desc">系统启动时自动运行</div></div>
|
||||
<label class="switch"><input type="checkbox" id="autoStart"><span class="track"><span class="thumb"></span></span></label>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><div class="item-label">显示壁纸</div></div>
|
||||
<label class="switch"><input type="checkbox" id="wallpaper" checked><span class="track"><span class="thumb"></span></span></label>
|
||||
@@ -338,6 +342,10 @@ input[type="text"]:focus { border-color: var(--input-border-focus); }
|
||||
<div><div class="item-label">相册展示</div></div>
|
||||
<label class="switch"><input type="checkbox" id="photoCard" checked><span class="track"><span class="thumb"></span></span></label>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><div class="item-label">电子相册模式</div><div class="item-desc">照片铺满整个壁纸</div></div>
|
||||
<label class="switch"><input type="checkbox" id="photoFrameMode"><span class="track"><span class="thumb"></span></span></label>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-desc" id="photoDirDisplay">未选择目录</div>
|
||||
<div class="btn-group">
|
||||
@@ -377,8 +385,8 @@ input[type="text"]:focus { border-color: var(--input-border-focus); }
|
||||
<input type="text" id="knowledgeKeyword" placeholder="如: 历史、科学、冷知识">
|
||||
</div>
|
||||
<div class="item">
|
||||
<div><div class="item-label">知识提示词</div><div class="item-desc">自定义生成风格，不会显示在桌面</div></div>
|
||||
<input type="text" id="knowledgePrompt" placeholder="如: 用幽默口吻、面向程序员">
|
||||
<div><div class="item-label">知识提示词</div><div class="item-desc">补充风格或方向，系统会保证内容密度</div></div>
|
||||
<input type="text" id="knowledgePrompt" placeholder="如: 偏实践、给出判断标准">
|
||||
</div>
|
||||
<div class="item" style="position:relative">
|
||||
<div class="item-label">天气城市</div>
|
||||
@@ -397,7 +405,7 @@ input[type="text"]:focus { border-color: var(--input-border-focus); }
|
||||
<div class="footer">u-desktop v1.0</div>
|
||||
|
||||
<script>
|
||||
var toggleKeys = ['wallpaper', 'time', 'showSeconds', 'weather', 'zodiacCard', 'knowledgeCard', 'ainewsCard', 'photoCard'];
|
||||
var toggleKeys = ['autoStart', 'wallpaper', 'time', 'showSeconds', 'weather', 'zodiacCard', 'knowledgeCard', 'ainewsCard', 'photoCard', 'photoFrameMode'];
|
||||
var initDone = false;
|
||||
function sendToggle() {
|
||||
if (!initDone) return;
|
||||
@@ -585,10 +593,10 @@ function loadBingFavorites() {
|
||||
});
|
||||
}
|
||||
document.getElementById('btnBingPrev').addEventListener('click', function() {
|
||||
if (window.bingNext) window.bingNext().then(function(s) { updateBingUI(s); });
|
||||
if (window.bingPrev) window.bingPrev().then(function(s) { updateBingUI(s); });
|
||||
});
|
||||
document.getElementById('btnBingNext').addEventListener('click', function() {
|
||||
if (window.bingPrev) window.bingPrev().then(function(s) { updateBingUI(s); });
|
||||
if (window.bingNext) window.bingNext().then(function(s) { updateBingUI(s); });
|
||||
});
|
||||
document.getElementById('btnBingFav').addEventListener('click', function() {
|
||||
if (window.bingToggleFavorite) {
|
||||
|
||||
Reference in New Issue
Block a user