<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <title>Snaptie Chat</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center px-4 py-6">

    <div class="w-full max-w-md">
        <!-- QR Code -->
        <div class="text-center mb-4">
            <p class="text-sm text-gray-300">Partilhe este QR code com a outra pessoa:</p>
            <!--QR_CODE-->
        </div>
        <center>

            <p id="roomLink" class="text-sm text-blue-400 underline mb-2 cursor-pointer"></p>
            <button id="copyBtn" class="bg-blue-600 hover:bg-blue-700 text-white py-1 px-3 rounded text-sm">
                Copiar Link da Sala
            </button>

            <a id="downloadQr" href="#" download="snaptie-qr.png"
                class="mt-2 inline-block bg-gray-700 text-white text-sm px-3 py-1 rounded hover:bg-gray-600 transition">
                📥 Baixar QR como PNG
            </a>
        </center>

        <br>

        <!-- Chat Card -->
        <div class="bg-gray-800 rounded-lg shadow-md flex flex-col overflow-hidden">
            <!-- Header -->
            <div class="bg-gray-700 px-4 py-3 text-center font-semibold text-lg">
                👀 Snaptie
            </div>

            <!-- Chat messages -->
            <div id="chatBox" class="flex flex-col gap-2 px-4 py-3 overflow-y-auto h-80">
                <!-- Mensagens vão aqui -->
            </div>

            <!-- Input -->
            <form id="chatForm" class="flex border-t border-gray-700">
                <input type="file" id="imageInput" accept="image/*" class="hidden" />
                <label for="imageInput"
                    class="bg-gray-700 text-white px-3 flex items-center cursor-pointer hover:bg-gray-600">
                    📷
                </label>

                <input type="text" id="messageInput" placeholder="Escreve algo..."
                    class="flex-1 bg-gray-900 text-white px-4 py-3 outline-none border-none" />

                <button type="submit" class="bg-blue-500 hover:bg-blue-600 px-4 text-white font-semibold">
                    Enviar
                </button>
            </form>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/chat.js"></script>
</body>


</html>
