diff --git a/static/main.css b/static/main.css index 79637247..9119cd12 100644 --- a/static/main.css +++ b/static/main.css @@ -125,10 +125,6 @@ margin-bottom: .5em; } - - /* body { - font-family: Georgia,"Times New Roman",TImes,serif; - } */ .site-section { text-align: center; @@ -145,14 +141,6 @@ margin-bottom: 30px; text-align: center; } - h1 { - text-align: center; - } - - img { - text-align: center; - padding: 0 350px; - } .carousel-fade .carousel-item, .carousel-item img { max-height: 90vh; @@ -172,3 +160,346 @@ display: flex; justify-content: center; } + + + + #textInput { + border: 2px solid black; + border-bottom: 3px solid aqua; + } + + .userText { + color: white; + font-family: monospace; + font-size: 17px; + text-align: right; + line-height: 30px; + } + + .userText span { + background-color: #009688; + padding: 10px; + border-radius: 10px; + } + + .botText { + color: white; + font-family: monospace; + font-size: 17px; + text-align: left; + line-height: 30px; + } + + .botText span { + background-color: #ae312f; + padding: 5px; + border-radius: 10px; + } + + .chat_window { + position: relative; + width: calc(100% - 20px); + max-width: 800px; + height: 500px; + border-radius: 10px; + background-color: #fff; + left: 50%; + margin-top: 20rem; + transform: translateX(-50%) translateY(-50%); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); + background-color: #fff; + overflow: hidden; + } + + + + .top_menu { + background-color: #fff; + width: 100%; + padding: 20px 0 15px; + box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1); + } + + .top_menu .buttons { + margin: 3px 0 0 20px; + position: absolute; + } + + .top_menu .buttons .button { + width: 16px; + height: 16px; + border-radius: 50%; + display: inline-block; + margin-right: 10px; + position: relative; + } + + .top_menu .buttons .button.close { + background-color: #f5886e; + } + + .top_menu .buttons .button.minimize { + background-color: #fdbf68; + } + + .top_menu .buttons .button.maximize { + background-color: #a3d063; + } + + .top_menu .title { + text-align: center; + color: #bcbdc0; + font-size: 20px; + } + + .messages { + position: relative; + list-style: none; + padding: 20px 10px 0 10px; + margin: 0; + height: 347px; + overflow: scroll; + } + + .messages .message { + clear: both; + overflow: hidden; + margin-bottom: 20px; + transition: all 0.5s linear; + opacity: 0; + } + + .messages .message.left .avatar { + background-color: #f5886e; + float: left; + } + + .messages .message.left .text_wrapper { + background-color: #ffe6cb; + margin-left: 20px; + } + + .messages .message.left .text_wrapper::after, + .messages .message.left .text_wrapper::before { + right: 100%; + border-right-color: #ffe6cb; + } + + .messages .message.left .text { + color: #c48843; + } + + .messages .message.left .avatar { + float: left; + width: 50px; + height: 50px; + background-image: url("https://pas-wordpress-media.s3.amazonaws.com/wp-content/uploads/2013/08/Customer-service-woman-on-headset-gives-OK-1024x770.jpg"); + background-size: cover; + border-radius: 50%; + margin-right: 10px; + } + + .messages .message.right .text_wrapper { + background-color: #c7eafc; + margin-right: 20px; + float: right; + } + + .messages .message.right .text_wrapper::after, + .messages .message.right .text_wrapper::before { + left: 100%; + border-left-color: #c7eafc; + } + + .messages .message.right .text { + color: #45829b; + } + + .messages .message.appeared { + opacity: 1; + } + + .messages .message .avatar { + width: 60px; + height: 60px; + border-radius: 50%; + display: inline-block; + } + + .messages .message .text_wrapper { + display: inline-block; + padding: 20px; + border-radius: 6px; + width: calc(100% - 85px); + min-width: 100px; + position: relative; + } + + .messages .message .text_wrapper::after, + .messages .message .text_wrapper:before { + top: 18px; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .messages .message .text_wrapper::after { + border-width: 13px; + margin-top: 0px; + } + + .messages .message .text_wrapper::before { + border-width: 15px; + margin-top: -2px; + } + + .messages .message .text_wrapper .text { + font-size: 18px; + font-weight: 300; + } + + .bottom_wrapper { + position: relative; + width: 100%; + background-color: #fff; + padding: 20px 20px; + position: absolute; + bottom: 0; + } + + .bottom_wrapper .message_input_wrapper { + display: inline-block; + height: 50px; + border-radius: 25px; + border: 1px solid #bcbdc0; + width: calc(100% - 160px); + position: relative; + padding: 0 20px; + } + + .bottom_wrapper .message_input_wrapper .message_input { + border: none; + height: 100%; + box-sizing: border-box; + width: calc(100% - 40px); + position: absolute; + outline-width: 0; + color: gray; + } + + .bottom_wrapper .send_message { + width: 140px; + height: 50px; + display: inline-block; + border-radius: 50px; + background-color: #a3d063; + border: 2px solid #a3d063; + color: #fff; + cursor: pointer; + transition: all 0.2s linear; + text-align: center; + float: right; + } + + .bottom_wrapper .send_message:hover { + color: #a3d063; + background-color: #fff; + } + + .bottom_wrapper .send_message .text { + font-size: 18px; + font-weight: 300; + display: inline-block; + line-height: 48px; + } + + .message_template { + display: none; + } + + .footer #button { + width: 55px; + height: 55px; + border: #4e919c 12px solid; + border-radius: 35px; + margin: 0 auto; + position: relative; + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -o-transition: all 1s ease; + -ms-transition: all 1s ease; + transition: all 1s ease; + } + + .footer #button:hover { + width: 55px; + height: 55px; + border: #3A3A3A 12px solid; + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -o-transition: all 1s ease; + -ms-transition: all 1s ease; + transition: all 1s ease; + position: relative; + } + + .footer { + bottom: 0; + left: 0; + position: fixed; + width: 100%; + height: 2em; + overflow: hidden; + margin: 0 auto; + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -o-transition: all 1s ease; + -ms-transition: all 1s ease; + transition: all 1s ease; + z-index: 999; + } + + .footer:hover { + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -o-transition: all 1s ease; + -ms-transition: all 1s ease; + transition: all 1s ease; + height: 10em; + } + + .footer #container { + margin-top: 5px; + width: 100%; + height: 100%; + position: relative; + top: 0; + left: 0; + background: #4e919c; + } + + .footer #cont { + position: relative; + top: -45px; + right: 190px; + width: 150px; + height: auto; + margin: 0 auto; + } + + .footer_center { + width: 500px; + float: left; + text-align: center; + } + + .footer h3 { + font-family: 'Arial'; + font-size: 20px; + font-weight: 100; + margin-top: 70px; + margin-left: 10px; + } diff --git a/templates/chatbot.html b/templates/chatbot.html index 2e3be759..876364ee 100644 --- a/templates/chatbot.html +++ b/templates/chatbot.html @@ -1,463 +1,134 @@ - - - - - - - - - - - - - - - - - - -
-

- Supported languages: Albanian, Arabic, Armenian, Awadhi, Azerbaijani, Bashkir, Basque,Belarusian, Bengali, Bhojpuri, Bosnian, Brazilian Portuguese, Bulgarian, Cantonese (Yue), Catalan, Chhattisgarhi, Chinese, Croatian, Czech, Danish, Dogri, Dutch, English, Estonian, Faroese, Finnish, French, Galician, Georgian, German, Greek, Gujarati, Haryanvi, Hindi, Hungarian, Indonesian, Irish, Italian, Japanese, Javanese, Kannada, Kashmiri, Kazakh, Konkani, Korean, Kyrgyz, Latvian, Lithuanian, Macedonian, Maithili, Malay, Maltese, Mandarin, Mandarin Chinese, Marathi, Marwari, Min Nan, Moldovan, Mongolian, Montenegrin, Nepali, Norwegian, Oriya, Pashto, Persian (Farsi), Polish, Portuguese, Punjabi, Rajasthani, Romanian, Russian, Sanskrit, Santali, Serbian, Sindhi, Sinhala, Slovak, Slovene, Slovenian, Spanish, Swahili, Swedish, Tajik, Tamil, Tatar, Telugu, Thai, Turkish, Turkmen, Ukrainian, Urdu, Uzbek, Vietnamese, Welsh, Wu -

-
+{% extends "layout.html" %} +{% block content %} +
-
-
Customer Service:
+
+
Fitness Coach:
+
+ +
+
+ +
+
+
+
Send
-
    -
    -
    - -
    -
    -
    -
    Send
    -
    - -
    -
    +
    +
  • -
    -
    -
    -
    +
    +
    +
    +
    • -
    +
    -
    -
    -
    -
    -
    -
    -

    It is an AI model. © Batuhan Toker

    -
    -
    -
    - - - - - - - - +{% endblock content %} \ No newline at end of file diff --git a/templates/layout.html b/templates/layout.html index e40ee231..8a6db441 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -10,7 +10,7 @@ - + {% if title %} BURNOUT - {{ title }} {% else %} diff --git a/templates/login.html b/templates/login.html index d9fcd2fd..4ebdd7e6 100644 --- a/templates/login.html +++ b/templates/login.html @@ -40,12 +40,9 @@ -
    Need An Account? Sign Up Now -
    + {% endblock content %} \ No newline at end of file