RSK World - Restaurant Booking Bot - Project Files Browser | RSK World

templates/demo.html

<!DOCTYPE html>
<!-- MIT License (c) 2026 Molla Samser (RSK World) -->
<html lang="en">

<head>
    <!--
    Restaurant Booking Bot - Chatbot Demo
    Developer: Molla Samser (RSK World)
    Designer & Tester: Rima Khatun
    Website: https://rskworld.in
    Year: 2026
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chatbot Demo - RSK Restaurant</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        .chat-container {
            max-width: 800px;
            margin: 60px auto;
            background: var(--glass);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            height: 650px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .chat-header {
            padding: 1.2rem;
            background: rgba(255, 204, 0, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .chat-header-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .chat-messages {
            flex: 1;
            padding: 2rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
        }

        .message {
            max-width: 80%;
            padding: 1rem 1.5rem;
            border-radius: 15px;
            font-size: 1rem;
            animation: fadeIn 0.3s ease;
            position: relative;
        }

        .message.bot {
            background: rgba(255, 255, 255, 0.1);
            align-self: flex-start;
            border-bottom-left-radius: 0;
        }

        .message.user {
            background: var(--primary);
            color: var(--secondary);
            align-self: flex-end;
            border-bottom-right-radius: 0;
            font-weight: 600;
        }

        .sentiment-tag {
            font-size: 0.7rem;
            position: absolute;
            bottom: -18px;
            right: 5px;
            opacity: 0.7;
        }

        .chat-input-area {
            padding: 1.5rem;
            background: rgba(0, 0, 0, 0.2);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .chat-input {
            display: flex;
            gap: 0.8rem;
            align-items: center;
        }

        .chat-input input {
            flex: 1;
            background: var(--glass);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 1rem 1.5rem;
            border-radius: 50px;
            color: white;
            outline: none;
            font-family: inherit;
        }

        .btn-icon {
            background: var(--glass);
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .btn-icon.active {
            background: #ff4444;
            animation: pulse 1.5s infinite;
        }

        .btn-send {
            background: var(--primary);
            color: var(--secondary);
            border: none;
        }

        .btn-icon:hover {
            transform: scale(1.1);
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: var(--secondary);
            padding: 2rem;
            border-radius: 20px;
            max-width: 600px;
            width: 90%;
            border: 1px solid var(--primary);
            text-align: center;
        }

        .table-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .table-item {
            background: var(--glass);
            padding: 1.5rem;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            transition: var(--transition);
        }

        .table-item:hover,
        .table-item.selected {
            background: rgba(255, 204, 0, 0.2);
            border-color: var(--primary);
        }

        .table-item i {
            font-size: 2rem;
            display: block;
            margin-bottom: 0.5rem;
            color: var(--primary);
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
            }

            70% {
                box-shadow: 0 0 0 15px rgba(255, 68, 68, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
            }
        }

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

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <header>
        <nav>
            <div class="logo">RSK<span>Restaurant</span></div>
            <ul>
                <li><a href="{{ url_for('index') }}">Home</a></li>
                <li><button onclick="showTableMap()" class="btn-demo" style="border:none; cursor:pointer;">Select
                        Table</button></li>
            </ul>
        </nav>
    </header>

    <div class="chat-container">
        <div class="chat-header">
            <div class="chat-header-info">
                <i class="fas fa-robot" style="font-size: 1.5rem; color: var(--primary);"></i>
                <div>
                    <h3 style="margin: 0;">RSK AI Assistant</h3>
                    <small id="bot-status" style="opacity: 0.6;">Online | Listening...</small>
                </div>
            </div>
            <button onclick="showLoyaltyModal()" class="btn-icon" title="Loyalty Points">
                <i class="fas fa-star" style="color: gold;"></i>
            </button>
        </div>
        <div class="chat-messages" id="chat-messages">
            <div class="message bot">
                Welcome back! I'm smarter now. You can talk to me, pick a table on the map, or ask for recommendations
                based on your mood!
            </div>
        </div>
        <div class="chat-input-area">
            <div class="chat-input">
                <button class="btn-icon" id="mic-btn" onclick="toggleVoice()"><i class="fas fa-microphone"></i></button>
                <input type="text" id="user-input" placeholder="Say 'Spicy food' or 'Book a table'..."
                    onkeypress="handleKeyPress(event)">
                <button class="btn-icon btn-send" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>

    <!-- Table Selection Modal -->
    <div id="tableModal" class="modal">
        <div class="modal-content">
            <h2>Interactive Seating Map</h2>
            <p>RSK Restaurant Premium Dining</p>
            <div class="table-grid">
                <div class="table-item" onclick="selectTable('T1 (Window)')">
                    <i class="fas fa-window-maximize"></i>
                    <span>Window</span>
                </div>
                <div class="table-item" onclick="selectTable('T2 (Couple)')">
                    <i class="fas fa-heart"></i>
                    <span>Couple</span>
                </div>
                <div class="table-item" onclick="selectTable('T3 (Family)')">
                    <i class="fas fa-users"></i>
                    <span>Family</span>
                </div>
                <div class="table-item" onclick="selectTable('T4 (Garden)')">
                    <i class="fas fa-leaf"></i>
                    <span>Garden</span>
                </div>
                <div class="table-item" onclick="selectTable('T5 (VIP)')">
                    <i class="fas fa-crown"></i>
                    <span>VIP Room</span>
                </div>
                <div class="table-item" onclick="selectTable('T6 (Bar)')">
                    <i class="fas fa-glass-martini-alt"></i>
                    <span>Bar</span>
                </div>
            </div>
            <button class="btn-primary" onclick="closeModal()">Confirm Selection</button>
        </div>
    </div>

    <!-- Loyalty Modal -->
    <div id="loyaltyModal" class="modal">
        <div class="modal-content">
            <h2>RSK Loyalty Program</h2>
            <p>Enter your email to check your rewards points</p>
            <div style="margin: 2rem 0;">
                <input type="email" id="loyalty-email" placeholder="your@email.com"
                    style="width: 100%; padding: 1rem; border-radius: 10px; background: var(--glass); border: 1px solid rgba(255,255,255,0.1); color: white; margin-bottom: 1rem;">
                <div id="loyalty-result"
                    style="font-size: 1.5rem; font-weight: 800; color: var(--primary); display: none;">
                    Points: <span id="points-val">0</span>
                </div>
            </div>
            <div style="display: flex; gap: 1rem; justify-content: center;">
                <button class="btn-primary" onclick="checkLoyalty()">Check Status</button>
                <button class="btn-secondary" onclick="closeLoyaltyModal()">Close</button>
            </div>
        </div>
    </div>

    <script>
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        let recognition;
        let isListening = false;

        if (SpeechRecognition) {
            recognition = new SpeechRecognition();
            recognition.continuous = false;
            recognition.lang = 'en-US';

            recognition.onresult = (event) => {
                const text = event.results[0][0].transcript;
                document.getElementById('user-input').value = text;
                toggleVoice();
                sendMessage();
            };

            recognition.onerror = () => toggleVoice();
        }

        function toggleVoice() {
            const btn = document.getElementById('mic-btn');
            const status = document.getElementById('bot-status');
            if (!isListening) {
                if (recognition) recognition.start();
                btn.classList.add('active');
                status.textContent = "Listening...";
                isListening = true;
            } else {
                if (recognition) recognition.stop();
                btn.classList.remove('active');
                status.textContent = "Online";
                isListening = false;
            }
        }

        async function sendMessage() {
            const input = document.getElementById('user-input');
            const message = input.value.trim();
            if (!message) return;

            appendMessage('user', message);
            input.value = '';

            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ message })
                });
                const data = await response.json();
                appendMessage('bot', data.response, data.sentiment);
            } catch (error) {
                appendMessage('bot', "Connection error.");
            }
        }

        function appendMessage(sender, text, sentiment = null) {
            const container = document.getElementById('chat-messages');
            const msgDiv = document.createElement('div');
            msgDiv.className = `message ${sender}`;
            msgDiv.textContent = text;

            if (sentiment && sentiment !== 'neutral') {
                const tag = document.createElement('span');
                tag.className = 'sentiment-tag';
                tag.textContent = `Mood: ${sentiment}`;
                msgDiv.appendChild(tag);
            }

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

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

        function showTableMap() { document.getElementById('tableModal').style.display = 'flex'; }
        function closeModal() { document.getElementById('tableModal').style.display = 'none'; }

        function showLoyaltyModal() { document.getElementById('loyaltyModal').style.display = 'flex'; }
        function closeLoyaltyModal() {
            document.getElementById('loyaltyModal').style.display = 'none';
            document.getElementById('loyalty-result').style.display = 'none';
        }

        async function checkLoyalty() {
            const email = document.getElementById('loyalty-email').value;
            if (!email) return alert("Please enter an email");

            try {
                const response = await fetch(`/api/loyalty/${email}`);
                const data = await response.json();
                document.getElementById('points-val').textContent = data.points;
                document.getElementById('loyalty-result').style.display = 'block';
            } catch (error) {
                alert("Error fetching loyalty points");
            }
        }

        function selectTable(tableName) {
            document.querySelectorAll('.table-item').forEach(el => el.classList.remove('selected'));
            event.currentTarget.classList.add('selected');
            appendMessage('user', `I'd like to select ${tableName}`);

            // Auto-trigger reservation flow demo
            setTimeout(() => {
                appendMessage('bot', `Excellent choice! To finalize your reservation for ${tableName}, please provide your email.`);
            }, 600);
            closeModal();
        }
    </script>
</body>

</html>

433 lines•14.8 KB

markup

Theme Settings

Color Scheme

Display Options

Font Size