powerchat/client.html at main · sorinbotirla/powerchat · 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
<html>
<head>
    <title>PowerChat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
        @import "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css";
        @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css";
        @import "assets/css/client.css";
        @import "assets/css/client.responsive.css";

        /* BEGIN STYLES FOR CLIENT DEMO */
        html, body {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: clip;
            background: #f7f7f7;
        }
        /* END STYLES FOR CLIENT DEMO */
    </style>
</head>
<body>
<div class="powerChatloader"></div>
<a href="javascript:void(0);" class="btnShowPowerChatFob"><i class="fas fa-comment-dots"></i><span class="newMessagesCounter" data-newmessages="0">0</span></a>
<div class="powerChat">
    <div class="introductionWrapper">
        <div class="introductionContainer">
            <p><strong>Hello,</strong> tell us who you are to get in contact with one of our operators.</p>
            <div class="introductionInner">
                <div class="fieldGroup">
                    <div class="fieldWrapper">
                        <span class="label">First Name <strong>*</strong></span>
                        <input type="text" placeholder="First Name" class="introductionFirstName" spellcheck="false" />
                        <span class="error">Required</span>
                    </div>
                    <div class="fieldWrapper">
                        <span class="label">Last Name <strong>*</strong></span>
                        <input type="text" placeholder="Last Name" class="introductionLastName" spellcheck="false" />
                        <span class="error">Required</span>
                    </div>
                    <div class="fieldWrapper">
                        <span class="label">Email <strong>*</strong></span>
                        <input type="text" placeholder="Email" class="introductionEmail" spellcheck="false" />
                        <span class="error">Required</span>
                    </div>
                </div>
            </div>
            <div class="introductionInner">
                <div class="fieldGroup">
                    <div class="fieldWrapper">
                        <input type="checkbox" name="agreegdprchat" id="agreegdprchat" class="agreegdprchat" />
                        <!--REPLACE ANCHOR HREF WITH TERMS AND CONDITIONS URL-->
                        <label for="agreegdprchat">I agree with </label><a href="javascript:void(0);" target="_blank">Terms and Conditions<strong>*</strong></a>
                        <span class="error">Required</span>
                    </div>
                </div>
            </div>
            <a href="javascript:void(0);" class="btnIntroductionStartConversation">Start Conversation</a>
        </div>
    </div>
    <div class="chatWrapper table">
        <div class="chatHead tr">
            <div class="chatHeadInner td">
                <h2>Client Support</h2>
                <a href="javascript:void(0);" class="btnToggleChat"></a>
            </div>
        </div>
        <div class="chatBody tr">
            <div class="chatBodyInner td">
                <div class="chatConversationWrapper">

                </div>
            </div>
        </div>
        <div class="chatFooter tr">
            <div class="chatFooterInner td">
                <div class="chatNewMessageWrapper table">
                    <div class="addFilesWrapper td">
                        <div class="uploadedFilesThumbnailsInner"></div>
                        <a href="javascript:void(0);" class="btnSelectNewFiles show"><i class="fas fa-images"></i></a>
                        <a href="javascript:void(0);" class="btnCancelAddingNewFiles"><i class="fas fa-plus"></i></a>
                        <input type="file" id="selectfile" multiple accept="image/png, image/jpeg, video/mp4" />
                    </div>
                    <div class="inputWrapper td">
                        <textarea class="newMessageInput show" placeholder="Write your message here" rows="1" spellcheck="false"></textarea>
                        <a href="javascript:void(0);" class="btnSendThisMessage show"><i class="fas fa-paper-plane"></i></a>
                    </div>
                    <div class="btnSendPreloadedFilesWrapper td">
                        <a href="javascript:void(0);" class="btnSendPreloadedFiles"><i class="fas fa-paper-plane"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="statusmsgs"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.js"></script>
<script defer src="assets/js/client.js"></script>
</body>
</html>