SIA-DemoChatbot/index.html at master · HarshInvader/SIA-DemoChatbot · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Chat Bot</title>
  <meta charset="UTF-8">
  <meta name="description" content="Chat bot by Harsha">
  <meta name="keywords" content="HTML, CSS, JQuery, DialogFlow, Chatbot">
  <meta name="author" content="Sriharsha G">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="">
  <!-- CSS -->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="apple-touch-icon" sizes="180x180" href=".icons/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href=".icons/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href=".icons/favicon/favicon-16x16.png">
  <link rel="manifest" href=".icons/favicon/site.webmanifest">
  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700&display=swap" rel="stylesheet">
</head>

<body>


  <div class="container">

    <!-- Page Content -->
    <div class="page-content">
      <img src="icons/bot.svg" alt="bot logo">
      <br>
      A Simple Chat-Bot by Harsha.
      <br>
      <h6><a href="https://github.com/HarshInvader/SIA-DemoChatbot">[Code is Here]</a></h4>

        <!-- Chatbot Stuff -->
        <salesAI>
          <div class="ChatbotClass">
            <div class="chatCont" id="chatCont">

              <!-- Bot Top -->
              <div class="bot_profile close">
                <img src="icons/bot2.svg" class="bot_profile_img" alt="chat box logo">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle"
                  class="svg-inline--fa fa-times-circle fa-w-16 white" role="img" xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 512 512" data-fa-i2svg="">
                  <path fill="currentColor"
                    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z">
                  </path>
                </svg>
                <!-- <i class="fas fa-times-circle white" aria-hidden="true"></i> -->


              </div>

              <!-- Intro Text -->
              <div id="result_div" class="resultDiv">
                <p class="botResult">Hi there! 👋 I am SIA. How can I help you today?</p>

                <div class="clearfix"></div>
                <div class="suggestion">
                  <div class="sugg-title">Suggestions: </div>
                  <span class="sugg-options">Who are you?</span>
                  <span class="sugg-options">How old are you?</span>
                  <span class="sugg-options">When were you made?</span>
                  <span class="sugg-options">You are beautiful.</span>
                </div>
              </div>

              <!-- Chat Area -->

              <div class="chatForm" id="chat-div">
                <!-- Loading Spinner -->
                <div class="spinner">
                  <div class="bounce1"></div>
                  <div class="bounce2"></div>
                  <div class="bounce3"></div>
                </div>
                <div class="empty"></div>

                <!-- Input Field -->
                <div class="options">
                  <div id="optionButton1" class="optionButton">Stop</div>
                  <div id="optionButton2" class="optionButton">Hello</div>
                </div>
                <input type="text" id="chat-input" autocomplete="off" placeholder="Type your question here"
                  class="form-control">
                <div id="sendButton" class="background-for-send-button">
                  <div class="fa-paper-plane">
                    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="paper-plane"
                      class="svg-inline--fa fa-paper-plane fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 512 512" data-fa-i2svg="">
                      <path fill="currentColor"
                        d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z">
                      </path>
                    </svg>
                  </div>

                </div>

              </div>
            </div>

            <!--Chat Icon-->
            <div class="profile_div">
              <div class="row">
                <div class="col-hgt">
                  <img src="icons/bot3.svg" class="img-profile" alt="SIA welcome message">
                </div>
              </div>
            </div>
          </div>
        </salesAI>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"
          integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
        <script src="./app.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</body>

</html>