RSK World - AI-Commerce Chatbot - Project Files Browser | RSK World

templates/chat.html

<!--
Project: E-commerce Chatbot
Developed by: Molla Samser
Team: Rima Khatun (Designer & Tester)
Website: https://rskworld.in
Email: support@rskworld.in
Year: 2026
"Empowering E-commerce with AI"
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Support | AI Commerce</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .full-chat {
            flex: 1;
            display: flex;
            flex-direction: column;
            max-width: 800px;
            margin: 80px auto 20px;
            width: 95%;
            background: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .chat-messages {
            height: calc(100vh - 250px);
        }
    </style>
</head>

<body>
    <nav class="glass">
        <div class="logo">AI Commerce</div>
        <div class="nav-links">
            <a href="/">Home</a>
            <a href="/admin">Dashboard</a>
        </div>
    </nav>

    <div class="full-chat">
        <div class="chat-header" style="padding: 1.5rem;">
            <span><i class="fas fa-robot"></i> AI Support Specialist</span>
            <span style="font-size: 0.8rem; opacity: 0.8;">Year 2026 v2.0</span>
        </div>
        <div class="chat-messages" id="chat-messages">
            <div class="message bot">Welcome to the full-screen support portal. I am the AI assistant developed by Molla
                Samser. How can I assist you with our products or your orders today?</div>
        </div>
        <div class="chat-input-area" style="padding: 1.5rem;">
            <button id="voice-btn"
                style="background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0 10px;"><i
                    class="fas fa-microphone fa-lg"></i></button>
            <input type="text" id="user-input" placeholder="Type your query here..."
                style="font-size: 1rem; padding: 10px;">
            <button id="send-btn" class="btn-primary" style="padding: 10px 25px;"><i class="fas fa-paper-plane"></i>
                Send</button>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
    <script>
        // Ensure the full-screen version is visible immediately
        document.addEventListener('DOMContentLoaded', () => {
            const chatContainer = document.getElementById('chat-container');
            if (chatContainer) chatContainer.style.display = 'none'; // Hide the widget version

            const chatTrigger = document.getElementById('chat-trigger');
            if (chatTrigger) chatTrigger.style.display = 'none'; // Hide the widget trigger
        });
    </script>
</body>

</html>

88 lines•3.2 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size