Test 2

MMC - Material Modern Chat

Material Modern Chat is based on HTML and CSS and is inspired by Hangouts’s Chat Layout. If you have a working chat application or planning to make a new then it is for you.

Purchase
Project Structure
You'll notice that there are two sets of the files. The min means that the file is "compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.

MyWebsite/
|--css/
|  |--mmc-chat.css
|  |--mmc-theme.css
|
|--plugins/
|  |--materialize framework/
|
|--js/
|  |--mmc-common.js
|  |--mmc-chat.js
|  |--mmc-inbox.js
|--sass/
|  |--variables.scss
|  |--mmc-chat.scss
|  |--mmc-theme.scss
|
|--inbox.html
|--index.html

HTML Setup
Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import MMC - Material Modern Chat into your webpage.
                
<!DOCTYPE html>
  <html>
        <head>
            <!--Import Google Icon Font-->
            <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

            <!--Import materialize.css-->
            <link href="assets/plugins/materialize/css/materialize.min.css" rel="stylesheet" />

            <!--Import chat css-->
            <link href="assets/css/mmc-chat.css" rel="stylesheet" />

            <!--Import theme css-->
            <link href="assets/css/mmc-theme.min.css" rel="stylesheet" />  
                         
            <!--Let browser know website is optimized for mobile-->
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        </head>
        <body>
            <!-- BEGIN CHAT -->
            <div id="mmc-chat" class="color-default">
                <!-- BEGIN CHAT BOX -->
                <div class="chat-box">
                    <!-- BEGIN CHAT BOXS -->
                    <ul class="boxs">
                        <!-- BEGIN CHAT BOX -->
                        <li class="box " data-id="2">
                        </li>
                        <!-- END CHAT BOX -->
                    </ul>
                    <!-- END CHAT BOXS -->  
                </div>
                <!-- END CHAT BOX --> 
            </div>
            <!-- END CHAT -->


        <!-- BEGIN SIDEBAR -->
        <div id="sidebar" class="right scroll">
            <div class="had-container">
                <!-- BEGIN SIDEBAR HEADER-->
                <div class="sidebar-header">
                    <div class="sidebar-collapse"><i class="small material-icons">reorder</i></div>
                        <!-- BEGIN SEARCHBAR-->
                        <div class="row searchbar">                   
                        </div>
                        <!-- END SEARCHBAR-->
                    </div>
                </div>
                <!-- END SIDEBAR HEADER-->
                <!-- BEGIN USERS -->
                <div class="users">
                    <ul class="user-list" wave-effect="true" wave-color="waves-teal">
                        <!-- BEGIN USER-->
                        <li class="user-tooltip" data-id="1" data-status="online" data-username="Rufat Askerov" data-position="left" data-tooltip="Rufat Askerov">
                                            
                        </li>
                        <!-- END USER-->                     
                    </ul>                  
                </div>
                <!-- END USERS -->
            </div>
        </div>
        <!-- END SIDEBAR -->


        <!--Placed at the end of the document so the pages load faster -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="assets/plugins/materialize/js/_bin/materialize.min.js"></script>
        <script src="assets/js/mmc-common.js"></script>
        <script src="assets/js/mmc-chat.js"></script>
        </body>
    </html>