HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

250x256

3.2 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IA Anime Interactiva</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            display: flex;
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            gap: 20px;
        }

        /* Estilo del Personaje */
        .character-box {
            text-align: center;
        }

        #anime-char {
            width: 250px;
            height: auto;
            transition: transform 0.3s ease;
            border-bottom: 5px solid #6c5ce7;
        }

        /* Animación de saludo */
        .wave-animation {
            animation: wave 0.5s ease-in-out;
        }

        @keyframes wave {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(10deg) scale(1.05); }
            100% { transform: rotate(0deg); }
        }

        /* Estilo del Chat */
        .chat-box {
            width: 300px;
            display: flex;
            flex-direction: column;
        }

        #display {
            height: 200px;
            border: 1px solid #ddd;
            overflow-y: auto;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 8px;
            background: #fafafa;
        }

        .input-area {
            display: flex;
            gap: 5px;
        }

        input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            padding: 10px;
            background: #6c5ce7;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="character-box">
        <img id="anime-char" src="https://img.freepik.com/vector-premium/estilo-anime-personaje-masculino-guapo_111306-121.jpg" alt="Anime Character">
        <p><strong id="statusText">Esperando...</strong></p>
    </div>

    <div class="chat-box">
        <div id="display"></div>
        <div class="input-area">
            <input type="text" id="userInput" placeholder="Escribe 'hola'...">
            <button onclick="sendMessage()">Enviar</button>
        </div>
    </div>
</div>

<script>
    function sendMessage() {
        const input = document.getElementById('userInput');
        const display = document.getElementById('display');
        const character = document.getElementById('anime-char');
        const statusText = document.getElementById('statusText');
        
        let message = input.value.trim().toLowerCase();
        
        if (message === "") return;

        // Mostrar mensaje del usuario
        display.innerHTML += `<div><strong>Tú:</strong> ${input.value}</div>`;

        // Lógica de respuesta de la IA
        if (message.includes("hola")) {
            // Saludo de la IA
            setTimeout(() => {
                display.innerHTML += `<div><strong>IA:</strong> ¡Hola! ¿Cómo estás? *mueve la mano*</div>`;
                display.scrollTop = display.scrollHeight;
                
                // Activar animación de saludo
                character.classList.add('wave-animation');
                statusText.innerText = "¡Saludando!";
                
                // Quitar clase después de la animación
                setTimeout(() => {
                    character.classList.remove('wave-animation');
                    statusText.innerText = "En línea";
                }, 500);
                
            }, 500);
        } else {
            setTimeout(() => {
                display.innerHTML += `<div><strong>IA:</strong> Solo entiendo cuando me dices 'hola'.</div>`;
                display.scrollTop = display.scrollHeight;
            }, 500);
        }

        input.value = "";
    }

    // Permitir enviar con la tecla Enter
    document.getElementById('userInput').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') sendMessage();
    });
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

5KB

Transfer Size

5KB

Content Size

64.0ms

Dom Content Loaded

124.0ms

First Paint

1,105.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests