- 登入
- 註冊
.canvas-slide2-root,.canvas-slide2-root *,.canvas-slide2-root *::before,.canvas-slide2-root *::after{margin:0;padding:0;box-sizing:border-box;}
.canvas-slide2-root{font-family:”Noto Sans TC”,sans-serif;background:#0f0f1a;color:#fff;min-height:100vh;position:relative;width:100vw;margin-left:calc(50% – 50vw);}
.cs2-toggle-bar{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;justify-content:center;gap:8px;padding:10px;background:rgba(15,15,26,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.08);}
.cs2-toggle-btn{padding:6px 18px;border-radius:999px;font-size:13px;cursor:pointer;border:1px solid rgba(255,255,255,0.2);background:transparent;color:rgba(255,255,255,0.55);transition:all 0.2s;font-family:inherit;}
.cs2-toggle-btn.active{background:#6366f1;border-color:#6366f1;color:white;font-weight:600;}
.cs2-long-view{padding-top:60px;}
.cs2-section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:48px 24px;max-width:680px;margin:0 auto;}
.cs2-slide-view{display:none;padding-top:60px;}
.cs2-slide-container{position:relative;width:100%;height:calc(100vh – 60px);}
.cs2-slide{display:none;width:100%;height:100%;flex-direction:column;justify-content:center;align-items:center;padding:60px;}
.cs2-slide.active{display:flex;}
.cs2-slide-nav{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:16px;z-index:9999;background:rgba(15,15,26,0.85);backdrop-filter:blur(10px);padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);}
.cs2-nav-btn{padding:6px 18px;border-radius:999px;background:rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.4);color:#a5b4fc;cursor:pointer;font-size:13px;transition:all 0.2s;font-family:inherit;}
.cs2-nav-btn:hover{background:#6366f1;color:white;}
.cs2-counter{font-size:13px;color:rgba(255,255,255,0.45);min-width:55px;text-align:center;}
.cs2-card{background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.2);border-radius:16px;padding:24px;margin:12px 0;}
.cs2-grad{background:linear-gradient(135deg,#818cf8,#c084fc,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.cs2-prompt{background:#1a1a2e;border:1px solid rgba(99,102,241,0.3);border-radius:12px;padding:16px;font-family:”Courier New”,monospace;font-size:13px;line-height:1.7;color:#a5b4fc;white-space:pre-wrap;position:relative;}
.cs2-copy-btn{position:absolute;top:8px;right:8px;padding:4px 10px;background:rgba(99,102,241,0.25);border:none;border-radius:6px;color:#a5b4fc;font-size:11px;cursor:pointer;transition:all 0.2s;font-family:inherit;}
.cs2-copy-btn:hover{background:#6366f1;color:white;}
.cs2-tag{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:500;background:rgba(99,102,241,0.18);border:1px solid rgba(99,102,241,0.35);color:#a5b4fc;margin:2px;}
.cs2-highlight{background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(192,132,252,0.08));border:1px solid rgba(99,102,241,0.25);border-radius:14px;padding:20px;}
(function(){
let view=`long`,cur=0;
const root=document.querySelector(`.canvas-slide2-root`);
const slides=root.querySelectorAll(`.cs2-slide`);
const total=slides.length;
const lv=document.getElementById(`cs2-long-view`);
const sv=document.getElementById(`cs2-slide-view`);
const sn=document.getElementById(`cs2-slide-nav`);
const counter=document.getElementById(`cs2-counter`);
function setView(v){
view=v;
if(v===`long`){
lv.style.display=`block`;sv.style.display=`none`;sn.style.display=`none`;
} else {
lv.style.display=`none`;sv.style.display=`block`;sn.style.display=`flex`;
updateSlide();
}
root.querySelectorAll(`.cs2-toggle-btn`).forEach(b=>{
b.classList.toggle(`active`,b.getAttribute(`data-cs2-view`)===v);
});
}
function updateSlide(){
slides.forEach((s,i)=>s.classList.toggle(`active`,i===cur));
counter.textContent=(cur+1)+` / `+total;
}
function changeSlide(d){
cur=Math.max(0,Math.min(total-1,cur+d));
updateSlide();
}
root.querySelectorAll(`[data-cs2-view]`).forEach(b=>{
b.addEventListener(`click`,()=>setView(b.getAttribute(`data-cs2-view`)));
});
root.querySelectorAll(`[data-cs2-nav]`).forEach(b=>{
b.addEventListener(`click`,()=>changeSlide(parseInt(b.getAttribute(`data-cs2-nav`),10)));
});
root.querySelectorAll(`[data-cs2-copy]`).forEach(btn=>{
btn.addEventListener(`click`,()=>{
const text=btn.parentElement.innerText.replace(/^複製/,“).replace(/^✓ 已複製/,“).trim();
navigator.clipboard.writeText(text).then(()=>{
btn.textContent=`✓ 已複製`;
setTimeout(()=>{btn.textContent=`複製`;},2000);
});
});
});
document.addEventListener(`keydown`,e=>{
if(view===`slide`){
if(e.key===`ArrowRight`||e.key===`ArrowDown`)changeSlide(1);
if(e.key===`ArrowLeft`||e.key===`ArrowUp`)changeSlide(-1);
}
});
})();
