Frontend-chat-app/index.html at master · Xantonozar/Frontend-chat-app · 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
116
117
118
119
120
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="https://server-ye6l.onrender.com/socket.io/socket.io.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>

  <script defer src="starting.js"></script>
  <title>chat</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">

</head>
<body>
  <div id="navbar" class="navbar bg-base-300">
    <div class="navbar-start">
      <div class="dropdown">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
        </div>
        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
          <li><a>Homepage</a></li>

          <li><a>About</a></li>
        </ul>
      </div>
    </div>
    <div class="navbar-center">
      <a class="btn btn-ghost text-xl">Anony-Chat</a>
    </div>
    <div class="navbar-end">
      <!-- The button to open modal -->
<!-- You can open the modal using ID.showModal() method -->
<button id="btn" class="btn" onclick="my_modal_4.showModal()">Join Now</button>
<dialog id="my_modal_4" class="modal">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 class="font-bold text-lg">Hello Guest!</h3>
    <p class="py-4">Enter you name to join and chat</p>
    <div class="text-box">
    <label class="input input-bordered flex items-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z" /></svg>
      <input id="username" type="text" class="grow" placeholder="Username" />
    </label>
    <form method="dialog">
    <button id="button" class="btn  btn-md">JOIN</button>
    </form>

    </div>
  </div>

</dialog>
    </div>
  </div>
 <div id="container" class="message-container">
  <div id="message-box">
    <div class="chat chat-start">
      <div class="chat-header text-primary">
        Salman Zadid
        <time class="text-xs opacity-50">12:45</time>
      </div>
      <div class="chat-bubble chat-bubble-primary">Welcome to anonymous chat room</div>
    </div>
    <div class="chat chat-start">
      <div class="chat-header text-secondary">
        Tanzib Ahsan
        <time class="text-xs opacity-50">12:45</time>
      </div>
      <div class="chat-bubble chat-bubble-secondary">How can I join this ?</div>
    </div>
    <div class="chat chat-start">
      <div class="chat-header text-accent">
        Salman Ahmed
        <time class="text-xs opacity-50">12:45</time>
      </div>
      <div class="chat-bubble chat-bubble-accent">That's so simple</div>
    </div>
    <div class="chat chat-end">
      <div class="chat-header text-info">
        Owner
        <time class="text-xs opacity-50">12:45</time>
      </div>
      <div class="chat-bubble chat-bubble-info">Calm down,Guest.</div>
    </div>
    <div class="chat chat-end">
      <div class="chat-header text-success">
        Owner
        <time class="text-xs opacity-50">12:45</time>
      </div>
      <div class="chat-bubble chat-bubble-success">First of all click the Join Now button from above.</div>
    </div>
    <div class="chat chat-end">
      <div class="chat-header text-warning">
       Owner
        <time class="text-xs opacity-50">12:45</time>
      </div>
      <div class="chat-bubble chat-bubble-warning">Then enter a fake name according to your preferrence .</div>
    </div>
    <div class="chat chat-end">
      <div class="chat-header text-error">
        Owner
        <time class="text-xs opacity-50">12:45</time>
      </div>
      <div class="chat-bubble chat-bubble-error">Then click Join to enter.</div>
    </div>
  </div>
 </div>
 <div  class=" textField bg-base-100">
 <form id="myform" action="#">
  <input  id="msgInp" type="text" placeholder="Type here" class="input input-md input-bordered w-full max-w-xs" disabled />
  <button id="send" type="submit" class="btn btn-md btn-outline " disabled>Send</button>
 </form>
</div>
</body>

</html>