☰

Drawaria Android Phone Mod

Un teléfono celular Android interactivo, animado y detallado dentro de Drawaria.online.

// ==UserScript==
// @name         Drawaria Android Phone Mod
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Un teléfono celular Android interactivo, animado y detallado dentro de Drawaria.online.
// @author       YouTubeDrawaria
// @match        https://drawaria.online/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // --- Contexto de Audio para generar sonidos ---
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();

    // Función para reproducir un tono simple
    function playTone(frequency, duration, type = 'sine', volume = 0.1) {
        if (!audioContext) return;
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();

        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        oscillator.type = type;
        oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
        gainNode.gain.setValueAtTime(volume, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration);

        oscillator.start();
        oscillator.stop(audioContext.currentTime + duration);
    }

    // --- Custom Sound Melody ---
    function playMelody() {
        if (!audioContext) return;
        const melodyNotes = [
            { freq: 523.25, duration: 0.15, type: 'sine' }, // C5
            { freq: 587.33, duration: 0.15, type: 'sine' }, // D5
            { freq: 659.25, duration: 0.15, type: 'sine' }, // E5
            { freq: 587.33, duration: 0.15, type: 'sine' }, // D5
            { freq: 523.25, duration: 0.2, type: 'sine' },  // C5
            { freq: null, duration: 0.1, type: 'sine' },    // Pause
            { freq: 493.88, duration: 0.15, type: 'sine' }, // B4
            { freq: 587.33, duration: 0.15, type: 'sine' }, // D5
            { freq: 659.25, duration: 0.2, type: 'sine' }  // E5
        ];
        const baseVolume = volumeControl.value * 0.3; // Adjust base volume for melody

        melodyNotes.forEach((note, index) => {
            if (note.freq !== null) {
                setTimeout(() => {
                    playTone(note.freq, note.duration, note.type, baseVolume);
                }, index * 150); // Stagger the notes
            }
        });
    }


    // --- Inyectar Estilos CSS ---
    const style = document.createElement('style');
    style.innerHTML = `
        /* Animaciones */
        @keyframes glowing {
            0% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(0, 255, 255, 0.5); }
            50% { box-shadow: 0 0 15px rgba(0, 255, 255, 1), 0 0 25px rgba(0, 255, 255, 0.8); }
            100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(0, 255, 255, 0.5); }
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes incomingCallAnimation {
            0% { transform: scale(1); opacity: 1; }
            25% { transform: scale(1.02); opacity: 0.95; }
            50% { transform: scale(1); opacity: 1; }
            75% { transform: scale(1.02); opacity: 0.95; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes particleFlow {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
        }

        @keyframes slideIn {
            0% { transform: translateX(100%); opacity: 0; }
            100% { transform: translateX(0); opacity: 1; }
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Contenedor principal del teléfono */
        #omni-phone-container {
            position: fixed;
            top: 20px; /* Initial position */
            left: calc(100% - 320px); /* Initial position, adjust as needed */
            width: 300px;
            height: 600px;
            background: linear-gradient(to bottom right, #2c2c2c, #1a1a1a);
            border-radius: 40px;
            box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(255,255,255,0.1);
            border: 8px solid #000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 10000; /* High z-index to stay on top */
            transform-origin: bottom right;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
            transform: rotateY(0deg) rotateX(0deg) scale(1);
            perspective: 1000px;
            cursor: grab; /* Indicate that it's draggable */
        }

        #omni-phone-container.dragging,
        #omni-phone-container.dragging * {
             cursor: grabbing !important; /* Change cursor while dragging */
             user-select: none; /* Prevent text selection during drag */
             -webkit-user-select: none;
             -moz-user-select: none;
             -ms-user-select: none;
        }

        /* Estado minimizado del teléfono */
        #omni-phone-container.minimized {
            transform: scale(0.1) translate(1300%, 1300%);
            opacity: 0;
            pointer-events: none;
        }

        /* Encabezado del teléfono (área de la muesca) */
        #omni-phone-header {
            height: 30px;
            background: #000;
            border-top-left-radius: 32px;
            border-top-right-radius: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        #omni-phone-notch {
            width: 100px;
            height: 25px;
            background: #0d0d0d;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-top: 5px;
        }

        #omni-phone-camera {
            width: 8px;
            height: 8px;
            background-color: #333;
            border-radius: 50%;
            border: 1px solid #444;
            box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
        }

        #omni-phone-speaker {
            width: 30px;
            height: 3px;
            background-color: #333;
            border-radius: 2px;
        }

        /* Pantalla del teléfono */
        #omni-phone-screen {
            flex-grow: 1;
            background: linear-gradient(to top, #1a1a1a, #0a0a0a);
            color: #eee;
            font-family: 'Roboto', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
            position: relative;
            overflow: hidden;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .screen-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            animation: slideIn 0.5s ease-out;
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px;
            box-sizing: border-box;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            pointer-events: none; /* Initially not interactive */
            z-index: 1; /* Lower z-index than active */
        }

        .screen-content.active {
            opacity: 1;
            position: relative;
            pointer-events: auto; /* Make active screen interactive */
            z-index: 5; /* Higher z-index for active screen */
        }

        /* Pantalla de Inicio (Home Screen) */
        #omni-phone-home-screen {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100%" height="100%" fill="%231a1a1a"/><circle cx="20" cy="20" r="4" fill="%23333"/><circle cx="50" cy="50" r="5" fill="%23555"/><circle cx="80" cy="80" r="6" fill="%23777"/></svg>') repeat;
            background-size: 15px 15px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            padding: 20px;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        .omni-app-icon {
            width: 60px;
            height: 60px;
            background-color: #333;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #fff;
            cursor: pointer;
            transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
            box-shadow: 0 4px 8px rgba(0,0,0,0.5);
            position: relative;
            z-index: 10; /* Ensure icons are clickable */
        }

        .omni-app-icon:hover {
            transform: scale(1.05);
            background-color: #444;
        }

        .omni-app-icon span {
            font-size: 12px;
            margin-top: 5px;
        }

        /* Formas de los iconos de aplicaciones usando CSS puro */
        .omni-app-icon.phone::before { content: ''; width: 25px; height: 25px; border: 2px solid #fff; border-radius: 3px; transform: rotate(-45deg); box-sizing: border-box; border-top-color: transparent; border-left-color: transparent; position: absolute; top: 15px; left: 17px; }
        .omni-app-icon.phone::after { content: ''; width: 3px; height: 10px; background-color: #fff; position: absolute; top: 25px; left: 28px; transform: rotate(-45deg); }
        .omni-app-icon.messages::before { content: ''; width: 30px; height: 20px; border: 2px solid #fff; border-radius: 5px; position: absolute; top: 15px; left: 15px; }
        .omni-app-icon.messages::after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #fff; position: absolute; top: 35px; left: 22px; }
        .omni-app-icon.settings::before { content: ''; width: 25px; height: 25px; border: 2px solid #fff; border-radius: 50%; position: absolute; top: 15px; left: 17px; animation: rotate 5s linear infinite; }
        .omni-app-icon.settings::after { content: ''; width: 4px; height: 12px; background-color: #fff; position: absolute; top: 19px; left: 27px; transform-origin: bottom; transform: rotate(45deg); }

        /* Pantalla de llamada */
        #omni-phone-call-screen, #omni-phone-message-screen {
            background-color: rgba(0,0,0,0.7);
            color: #eee;
            padding: 20px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 90%;
            max-height: 90%;
            box-sizing: border-box;
        }

        #call-status {
            font-size: 24px;
            margin-bottom: 20px;
            animation: incomingCallAnimation 1s infinite alternate;
        }

        #call-controls button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            margin: 0 10px;
            font-size: 30px;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            z-index: 10; /* Ensure buttons are clickable */
        }

        #call-controls button.answer { background-color: #4CAF50; }
        #call-controls button.answer:hover { background-color: #45a049; transform: scale(1.1); }
        #call-controls button.decline { background-color: #F44336; }
        #call-controls button.decline:hover { background-color: #d32f2f; transform: scale(1.1); }

        /* Pantalla de mensajes */
        #messages-list {
            width: 100%;
            height: 200px; /* Fixed height for the message list */
            background-color: rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 10px;
            overflow-y: auto; /* Add scroll for messages */
            margin-bottom: 10px;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 5px;
            box-sizing: border-box; /* Include padding in height calculation */
        }

        .message-bubble {
            background-color: #007bff;
            color: white;
            padding: 8px 12px;
            border-radius: 15px;
            max-width: 80%;
            word-wrap: break-word;
            align-self: flex-start;
        }

        .message-bubble.sent {
            align-self: flex-end;
            background-color: #28a745;
        }

        #message-input-container {
            display: flex;
            width: 100%;
            margin-top: 10px; /* Add some space above the input */
        }

        #message-input {
            flex-grow: 1;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #555;
            background-color: #333;
            color: #eee;
            margin-right: 5px;
        }

        /* Replaced the send button with a sound button */
        #omni-message-sound-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            z-index: 10; /* Ensure button is clickable */
            font-size: 20px; /* Adjust font size for icon */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px; /* Fixed width for consistency */
        }
        #omni-message-sound-btn:hover { background-color: #0056b3; }

        /* Pie de página (botones de navegación) */
        #omni-phone-footer {
            height: 50px;
            background: linear-gradient(to top, #0d0d0d, #1a1a1a);
            border-bottom-left-radius: 32px;
            border-bottom-right-radius: 32px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 10px;
            z-index: 2;
        }

        .omni-nav-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #aaa;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
            position: relative;
            z-index: 10; /* Ensure buttons are clickable */
        }
        .omni-nav-button:hover {
            background-color: #555;
            transform: scale(1.1);
        }

        /* Iconos de botones de navegación (creados con CSS) */
        .omni-nav-button.home-btn::before { content: ''; width: 25px; height: 25px; border: 2px solid #aaa; border-radius: 50%; }
        .omni-nav-button.back-btn::before { content: ''; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #aaa; transform: translateX(-2px); }
        .omni-nav-button.recent-btn::before { content: ''; width: 18px; height: 18px; border: 2px solid #aaa; border-radius: 3px; }

        /* Botón para alternar visibilidad del teléfono */
        .omni-toggle-button {
            position: fixed;
            bottom: 20px;
            right: 330px;
            width: 50px;
            height: 50px;
            background-color: #4CAF50;
            color: white;
            border-radius: 50%;
            border: none;
            font-size: 24px;
            cursor: pointer;
            z-index: 10001; /* Even higher z-index */
            box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
            animation: glowing 1.5s infinite alternate;
        }

        /* Partículas en pantalla */
        .omni-particle {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            animation: particleFlow 2s forwards ease-out;
            pointer-events: none;
            opacity: 0;
        }
    `;
    document.head.appendChild(style);

    // --- Estructura HTML para el Teléfono ---
    const phoneContainer = document.createElement('div');
    phoneContainer.id = 'omni-phone-container';
    phoneContainer.innerHTML = `
        <div id="omni-phone-header">
            <div id="omni-phone-notch">
                <div id="omni-phone-camera"></div>
                <div id="omni-phone-speaker"></div>
                <div id="omni-phone-camera"></div>
            </div>
        </div>
        <div id="omni-phone-screen">
            <div id="omni-phone-home-screen" class="screen-content active">
                <div class="omni-app-icon phone" data-app="call"><span>Llamar</span></div>
                <div class="omni-app-icon messages" data-app="messages"><span>Mensajes</span></div>
                <div class="omni-app-icon settings" data-app="settings"><span>Ajustes</span></div>
            </div>
            <div id="omni-phone-call-screen" class="screen-content">
                <p id="call-status">Llamada entrante de:</p>
                <h2 id="caller-name">Número Desconocido</h2>
                <div id="call-controls">
                    <button class="answer" data-action="answer">📞</button>
                    <button class="decline" data-action="decline">❌</button>
                </div>
            </div>
            <div id="omni-phone-message-screen" class="screen-content">
                <h3>Mensajes</h3>
                <div id="messages-list">
                    <!-- Messages will be loaded here -->
                </div>
                <div id="message-input-container">
                    <input type="text" id="message-input" placeholder="Escribe un mensaje...">
                    <!-- Replaced send button with sound button -->
                    <button id="omni-message-sound-btn" data-action="playMelody">🎵</button>
                </div>
            </div>
            <div id="omni-phone-settings-screen" class="screen-content">
                <h3>Ajustes</h3>
                <p>Volumen: <input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.1"></p>
                <p>Brillo: <input type="range" id="brightness-control" min="0" max="1" step="0.05" value="1"></p>
                <button id="easter-egg-btn" style="background-color: #673AB7; color: white; padding: 10px; border: none; border-radius: 5px; margin-top: 20px; cursor: pointer;">Activar Sorpresa 🎉</button>
            </div>
        </div>
        <div id="omni-phone-footer">
            <div class="omni-nav-button back-btn" data-nav="back"></div>
            <div class="omni-nav-button home-btn" data-nav="home"></div>
            <div class="omni-nav-button recent-btn" data-nav="recent"></div>
        </div>
    `;
    document.body.appendChild(phoneContainer);

    // Botón para mostrar/ocultar el teléfono
    const toggleButton = document.createElement('button');
    toggleButton.id = 'omni-toggle-button';
    toggleButton.innerHTML = '📱';
    document.body.appendChild(toggleButton);

    // --- Lógica JavaScript ---
    let currentScreen = 'home';
    const screenContents = document.querySelectorAll('.screen-content');
    const screenElement = document.getElementById('omni-phone-screen');
    const messagesList = document.getElementById('messages-list');
    const messageInput = document.getElementById('message-input');
    const soundBtn = document.getElementById('omni-message-sound-btn'); // Get the new sound button
    const volumeControl = document.getElementById('volume-control');
    const brightnessControl = document.getElementById('brightness-control');
    const easterEggBtn = document.getElementById('easter-egg-btn');

    // --- Draggable Functionality ---
    let isDragging = false;
    let offsetX, offsetY;

    phoneContainer.addEventListener('mousedown', (e) => {
        if (e.target === phoneContainer || e.target.closest('#omni-phone-header')) {
            isDragging = true;
            phoneContainer.classList.add('dragging');

            offsetX = e.clientX - phoneContainer.getBoundingClientRect().left;
            offsetY = e.clientY - phoneContainer.getBoundingClientRect().top;

            e.preventDefault();
        }
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;

        phoneContainer.style.left = `${e.clientX - offsetX}px`;
        phoneContainer.style.top = `${e.clientY - offsetY}px`;
        phoneContainer.style.transition = 'none';
    });

    document.addEventListener('mouseup', () => {
        if (isDragging) {
            isDragging = false;
            phoneContainer.classList.remove('dragging');
            phoneContainer.style.transition = 'transform 0.3s ease-in-out, opacity 0.3s ease-in-out';
        }
    });

    phoneContainer.ondragstart = function() { return false; };

    // Muestra la pantalla especificada
    function showScreen(screenId) {
        screenContents.forEach(screen => {
            screen.classList.remove('active');
        });
        const nextScreen = document.getElementById(`omni-phone-${screenId}-screen`);
        if(nextScreen) {
            nextScreen.classList.add('active');
            currentScreen = screenId;
        } else {
            console.error(`Screen with ID: omni-phone-${screenId}-screen not found.`);
            showScreen('home');
        }
        playTone(660, 0.08, 'sine', 0.05);
    }

    // Ensure the home screen is active on load
    showScreen('home');

    // Handle clicks on app icons
    document.querySelectorAll('.omni-app-icon').forEach(icon => {
        icon.addEventListener('click', function() {
            const app = this.dataset.app;
            if (app === 'call') {
                triggerIncomingCall();
            } else if (app === 'messages') {
                showScreen('messages');
                if (messagesList.children.length === 0) {
                    addMessage("¡Bienvenido a tus mensajes!", "received");
                }
            }
             else {
                showScreen(app);
            }
        });
    });

    // Handle clicks on navigation buttons
    document.querySelectorAll('.omni-nav-button').forEach(button => {
        button.addEventListener('click', function() {
            const nav = this.dataset.nav;
            if (nav === 'home') {
                showScreen('home');
            } else if (nav === 'back') {
                if (currentScreen !== 'home') {
                    showScreen('home');
                }
            } else if (nav === 'recent') {
                showScreen('home');
            }
        });
    });

    // Toggle phone visibility
    toggleButton.addEventListener('click', () => {
        phoneContainer.classList.toggle('minimized');
        toggleButton.textContent = phoneContainer.classList.contains('minimized') ? '▶' : '📱';
        playTone(700, 0.1, 'square', 0.08);
    });

    // --- Simulated Call Logic ---
    let callTimeout;
    let ringtoneOscillator;

    function triggerIncomingCall() {
        showScreen('call');
        const callerName = "Número Desconocido";
        document.getElementById('caller-name').textContent = callerName;
        document.getElementById('call-status').textContent = "Llamada entrante de:";
        playRingtone();

        callTimeout = setTimeout(() => {
            document.getElementById('call-status').textContent = "Llamada perdida.";
            stopRingtone();
            setTimeout(() => showScreen('home'), 2000);
        }, 15000);
    }

    function playRingtone() {
        if (ringtoneOscillator) stopRingtone();

        ringtoneOscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        ringtoneOscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);

        ringtoneOscillator.type = 'triangle';
        gainNode.gain.setValueAtTime(volumeControl.value * 0.5, audioContext.currentTime);

        let time = audioContext.currentTime;
        ringtoneOscillator.frequency.setValueAtTime(800, time);
        gainNode.gain.linearRampToValueAtTime(0.01, time + 0.5);
        time += 0.5;
        ringtoneOscillator.frequency.setValueAtTime(600, time);
        gainNode.gain.linearRampToValueAtTime(volumeControl.value * 0.5, time + 0.5);
        time += 0.5;

        setInterval(() => {
            let loopTime = audioContext.currentTime;
            ringtoneOscillator.frequency.setValueAtTime(800, loopTime);
            gainNode.gain.setValueAtTime(volumeControl.value * 0.5, loopTime);
            gainNode.gain.linearRampToValueAtTime(0.01, loopTime + 0.5);
            loopTime += 0.5;
            ringtoneOscillator.frequency.setValueAtTime(600, loopTime);
            gainNode.gain.linearRampToValueAtTime(volumeControl.value * 0.5, loopTime + 0.5);
        }, 1000);

        ringtoneOscillator.start();
    }

    function stopRingtone() {
        if (ringtoneOscillator) {
            ringtoneOscillator.stop();
            ringtoneOscillator.disconnect();
            ringtoneOscillator = null;
        }
        if (callTimeout) {
            clearTimeout(callTimeout);
            callTimeout = null;
        }
    }

    document.querySelector('#call-controls .answer').addEventListener('click', () => {
        stopRingtone();
        document.getElementById('call-status').textContent = "Llamada en curso...";
        playTone(1000, 0.2, 'sine', 0.1);
        setTimeout(() => showScreen('home'), 3000);
    });

    document.querySelector('#call-controls .decline').addEventListener('click', () => {
        stopRingtone();
        document.getElementById('call-status').textContent = "Llamada finalizada.";
        playTone(200, 0.3, 'sawtooth', 0.1);
        setTimeout(() => showScreen('home'), 1000);
    });

    // --- Message Logic ---
    function addMessage(text, type = 'received') {
        const bubble = document.createElement('div');
        bubble.classList.add('message-bubble', type);
        bubble.textContent = text;
        messagesList.appendChild(bubble);
        messagesList.scrollTop = messagesList.scrollHeight;
    }

    // This function will now trigger the melody instead of sending a message
    function handleSoundButton() {
        playMelody();
    }

    // Event listener for the new sound button
    soundBtn.addEventListener('click', handleSoundButton);

    // --- Settings Logic ---
    volumeControl.addEventListener('input', (e) => {
        playTone(500, 0.1, 'sine', e.target.value * 0.8);
    });

    brightnessControl.addEventListener('input', (e) => {
        screenElement.style.filter = `brightness(${e.target.value})`;
    });

    // --- Particle Effects ---
    function createParticle(event) {
        const particle = document.createElement('div');
        particle.classList.add('omni-particle');
        screenElement.appendChild(particle);

        const rect = screenElement.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        particle.style.left = `${x}px`;
        particle.style.top = `${y}px`;
        particle.style.width = `${Math.random() * 5 + 3}px`;
        particle.style.height = particle.style.width;
        particle.style.opacity = Math.random() * 0.5 + 0.5;

        const targetX = (Math.random() - 0.5) * 100 + x;
        const targetY = (Math.random() - 0.5) * 100 + y;

        particle.style.setProperty('--x', `${targetX - x}px`);
        particle.style.setProperty('--y', `${targetY - y}px`);

        setTimeout(() => {
            particle.remove();
        }, 2000);
    }

    screenElement.addEventListener('mousemove', (e) => {
        if (Math.random() < 0.1) {
            createParticle(e);
        }
    });

    // --- Easter Egg ---
    let surpriseActive = false;
    let surpriseInterval;

    easterEggBtn.addEventListener('click', () => {
        surpriseActive = !surpriseActive;
        if (surpriseActive) {
            easterEggBtn.textContent = 'Desactivar Sorpresa 😔';
            startSurpriseEffect();
            playTone(1500, 0.5, 'sawtooth', 0.2);
        } else {
            easterEggBtn.textContent = 'Activar Sorpresa 🎉';
            stopSurpriseEffect();
            playTone(300, 0.5, 'square', 0.2);
        }
    });

    function startSurpriseEffect() {
        surpriseInterval = setInterval(() => {
            const colors = ['#ff00ff', '#00ffff', '#ffff00', '#ff8800', '#8800ff'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            phoneContainer.style.boxShadow = `0 0 30px ${randomColor}, inset 0 0 15px rgba(255,255,255,0.1)`;
            phoneContainer.style.background = `linear-gradient(to bottom right, ${randomColor}cc, ${randomColor}88)`;

            const appIcons = document.querySelectorAll('.omni-app-icon');
            if (appIcons.length > 0) {
                const randomIcon = appIcons[Math.floor(Math.random() * appIcons.length)];
                randomIcon.style.animation = 'glowing 1s infinite alternate';
                setTimeout(() => {
                    randomIcon.style.animation = 'none';
                }, 800);
            }
        }, 500);
    }

    function stopSurpriseEffect() {
        clearInterval(surpriseInterval);
        phoneContainer.style.boxShadow = '0 0 30px rgba(0,0,0,0.8), inset 0 0 15px rgba(255,255,255,0.1)';
        phoneContainer.style.background = 'linear-gradient(to bottom right, #2c2c2c, #1a1a1a)';
        document.querySelectorAll('.omni-app-icon').forEach(icon => {
            icon.style.animation = 'none';
        });
    }

    // --- Pseudo-3D Effect (Tilt with mouse) ---
    phoneContainer.addEventListener('mousemove', (e) => {
        const rect = phoneContainer.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;

        const rotateX = (e.clientY - centerY) / rect.height * -10;
        const rotateY = (e.clientX - centerX) / rect.width * 10;

        phoneContainer.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1)`;
    });

    phoneContainer.addEventListener('mouseleave', () => {
        phoneContainer.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)`;
    });

    // Initial brightness setting
    screenElement.style.filter = `brightness(${brightnessControl.value})`;

    console.log("Drawaria OmniPhone script loaded successfully!");
})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址