Simple-jQuery-PHP-Chat/chat.html at master · AbijahKaj/Simple-jQuery-PHP-Chat · 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
<!DOCTYPE html>
<!--
Copyright 2019 Abijah Kajabika.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
    <head>
        <title>Simple Chatter</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.css" >
        <link rel="stylesheet" href="css/main.css" >
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <a class="navbar-brand" href="#">
                    Chatter
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="home.html">Home
                            </a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="chat.html">Messages</a>
                            <span class="sr-only">(current)</span>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Discover</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Notifications</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="col-xl-6">
                <input type="text">
                <ul class="list list-group" id="chats">

                </ul>
            </div>
            <div class="col-md-8 col-xl-6 chat">
                <div class="card">
                    <div class="card-header">
                        Chatter
                    </div>
                    <div class="card-body" id="msgfeed">
                        <h5 class="card-title  text-center">Chat with user X</h5>
                        <div class="message-block-send" >
                            <div class="user">Them</div>
                            <div class="message">Hello, how are you?</div>
                            <div class="time">3 minutes ago</div>
                        </div>
                        <div class="message-block-receive">
                            <div class="user">Me</div>
                            <div class="message">Hi I'm so fine, and you?</div>
                            <div class="time">Just now</div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <form id="msgform" method="POST">
                            <input type="hidden" name="username" value="USERX" />
                            <div class="input-group">
                                <textarea name="msg" class="form-control" placeholder="Type your message..." aria-label="With textarea"></textarea>
                                <div class="input-group-append">
                                    <input class="btn btn-primary" type="submit" value="Send">
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/chat.js"></script>
    </body>
</html>