Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 33 | Author: karbonsites 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P2P Chat</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
</head>
<body class="p-4 md:p-8 flex flex-col items-center min-h-screen">
    <header class="w-full max-w-xl mb-4">
        <nav class="flex justify-between items-center p-4 bg-white rounded-lg shadow">
            <h1 class="text-xl font-bold text-indigo-600">P2P Messenger</h1>
            <div class="space-x-4">
                <a href="index.html" class="text-indigo-600 hover:text-indigo-800">Chat</a>
                <a href="about.html" class="text-gray-600 hover:text-gray-800">About</a>
            </div>
        </nav>
    </header>

    <div id="app" class="w-full max-w-xl bg-white rounded-xl shadow-2xl p-6 space-y-4 flex-grow">
        <div class="p-3 bg-indigo-50 rounded-lg shadow-inner">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between">
                <span id="status" class="font-semibold text-sm text-indigo-700">Initializing...</span>
                <div class="mt-2 sm:mt-0 flex items-center space-x-2">
                    <span class="text-sm font-medium text-gray-600">Your ID:</span>
                    <code id="my-id" class="text-sm font-mono bg-indigo-200 text-indigo-800 p-1 rounded-md cursor-pointer hover:bg-indigo-300 transition" title="Click to copy ID">Loading...</code>
                    <button onclick="copyMyId()" class="p-1 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition shadow-md text-xs">Copy</button>
                </div>
            </div>
        </div>

        <div id="connection-area" class="space-y-3 p-4 border border-gray-200 rounded-lg shadow-sm">
            <label for="partner-id-input" class="block text-sm font-medium text-gray-700">Partner's ID</label>
            <div class="flex space-x-2">
                <input type="text" id="partner-id-input" placeholder="Paste partner's ID here" class="flex-grow p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" />
                <button id="connect-btn" onclick="connectToPartner()" class="p-3 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-600 transition disabled:bg-gray-400">
                    Connect
                </button>
            </div>
            <p id="conn-message" class="text-xs text-red-500"></p>
        </div>

        <div id="chat-area" class="hidden flex flex-col">
            <div id="chat-log" class="flex-1 overflow-y-auto p-4 bg-gray-50 border border-gray-200 rounded-t-lg">
                <div class="text-center text-sm text-gray-400 p-4">
                    Connection established. Start chatting!
                </div>
            </div>

            <div class="flex space-x-2 p-4 bg-white border border-t-0 border-gray-200 rounded-b-lg">
                <input type="text" id="message-input" placeholder="Type your message..." class="flex-grow p-3 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500" onkeydown="handleKey(event)" disabled />
                <button id="send-btn" onclick="sendMessage()" class="p-3 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-600 transition disabled:bg-gray-400" disabled>
                    Send
                </button>
            </div>
        </div>
        
        <div id="alert-modal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center p-4 z-50">
            <div class="bg-white p-6 rounded-xl shadow-2xl max-w-sm w-full">
                <h3 id="alert-title" class="text-lg font-bold text-red-600 mb-3">Error</h3>
                <p id="alert-body" class="text-gray-700 mb-4">An unknown error occurred.</p>
                <button onclick="closeAlert()" class="w-full py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition">OK</button>
            </div>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

Share this file: