chatroom/chatUI.html at master · dilipp02/chatroom · 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
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>Chatroom</title>
</head>
<body>

    <div class="container my-4">
        <p class="display-3 my-4 text-center">Whatsapp</h5>
        <div class="sections container my-4 text-center">
            <p class="my-2">Choose a chatroom:</p>
            <button class="btn" id="official">#official</button>
            <button class="btn" id="gaming">#gaming</button>
            <button class="btn" id="music">#music</button>
            <button class="btn" id="random">#random</button>
        </div>
        <div class="chat-window">
            <ul class="chat-list list-group"></ul>
        </div>
        <form class="msg my-3">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">Your message:</div>
                </div>
                <input type="text" id="message" class="form-control" required>
                <div class="input-group-append">
                    <input type="submit" class="btn" value="send">
                </div>
            </div>
        </form>
        <form class="update-name my-3">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">Update name:</div>
                </div>
                <input type="text" id="name" class="form-control" required>
                <div class="input-group-append">
                    <input type="submit" class="btn" value="update">
                </div>
            </div>
            <div class="update-name-msg text-center my-2"></div>
        </form>
    </div>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="http://cdn.date-fns.org/v1.9.0/date_fns.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>
    <script>
        var firebaseConfig = {
            apiKey: "AIzaSyAdlraRKFA8oGdF0fIO2Ga346Rl2mqo8l0",
            authDomain: "myjsproj-edda3.firebaseapp.com",
            databaseURL: "https://myjsproj-edda3.firebaseio.com",
            projectId: "myjsproj-edda3",
            storageBucket: "myjsproj-edda3.appspot.com",
            messagingSenderId: "1025258449539",
            appId: "1:1025258449539:web:f5b4c15b4d246e9eac09b6"
        };
        firebase.initializeApp(firebaseConfig);
        db = firebase.firestore();
    </script>
    <script src="scripts/chat.js"></script>
    <script src="scripts/ui.js"></script>
    <script src="scripts/app.js"></script>
</body>
</html>