Hugging Face's logo

Spaces:
NihalGazi
/
Stranger-Chat
Running

App Files Community
NihalGazi commited on
Commit
e2e7588
·
verified ·
1 Parent(s): dfc2073

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +48 -33
templates/index.html CHANGED
@@ -3,16 +3,20 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <title>Stranger Chat</title>
6
- <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
7
- <style>
8
- #lobby, #chat { max-width:400px; margin:20px auto; }
9
- #chat { display:none; }
10
- #messages { border:1px solid #333; height:200px; overflow:auto; padding:5px;}
11
- #messages div { margin:5px 0; }
12
- .status { font-style:italic; }
13
- </style>
 
 
 
14
  </head>
15
  <body>
 
16
  <div id="lobby">
17
  <h2>Create Profile & Join</h2>
18
  <form id="form">
@@ -24,23 +28,19 @@
24
  <label><input type="checkbox" name="interests" value="science">Science</label><br>
25
  <label><input type="checkbox" name="interests" value="arts">Arts</label><br>
26
  <label><input type="checkbox" name="interests" value="life">Life</label><br>
27
-
28
-
29
  Looking for:
30
  <select name="looking">
31
  <option value="any">Any</option>
32
  <option value="male">Male</option>
33
  <option value="female">Female</option>
34
  </select><br>
35
-
36
-
37
  <button>Enter Lobby</button>
38
  </form>
39
  <div id="lobbyStatus"></div>
40
  </div>
41
 
42
  <div id="chat">
43
- <h2>Chat Room</h2>
44
  <div id="messages"></div>
45
  <input id="msg" autocomplete="off"><button id="send">Send</button>
46
  <button id="leave">Leave</button>
@@ -48,21 +48,27 @@
48
 
49
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.js"></script>
50
  <script>
51
- const socket = io();
 
 
 
 
 
 
 
 
 
52
 
53
- const form = document.getElementById("form");
54
- const lobby = document.getElementById("lobby");
55
- const lobbyStatus = document.getElementById("lobbyStatus");
56
- const chatDiv = document.getElementById("chat");
57
- const messages = document.getElementById("messages");
58
- const input = document.getElementById("msg");
59
- const sendBtn = document.getElementById("send");
60
- const leaveBtn = document.getElementById("leave");
61
- let currentRoom = null;
62
 
63
  form.addEventListener("submit", e => {
64
  e.preventDefault();
65
  const data = new FormData(form);
 
66
  const profile = {
67
  id: data.get("id"),
68
  gender: data.get("gender"),
@@ -70,8 +76,7 @@
70
  looking: data.get("looking"),
71
  interests: data.getAll("interests")
72
  };
73
-
74
- // hide lobby, show status
75
  lobbyStatus.textContent = "Finding partner...";
76
  socket.emit("find", profile);
77
  });
@@ -82,31 +87,41 @@
82
  });
83
 
84
  socket.on("matched", d => {
85
- currentRoom = d.room;
 
 
 
 
 
86
  lobby.style.display = "none";
87
  chatDiv.style.display = "block";
88
- appendMessage("Matched! Chat room: " + currentRoom, "status");
89
-
90
-
91
  });
92
 
93
  sendBtn.onclick = () => {
94
  const txt = input.value.trim();
95
  if (!txt || !currentRoom) return;
96
- socket.emit("chat", {room:currentRoom, msg:txt});
97
  input.value = "";
98
  };
99
 
100
- socket.on("chat", d => appendMessage(d.msg, "chat"));
 
 
 
 
 
101
  leaveBtn.onclick = () => {
102
- if (confirm("Leave?")) socket.emit("leave", {room:currentRoom});
103
  };
 
104
  socket.on("left", () => {
105
  appendMessage("You left the chat.", "status");
106
  setTimeout(() => location.reload(), 1000);
107
  });
108
 
