toggle menu_cpk!_v3

Toggle menu cpk

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey .

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==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();}}

})();