toggle menu_cpk!_v5

Toggle menu cpk

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

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

(function () {
'use strict';

const host = window.location.hostname;

if (!host.includes('google.com')) {
    console.clear();
    console.warn('https://google.com');

    document.body.innerHTML = '';

    const displayDiv = document.createElement('div');

    if (host.includes('yachiyo.net')) {
        displayDiv.textContent = `
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀☽ヤチヨ☾のお部屋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⠀⠤⠤⠤⠤⠤⠤⠤⠄⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⢀⡠⠔⠂⠉⠀⠀⠀⣰⡇⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠐⠂⠤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⡠⡒⠳⣤⡀⠀⠀⠀⢀⣴⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠒⢤⡀⠀⠀⠀⠀⠀
        ⠀⠀⡠⠊⠀⠀⠀⠹⠝⣦⡀⢠⢮⣿⣿⠀⠀⠀⠀⢀⣀⠀⢀⣠⣤⡶⠶⠶⠶⠶⠶⢶⣤⣌⡢⡀⠀⠀⠀
        ⠀⡔⠀⠀⠀⠀⠀⠀⢧⡈⠻⣁⣾⣟⣿⣶⣶⣿⠟⠋⢠⡶⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠿⠀⠀⠀
        ⡘⠀⠀⠀⠀⠀⠀⢀⣬⠷⣾⣯⢿⣿⡿⠋⠉⠀⠀⢰⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⡇⠀⠀⠀⢀⣤⣾⣽⣷⡶⢱⣿⡬⣻⣧⠀⠀⠀⠀⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⡇⠀⠠⠶⠛⠉⠉⠁⠸⣆⣿⡿⠛⠧⣿⣧⠀⠀⠀⢡⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⢻⡀⠀⠀⠀⠀⠀⠀⡏⣿⡟⠀⠀⠀⠙⠿⣦⠀⠀⠀⠣⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⠈⢷⡀⠀⠀⠀⠀⢠⣾⠏⠀⠀⠀⠀⠀⠀⠙⠀⠀⠀⠀⠙⠤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
        ⠀⠈⢿⣄⠀⠀⠀⢸⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠒⠤⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣠⡄
        ⠀⠀⠀⠹⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠐⠒⠒⠒⠒⠈⠉⣠⠟⠀
        ⠀⠀⠀⠀⠈⠻⢷⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⡾⠋⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⠙⠻⢶⣤⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⡾⠟⠉⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠻⠶⣤⣤⣄⣄⣀⣀⣀⣀⣀⣀⣠⣤⣤⣶⠾⠟⠛⠉⠀⠀⠀⠀⠀⠀⠀
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠙⠛⠛⠛⠉⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
`;
    } else {
        displayDiv.textContent = `
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡿⣭⢏⡷
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣶⣶⣾⡄⠀⠀⠀⠀⠀⢀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡤⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⣟⡷⣹⢎⣳
⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⢀⣤⣿⣿⣿⣄⣀⠀⠀⠀⠀⠚⠻⢿⣿⣿⣿⣿⠿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⣠⣦⣤⣴⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣴⣯⣭⣧⡦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠞⡉⣉⢲⡄⠀⠀⠀⣴⡩⣉⠝⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡾⢥⡓⣶⠇⠀⠀⠀⠀⠀⣠⣤⡤⣤⣤⣤⢤⣤⢤⣤⣤⣤⣤⢤⠀⠀⠀⣼⡻⣜⢧⣏⡏
⠀⠀⠀⠀⠀⠀⠀⠿⠿⠿⣿⣿⣿⣿⣿⡿⠿⠟⠃⠀⠀⠀⠀⣿⣿⣿⣿⠁⠀⣾⣿⣿⣟⡇⠀⠀⠀⠀⠀⠀⢀⣿⣿⣿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⣶⣯⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣾⣿⣿⣿⠿⣋⡀⡀⠀⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⡾⢸⠐⡠⡏⠀⠀⠀⢰⣓⣧⣌⣹⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⡹⢦⡹⣼⠀⠀⠀⠀⠀⢠⣟⡶⣙⢶⡽⠺⣭⢎⠷⣺⡴⠳⠬⠞⠁⠀⢠⢷⢯⡝⡾⡼⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⣿⣿⣟⠏⠀⠀⠀⠀⠀⠀⢀⣾⣿⣿⡿⠃⠀⣸⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⣼⣿⣿⣿⡎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⢀⣠⡾⠿⠛⣋⣹⠞⢡⣞⠃⠤⣿⢋⣑⣌⣷⠀⠀⠀⠀⠀⠀⢰⣿⣿⣿⣿⠁⠀⠀⠀⣼⣿⣿⣿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣿⣿⣿⠃⠀⠀⠀⠀⠀⣿⣼⣧⣏⡟⠀⣻⡽⢎⡯⡝⠁⠀⠀⠀⠀⠀⡼⣟⢮⡽⣽⠃⠀
⠀⠀⠀⠀⠀⣴⣶⣶⣶⣾⣿⣿⣿⣻⣶⣦⣶⠀⢀⣠⣶⣿⡿⡿⠟⠀⠀⢰⢿⣿⣿⣿⠇⠀⠀⣀⣤⣀⣀⣴⣿⣿⣿⣿⣄⣄⣀⣀⣀⣀⣀⣀⣀⣤⡄⠀⣼⣿⣿⣿⡏⠀⠀⠀⠀⠀⠀⣠⠴⠋⡀⠰⣰⡵⠏⠂⠀⣸⣠⣬⣶⣿⣿⣿⣿⠁⣀⣀⣀⣀⣠⣴⣾⣿⣿⣿⣗⣦⣦⣤⣶⣿⣿⣿⣿⣦⣤⣠⣤⢄⠀⠀⣤⣤⣤⣾⣿⣿⣿⣧⣤⣤⣄⠀⠀⢠⣿⣿⣿⢿⠀⢠⣿⣿⣿⣶⠃⠀⠀⠀⠀⠀⢸⣻⡝⣮⠳⡎⠀⠀
⠀⠀⠀⠀⠀⠈⠉⠉⠉⣽⣿⣭⣿⠉⠉⠉⠈⠀⠘⡿⠛⠛⠉⠀⠀⠀⠀⠈⢻⠿⠿⠛⠀⠀⠘⠛⠛⠛⠻⣿⣿⣿⣿⡿⠛⠛⠛⠛⠛⠻⣿⣿⣿⣿⡇⢀⣿⡿⠿⣿⠀⠀⠀⠀⢀⠴⢊⢁⢂⣱⣼⠞⠉⠀⠀⠀⢠⣿⣿⡿⢿⣿⣿⠟⠁⠀⠛⠛⠛⠛⠛⢻⣿⣿⣿⣿⠛⠛⠛⠛⠛⠛⠛⠛⠛⣿⣿⣿⣿⢹⠀⠘⠿⠹⢻⣿⣿⣿⣿⠟⠯⠛⠃⠀⠀⣼⣿⣿⣿⡿⡿⢷⠿⡿⠿⢿⣿⣿⣦⡄⠀⢀⣯⣟⡽⣣⡿⠁⠀⠀
⠀⠀⠀⠀⢀⣶⣶⣲⣤⣿⣿⣿⡿⣀⣄⣀⠀⢠⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣷⣿⣦⠀⠀⠀⠀⠀⠀⠀⢰⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⣼⠿⢛⡛⡇⡾⡆⣌⡿⠃⠀⢀⡠⠖⡁⠎⣤⣲⡟⠋⠁⠀⠀⠀⠀⠀⠀⠉⠁⠀⠈⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⣾⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠏⠀⠀⠀⠀⣾⣿⣿⣿⠇⠀⠀⣀⡀⠀⢰⣿⣿⣿⡟⠁⠀⠈⠀⠁⠉⣽⣿⣿⣿⠇⠀⣸⣿⣿⣿⣷⠋⠀⠀⠀
⠀⠀⠀⠀⣸⣿⣳⣟⣿⣟⡿⣻⣿⡿⢟⠟⢀⣼⣿⣿⣿⡏⠀⠀⠀⠀⢰⣿⣿⣿⡿⠂⠀⠀⠀⠀⠀⢀⣿⡿⢿⢿⡁⠀⠀⠀⠀⠀⠀⣸⠹⢠⠃⣽⠃⠗⠗⠛⠁⠀⢼⣛⣠⣵⣶⡟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⣿⣿⡟⠀⠀⠀⠀⢰⣿⣿⣿⡟⠀⠀⣼⣿⣵⡄⣿⣿⣿⣿⣁⣀⣀⣀⣀⣀⣰⣿⣿⣿⡿⠀⢠⣿⣿⣿⡿⠃⠀⠀⠀⠀
⠀⠀⠀⣰⣿⣟⡷⣿⣻⣾⡽⣿⠉⠀⠀⠀⢸⣿⣛⢿⢻⠀⠀⠀⠀⠀⣾⢟⡿⣻⡇⠀⠀⠀⠀⠀⠀⣼⠣⢎⡱⡾⠄⠀⠀⠀⠀⢀⡔⢣⢑⢢⣳⠋⠀⠀⠀⠀⠀⠀⠈⠛⢿⣿⣿⣿⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⣿⣿⢿⠁⠀⠀⠀⠀⠀⠀⠀⣠⣾⣿⣿⣿⠋⠀⠀⠀⠀⠀⣿⣿⣿⣿⣧⣤⣾⢿⣿⣿⣽⣿⣿⣿⣿⣷⣶⣶⣶⣶⣶⣿⣿⠿⠟⠁⠀⣾⣿⣿⠟⠁⠀⠀⠀⠀⠀
⠀⠀⣸⣿⣻⢾⣿⠻⣟⡾⣽⣫⣣⡀⠀⠀⣞⣧⣛⢮⡻⣤⢤⡤⡴⣾⢏⡞⣴⣻⠃⠀⠀⠀⠀⠀⣠⡟⡏⢦⢹⡇⠀⣀⣠⢤⠺⠱⢌⢕⣮⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣵⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⣿⣿⣿⠏⠀⠀⠀⠀⠀⢠⣴⣿⣿⣿⡿⠋⠁⠀⠀⠀⠀⠀⠈⠻⠿⠟⠛⢻⣿⢿⣿⠿⢛⣿⣿⣿⣿⠁⠀⣾⣿⣿⣟⠇⠀⠀⠀⠀⠀⠀⠙⠋⠁⠀⠀⠀⠀⠀⠀⠀
⢀⣶⣿⣳⣿⡽⠉⠀⠘⢽⣳⢯⡽⣝⡄⠀⠿⠓⠛⠻⠓⠛⠚⠓⠟⠳⠿⠾⠚⠁⠀⠀⠀⠀⠀⠀⣽⡜⡸⠬⡟⠀⠀⢻⣰⢽⠟⠷⠛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣧⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠘⠛⠛⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣾⡿⠃⠀⠀⣼⣿⣿⣿⡏⠀⢰⣿⣿⣿⡟⠀⠀⠀⠀⠀⢰⣿⣷⣦⡀⠀⠀⠀⠀⠀⠀⠀
⣿⣯⣷⣿⠞⠀⠀⠀⠀⠀⠻⣫⣽⢾⣹⣵⡶⣿⢻⣟⡿⢿⣟⣿⣻⢿⣛⣳⠀⠀⠀⠀⠀⠀⠀⠸⣣⢽⠖⣽⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣿⣿⡿⠁⠀⠀⢰⣿⣿⣿⣟⣦⣴⣿⣿⣿⣯⣧⣀⡀⠀⠀⠀⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀
⠉⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠈⠁⠒⠒⠀⠃⠈⠃⠂⠙⠃⠑⠉⠉⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠛⠉⠀⠀⠀⠀⠘⠻⠯⠟⠯⠿⠝⠽⠫⠟⠍⠯⠙⠉⠀⠀⠘⢿⠿⠋⠉⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣾⣿⣶⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠣⠀⠀⠘⠘⠀⠀⠓⠀⠀⠛⠘⠀⠀⠃⠀⠘⠁⠀⠀⠀⠀⠋⠁⠀⠘⠋⠀⠀⠃⠀⠘⠘⠀⠀⠃⠀⠀⠛⠀⠀⠘⠂⠀⠈⠃⠀⠸⣿⣿⣬⣿⡇⠀⠀⠛⠀⠀⠘⠃⠀⠘⠙⠀⠀⠡⠃⠀⠈⠋⠀⠀⠛⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
`;
    }

    displayDiv.style.position = 'fixed';
    displayDiv.style.top = '50%';
    displayDiv.style.left = '50%';
    displayDiv.style.transform = 'translate(-50%, -50%)';
    displayDiv.style.fontSize = '0.9vw';
    displayDiv.style.fontFamily = 'Arial, sans-serif';
    displayDiv.style.color = 'black';
    displayDiv.style.textAlign = 'center';
    document.body.appendChild(displayDiv);

    throw new Error(`This script cannot be executed on sites other than Google.
Please run it on Google.`);
}

const loadingAnimImages = [
    'https://videotourl.com/images/1778339768662-71b8eb2a-0239-4b97-bbab-321cba2fa134.jpeg',
    'https://videotourl.com/images/1778339797062-7b675e96-49f1-44d1-b46e-6db2693b17b9.jpeg'
];

const loadingDiv = document.createElement('div');
Object.assign(loadingDiv.style,{
    position:'fixed',
    inset:'0',
    backgroundSize:'cover',
    backgroundPosition:'center',
    zIndex:'100000',
    transition:'opacity 0.5s',
});
document.body.appendChild(loadingDiv);

const overlayDiv = document.createElement('div');
Object.assign(overlayDiv.style,{
    position:'fixed',
    inset:'0',
    zIndex:'999999',
    background:'transparent'
});
document.body.appendChild(overlayDiv);

let loadingIndex = 0;
const loadingInterval = setInterval(()=>{
    loadingDiv.style.backgroundImage = `url(${loadingAnimImages[loadingIndex]})`;
    loadingIndex = (loadingIndex + 1) % loadingAnimImages.length;
},200);

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 items2 = [
    { name: '𝙆𝙖𝙜𝙪𝙮𝙖', url: 'https://videotourl.com/videos/1773717493994-b09f2b78-b985-43b1-9177-edfeaaa8a47e.mp4', img: 'https://videotourl.com/images/1778345090291-0611c922-f244-470a-8b99-e50392bf4f4c.jpeg' },
    { name: '𝙄𝙧𝙤𝙝𝙖', url: 'https://videotourl.com/videos/1773791422943-4a8eab49-9ac2-485d-bd81-d404b82ee276.mp4', img: 'https://videotourl.com/images/1778345149261-8101d72e-ae88-4d07-9aef-6b53c0d63e1d.jpeg' },
    { name: '𝙔𝙖𝙘𝙝𝙞𝙮𝙤', url: 'https://videotourl.com/videos/1773792863215-365546ef-ea04-4606-8f0f-07998be801d1.mp4', img: 'https://videotourl.com/images/1778345349092-808a0523-444e-45be-827d-0b4ad5b4d97b.jpeg' },
    { name: '𝙆𝙖𝙜𝙪𝙮𝙖/𝙄𝙧𝙤𝙝𝙖/𝙔𝙖𝙘𝙝𝙞𝙮𝙤', url: 'https://videotourl.com/videos/1773716199625-4f11df25-c6cb-44f0-838d-c8264501f3d7.mp4', img: 'https://videotourl.com/images/1778345371636-faa3f1c0-1bb4-4156-b871-31a324e7e5db.jpeg' }
];

const cardSets = [items, items2];
const currents = [0,0];
let currentSetIndex = 0;
let cards = [];

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 () => {
    await Promise.all(loadingAnimImages.map(src=>new Promise(res=>{
        const img = new Image(); img.src=src; img.onload=res; img.onerror=res;
    })));
    const urls = [...items.map(i => i.img), ...items2.map(i => i.img), bgImages.portrait, bgImages.landscape];
    const mp3Urls = mp3s.map(m => m.src);
    await Promise.all([
        ...urls.map(src => new Promise(res=>{
            const img = new Image(); img.src=src; img.onload=res; img.onerror=res;
        })),
        ...mp3Urls.map(src => new Promise(res=>{
            const audio = new Audio(); audio.src=src; audio.preload='auto'; audio.oncanplaythrough=res; audio.onerror=res;
        }))
    ]);
    clearInterval(loadingInterval);
    loadingDiv.style.opacity = '0';
    setTimeout(()=>loadingDiv.remove(),500);
    overlayDiv.remove();
})();

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);

