chitlan/app.html at main · saikishorr/chitlan · GitHub

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ChitLAN App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="top-right-bar">
    <button class="theme-toggle" onclick="toggleTheme()">🌙 Theme</button>
    <button class="theme-toggle" id="installBtn" style="display:none;">📲 Install</button>
    <div class="ip-display" id="ip-display">Detecting IP...</div>
  </div>

  <h1>ChitLAN</h1>

  <div class="form-group">
    <label>Nickname</label>
    <input type="text" id="nickname" placeholder="Enter nickname" />

    <label for="color">Choose Color:</label>
    <select id="color">
      <option value="#007bff" style="color: #007bff">Blue</option>
      <option value="#28a745" style="color: #28a745">Green</option>
      <option value="#dc3545" style="color: #dc3545">Red</option>
      <option value="#ffc107" style="color: #ffc107">Yellow</option>
      <option value="#17a2b8" style="color: #17a2b8">Cyan</option>
      <option value="#6610f2" style="color: #6610f2">Purple</option>
      <option value="#fd7e14" style="color: #fd7e14">Orange</option>
      <option value="#6c757d" style="color: #6c757d">Gray</option>
      <option value="#343a40" style="color: #343a40">Dark</option>
      <option value="#e83e8c" style="color: #e83e8c">Pink</option>
    </select>

    <label>Select Role</label>
    <div>
      <label><input type="radio" name="role" value="host" checked /> Host</label>
      <label><input type="radio" name="role" value="join" /> Join</label>
    </div>

    <button onclick="init()">Start</button>
  </div>

  <div class="form-group">
    <label>Your Room ID</label>
    <div class="input-group">
      <input type="text" id="peer-id" readonly />
      <button onclick="copyPeerId()">Copy ID</button>
    </div>
  </div>

  <div class="form-group">
    <label>Connect to Host</label>
    <div class="input-group">
      <input type="text" id="connect-id" placeholder="Enter host Peer ID" />
      <button onclick="connectToHost()">Connect</button>
    </div>
  </div>

  <div id="chat-ui" style="display:none;">
    <div class="chat-container">

      <div id="user-list">
        <h3>Users (<span id="userCount">0</span>)</h3>
        <ul id="userNames"></ul>
      </div>

      <div class="chat-box">
        <div id="messages"></div>
        <div id="typing-indicator" class="typing-indicator"></div>

        <div class="input-group">
          <input type="text" id="msg-input" placeholder="Type a message..." />
          <button onclick="sendMessage()">Send</button>
        </div>

        <div class="file-group">
          <input type="file" id="fileInput" />
          <button onclick="sendFile()">Send File</button>
        </div>

        <div class="screen-share-bar">
          <button onclick="startScreenShare()" id="shareScreenBtn">🖥️ Share Screen</button>
          <button onclick="stopScreenShare()" id="stopScreenBtn" style="display:none;">🛑 Stop Sharing</button>
        </div>

        <div class="screen-area">
          <h3>Live Screen Share</h3>
          <video id="screenViewer" autoplay playsinline controls></video>
          <div id="screenStatus" class="screen-status">No active screen share</div>
        </div>
      </div>
    </div>
  </div>

  <div class="voice-ui">
    <h3>Voice Chat</h3>
    <div class="voice-controls">
      <button id="joinBtn" onclick="startVoice()">Join Voice</button>
      <button id="muteBtn" onclick="toggleMute()" style="display:none;">Mute</button>
      <button id="leaveBtn" onclick="leaveVoice()" style="display:none;">Leave Voice</button>
    </div>
    <div id="voice-users"></div>
  </div>

  <audio id="notificationSound" preload="auto">
    <source src="ding.mp3" type="audio/mpeg">
  </audio>

  <script src="https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js"></script>
  <script src="script.js"></script>
</body>
</html>