Pregúntale a kevakib ai

Abrir en el editor Publica tu código

Recomendado

3 October 2025

Fragmento de animación de carga de CSS

13 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Chat Bot Interface</title>
    <style>
        :root {
            --primary-bg: linear-gradient(to bottom right, #7e7e7e, #363636, #363636, #363636, #363636);
            --chat-bg: rgba(0, 0, 0, 0.5);
            --text-color: #ffffff;
            --accent-color: #f3f6fd;
            --button-hover: #555555;
            --tag-bg: #1b1b1b;
            --tag-border: #363636;
            --glow-effect: 0 0 10px rgba(255, 255, 255, 0.7);
        }

body {
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

.container_chat_bot {
            display: flex;
            flex-direction: column;
            max-width: 300px;
            width: 100%;
            animation: float 6s ease-in-out infinite;
        }

@keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

.container_chat_bot .container-chat-options {
            position: relative;
            display: flex;
            background: var(--primary-bg);
            border-radius: 16px;
            padding: 1.5px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }

.container_chat_bot .container-chat-options:hover {
            transform: scale(1.02);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
        }

.container_chat_bot .container-chat-options::after {
            position: absolute;
            content: "";
            top: -10px;
            left: -10px;
            background: radial-gradient(
                ellipse at center,
                #ffffff,
                rgba(255, 255, 255, 0.3),
                rgba(255, 255, 255, 0.1),
                rgba(0, 0, 0, 0)
            );
            width: 30px;
            height: 30px;
            filter: blur(1px);
            animation: pulse 2s infinite;
        }

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

.container_chat_bot .container-chat-options .chat {
            display: flex;
            flex-direction: column;
            background-color: var(--chat-bg);
            border-radius: 15px;
            width: 100%;
            overflow: hidden;
            backdrop-filter: blur(5px);
        }

.container_chat_bot .container-chat-options .chat .chat-bot {
            position: relative;
            display: flex;
        }

.container_chat_bot .chat .chat-bot textarea {
            background-color: transparent;
            border-radius: 16px;
            border: none;
            width: 100%;
            height: 60px;
            color: var(--text-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            font-weight: 400;
            padding: 12px;
            resize: none;
            outline: none;
            transition: all 0.3s ease;
        }

.container_chat_bot .chat .chat-bot textarea:focus {
            background-color: rgba(255, 255, 255, 0.1);
        }

.container_chat_bot .chat .chat-bot textarea::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

.container_chat_bot .chat .chat-bot textarea::-webkit-scrollbar-track {
            background: transparent;
        }

.container_chat_bot .chat .chat-bot textarea::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

.container_chat_bot .chat .chat-bot textarea::-webkit-scrollbar-thumb:hover {
            background: #555;
            cursor: pointer;
        }

.container_chat_bot .chat .chat-bot textarea::placeholder {
            color: var(--accent-color);
            opacity: 0.7;
            transition: all 0.3s ease;
        }

.container_chat_bot .chat .chat-bot textarea:focus::placeholder {
            opacity: 0.3;
        }

.container_chat_bot .chat .options {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 10px;
        }

.container_chat_bot .chat .options .btns-add {
            display: flex;
            gap: 8px;
        }

.container_chat_bot .chat .options .btns-add button {
            display: flex;
            color: rgba(255, 255, 255, 0.5);
            background-color: transparent;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 5px;
            border-radius: 50%;
        }

.container_chat_bot .chat .options .btns-add button:hover {
            transform: translateY(-3px) scale(1.1);
            color: var(--text-color);
            background-color: rgba(255, 255, 255, 0.1);
        }

.container_chat_bot .chat .options .btns-add button:active {
            transform: translateY(0) scale(0.95);
        }

.container_chat_bot .chat .options .btn-submit {
            display: flex;
            padding: 2px;
            background-image: linear-gradient(to top, #292929, #555555, #292929);
            border-radius: 50%;
            box-shadow: inset 0 6px 2px -4px rgba(255, 255, 255, 0.5);
            cursor: pointer;
            border: none;
            outline: none;
            transition: all 0.15s ease;
        }

.container_chat_bot .chat .options .btn-submit i {
            width: 30px;
            height: 30px;
            padding: 6px;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            backdrop-filter: blur(3px);
            color: #8b8b8b;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.container_chat_bot .chat .options .btn-submit svg {
            transition: all 0.3s ease;
        }

.container_chat_bot .chat .options .btn-submit:hover svg {
            color: var(--accent-color);
            filter: var(--glow-effect);
        }

.container_chat_bot .chat .options .btn-submit:focus svg {
            color: var(--accent-color);
            filter: var(--glow-effect);
            transform: rotate(45deg);
        }

.container_chat_bot .chat .options .btn-submit:active {
            transform: scale(0.92);
        }

.container_chat_bot .tags {
            padding: 14px 0;
            display: flex;
            color: var(--text-color);
            font-size: 12px;
            gap: 8px;
            flex-wrap: wrap;
        }

.container_chat_bot .tags span {
            padding: 6px 12px;
            background-color: var(--tag-bg);
            border: 1.5px solid var(--tag-border);
            border-radius: 20px;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
        }

.container_chat_bot .tags span:hover {
            background-color: var(--button-hover);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

.container_chat_bot .tags span:active {
            transform: translateY(0);
        }

/* Typing indicator */
        .typing-indicator {
            display: none;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            margin-top: 10px;
            align-self: flex-start;
        }

.typing-indicator span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: var(--accent-color);
            border-radius: 50%;
            margin: 0 2px;
            animation: typing 1.4s infinite ease-in-out;
        }

.typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

.typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }

/* Response bubble */
        .response-bubble {
            display: none;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            padding: 12px 16px;
            margin-top: 10px;
            color: var(--text-color);
            font-size: 14px;
            line-height: 1.4;
            max-width: 80%;
            align-self: flex-start;
            animation: fadeIn 0.5s ease-out;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container_chat_bot">
        <div class="container-chat-options">
            <div class="chat">
                <div class="chat-bot">
                    <input id="chat_bot" name="chat_bot" placeholder="Imagine Something...✦˚"/>
                </div>
                <div class="options">
                    <div class="btns-add">
                        <button id="mic-btn" title="Voice Input">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8v8a5 5 0 1 0 10 0V6.5a3.5 3.5 0 1 0-7 0V15a2 2 0 0 0 4 0V8"></path>
                            </svg>
                        </button>
                        <button id="image-btn" title="Image Input">
                            <svg viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm0 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm0-8h6m-3-3v6" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none"></path>
                            </svg>
                        </button>
                        <button id="ai-btn" title="AI Tools">
                            <svg viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.01 8.01 0 0 0 5.648 6.667M10.03 13c.151 2.439.848 4.73 1.97 6.752A15.9 15.9 0 0 0 13.97 13zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.01 8.01 0 0 0 19.938 13M4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333A8.01 8.01 0 0 0 4.062 11m5.969 0h3.938A15.9 15.9 0 0 0 12 4.248A15.9 15.9 0 0 0 10.03 11m4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.01 8.01 0 0 0-5.648-6.667" fill="currentColor"></path>
                            </svg>
                        </button>
                    </div>
                    <button class="btn-submit" id="submit-btn">
                        <i>
                            <svg viewBox="0 0 512 512">
                                <path fill="currentColor" d="M473 39.05a24 24 0 0 0-25.5-5.46L47.47 185h-.08a24 24 0 0 0 1 45.16l.41.13l137.3 58.63a16 16 0 0 0 15.54-3.59L422 80a7.07 7.07 0 0 1 10 10L226.66 310.26a16 16 0 0 0-3.59 15.54l58.65 137.38c.06.2.12.38.19.57c3.2 9.27 11.3 15.81 21.09 16.25h1a24.63 24.63 0 0 0 23-15.46L478.39 64.62A24 24 0 0 0 473 39.05"></path>
                            </svg>
                        </i>
                    </button>
                </div>
                <div class="typing-indicator" id="typing-indicator">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="response-bubble" id="response-bubble"></div>
            </div>
        </div>
        <div class="tags">
            <span id="create-image">Create An Image</span>
            <span id="analyse-data">Analyse Data</span>
            <span id="more-options">More</span>
        </div>
    </div>

// Sample responses for demonstration
            const sampleResponses = [
                "I've generated your creative image concept. Would you like me to refine it further?",
                "The data analysis shows interesting trends. The key metrics indicate a 15% growth quarter-over-quarter.",
                "Here are some additional options based on your request. Let me know which one you'd like to explore."
            ];

// Submit button click handler
            submitBtn.addEventListener('click', function() {
                sendMessage();
            });

// Enter key handler
            chatInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });

// Tag buttons click handlers
            createImageBtn.addEventListener('click', function() {
                chatInput.value = "Create an image of ";
                chatInput.focus();
                animateButton(this);
            });

analyseDataBtn.addEventListener('click', function() {
                chatInput.value = "Analyze the following data: ";
                chatInput.focus();
                animateButton(this);
            });

moreOptionsBtn.addEventListener('click', function() {
                chatInput.value = "Show me more options for ";
                chatInput.focus();
                animateButton(this);
            });

// Tool buttons click handlers
            micBtn.addEventListener('click', function() {
                showTemporaryMessage("Voice input activated. Please speak now...");
                animateButton(this);
            });

imageBtn.addEventListener('click', function() {
                showTemporaryMessage("Image upload dialog will appear here");
                animateButton(this);
            });

aiBtn.addEventListener('click', function() {
                showTemporaryMessage("AI tools panel opened");
                animateButton(this);
            });

// Function to send message
            function sendMessage() {
                const message = chatInput.value.trim();
                if (message) {
                    // Clear input
                    chatInput.value = '';
                    
                    // Show typing indicator
                    typingIndicator.style.display = 'flex';
                    
                    // Simulate AI response after delay
                    setTimeout(function() {
                        typingIndicator.style.display = 'none';
                        
                        // Get random sample response
                        const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)];
                        responseBubble.textContent = randomResponse;
                        responseBubble.style.display = 'block';
                        
                        // Auto-hide response after some time
                        setTimeout(function() {
                            responseBubble.style.display = 'none';
                        }, 10000);
                    }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5s
                }
            }

// Function to show temporary message
            function showTemporaryMessage(message) {
                responseBubble.textContent = message;
                responseBubble.style.display = 'block';
                
                setTimeout(function() {
                    responseBubble.style.display = 'none';
                }, 3000);
            }

// Function to animate button click
            function animateButton(button) {
                button.style.transform = 'scale(0.95)';
                setTimeout(function() {
                    button.style.transform = 'scale(1)';
                }, 150);
            }

// Add hover sound effects
            const buttons = document.querySelectorAll('button, .tags span');
            const hoverSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-arrow-whoosh-1491.mp3');
            hoverSound.volume = 0.2;

buttons.forEach(button => {
                button.addEventListener('mouseenter', function() {
                    hoverSound.currentTime = 0;
                    hoverSound.play();
                });
            });

// Add click sound effect
            const clickSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3');
            clickSound.volume = 0.3;

document.addEventListener('click', function(e) {
                if (e.target.tagName === 'BUTTON' || e.target.closest('button') || 
                    e.target.classList.contains('tags') || e.target.closest('.tags span')) {
                    clickSound.currentTime = 0;
                    clickSound.play();
                }
            });
        });
    </script>
</body>
</html>

Pregúntale a kevakib ai

Recomendado

Fragmento de animación de carga de CSS

Un código de Metehan

formas mágicas

HTML

CSS

JS

Recomendado

Fragmento de animación de carga de CSS

Un código de Metehan

formas mágicas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS