Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

102
LINES

< > BotCompany Repo | #1028275 - NewChatBotDesign

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (2983L/20K).

// Hussain Mill's design
sclass NewChatBotDesign {
  bool loadJQuery = true;
  
  S headStuff() {
    ret hStylesheetSnippet(#1028274) + mls_unindent([[
      <!-- Fonts -->
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    ]]);
  }
  
  S demoBodyStuff() {
    ret mls_unindent([[
      <div class="chatbot">
          <div class="chat-box">
              <div class="chat">
                  <div class="chat_header">
                      <h2>Chatbot</h2>
                  </div>
                  <div id="chat_converse" class="chat_conversion chat_converse">
                      <span class="chat_msg_item chat_msg_item_admin">
                          <div class="chat_avatar">
                             <img src="http://res.cloudinary.com/dqvwa7vpe/image/upload/v1496415051/avatar_ma6vug.jpg"/>
                          </div>
                          Hey there! Any question?
                      </span>
                      <span class="chat_msg_item chat_msg_item_user">Hello!</span>
                      <span class="status">20m ago</span>
                      <span class="chat_msg_item chat_msg_item_admin">
                          <div class="chat_avatar">
                             <img src="http://res.cloudinary.com/dqvwa7vpe/image/upload/v1496415051/avatar_ma6vug.jpg"/>
                          </div>Hey! Would you like to talk sales, support, or anyone?
                      </span>
                      <span class="chat_msg_item chat_msg_item_user">
                          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      </span>
                      <span class="status2">Just now.</span>
                  </div>
                  <div id="wave">
                      <h4>User is typing</h4>
                      <span class="dot"></span>
                      <span class="dot"></span>
                      <span class="dot"></span>
                  </div>
                  <div class="chat-bottom">
                      <a class="camera-icon"><i class="fas fa-camera"></i></a>
                      <a class="send-icon"><i class="fas fa-paper-plane"></i></a>
                      <input type="text" name="chat_message" placeholder="Send a message" class="chat_field chat_message" />
                  </div>
              </div>
              <a class="chat-icon"><i class="fas fa-comment-dots"></i></a>
          </div>
      </div>
      <!-- Chatbot Ends -->

      ]]) + stringIf(loadJQuery, [[
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>]]) + mls_unindent([[
      
      <script type="text/javascript">
          hideChat(0);

          $('.chat-icon').click(function() {
            toggleFab();
          });

          //Toggle chat and links
          function toggleFab() {
              $('.chat-icon i').toggleClass('fa-comment-dots');
              $('.chat-icon i').toggleClass('fa-times');
              $('.chat-icon i').toggleClass('is-active');
              $('.chat-icon i').toggleClass('is-visible');
              $('.chat-icon').toggleClass('is-float');
              $('.chat').toggleClass('is-visible');
              $('.fab').toggleClass('is-visible');
            
          }

          function hideChat(hide) {
              switch (hide) {
              case 1:
                  $('#chat_converse').css('display', 'block');
                  break;
              }
          }

          // Text Animation
          $("#wave").hide();
          $(".chat_field.chat_message").focus(function() {
              $('#wave').show('slow');       
              //return false;
          });
        
          $('.chat_field.chat_message').blur(function() {
              if( !$(this).val() ) {
                  $('#wave').hide('slow');
              }
          });
      </script>
    ]]);
  }
}

download  show line numbers  debug dex   

Travelled to 6 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, xrpafgyirdlv

No comments. add comment

Snippet ID: #1028275
Snippet name: NewChatBotDesign
Eternal ID of this version: #1028275/4
Text MD5: 68c8105660f1173dbb36ca03e6722213
Transpilation MD5: d8ed73fdbc24f9764776af4c8efffd81
Author: stefan
Category: javax / html
Type: JavaX fragment (include)
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-06-05 18:37:46
Source code size: 4283 bytes / 102 lines
Pitched / IR pitched: No / No
Views / Downloads: 58 / 180
Version history: 3 change(s)
Referenced in: [show references]

Formerly at http://tinybrain.de/1028275 & http://1028275.tinybrain.de