78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
// HoloLake StyleKit v1.0 · 主题切换 + Toast + 弹窗交互
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
// ========== 1. 主题切换 ==========
|
||
var themeToggle = document.getElementById('themeToggle');
|
||
var themeLabel = document.getElementById('themeLabel');
|
||
var html = document.documentElement;
|
||
var isDark = true;
|
||
|
||
themeToggle.addEventListener('click', function() {
|
||
isDark = !isDark;
|
||
if (isDark) {
|
||
html.setAttribute('data-theme', 'dark');
|
||
themeLabel.textContent = '🌙 深色';
|
||
themeToggle.classList.remove('active');
|
||
} else {
|
||
html.setAttribute('data-theme', 'light');
|
||
themeLabel.textContent = '☀️ 浅色';
|
||
themeToggle.classList.add('active');
|
||
}
|
||
showToast('success', '✨ 已切换到' + (isDark ? '深色' : '浅色') + '主题');
|
||
});
|
||
|
||
// ========== 2. 弹窗交互 ==========
|
||
var modalOverlay = document.getElementById('modalOverlay');
|
||
var openBtn = document.getElementById('openModalBtn');
|
||
var closeBtn = document.getElementById('closeModalBtn');
|
||
var cancelBtn = document.getElementById('cancelModalBtn');
|
||
var confirmBtn = document.getElementById('confirmModalBtn');
|
||
|
||
function openModal() {
|
||
modalOverlay.classList.add('open');
|
||
}
|
||
|
||
function closeModal() {
|
||
modalOverlay.classList.remove('open');
|
||
}
|
||
|
||
openBtn.addEventListener('click', openModal);
|
||
closeBtn.addEventListener('click', closeModal);
|
||
cancelBtn.addEventListener('click', closeModal);
|
||
confirmBtn.addEventListener('click', function() {
|
||
closeModal();
|
||
showToast('success', '✅ 已确认！');
|
||
});
|
||
|
||
// 点击遮罩层关闭
|
||
modalOverlay.addEventListener('click', function(e) {
|
||
if (e.target === modalOverlay) closeModal();
|
||
});
|
||
|
||
// ========== 3. 卡片点击效果 ==========
|
||
var cards = document.querySelectorAll('.card');
|
||
cards.forEach(function(card) {
|
||
card.addEventListener('click', function() {
|
||
var name = card.querySelector('.card-title').textContent;
|
||
showToast('info', '👆 你点击了人格体「' + name + '」');
|
||
});
|
||
});
|
||
|
||
console.log('HoloLake StyleKit v1.0 · 主题切换+Toast+弹窗已加载 ✨');
|
||
});
|
||
|
||
// ========== Toast提示函数（全局） ==========
|
||
function showToast(type, message) {
|
||
var container = document.getElementById('toastContainer');
|
||
var toast = document.createElement('div');
|
||
toast.className = 'toast toast-' + type;
|
||
toast.textContent = message;
|
||
container.appendChild(toast);
|
||
|
||
// 3秒后自动移除
|
||
setTimeout(function() {
|
||
if (toast.parentNode) toast.parentNode.removeChild(toast);
|
||
}, 3000);
|
||
}
|