<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Enhanced Bouncing Emoji</title>

<style>
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    overflow: hidden;
    transition: background 2s ease;
}

.info {
    position: relative;
    margin: 30px;
    padding: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2c3e50;
    border: 2px solid #2c3e50;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
    backdrop-filter: blur(5px);
}

.info .title {
    margin-bottom: 15px;
    font-size: 36px;
    font-weight: bold;
    background: linear-gradient(45deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.info .desc {
    font-size: 18px;
    line-height: 1.6;
}

.controls {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.control-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: #3498db;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.speed-control {
    width: 150px;
    margin: 10px 0;
}
</style>

<script>
"use strict";
(function(){
    let animationSpeed = 1;
    let isRainbowMode = false;
    let backgroundIndex = 0;

    const backgrounds = [
        'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)',
        'linear-gradient(45deg, #a8edea 0%, #fed6e3 100%)',
        'linear-gradient(45deg, #d299c2 0%, #fef9d7 100%)',
        'linear-gradient(45deg, #89f7fe 0%, #66a6ff 100%)'
    ];

    function $ce(tagName){
        return document.createElement(tagName);
    }

    function getRandomInt(min,max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }

    function getRandomColor() {
        return `hsl(${Math.random() * 360}, 80%, 60%)`;
    }

    function appendStyle(style){
        const el=$ce("style");
        el.type="text/css";
        if(el.styleSheet){
            el.styleSheet.cssText=style;
        }else{
            el.appendChild(document.createTextNode(style));
        }
        document.getElementsByTagName("head")[0].appendChild(el);
        return el;
    }

    function onEnd(el,callback,ename){
        const func=function(e){
            if(el==e.srcElement){
                el.removeEventListener(ename,func);
                if(callback){callback(e);}
            }
        };
        el.addEventListener(ename,func);
    }

    function onAnimationEnd(el,callback){
        onEnd(el,callback,"animationend");
    }

    function insertEmoji(px){
        const style = `
#${px.id}.ctower {
    position: absolute;
    left: 0;
    top: 0;
    width: ${px.size}em;
    height: 100%;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.3));
}
#${px.id}.ctower .cbox {
    position: relative;
    width: 100%;
    height: ${px.size}em;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
}
#${px.id}.ctower .char {
    display: inline-block;
    font-size: ${px.size}em;
    line-height: 1.1;
    ${isRainbowMode ? 'animation: rainbow 2s linear infinite;' : ''}
}
#${px.id}.ctower {
    animation: kf-ctower-${px.id} ${px.dura/animationSpeed}s linear forwards;
}
@keyframes kf-ctower-${px.id} {
    0% {
        left: 0%;
        transform: translate(-${100+px.wk}%);
    }
    100% {
        left: 100%;
        transform: translate(${px.wk}%);
    }
}
#${px.id}.ctower .cbox {
    animation: kf-cbox-${px.id} ${px.dura/animationSpeed}s forwards;
}
@keyframes kf-cbox-${px.id} {
    0% { top: ${100-20*px.hk}%; animation-timing-function: ease-in; }
    15% { top: ${100-0*px.hk}%; animation-timing-function: ease-out; }
    30% { top: ${100-15*px.hk}%; animation-timing-function: ease-in; }
    45% { top: ${100-0*px.hk}%; animation-timing-function: ease-out; }
    60% { top: ${100-10*px.hk}%; animation-timing-function: ease-in; }
    75% { top: ${100-0*px.hk}%; animation-timing-function: ease-out; }
    90% { top: ${100-7*px.hk}%; animation-timing-function: ease-in; }
    100% { top: ${100-0*px.hk}%; }
}
#${px.id}.ctower .char {
    animation: kf-char-${px.id} ${px.spin/animationSpeed}s linear infinite;
}
@keyframes kf-char-${px.id} {
    0% { transform: rotateZ(0); }
    100% { transform: rotateZ(360deg); }
}
@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}`;

        const el_style = appendStyle(style);
        const el_char = $ce("div");
        el_char.className = "char";
        el_char.innerHTML = px.char;
        
        const el_cbox = $ce("div");
        el_cbox.className = "cbox";
        el_cbox.appendChild(el_char);
        
        const el_ctower = $ce("div");
        el_ctower.id = px.id;
        el_ctower.className = "ctower";
        el_ctower.appendChild(el_cbox);
        
        onAnimationEnd(el_ctower, function(){
            el_ctower.remove();
            el_style.remove();
        });
        
        document.body.appendChild(el_ctower);
    }

    const emojix = [
        "😀","😃","😄","😁","😆","😅","😂","🤣","😊","😇",
        "🙂","🙃","😉","😌","😍","😘","😗","😙","😚","😋",
        "🦄","🌈","⭐","✨","🌟","💫","🎈","🎨","🎭","🎪",
        "🎯","🎲","🎮","🎸","🎺","🎻","🎹","🎼","🎧","🎤",
        "🌸","🌺","🌷","🌹","🌻","🌼","🌞","🌝","🌛","🌜",
        "💝","💖","💗","💓","💞","💕","💟","❣️","💔","❤️"
    ];

    let idx = 0;
    const timer_id = setInterval(function(){
        if(document.querySelectorAll(".ctower").length < 15){
            idx++;
            const id = "id"+(10000+idx);
            const px = {
                id,
                char: emojix[getRandomInt(0,emojix.length-1)],
                size: getRandomInt(3,8),
                dura: getRandomInt(4,8),
                spin: getRandomInt(0.8,3),
                wk: getRandomInt(20,100),
                hk: getRandomInt(2,5)
            };
            insertEmoji(px);
        }
    }, 500);

    // Add controls
    window.addEventListener('DOMContentLoaded', () => {
        const controls = document.createElement('div');
        controls.className = 'controls';
        controls.innerHTML = `
            <button class="control-btn" onclick="this.toggleRainbow()">Toggle Rainbow Mode</button>
            <button class="control-btn" onclick="this.changeBackground()">Change Background</button>
            <div>
                <label for="speed">Animation Speed:</label>
                <input type="range" id="speed" class="speed-control" min="0.5" max="2" step="0.1" value="1">
            </div>
        `;
        document.querySelector('.info').appendChild(controls);

        // Speed control
        const speedControl = document.getElementById('speed');
        speedControl.addEventListener('input', (e) => {
            animationSpeed = e.target.value;
        });
    });

    // Add methods to window for button clicks
    window.toggleRainbow = () => {
        isRainbowMode = !isRainbowMode;
    };

    window.changeBackground = () => {
        backgroundIndex = (backgroundIndex + 1) % backgrounds.length;
        document.body.style.background = backgrounds[backgroundIndex];
    };
})();
</script>
</head>

<body>
<div class="info">
    <div class="title">Enhanced Bouncing Emoji</div>
    <div class="desc">
        An interactive emoji animation with controls for speed, rainbow effects, and background changes.
    </div>
</div>
</body>
</html>