Toggle menu cpk
// ==UserScript==
// @name toggle menu_cpk!_v4
// @namespace http://tampermonkey.net/
// @version 1.5168142
// @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:`url('https://videotourl.com/images/1777529182392-9873506f-f8df-40e1-9a16-ba4b397896ed.jpeg')`,
backgroundSize:'cover',
backgroundPosition:'center',
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();}}
})();