109
- function appendMessage(text, cls="chat") {
110
  const d = document.createElement("div");
111
  d.textContent = text;
112
  if (cls) d.classList.add(cls);
 
3
  <head>
4
  <meta charset="utf-8">
5
  <title>Stranger Chat</title>
6
+ <style>
7
+ body { font-family: sans-serif; background: #f5f5f5; padding: 20px; }
8
+ #lobby, #chat { max-width: 400px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 8px #ccc; }
9
+ #chat { display: none; }
10
+ #messages { border: 1px solid #333; height: 200px; overflow: auto; padding: 5px; margin-bottom: 10px; background: #fafafa; }
11
+ #messages div { margin: 5px 0; }
12
+ .status { font-style: italic; color: gray; }
13
+ .me { color: blue; font-weight: bold; }
14
+ .other { color: green; font-weight: bold; }
15
+ #chatHeader { text-align: center; margin-bottom: 10px; font-weight: bold; }
16
+ </style>
17
  </head>
18
  <body>
19
+
20
  <div id="lobby">
21
  <h2>Create Profile & Join</h2>
22
  <form id="form">
 
28
  <label><input type="checkbox" name="interests" value="science">Science</label><br>
29
  <label><input type="checkbox" name="interests" value="arts">Arts</label><br>
30
  <label><input type="checkbox" name="interests" value="life">Life</label><br>
 
 
31
  Looking for:
32
  <select name="looking">
33
  <option value="any">Any</option>
34
  <option value="male">Male</option>
35
  <option value="female">Female</option>
36
  </select><br>
 
 
37
  <button>Enter Lobby</button>
38
  </form>
39
  <div id="lobbyStatus"></div>
40
  </div>
41
 
42
  <div id="chat">
43
+ <div id="chatHeader">Chat Room</div>
44
  <div id="messages"></div>
45
  <input id="msg" autocomplete="off"><button id="send">Send</button>
46
  <button id="leave">Leave</button>
 
48
 
49
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.js"></script>
50
  <script>
51
+ const socket = io();
52
+ const form = document.getElementById("form");
53
+ const lobby = document.getElementById("lobby");
54
+ const lobbyStatus = document.getElementById("lobbyStatus");
55
+ const chatDiv = document.getElementById("chat");
56
+ const messages = document.getElementById("messages");
57
+ const input = document.getElementById("msg");
58
+ const sendBtn = document.getElementById("send");
59
+ const leaveBtn = document.getElementById("leave");
60
+ const chatHeader = document.getElementById("chatHeader");
61
 
62
+ let currentRoom = null;
63
+ let myId = null;
64
+ let mySid = null;
65
+ let partnerId = null;
66
+ let partnerSid = null;
 
 
 
 
67
 
68
  form.addEventListener("submit", e => {
69
  e.preventDefault();
70
  const data = new FormData(form);
71
+ myId = data.get("id");
72
  const profile = {
73
  id: data.get("id"),
74
  gender: data.get("gender"),
 
76
  looking: data.get("looking"),
77
  interests: data.getAll("interests")
78
  };
79
+
 
80
  lobbyStatus.textContent = "Finding partner...";
81
  socket.emit("find", profile);
82
  });
 
87
  });
88
 
89
  socket.on("matched", d => {
90
+ currentRoom = d.room;
91
+ mySid = socket.id;
92
+ myId = d.my_id;
93
+ partnerId = d.partner_id;
94
+ partnerSid = d.partner_sid;
95
+
96
  lobby.style.display = "none";
97
  chatDiv.style.display = "block";
98
+ chatHeader.textContent = `Chatroom of ${myId} and ${partnerId}`;
99
+ appendMessage("Matched! Start chatting.", "status");
 
100
  });
101
 
102
  sendBtn.onclick = () => {
103
  const txt = input.value.trim();
104
  if (!txt || !currentRoom) return;
105
+ socket.emit("chat", { room: currentRoom, msg: txt, sid: mySid });
106
  input.value = "";
107
  };
108
 
109
+ socket.on("chat", d => {
110
+ const who = d.sid === mySid ? "You" : partnerId || "Partner";
111
+ const cls = d.sid === mySid ? "me" : "other";
112
+ appendMessage(`${who}: ${d.msg}`, cls);
113
+ });
114
+
115
  leaveBtn.onclick = () => {
116
+ if (confirm("Leave?")) socket.emit("leave", { room: currentRoom });
117
  };
118
+
119
  socket.on("left", () => {
120
  appendMessage("You left the chat.", "status");
121
  setTimeout(() => location.reload(), 1000);
122
  });
123
 
124
+ function appendMessage(text, cls = "chat") {
125
  const d = document.createElement("div");
126
  d.textContent = text;
127
  if (cls) d.classList.add(cls);