anian/halo-theme-pix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增嵌入式代码块；优化通知书推送时机

Browse Source
This commit is contained in:
anian
2026-03-10 17:24:50 +08:00
parent 6810791637
commit b387ea885c
24 changed files with 3793 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
embed-code/page/news-2026.html
+187
View File
@@ -0,0 +1,187 @@
<div class="tab-container" style="width: 100%; max-width: 1200px; margin: 30px auto 0;">
<div class="tab-nav" style="display: flex; border-bottom: 1px solid #a7f3d0; margin-bottom: 15px;">
<div class="tab-nav-item active" data-tab="tab1"
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #f0fdf4; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
黄黄日历</div>
<div class="tab-nav-item" data-tab="tab2"
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #ffffff; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
近日快讯</div>
</div>
<div class="tab-content" style="width: 100%; height: auto; position: relative;">
<div class="tab-panel active" id="tab1" style="display: block; width: 100%; height: auto;">
<div style="width: 100%; height: auto; position: relative; overflow: hidden;">
<div id="calendar-img-container-2026" style="width: 100%; height: auto; position: relative;">
<div id="calendar-2026-global-blur"></div>
<div id="calendar-2026-intro">
<div id="calendar-2026-intro-mask"></div>
<img id="calendar-2026-intro-img" src="/upload/2026-0.png">
</div>
<img id="calendar-2026-month"
style="width:100%;height:auto;position:absolute;top:0;left:0;object-fit:contain;opacity:0;transition:opacity 1s ease-in-out;z-index:1;pointer-events:none;">
<a id="calendar-2026-link" href="/calendar"></a>
</div>
</div>
<style>
#calendar-2026-global-blur {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, .35);
backdrop-filter: blur(16px);
z-index: 9997;
opacity: 1;
transition: opacity .8s ease;
pointer-events: none;
}
#calendar-2026-intro {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 9999;
pointer-events: none;
}
#calendar-2026-intro-mask {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, .25);
backdrop-filter: blur(18px);
}
#calendar-2026-intro-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: .25;
transform: scale(.50);
transition: opacity .9s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
}
#calendar-2026-link {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: auto;
text-decoration: none;
}
.tab-nav-item:hover:not(.active) {
background-color: #dcfce7;
border-color: #86efac;
color: #047857;
}
.tab-nav-item.active {
background-color: #4ADE80 !important;
color: #ffffff !important;
border-color: #4ADE80 !important;
}
</style>
<script>
function initializeCalendar2026() {
const container = document.getElementById('calendar-img-container-2026');
if (!container) return;
const intro = document.getElementById("calendar-2026-intro");
const introImg = document.getElementById("calendar-2026-intro-img");
const globalBlur = document.getElementById("calendar-2026-global-blur");
const monthImg = document.getElementById('calendar-2026-month');
const month = new Date().getMonth() + 1;
monthImg.src = `/upload/2026-${month}.png`;
container.style.height = "100vh";
const setHeight = img => {
if (img.complete)
container.style.height = img.offsetHeight + 'px';
else
img.onload = () => container.style.height = img.offsetHeight + 'px';
};
const smoothScrollToContainer = () => {
const rect = container.getBoundingClientRect();
const target =
window.scrollY +
rect.top +
rect.height / 2 -
window.innerHeight / 2;
$('html, body').animate({ scrollTop: target }, 800);
};
const init = async () => {
await new Promise(r =>
monthImg.complete ? r() : monthImg.onload = r
);
setHeight(monthImg);
introImg.style.opacity = "1";
introImg.style.transform = "scale(1)";
smoothScrollToContainer();
setTimeout(() => {
intro.style.transition = "opacity .8s ease";
intro.style.opacity = 0;
globalBlur.style.opacity = 0;
setTimeout(() => {
intro.remove();
globalBlur.remove();
}, 800);
monthImg.style.opacity = 1;
monthImg.style.zIndex = 3;
setHeight(monthImg);
}, 1500);
};
init();
}
document.addEventListener("DOMContentLoaded", initializeCalendar2026);
document.addEventListener("pjax:complete", initializeCalendar2026);
</script>
</div>
<div class="tab-panel" id="tab2" style="display: none; width: 100%; height: auto;">
<iframe src="https://60s.lylme.com/" width="100%" height="800px"></iframe>
</div>
</div>
</div>
<script>
function initTabSwitch() {
const navItems = document.querySelectorAll('.tab-nav-item');
const panels = document.querySelectorAll('.tab-panel');
navItems.forEach(item => {
item.addEventListener('click', function () {
navItems.forEach(nav => nav.classList.remove('active'));
this.classList.add('active');
const targetTab = this.dataset.tab;
panels.forEach(panel => {
panel.style.display = 'none';
panel.classList.remove('active');
});
const targetPanel = document.getElementById(targetTab);
targetPanel.style.display = 'block';
targetPanel.classList.add('active');
});
});
}
document.addEventListener('DOMContentLoaded', initTabSwitch);
document.addEventListener('pjax:complete', initTabSwitch);
</script>