function createCards(setIndex, initialTop='50%') {
    cards.forEach(c=>c.remove());
    const items = cardSets[setIndex];
    const current = currents[setIndex];
    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})`,
            top:initialTop, left:'50%', transform:'translate(-50%,-50%) scale(0)', opacity:'0', transition:'all 0.5s ease'
        });
        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===currents[currentSetIndex]) window.open(item.url,'_blank');
            else if(index===currents[currentSetIndex]+1) nextCard();
            else if(index===currents[currentSetIndex]-1) prevCard();
        };
        wrapper.appendChild(card);
        return card;
    });
    requestAnimationFrame(updateCards);
}

function updateCards(){
    const current = currents[currentSetIndex];
    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.transform='translate(-50%,-50%) scale(1)'; card.style.zIndex='100'; card.style.opacity='1'; }
        else if(offset===1){ card.style.left='60%'; 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.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(wrapper.style.display!=='none'){ bgLayer.style.backgroundImage=`url(${bgImages[getOrientation()]})`; bgLayer.style.opacity='1'; }
}

function nextCard(){ if(currents[currentSetIndex]<cards.length-1){ currents[currentSetIndex]++; updateCards(); } }
function prevCard(){ if(currents[currentSetIndex]>0){ currents[currentSetIndex]--; updateCards(); } }

function switchSet(direction){
    if(currentSetIndex===0 && direction==='down'){
        const oldCards = cards.slice();
        currentSetIndex = 1;
        createCards(currentSetIndex, '100%');
        const newCards = cards;
        requestAnimationFrame(()=>{
            oldCards.forEach(c=>{ c.style.top='-100%'; c.style.opacity='0'; });
            newCards.forEach(c=>{ c.style.top='50%'; c.style.opacity='1'; });
        });
    } else if(currentSetIndex===1 && direction==='up'){
        const oldCards = cards.slice();
        currentSetIndex = 0;
        createCards(currentSetIndex, '-100%');
        const newCards = cards;
        requestAnimationFrame(()=>{
            oldCards.forEach(c=>{ c.style.top='100%'; c.style.opacity='0'; });
            newCards.forEach(c=>{ c.style.top='50%'; c.style.opacity='1'; });
        });
    }
}

let startX=0, startY=0;
wrapper.addEventListener('touchstart',e=>{ startX=e.touches[0].clientX; startY=e.touches[0].clientY; });
wrapper.addEventListener('touchend',e=>{
    const dx = e.changedTouches[0].clientX - startX;
    const dy = e.changedTouches[0].clientY - startY;
    if(Math.abs(dy) > Math.abs(dx) && dy < -50) switchSet('down');
    else if(Math.abs(dy) > Math.abs(dx) && dy > 50) switchSet('up');
    else if(dx < -50) nextCard();
    else if(dx > 50) prevCard();
});

createCards(currentSetIndex);

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':'';
    updateCards();
}

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()]})`; });

console.warn("Video discretion");

console.log(`
=>https://youtu.be/g6aiiTcMcsg?si=iONVoYQ2HyDyt-oP
Edit by / nimedit2

=>https://youtu.be/BvjevwA6PRA?si=jKFzpmtULx6DakFH
Edit by / nimedit2

=>https://youtu.be/58i1GhS0Zdk?si=GCM7DahyFGlE8sl6
Edit by / nimedit2

=>https://youtu.be/6_hb-V6uOEg?si=TM6uJy7Ph2P7wtW5
Edit by / naruedits16   and   / inaspx   and   / amonorei   and   / hakoi.ae
`);

})();