toggle menu_cpk!_v3

Toggle menu cpk
Ask a question, post a review, or report the script.
Wrap lines
// ==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();}}

})();