PHP Classes

File: resources/views/chat.php

Recommend this page to a friend!
  Classes of Ahmad Mustapha   ReactPHP Chat Client   resources/views/chat.php   Download  
File: resources/views/chat.php
Role: Auxiliary script
Content type: text/plain
Description: Auxiliary script
Class: ReactPHP Chat Client
Implement a live chat system based on Web Sockets
Author: By
Last change:
Date: 3 years ago
Size: 5,773 bytes
 

Contents

Class file image Download
<!doctype html>
<html>

<head>
    <title>Live Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="<?= url('assets/css/bootstrap.min.css') ?>">
    <link href="<?= url('assets/css/style.css') ?>" rel="stylesheet" id="bootstrap-css">
    <link href="<?= url('assets/css/fontawesome-all.min.css') ?>" rel="stylesheet" id="bootstrap-css">
    <style>
        .conn-status {
            margin: 15px 25px;
        }

        .small-text {
            font-size: 11px;
        }
    </style>
</head>

<body>
    <div class="conn-status font-weight-bold list-group-item">
        <i class="fa fa-info-circle"></i> Connectivity: <i id="conn-status" class="badge badge-primary">ready</i>
    </div>
    <div class="container" id="block-room">
        <div class="card">
            <div class="card-header">
                Choose Room
            </div>
            <div class="card-body">
                <form id="form-choose-room">
                    <div class="form-group">
                        <label for="input-name">User Name:</label><br>
                        <input type="text" id="input-name" name="name" value="<?= $room['user'] ?>" class="form-control mb-2" placeholder="Enter your name">
                    </div>
                    <div class="form-group">
                        <label for="input-room">Room/Group/Channel Name:</label>
                        <input type="text" id="input-room" name="room" value="<?= $room['name'] ?>" class="form-control" placeholder="Enter room name">
                    </div>

                    <button type="submit" class="btn btn-block btn-md btn-primary mt-2">
                        Join
                        <i class="fa fa-hiking"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <div class="container mt-3 d-none" id="block-chat">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between">
                    <div class="badge badge-primary p-2">
                        <i class="fa fa-home"></i>
                        <b id="room-name"></b>
                    </div>
                    <div>
                        <button id="btn-leave-room" class="btn btn-sm btn-danger"><i class="fa fa-sign-out-alt"></i> Leave Room</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="messaging">
                        <div class="inbox_msg">
                            <div id="inbox-people" class="inbox_people">
                                <div class="inbox_chat" id="people-list">
                                </div>
                            </div>
                            <div class="mesgs">
                                <div class="msg_history" id="messages">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <form id="form-send-message">
                    <textarea rows="3" id="input-message" name="message" class="form-control" placeholder="Type your message..."></textarea>

                    <button type="submit" class="btn btn-block btn-md btn-primary mt-2">
                        Send Message
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <template id="template-chat-list">
        <div class="chat_list active_chat" id="client-{{id}}">
            <div class="chat_people">
                <div class="chat_ib">
                    <h6>{{name}}</h6>
                </div>
            </div>
        </div>
    </template>

    <template id="template-inbox-incoming">
        <div class="incoming_msg mt-3">
            <div class="received_msg">
                <div class="received_withd_msg">
                    <p>
                        <b>{{name}}</b><br />
                        <span class="ml-3">{{message}}</span>
                    </p>
                    <span class="time_date">{{time}}</span>
                </div>
            </div>
        </div>
    </template>
    <template id="template-inbox-outgoing">
        <div class="outgoing_msg mt-3">
            <div class="sent_msg">
                <p class="p-2">
                    {{message}}
                </p>
                <span class="time_date">{{time}}</span>
            </div>
        </div>
    </template>
    <template id="template-user-joined">
        <div class="text-center">
            <span class="bg-info shadow-1 p-1 small-text">
                <i class="fa fa-user"></i>
                {{name}} joined
            </span>
        </div>
    </template>
    <template id="template-user-left">
        <div class="text-center">
            <span class="bg-warning shadow-1 p-1 small-text">
                <i class="fa fa-user"></i>
                {{name}} left
            </span>
        </div>
    </template>

    <script src="<?= url('assets/js/jquery-3.5.1.min.js') ?>"></script>
    <script src="<?= url('assets/js/bootstrap.bundle.min.js') ?>"></script>
    <script src="<?= url('assets/js/moment.min.js') ?>"></script>
    <script src="<?= url('assets/js/handlebars.min-v4.7.6.js') ?>"></script>
    <script src="<?= url('assets/js/EventEmitter.min.js') ?>"></script>
    <script src="<?= url('assets/js/howler.min.js') ?>"></script>
    <script src="<?= url('assets/js/socket.js') ?>"></script>
    <script src="<?= url('assets/js/chat.js') ?>"></script>
</body>

</html>