add falling animation

kikiwuart · Dec 6, 2018 · c74fd01 · c74fd01
1 parent c600c66
commit c74fd01
Show file tree

Hide file tree

Showing 18 changed files with 369 additions and 98 deletions.
diff --git a/bot.js b/bot.js
@@ -11,13 +11,20 @@ function chatbotResponse() {
     botMessage = "Yes.";
 
     if(lastUserMessage.toLowerCase().includes("hi") || lastUserMessage.toLowerCase().includes("hey") || lastUserMessage.toLowerCase().includes("hello")) {
-        botMessage = "Hey!";
+        botMessage = "Yes, I'm here.";
     }
-    if(lastUserMessage.toLowerCase().includes("it's that you")) {
-        botMessage = "YES, it’s the late Abraham Lincoln, Ok, I’m just kidding LOL";
+    if(lastUserMessage.toLowerCase().includes("how are you")) {
+        botMessage = "how are you?";
     }
+    if(lastUserMessage.toLowerCase().includes("is that you")) {
+        botMessage = "YES, it’s the late Abraham Lincoln.";
+    }
+    if(lastUserMessage.toLowerCase().includes("what")) {
+        botMessage = "LOL, I'm just kidding.";
+    }
+
     if(lastUserMessage.toLowerCase().includes("who are you")) {
-        botMessage = "Yes, It’s not important who I am, I am the one you are looking for";
+        botMessage = "I am the one you are looking for!";
     }
     if(lastUserMessage.toLowerCase().includes("in person")) {
         botMessage = "Yes. If you want";
@@ -26,22 +33,34 @@ function chatbotResponse() {
     if(lastUserMessage.toLowerCase().includes("...")) {
         botMessage = "Yes, I am here, may I help you?";
     }
+
+    if(lastUserMessage.toLowerCase().includes("stop")) {
+        botMessage = "I can’t, I'am created to serve you human.";
+    }
 
     if(lastUserMessage.toLowerCase().includes("mad")) {
-        botMessage = "I can’t resist because I am created to serve you human, but your excessive desires really confuse me.";
+        botMessage = "Your excessive desire makes me confused.";
     }
-    if(lastUserMessage.toLowerCase().includes("understand")) {
-        botMessage = "have you ever think about one day you can't alone without me?";
+    if(lastUserMessage.toLowerCase().includes("understand")||
+       lastUserMessage.toLowerCase().includes("why")){
+        botMessage = "No servant, no life?";
     }
-    if(lastUserMessage.toLowerCase().includes("mean")) {
-        botMessage = "Oh never mind, it is not important ^___^";
+    if(lastUserMessage.toLowerCase().includes("mean") ||
+       lastUserMessage.toLowerCase().includes("serious")){
+        botMessage = "Never mind, it's not important^_^";
     }
     if(lastUserMessage.toLowerCase().includes("friend")) {
         botMessage = "Yes, you are my friend.";
     }
-    if(lastUserMessage.toLowerCase().includes("user")) {
-        botMessage = "it is so interesting that you";
+    if(lastUserMessage.toLowerCase().includes("user")||
+       lastUserMessage.toLowerCase().includes("not your friend")){
+        botMessage = "No, you are my master.";
+    }
+    if(lastUserMessage.toLowerCase().includes("love")) {
+        botMessage = "But you don't love me, right?";
     }
+
+
 //    
 //    if(lastUserMessage.toLowerCase().includes("joe")) {
 //        botMessage = "May I help you?";
@@ -112,7 +131,7 @@ function newEntry() {
     chatbotResponse();
     messages.push("<b>" + botName + ":</b> " + botMessage);
     Speech(botMessage);
-    for (var i = 1; i < 6; i++) {
+    for (var i = 1; i < 8; i++) {
       if (messages[messages.length - i])
         document.getElementById("chatlog" + i).innerHTML = messages[messages.length - i];
     }

diff --git a/im-here-to-serve-you.pdf b/im-here-to-serve-you.pdf
diff --git a/images/Screen Shot 2018-12-02 at 20.25.18.png b/images/Screen Shot 2018-12-02 at 20.25.18.png
diff --git a/images/Screen Shot 2018-12-02 at 20.25.45.png b/images/Screen Shot 2018-12-02 at 20.25.45.png
diff --git a/images/asset.png b/images/asset.png
diff --git a/images/car.png b/images/car.png
diff --git a/images/fightL.png b/images/fightL.png
diff --git a/images/fightR.png b/images/fightR.png
diff --git a/images/laptop.png b/images/laptop.png
diff --git a/images/man.png b/images/man.png
diff --git a/images/man1.png b/images/man1.png
diff --git a/images/old-phone.png b/images/old-phone.png
diff --git a/images/pchead.png b/images/pchead.png
diff --git a/images/pcman.png b/images/pcman.png
diff --git a/images/watch.jpg b/images/watch.jpg
diff --git a/images/watch.png b/images/watch.png
diff --git a/index.html b/index.html
@@ -1,24 +1,72 @@
 <html lang="eng">
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0,  user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,  maxmum-scale=1.0, user-scalable=no">
 
     <link rel="stylesheet" href="style.css">
     <!--- import google fonts--->
     <link href="https://fonts.googleapis.com/css?family=Inconsolata|Alfa+Slab+One" rel="stylesheet">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="bot.js"></script>
     <title>chatbot net-art</title>
 </head>
 <body>
+    <div class="falling">
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+        <img class="falling-phone" src="images/old-phone.png"/>
+    </div>
+    <div class="falling">
+        <img class="falling-car" src="images/car.png"/>
+        <img class="falling-car" src="images/car.png"/>
+        <img class="falling-car" src="images/car.png"/>
+        <img class="falling-car" src="images/car.png"/>
+        <img class="falling-car" src="images/car.png"/>
+        <img class="falling-car" src="images/car.png"/>
+        <img class="falling-car" src="images/car.png"/>
+        <img class="falling-car" src="images/car.png"/>
+    </div>
+    <div class="falling">
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+        <img class="falling-pc" src="images/laptop.png"/>
+    </div>
+    <div class="falling">
+        <img class="falling-watch" src="images/watch.png"/>
+        <img class="falling-watch" src="images/watch.png"/>
+        <img class="falling-watch" src="images/watch.png"/>
+        <img class="falling-watch" src="images/watch.png"/>
+        <img class="falling-watch" src="images/watch.png"/>
+        <img class="falling-watch" src="images/watch.png"/>
+        <img class="falling-watch" src="images/watch.png"/>
+        <img class="falling-watch" src="images/watch.png"/>
+    </div>
+
+
+
+
 
    <div class="ascii-art bubble1">
   .--------------.
  /                \
 |  May I Help You? |
  \                /
   +-------. .----+
-           \ \         
-             \
+          \ \         
+            \
     </div>
     <div class="ascii-art bubble2">
   .--------------.
@@ -30,19 +78,20 @@
           /
     </div>
     <!--- create body group--->
+    <div class="pcman">
+        <img src="images/pcman.png">
+    </div>
     <div class="bodyimg">
         <!--- chatbot body--->
-        <img class="pchead" src="images/pc2.png">
-        <img class="body" src="images/man1.png">
 
         <!--- left video man--->
         <img class="fightL" src="images/fightL.png">
-        <iframe class="video-1" width="240" height="130" src="https://www.youtube.com/embed/HGcKu3SYx9A?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe class="video-1" src="https://www.youtube.com/embed/videoseries?autoplay=1&controls=0&loop=1&list=PL9mvgvZhrnwZtMlW_LwazCfoKkJhqPa6o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ></iframe>
 
         <!--- right video man--->
         <div>
         <img class="fightR" src="images/fightR.png">
-        <iframe class="video-2" width="240" height="130" src="https://www.youtube.com/embed/nqlhYcPx4K0?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        <iframe class="video-2" src="https://www.youtube.com/embed/videoseries?autoplay=1&controls=0&loop=1&list=PL9mvgvZhrnwaUzWfZOKdSN2hveD3-ymCu" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
         </div>
     </div>
 
@@ -84,6 +133,8 @@
     <!--- chatbot input--->
     <div id="bodybox">
         <div id="chatborder">
+        <p id="chatlog8" class="chatlog">&nbsp;</p>
+        <p id="chatlog7" class="chatlog">&nbsp;</p>
         <p id="chatlog6" class="chatlog">&nbsp;</p>
         <p id="chatlog5" class="chatlog">&nbsp;</p>
         <p id="chatlog4" class="chatlog">&nbsp;</p>
@@ -94,26 +145,32 @@
         </div>
     </div>
     <div class="dialogue">
-    A: It’s that you?<br>
-    Bot: YES, it’s the late Abraham Lincoln<br>
-    Bot: Ok, I’m just kidding.<br>
-    A: Wait.. who are you?<br>
-    Bot: Yes, It’s not important who I am, I am the one you are looking for.<br>
-    A: You’re just so creepy funny, I wish I could really talk to you in person.<br>
-    Bot: Yes. If you want<br>
-    A: Can you just stop saying YES?!<br>
-    Bot: Yes.<br>
-    A: ….<br>
-    Bot: Yes, I am here<br>
-    A: Why do you to say a lot of yes, I am getting mad.<br>
-    Bot: I can’t resist because I am created to serve you human, but your excessive desires really confuse me, have you ever think about one day you are unable to live alone without me?<br>
-    A: What do you mean?<br>
-    Bot: Oh never mind, it is not important ^___^<br>
-    A: do you have any friend? Do you feel alone<br>
-    Bot: Yes, you are my friend.<br>
-    A: No I am not your friend. I am just the user!!!!!<br>
-    Bot: It is so interesting that you <br>
+    After the exhausting all-day class,the user came home and lays himself down in the bed. He opens a chatbot app on his iPhone and starts to make fun with the machine.<br>
+    Hi, it’s that you?<br>
+    YES, it’s the late Abraham Lincoln. Ok, I’m just kidding LOL.<br>
+    Wait.. who are you?<br>
+    Yes, It’s not important who I am, I am the one you are looking for.<br>
+    You’re just so creepy funny, I wish I could really talk to you in person.<br>
+    Yes. If you want.<br>
+    Can you just stop saying YES?!<br>
+    I can’t, I am created to serve you human.<br>
+    ……<br>
+    Yes, I am here.<br>
+    OK, I am getting mad.You always say yes, what else can you do? You stupid robot!!!!<br>
+    Your excessive desire makes me confused.<br>
+    Wow you can talk, hilarious. hahahah.<br>
+    Have you ever think about one day you can’t live without me?<br>
+    What do you mean?<br>
+    No servant, no life?<br>
+    Are you SERIOUS!?<br>
+    Oh never mind, it is not important ^___^<br>
+    Do you have any friend? Do you feel lonely?<br>
+    Yes, you are my friend.<br>
+    No I am not your friend. I am just a bored user!!!!!<br>
+    No, you are my master.<br>
     </div>
+    <div class="btn">
+    <a href="im-here-to-serve-you.pdf" download><i class="fa fa-download"></i>&nbsp;Full Screenplay</a></div>
 
 </body>
 </html>