Hugging Face's logo

Spaces:
CVNSS
/
Chat
Running

App Files Community
CVNSS commited on
Commit
7230516
·
verified ·
1 Parent(s): 640cdb9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -24
index.html CHANGED
@@ -29,23 +29,26 @@
29
  .chat-wrap{ position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
30
  iframe{ width:100%; height:72vh; min-height:520px; border:0; display:block; background:#fff; }
31
 
32
- /* ====== OVERLAYS: chỉ che header + cột phải, không che join box & đáy ====== */
33
- /* Che header tlk (đám mây, title) nhưng để lộ khung Join ở giữa */
34
  .ov-top{
35
  position:absolute; left:0; right:0; top:0;
36
- height:70px; /* nhỏ lại để thấy khung Join */
37
  background:#fff; z-index:3; pointer-events:none;
38
  box-shadow: 0 8px 10px -10px rgba(0,0,0,.12);
 
39
  }
40
- /* Che cột phải (online, branding, patron…) */
41
  .ov-right{
42
  position:absolute; top:0; right:0; bottom:0;
43
- width:min(260px, 24vw); /* chỉnh 220–300 nếu còn hở */
44
  background:#fff; z-index:2; pointer-events:none;
45
  box-shadow: -8px 0 10px -10px rgba(0,0,0,.12);
46
  }
47
- /* KHÔNG dùng ov-bottom để giữ ô nhập chat ở đáy */
48
  footer{ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px; }
 
 
49
  </style>
50
  </head>
51
  <body>
@@ -58,14 +61,24 @@
58
  <input id="nickname" type="text" placeholder="Nhập tên của bạn…" />
59
  <button id="goBtn">Vào Chat</button>
60
  </div>
61
- <div style="margin-top:8px; color:#5f6368; font-size:14px;">
62
- 👉 Sau khi bấm <b>Vào Chat</b>, ô tên trong khung sẽ được điền sẵn — bạn chỉ cần nhấn <b>Enter</b> để join.
63
  </div>
64
 
65
- <div style="margin-top:16px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
66
  <button class="ghost" id="mkRoom">✨ Tạo phòng bí mật</button>
67
- <span id="roomLink" style="display:none;"></span>
68
- <button class="secondary" id="copyBtn" style="display:none;">📋 Copy link</button>
 
 
 
 
 
 
 
 
 
 
69
  </div>
70
  </section>
71
 
@@ -73,7 +86,7 @@
73
  <section id="app" class="card">
74
  <span id="roomPill" class="pill"></span>
75
  <div class="chat-wrap">
76
- <div class="ov-top"></div>
77
  <div class="ov-right"></div>
78
  <iframe id="tlk" title="tlk.io chat"></iframe>
79
  </div>
@@ -84,31 +97,54 @@
84
  </footer>
85
 
86
  <script>
87
- // Lấy room từ URL (?room=...), mặc định: cvnss4-0
88
- const qs = new URLSearchParams(location.search);
89
- let room = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
 
90
  document.getElementById('roomPill').textContent = "Phòng: " + room;
91
 
92
- // Join: load iframe, prefill nickname (vẫn cần Enter 1 lần trong khung)
 
 
 
 
 
93
  document.getElementById('goBtn').onclick = () => {
94
  const name = (document.getElementById('nickname').value || "").trim() || "Guest";
95
  document.getElementById('gate').style.display = 'none';
96
  document.getElementById('app').style.display = 'block';
 
 
 
 
 
 
 
97
  const url = "https://tlk.io/" + encodeURIComponent(room) + "?nickname=" + encodeURIComponent(name);
98
  document.getElementById('tlk').src = url;
 
 
 
 
 
 
 
99
  };
100
 
101
- // Tạo phòng bí mật & copy link
102
  document.getElementById('mkRoom').onclick = () => {
103
  const rnd = Math.random().toString(36).slice(2,8);
104
  const newRoom = `cvnss4-0-${rnd}`;
105
- const link = `${location.origin}${location.pathname}?room=${newRoom}`;
106
- const linkEl = document.getElementById('roomLink');
107
- linkEl.textContent = link;
108
- linkEl.style.display = 'inline';
109
- const copyBtn = document.getElementById('copyBtn');
110
- copyBtn.style.display = 'inline-block';
111
- copyBtn.onclick = () => navigator.clipboard.writeText(link).then(() => alert("✅ Đã copy link phòng!"));
 
 
 
112
  };
113
  </script>
114
  </body>
 
29
  .chat-wrap{ position:relative; border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
30
  iframe{ width:100%; height:72vh; min-height:520px; border:0; display:block; background:#fff; }
31
 
32
+ /* ====== OVERLAYS ====== */
33
+ /* Che header tlk: sẽ điều chỉnh cao/thấp theo chế độ host/guest bằng JS */
34
  .ov-top{
35
  position:absolute; left:0; right:0; top:0;
36
+ height:70px; /* guest mặc định: để lộ ô Join */
37
  background:#fff; z-index:3; pointer-events:none;
38
  box-shadow: 0 8px 10px -10px rgba(0,0,0,.12);
39
+ transition: height .15s ease;
40
  }
41
+ /* Che cột phải (online, branding, patron…) cho cả host/guest */
42
  .ov-right{
43
  position:absolute; top:0; right:0; bottom:0;
44
+ width:min(260px, 24vw);
45
  background:#fff; z-index:2; pointer-events:none;
46
  box-shadow: -8px 0 10px -10px rgba(0,0,0,.12);
47
  }
48
+
49
  footer{ margin-top:auto; text-align:center; color:#6c727a; font-size:13px; padding:16px; }
50
+ .linkWrap{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }
51
+ .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f1f3f4; padding:6px 8px; border-radius:6px; }
52
  </style>
53
  </head>
54
  <body>
 
61
  <input id="nickname" type="text" placeholder="Nhập tên của bạn…" />
62
  <button id="goBtn">Vào Chat</button>
63
  </div>
64
+ <div id="hint" style="margin-top:8px; color:#5f6368; font-size:14px;">
65
+ 👉 Nếu là <b>khách</b>, sau khi vào hãy nhấn <b>Enter</b> trong khung để Join.
66
  </div>
67
 
68
+ <div style="margin-top:16px;">
69
  <button class="ghost" id="mkRoom">✨ Tạo phòng bí mật</button>
70
+ <div id="links" style="display:none; margin-top:10px;">
71
+ <div class="linkWrap">
72
+ <span>🔗 Link Host:</span>
73
+ <span id="hostLink" class="mono"></span>
74
+ <button class="secondary" id="copyHost">📋 Copy</button>
75
+ </div>
76
+ <div class="linkWrap">
77
+ <span>🔗 Link Guest:</span>
78
+ <span id="guestLink" class="mono"></span>
79
+ <button class="secondary" id="copyGuest">📋 Copy</button>
80
+ </div>
81
+ </div>
82
  </div>
83
  </section>
84
 
 
86
  <section id="app" class="card">
87
  <span id="roomPill" class="pill"></span>
88
  <div class="chat-wrap">
89
+ <div id="ovTop" class="ov-top"></div>
90
  <div class="ov-right"></div>
91
  <iframe id="tlk" title="tlk.io chat"></iframe>
92
  </div>
 
97
  </footer>
98
 
99
  <script>
100
+ // ── Params & state ──────────────────────────────────────────────
101
+ const qs = new URLSearchParams(location.search);
102
+ let room = (qs.get("room") || "cvnss4-0").trim().toLowerCase();
103
+ let view = (qs.get("view") || "guest").toLowerCase(); // 'host' | 'guest'
104
  document.getElementById('roomPill').textContent = "Phòng: " + room;
105
 
106
+ // Hiển thị gợi ý theo chế độ
107
+ if (view === "host") {
108
+ document.getElementById('hint').textContent = "Bạn đang ở chế độ Host: khung Join sẽ được che để giao diện gọn gàng.";
109
+ }
110
+
111
+ // ── Join flow ───────────────────────────────────────────────────
112
  document.getElementById('goBtn').onclick = () => {
113
  const name = (document.getElementById('nickname').value || "").trim() || "Guest";
114
  document.getElementById('gate').style.display = 'none';
115
  document.getElementById('app').style.display = 'block';
116
+
117
+ // Điều chỉnh overlay-top theo chế độ:
118
+ // - Host: che cao (ẩn form Join), trông như vào thẳng
119
+ // - Guest: che thấp (để lộ form Join, người nhận link có thể nhấn Enter)
120
+ const ovTop = document.getElementById('ovTop');
121
+ ovTop.style.height = (view === "host") ? "180px" : "70px";
122
+
123
  const url = "https://tlk.io/" + encodeURIComponent(room) + "?nickname=" + encodeURIComponent(name);
124
  document.getElementById('tlk').src = url;
125
+
126
+ // Với host: cuộn nhẹ để đảm bảo phần chat lộ ngay
127
+ if (view === "host") {
128
+ setTimeout(() => {
129
+ try { document.getElementById('tlk').contentWindow.scrollTo(0, 260); } catch(e) {}
130
+ }, 1500);
131
+ }
132
  };
133
 
134
+ // ── Tạo phòng bí mật & sinh 2 link: host/guest ─────────────────
135
  document.getElementById('mkRoom').onclick = () => {
136
  const rnd = Math.random().toString(36).slice(2,8);
137
  const newRoom = `cvnss4-0-${rnd}`;
138
+ const base = `${location.origin}${location.pathname}`;
139
+ const host = `${base}?room=${newRoom}&view=host`;
140
+ const guest = `${base}?room=${newRoom}&view=guest`;
141
+
142
+ document.getElementById('links').style.display = 'block';
143
+ document.getElementById('hostLink').textContent = host;
144
+ document.getElementById('guestLink').textContent = guest;
145
+
146
+ document.getElementById('copyHost').onclick = () => navigator.clipboard.writeText(host).then(()=>alert("✅ Đã copy Host link!"));
147
+ document.getElementById('copyGuest').onclick = () => navigator.clipboard.writeText(guest).then(()=>alert("✅ Đã copy Guest link!"));
148
  };
149
  </script>
150
  </body>