HEX

File: /var/www/html/labs/chatbot2/chat-form-step-33.php
<?php header('Access-Control-Allow-Origin: *'); ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="gu">
<head>
<?php require("head.php"); ?>
<style>
    .chat-div
    {
        /* background:#ccc; */
        min-height:400px;
        border: 1px solid #ccc;

        max-width: 400px;
    margin: auto;

      
         
    }
    .chat-div p{
        padding:10px;
        background:#ccc;
    }
    .chat-div-heading
    {
        background:#fff;
        border: 1px solid #ccc;
        padding-left:10px;
        margin-bottom:10px;
    }
    .chat-div-message
    {
        height:55px;
        border: 1px solid #ccc;
        max-width: 400px;
    margin: auto;
    }
    .chat-message-botton
    {
        float:right;
        background:#167bc3;
        height:55px;
        color:#fff;
        text-align:center;
        padding:15px;
        width:15%;
        
    }
    .chat-div-message p
    {
        font-size:10px;
        color:#ccc;
        float:left;
        padding: 10px;

    }

    #exampleFormControlTextarea1
    {
        float: left;
        width:85%;
        /* border: none; */
    }

    .mans
    {
        float:right;
        width:80%;
        color:#fff;
        background:#0a71f091 !important;
        display:none;
    }

    .mque
    {
        float:left;
        width:80%;
        
    }

  

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */  .chat-div { min-height:430px; }}
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ .chat-div { min-height:430px; } }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */  .chat-div { min-height:430px; } }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ .chat-div { height:430px; }}
@media (min-width:1450px) { /* hi-res laptops and desktops */ .chat-div { height:630px; }}

</style>
</head>
<body class="home page-template page-template-template page-template-home-page page-template-templatehome-page-php page page-id-5 wp-embed-responsive group-blog responsive-menu-slide-left">
<?php require("inc/web-header.php"); ?>

<div class="container">
    <div class="col-md-12">
        <h2>Chat with us</h2>
        <div class="chat-div" id="chat-div">
            <div class="chat-div-heading"><h4>Ask Me  <div id="data"></div>
</h4></div>             
            <p class="mque">Hi! I'm John, How can I help you?</p>
            <p class="mans"></p>
        </div>
        <div class="chat-div-message" id="chat-div-message">
            <!-- <p>Type Message...</p> -->
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="2" placeholder="Type Message"></textarea>
            <div class="chat-message-botton" onclick="send();"> >> </div>
        </div>
    </div>

 
</div>
</div>
</body>
</html>

<script>
     
 
    function send()
    {
        var message = $('#exampleFormControlTextarea1').val();
        if(message)
        {
            $('.mans').show();
            $('.mans').html(message);
            $('#exampleFormControlTextarea1').val('');
        }
        
    }


</script>