Pregúntale a kevakib ai

Abrir en el editor Publica tu código

Recomendado

23 July 2024

Interacción de precios (HTML, CSS y JS)

16 May 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

Iniciar sesión con registro

Interacción de precios (HTML, CSS y JS)

botón brillante 2

HTML

CSS

JS

Recomendado

Iniciar sesión con registro

Interacción de precios (HTML, CSS y JS)

botón brillante 2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS