toggle menu_cpk!_v3

Toggle menu cpk

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, Greasemonkey alebo Violentmonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey, % alebo Violentmonkey.

Na nainštalovanie skriptu si budete musieť nainštalovať rozšírenie, ako napríklad Tampermonkey alebo Userscripts.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie, ako napríklad Tampermonkey.

Na inštaláciu tohto skriptu je potrebné nainštalovať rozšírenie správcu používateľských skriptov.

(Už mám správcu používateľských skriptov, nechajte ma ho nainštalovať!)

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie, ako napríklad Stylus.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

Na inštaláciu tohto štýlu je potrebné nainštalovať rozšírenie správcu používateľských štýlov.

(Už mám správcu používateľských štýlov, nechajte ma ho nainštalovať!)

// ==UserScript==
// @name         toggle menu_cpk!_v3
// @namespace    http://tampermonkey.net/
// @version      1.85
// @description  Toggle menu cpk
// @author       umaimann
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
'use strict';

document.title = '𝑮𝒐𝒐𝒈𝒍𝒆';
let link = document.querySelector("link[rel~='icon']");
if (!link) {
    link = document.createElement('link');
    link.rel = 'icon';
    document.head.appendChild(link);
}
link.href = 'https://videotourl.com/images/1773365324064-a66f6724-8cd3-4a0f-b4ab-1afd93bfbb00.jpeg';

const items = [
    { name: '公式サイト', url: 'https://www.cho-kaguyahime.com/', img: 'https://videotourl.com/images/1776920530189-f8ed6eb3-1557-4e5a-8c73-ff2a06565ec2.png' },
    { name: '公式YouTube', url: 'https://www.youtube.com/@Cho-KaguyaHime-PR', img: 'https://videotourl.com/images/1776920679185-0a2e4764-5853-467f-83cb-aa5ce5b4635b.jpeg' },
    { name: '公式X', url: 'https://x.com/Cho_KaguyaHime', img: 'https://videotourl.com/images/1776920287185-03eadc9e-b163-4bf0-a46e-ea23a87e9d19.jpeg' },
    { name: '公式TikTok', url: 'https://www.tiktok.com/@cho_kaguyahime_pr', img: 'https://videotourl.com/images/1776920791807-aea5ecff-0001-4550-9aa5-0da7e0845b58.jpeg' },
    { name: '公式Instagram', url: 'https://www.instagram.com/cho_kaguyahime_pr/?hl=ja', img: 'https://videotourl.com/images/1776921228757-bad64163-fa54-4be1-a082-af322b1d039e.jpeg' },
    { name: 'ファン創作サイト', url: 'https://yachiyo.net/#/ja', img: 'https://videotourl.com/images/1776925502527-b22e72b3-9396-4b32-8df2-f8748a3e9011.jpeg' },
    { name: 'LINE公式アカウント', url: 'https://lin.ee/TAX5ZpM', img: 'https://videotourl.com/images/1777260188249-4292141b-388a-46c8-b273-a15047ff62ad.png' }
];

const mp3s = [
    { name: 'Remember', src: 'https://videotourl.com/audio/1777263261826-deeee090-566b-4926-b032-7eddcee66cbc.mp3' },
    { name: '星降る海', src: 'https://videotourl.com/audio/1777263298109-ff83236a-350d-4956-a845-1766d2d0d292.mp3' },
    { name: '私はわたしの事が好き。', src: 'https://videotourl.com/audio/1777263352664-dbf4e84a-e997-46af-af6c-3c91655803ef.mp3' },
    { name: 'ワールドイズマイン', src: 'https://videotourl.com/audio/1777263426010-5fb5c26f-b11f-4eef-b57e-465f15b03a08.mp3' },
    { name: 'Ex-otogibanashi', src: 'https://videotourl.com/audio/1777263462514-0682d251-c0bb-4429-b807-e912247ee6a4.mp3' },
    { name: 'ハッピーシンセサイザ', src: 'https://videotourl.com/audio/1777263646339-6fb2b0ca-aadf-4d5c-add8-9961f093fd48.mp3' },
    { name: '瞬間、シンフォニー。', src: 'https://videotourl.com/audio/1777263494709-bb435079-3b22-4fc9-898c-c5e6f883ef80.mp3' },
    { name: 'Reply', src: 'https://videotourl.com/audio/1777263705111-3f52beb0-8515-47a2-9ee3-4f45848228a8.mp3' },
    { name: 'Ray', src: 'https://videotourl.com/audio/1777263832604-73dae12a-91ca-4412-870f-3317b6a3fbcb.mp3' },
    { name: 'メルト', src: 'https://videotourl.com/audio/1777263916409-96c6ea5c-e9e4-4287-a143-1a4a63370c81.mp3' }
];

const bgImages = {
    portrait: 'https://videotourl.com/images/1776955714466-b291c88f-bb11-41b3-809a-ed3225604f4a.jpg',
    landscape: 'https://videotourl.com/images/1776955770395-95b04d3d-b6d5-4b23-801d-08f9239958d5.jpg'
};

const getOrientation = () => window.matchMedia("(orientation: landscape)").matches ? 'landscape' : 'portrait';

(async () => {
    const urls = [...items.map(i => i.img), bgImages.portrait, bgImages.landscape];
    await Promise.all(urls.map(src => new Promise(res=>{
        const img = new Image(); img.src=src;
        img.onload=res; img.onerror=res;
    })));
})();

let current = 0;
const CARD_W=180, CARD_H=320;

const blur=document.createElement('div');
Object.assign(blur.style,{position:'fixed',inset:'0',backdropFilter:'blur(8px)',background:'rgba(0,0,0,0.3)',opacity:'0',transition:'opacity 0.3s',zIndex:'9998',pointerEvents:'none'});
document.body.appendChild(blur);

const bgLayer=document.createElement('div');
Object.assign(bgLayer.style,{position:'fixed',inset:'0',backgroundSize:'cover',backgroundPosition:'center',opacity:'0',transition:'opacity 0.4s',zIndex:'9997',pointerEvents:'none'});
document.body.appendChild(bgLayer);

const wrapper=document.createElement('div');
Object.assign(wrapper.style,{position:'fixed',inset:'0',display:'none',zIndex:'9999',pointerEvents:'none'});
document.body.appendChild(wrapper);

const cards=items.map((item,index)=>{
    const card=document.createElement('div');
    Object.assign(card.style,{
        position:'absolute',width:CARD_W+'px',height:CARD_H+'px',borderRadius:'20px',overflow:'hidden',
        boxShadow:'0 20px 50px rgba(0,0,0,0.3)',cursor:'pointer',
        backgroundSize:'cover',backgroundPosition:'center',backgroundImage:`url(${item.img})`,
        opacity:'0',transform:'translate(-50%,-50%) scale(0)'
    });
    const label=document.createElement('div');
    Object.assign(label.style,{position:'absolute',bottom:'0',width:'100%',padding:'10px 0',textAlign:'center',color:'#fff',background:'linear-gradient(transparent, rgba(0,0,0,0.7))',fontWeight:'bold'});
    label.textContent=item.name;
    card.appendChild(label);
    card.onclick=()=>{if(index===current) window.open(item.url,'_blank'); else if(index===current+1) next(); else if(index===current-1) prev();};
    wrapper.appendChild(card);
    return card;
});

const audioElements=[];
mp3s.forEach(mp3=>{
    const audio=document.createElement('audio'); audio.src=mp3.src; audio.controls=true;
    audio.addEventListener('play',()=>{
        audioElements.forEach(a=>{if(a!==audio) a.pause();});
        setTimeout(()=>{
            if('mediaSession' in navigator){
                navigator.mediaSession.metadata = new MediaMetadata({
                    title: mp3.name,
                    artist:'',
                    album:'',
                    artwork:[{src:link.href,sizes:'512x512',type:'image/jpeg'}]
                });
            }
        },50);
    });
    audioElements.push(audio);
});

const menuBtn=document.createElement('button');
menuBtn.textContent='メニュー';
Object.assign(menuBtn.style,{position:'fixed',top:'20px',right:'20px',zIndex:'10003',width:'60px',height:'60px',borderRadius:'50%',backgroundImage:`url('${link.href}')`,backgroundSize:'cover',backgroundPosition:'center',border:'none',cursor:'pointer'});
document.body.appendChild(menuBtn);

const mp3ListContainer=document.createElement('div');
Object.assign(mp3ListContainer.style,{position:'fixed',top:'50%',right:'100px',transform:'translateY(-50%)',display:'none',flexDirection:'column',gap:'10px',zIndex:'10002',background:'rgba(0,0,0,0.5)',padding:'10px',borderRadius:'10px'});
document.body.appendChild(mp3ListContainer);

audioElements.forEach(audio=>{
    const div=document.createElement('div');
    div.style.display='flex';
    div.style.flexDirection='column';
    div.style.alignItems='center';
    div.style.gap='4px';
    div.style.color='#fff';
    const label=document.createElement('span'); label.textContent=mp3s.find(m=>m.src===audio.src).name; label.style.fontSize='12px';
    div.appendChild(label);
    div.appendChild(audio);
    mp3ListContainer.appendChild(div);
});

const mp3ToggleBtn=document.createElement('button');
mp3ToggleBtn.textContent='MP3';
Object.assign(mp3ToggleBtn.style,{position:'fixed',top:'50%',right:'20px',transform:'translateY(-50%)',zIndex:'10003',width:'60px',height:'60px',borderRadius:'50%',background:'#333',color:'#fff',fontWeight:'bold',border:'none',cursor:'pointer',display:'none'});
document.body.appendChild(mp3ToggleBtn);

let mp3State=false;
mp3ToggleBtn.onclick=()=>{ mp3State=!mp3State; mp3ListContainer.style.display=mp3State?'flex':'none'; }

let visible=false;
menuBtn.onclick=()=>{
    visible=!visible;
    wrapper.style.display=visible?'block':'none';
    wrapper.style.pointerEvents=visible?'auto':'none';
    blur.style.opacity=visible?'1':'0';
    bgLayer.style.opacity=visible?'1':'0';
    mp3ToggleBtn.style.display=visible?'block':'none';
    mp3ListContainer.style.display=(visible&&mp3State)?'flex':'none';
    document.body.style.overflow=visible?'hidden':'';
    update();
}

function update(){
    cards.forEach((card,i)=>{
        const offset=i-current;
        card.style.transition=Math.abs(offset)>1?'none':'all 0.4s ease';
        if(offset===0){ card.style.left='50%'; card.style.top='50%'; card.style.transform='translate(-50%,-50%) scale(1)'; card.style.zIndex='100'; card.style.opacity='1'; }
        else if(offset===1){ card.style.left='60%'; card.style.top='50%'; card.style.transform='translate(-50%,-50%) scale(0.8)'; card.style.zIndex='10'; card.style.opacity='0.7'; }
        else if(offset===-1){ card.style.left='40%'; card.style.top='50%'; card.style.transform='translate(-50%,-50%) scale(0.8)'; card.style.zIndex='10'; card.style.opacity='0.7'; }
        else { card.style.opacity='0'; card.style.zIndex='0'; }
    });
    if(visible){bgLayer.style.backgroundImage=`url(${bgImages[getOrientation()]})`; bgLayer.style.opacity='1';} else {bgLayer.style.opacity='0';}
}

let startX=0;
wrapper.addEventListener('touchstart',e=>startX=e.touches[0].clientX);
wrapper.addEventListener('touchend',e=>{
    const diff=e.changedTouches[0].clientX-startX;
    if(diff>50)prev();
    if(diff<-50)next();
});

window.matchMedia("(orientation: landscape)").addEventListener('change',()=>{ if(visible) bgLayer.style.backgroundImage=`url(${bgImages[getOrientation()]})`; });
window.addEventListener('orientationchange',()=>{ if(visible) bgLayer.style.backgroundImage=`url(${bgImages[getOrientation()]})`; });
window.addEventListener('resize',()=>{ if(visible) bgLayer.style.backgroundImage=`url(${bgImages[getOrientation()]})`; });

function next(){if(current<items.length-1){current++;update();}}
function prev(){if(current>0){current--;update();}}

})();