Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 207 | 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
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P2P Messenger & Video</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-100 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>
            <span id="status" class="px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700">Initializing...</span>
        </nav>
    </header>

    <div id="app" class="w-full max-w-xl bg-white rounded-xl shadow-2xl p-6 space-y-4 flex-grow flex flex-col">
        
        <div class="p-3 bg-indigo-50 rounded-lg shadow-inner flex items-center justify-between">
            <div class="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 select-all">Loading...</code>
            </div>
            <button id="copy-id-btn" class="text-xs text-indigo-600 hover:underline">Copy</button>
        </div>

        <div id="connection-area" class="space-y-3 p-4 border border-gray-200 rounded-lg">
            <input type="text" id="partner-id-input" placeholder="Paste partner's ID here..." class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <div class="flex space-x-2">
                <button id="connect-btn" class="flex-1 p-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition">Start Chat</button>
                <button id="video-call-btn" class="flex-1 p-3 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition">Video Call</button>
            </div>
        </div>

        <div id="video-area" class="hidden flex flex-col space-y-3">
            <div class="grid grid-cols-2 gap-2">
                <div>
                    <span class="text-xs text-gray-500 block mb-1">You</span>
                    <video id="local-video" autoplay muted playsinline class="w-full rounded-lg bg-black borderVideo"></video>
                </div>
                <div>
                    <span class="text-xs text-gray-500 block mb-1">Partner</span>
                    <video id="remote-video" autoplay playsinline class="w-full rounded-lg bg-black borderVideo"></video>
                </div>
            </div>
            <button id="end-call-btn" class="w-full p-2 bg-red-500 text-white font-medium rounded-lg hover:bg-red-600 transition">End Call</button>
        </div>

        <div id="chat-area" class="hidden flex flex-col flex-grow border rounded-lg overflow-hidden min-h-[300px]">
            <div id="chat-log" class="flex-grow h-64 overflow-y-auto p-4 bg-gray-50 flex flex-col gap-2"></div>
            <div class="flex space-x-2 p-3 bg-white border-t">
                <input type="text" id="message-input" placeholder="Type a message..." class="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <button id="send-btn" class="px-4 py-2 bg-indigo-500 text-white font-medium rounded-lg hover:bg-indigo-600 transition">Send</button>
            </div>
        </div>
    </div>

    <script src="script.js" defer></script>

  <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner">
      <span>✨</span>
      <div>Built with <b>Karbon Sites</b></div>
  </a>
</body></html>

Share this file: