updated CSS

index.html

@@ -10,515 +10,7 @@
 
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
   <link rel='stylesheet' href='css/jquery.mCustomScrollbar.min.css'>
-
-  <style>
-    /*--------------------
-Mixins
---------------------*/
-    /*--------------------
-Body
---------------------*/
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-    }
-
-    html,
-    body {
-      height: 100%;
-    }
-
-    body {
-      /*background: linear-gradient(135deg, #044f48, #2a7561);
-  background-size: cover;*/
-      font-family: 'Bosch Sans' !important;
-      font-size: 12px;
-      line-height: 1.3;
-      overflow: hidden;
-    }
-
-    .bg {
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      background: url("WhyBosch.jpg") no-repeat;
-      background-size: cover;
-      /*filter: blur(80px);
-  transform: scale(1.2);*/
-    }
-
-    /*--------------------
-Chat
---------------------*/
-    .chat {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 75%;
-      height: 90vh;
-      max-height: 500px;
-      z-index: 2;
-      overflow: hidden;
-      box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
-      background: rgba(255, 255, 255, 0.75);
-      border-radius: 20px;
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-    }
-
-    /*--------------------
-Chat Title
---------------------*/
-    .chat-title {
-      flex: 0 1 45px;
-      position: relative;
-      z-index: 2;
-      background: rgba(0, 0, 0, 0.2);
-      color: #fff;
-      text-transform: uppercase;
-      text-align: left;
-      padding: 10px 10px 10px 50px;
-    }
-
-    .chat-title h1,
-    .chat-title h2 {
-      font-weight: bold;
-      font-size: 20px;
-      margin: 0;
-      padding: 0;
-      color: #000;
-    }
-
-    .chat-title h2 {
-      color: rgba(255, 255, 255, 0.5);
-      font-size: 10px;
-      letter-spacing: 1px;
-    }
-
-    .chat-title .avatar {
-      position: absolute;
-      z-index: 1;
-      top: 8px;
-      left: 9px;
-      border-radius: 30px;
-      width: 30px;
-      height: 30px;
-      overflow: hidden;
-      margin: 0;
-      padding: 0;
-      border: 2px solid rgba(255, 255, 255, 0.24);
-    }
-
-    .chat-title .avatar img {
-      width: 100%;
-      height: auto;
-    }
-
-    /*--------------------
-Messages
---------------------*/
-    .messages {
-      flex: 1 1 auto;
-      /*color: rgba(255, 255, 255, 0.5);*/
-      color: rgb(255 255 255);
-      overflow: hidden;
-      position: relative;
-      width: 100%;
-    }
-
-    .messages .messages-content {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 101%;
-      width: 100%;
-    }
-
-    .messages .message {
-      clear: both;
-      float: left;
-      padding: 6px 10px 7px;
-      border-radius: 10px 10px 10px 0;
-      background: rgba(0, 0, 0, 0.3);
-      margin: 8px 0;
-      font-size: 14px;
-      line-height: 1.4;
-      margin-left: 35px;
-      position: relative;
-      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-    }
-
-    .messages .message .timestamp {
-      position: absolute;
-      bottom: -15px;
-      font-size: 9px;
-      color: rgba(0, 0, 0, 0.75);
-    }
-
-    .messages .message::before {
-      content: "";
-      position: absolute;
-      bottom: -6px;
-      border-top: 6px solid rgba(0, 0, 0, 0.3);
-      left: 0;
-      border-right: 7px solid transparent;
-    }
-
-    .messages .message .avatar {
-      position: absolute;
-      z-index: 1;
-      bottom: -15px;
-      left: -35px;
-      border-radius: 30px;
-      width: 30px;
-      height: 30px;
-      overflow: hidden;
-      margin: 0;
-      padding: 0;
-      border: 2px solid rgba(255, 255, 255, 0.24);
-    }
-
-    .messages .message .avatar.user {
-      position: absolute;
-      z-index: 1;
-      bottom: -15px;
-      left: 100%;
-      border-radius: 30px;
-      width: 30px;
-      height: 30px;
-      overflow: hidden;
-      margin: 0;
-      padding: 0;
-      border: 2px solid rgba(255, 255, 255, 0.24);
-    }
-
-    .messages .message .avatar img {
-      width: 100%;
-      height: auto;
-    }
-
-    .messages .message.message-personal {
-      float: right;
-      color: #fff;
-      text-align: right;
-      background: linear-gradient(120deg, #248A52, #257287);
-      border-radius: 10px 10px 0 10px;
-    }
-
-    .messages .message.message-personal::before {
-      left: auto;
-      right: 0;
-      border-right: none;
-      border-left: 5px solid transparent;
-      border-top: 4px solid #257287;
-      bottom: -4px;
-    }
-
-    .messages .message:last-child {
-      margin-bottom: 30px;
-    }
-
-    .messages .message.new {
-      transform: scale(0);
-      transform-origin: 0 0;
-      -webkit-animation: bounce 500ms linear both;
-      animation: bounce 500ms linear both;
-    }
-
-    .messages .message.loading::before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      content: "";
-      display: block;
-      width: 3px;
-      height: 3px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.5);
-      z-index: 2;
-      margin-top: 4px;
-      -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
-      animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
-      border: none;
-      -webkit-animation-delay: 0.15s;
-      animation-delay: 0.15s;
-    }
-
-    .messages .message.loading span {
-      display: block;
-      font-size: 0;
-      width: 20px;
-      height: 10px;
-      position: relative;
-    }
-
-    .messages .message.loading span::before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      content: "";
-      display: block;
-      width: 3px;
-      height: 3px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.5);
-      z-index: 2;
-      margin-top: 4px;
-      -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
-      animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
-      margin-left: -7px;
-    }
-
-    .messages .message.loading span::after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      content: "";
-      display: block;
-      width: 3px;
-      height: 3px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.5);
-      z-index: 2;
-      margin-top: 4px;
-      -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
-      animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
-      margin-left: 7px;
-      -webkit-animation-delay: 0.3s;
-      animation-delay: 0.3s;
-    }
-
-    /*--------------------
-Message Box
---------------------*/
-    .message-box {
-      flex: 0 1 40px;
-      width: 100%;
-      background: rgba(0, 0, 0, 0.3);
-      padding: 20px;
-      position: relative;
-    }
-
-    .message-box .message-input {
-      background: white;
-      border: none;
-      outline: none !important;
-      resize: none;
-      color: black;
-      font-size: 16px;
-      height: 40px;
-      margin: 0;
-      padding-right: 20px;
-      padding-left: 10px;
-      width: 92%;
-      line-height: 25px;
-      border-radius: 8px;
-    }
-
-    .message-box textarea:focus:-webkit-placeholder {
-      color: transparent;
-    }
-
-    .message-box .message-submit {
-      position: absolute;
-      z-index: 1;
-      color: #fff;
-      border: none;
-      background: #248A52;
-      font-size: 14px;
-      text-transform: uppercase;
-      line-height: 1;
-      padding: 14px 20px;
-      border-radius: 10px;
-      outline: none !important;
-      transition: background 0.2s ease;
-      margin-left: 12px;
-    }
-
-    .message-box .message-submit:hover {
-      background: #1D7745;
-    }
-
-    /*--------------------
-Custom Srollbar
---------------------*/
-    .mCSB_scrollTools {
-      margin: 1px -3px 1px 0;
-      opacity: 0;
-    }
-
-    .mCSB_inside>.mCSB_container {
-      margin-right: 0px;
-      padding: 0 10px;
-    }
-
-    .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
-      background-color: rgba(0, 0, 0, 0.5) !important;
-    }
-
-    /*--------------------
-Bounce
---------------------*/
-    @-webkit-keyframes bounce {
-      0% {
-        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      4.7% {
-        transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      9.41% {
-        transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      14.11% {
-        transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      18.72% {
-        transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      24.32% {
-        transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      29.93% {
-        transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      35.54% {
-        transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      41.04% {
-        transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      52.15% {
-        transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      63.26% {
-        transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      85.49% {
-        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      100% {
-        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-    }
-
-    @keyframes bounce {
-      0% {
-        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      4.7% {
-        transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      9.41% {
-        transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      14.11% {
-        transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      18.72% {
-        transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      24.32% {
-        transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      29.93% {
-        transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      35.54% {
-        transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      41.04% {
-        transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      52.15% {
-        transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      63.26% {
-        transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      85.49% {
-        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-
-      100% {
-        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-      }
-    }
-
-    @-webkit-keyframes ball {
-      from {
-        transform: translateY(0) scaleY(0.8);
-      }
-
-      to {
-        transform: translateY(-10px);
-      }
-    }
-
-    @keyframes ball {
-      from {
-        transform: translateY(0) scaleY(0.8);
-      }
-
-      to {
-        transform: translateY(-10px);
-      }
-    }
-
-    .logo-upright {
-      position: fixed;
-      width: 10%;
-      right: 12%;
-    }
-
-    .timendate {
-      text-align: right;
-      background: #fff;
-      /* border-bottom: 1px solid #333; */
-      box-shadow: 4px 3px 13px #eee;
-    }
-
-    .message.message-personal.new {
-      margin-right: 35px;
-    }
-
-    h2.timetext {
-      font-weight: normal;
-      font-size: 18px;
-      padding-right: 30px;
-    }
-  </style>
-
+  <link rel="stylesheet" href="css/style.css">
   <script>
     window.console = window.console || function (t) { };
   </script>
@@ -533,7 +25,7 @@ Bounce
   <div class="chat">
     <div class="chat-title">
       <h1>BSH</h1>
-      <h2>Effortless living with Bosch home appliances chatbot - troubleshoot, maintain, and get answers with ease.</h2>
+      <h2>Bosch home appliances chatbot - troubleshoot, maintain, and get answers with ease.</h2>
       <figure class="avatar">
         <img src="bot.png" />
       </figure>
@@ -610,22 +102,7 @@ Bounce
       }
     });
 
-    var Fake = [
-      'Hi there, I\'m AI ML and you?',
-      'Nice to meet you',
-      'How are you?',
-      'Not too bad, thanks',
-      'What do you do?',
-      'That\'s awesome',
-      'Codepen is a nice place to stay',
-      'I think you\'re a nice person',
-      'Why do you think that?',
-      'Can you explain?',
-      'Anyway I\'ve gotta go now',
-      'It was a pleasure chat with you',
-      'Time to make a new codepen',
-      'Bye',
-      ':)'];
+    var Fake = ['I am Bob/Wiki'];
 
 
     function fakeMessage() {

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}