comer

24 Mad_Official

Abrir en el editor Publica tu código

Recomendado

14 September 2024

Tienda de comercio electrónico

26 June 2025

Sitio de comercio electrónico HTML, Tailwind CSS, Compras

15 May 2025

Plantilla de sitio web de comercio electrónico HTML CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Motivational Assistant</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary: #6366f1;
            --primary-hover: #4f46e5;
            --accent: #f43f5e;
            --bg-dark: #0f172a;
            --card-bg: #1e293b;
            --chat-bg: #0f172a;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --border: #334155;
            --user-msg: #4f46e5;
            --ai-msg: #334155;
        }

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }

body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

.container {
            width: 100%;
            max-width: 900px;
            height: 90vh;
            background: var(--card-bg);
            border-radius: 20px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--border);
        }

.header {
            padding: 20px 30px;
            background: rgba(30, 41, 59, 0.8);
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            backdrop-filter: blur(10px);
        }

.header h1 {
            font-size: 1.4rem;
            font-weight: 700;
            background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 10px;
        }

.quote-section {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(244, 63, 94, 0.1) 100%);
            padding: 20px 30px;
            border-bottom: 1px solid var(--border);
            text-align: center;
            position: relative;
        }

.quote-card {
            min-height: 70px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
        }

.quote-text {
            font-size: 1.1rem;
            font-style: italic;
            font-weight: 500;
            color: #e2e8f0;
            line-height: 1.5;
            transition: opacity 0.3s ease;
        }

.quote-author {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 6px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.btn-quote {
            background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
            color: white;
            border: none;
            padding: 10px 22px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

.btn-quote:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
        }

.chat-container {
            flex: 1;
            padding: 20px 30px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
            background: var(--chat-bg);
        }

.message {
            display: flex;
            gap: 12px;
            max-width: 80%;
            animation: fadeIn 0.3s ease;
        }

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

.message.user {
            align-self: flex-end;
            flex-direction: row-reverse;
        }

.avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

.message.ai .avatar {
            background: var(--primary);
            color: white;
        }

.message.user .avatar {
            background: var(--accent);
            color: white;
        }

.msg-content {
            padding: 12px 18px;
            border-radius: 16px;
            font-size: 0.95rem;
            line-height: 1.5;
            word-wrap: break-word;
        }

.message.ai .msg-content {
            background: var(--ai-msg);
            color: var(--text-main);
            border-top-left-radius: 4px;
        }

.message.user .msg-content {
            background: var(--user-msg);
            color: white;
            border-top-right-radius: 4px;
        }

.input-container {
            padding: 20px 30px;
            background: var(--card-bg);
            border-top: 1px solid var(--border);
            display: flex;
            gap: 12px;
            align-items: center;
        }

.input-box {
            flex: 1;
            background: var(--bg-dark);
            border: 1px solid var(--border);
            border-radius: 25px;
            padding: 12px 20px;
            color: var(--text-main);
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.2s ease;
        }

.input-box:focus {
            border-color: var(--primary);
        }

.btn-send {
            background: var(--primary);
            color: white;
            border: none;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

.btn-send:hover {
            background: var(--primary-hover);
            transform: scale(1.05);
        }

.loading-dots {
            display: flex;
            gap: 4px;
            padding: 4px 8px;
        }

.dot {
            width: 8px;
            height: 8px;
            background: var(--text-muted);
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out both;
        }

.dot:nth-child(1) { animation-delay: -0.32s; }
        .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

@media (max-width: 600px) {
            .container { height: 100vh; border-radius: 0; }
            .header, .quote-section, .chat-container, .input-container { padding: 15px; }
            .message { max-width: 90%; }
        }
    </style>
</head>
<body>

<div class="container">
        
        <div class="header">
            <h1><i class="fa-solid fa-robot"></i> AI Motivational Coach</h1>
        </div>

<div class="quote-section">
            <div class="quote-card">
                <div class="quote-text" id="quoteText">"Click below to generate your daily boost of motivation!"</div>
                <div class="quote-author" id="quoteAuthor"></div>
            </div>
            <button class="btn-quote" onclick="generateQuote()">
                <i class="fa-solid fa-dice"></i> Get Random Quote
            </button>
        </div>

<div class="chat-container" id="chatContainer">
            <div class="message ai">
                <div class="avatar"><i class="fa-solid fa-brain"></i></div>
                <div class="msg-content">
                    Hello! I'm your AI Motivational Assistant. What goal, challenge, or mindset boost can I help you with today?
                </div>
            </div>
        </div>

<div class="input-container">
            <input type="text" id="userInput" class="input-box" placeholder="Ask for advice, encouragement, or motivation..." onkeypress="handleKeyPress(event)">
            <button class="btn-send" onclick="sendMessage()">
                <i class="fa-solid fa-paper-plane"></i>
            </button>
        </div>
    </div>

async function sendMessage() {
            const inputEl = document.getElementById('userInput');
            const userMsg = inputEl.value.trim();
            if (!userMsg) return;

addMessage(userMsg, 'user');
            inputEl.value = '';

const loadingId = addLoadingIndicator();

try {
                const response = await fetch('https://dummyjson.com/quotes/random');
                const data = await response.json();
                
                removeLoadingIndicator(loadingId);
                const aiReply = `Remember: "${data.quote}" - ${data.author}. Keep pushing forward with your goal!`;
                addMessage(aiReply, 'ai');
            } catch (err) {
                removeLoadingIndicator(loadingId);
                addMessage("Keep pushing! Every small step you take today brings you closer to your big goals.", 'ai');
            }
        }

function addMessage(text, sender) {
            const chatContainer = document.getElementById('chatContainer');
            const msgDiv = document.createElement('div');
            msgDiv.className = `message ${sender}`;

const icon = sender === 'ai' ? 'fa-brain' : 'fa-user';

msgDiv.innerHTML = `
                <div class="avatar"><i class="fa-solid ${icon}"></i></div>
                <div class="msg-content">${escapeHTML(text)}</div>
            `;

chatContainer.appendChild(msgDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

function addLoadingIndicator() {
            const chatContainer = document.getElementById('chatContainer');
            const loadingDiv = document.createElement('div');
            const id = 'loading-' + Date.now();
            loadingDiv.id = id;
            loadingDiv.className = 'message ai';

loadingDiv.innerHTML = `
                <div class="avatar"><i class="fa-solid fa-brain"></i></div>
                <div class="msg-content">
                    <div class="loading-dots">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
            `;

chatContainer.appendChild(loadingDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            return id;
        }

function removeLoadingIndicator(id) {
            const el = document.getElementById(id);
            if (el) el.remove();
        }

function handleKeyPress(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        }

function escapeHTML(str) {
            return str.replace(/[&<>'"]/g, 
                tag => ({ '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' }[tag] || tag)
            );
        }
    </script>
</body>
</html>

CSS