From 631818d84294dda29a6d6e4d52cffd4d2a549783 Mon Sep 17 00:00:00 2001 From: huygensCortex <51647351+huygensCortex@users.noreply.github.com> Date: Fri, 24 Nov 2023 19:34:28 -0500 Subject: [PATCH 1/2] login ui revamp --- static/main.css | 5 ----- templates/login.html | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/static/main.css b/static/main.css index 13006786..79637247 100644 --- a/static/main.css +++ b/static/main.css @@ -45,17 +45,12 @@ border-radius: 3px; width: 50%; margin: auto; - position: relative; - top: 250px; border-radius: 1%; - bottom: 250px; box-shadow: 10px 10px 5px lightblue; } .sign-in-div { - position: relative; - top: 653px; display: flex; width: 50%; margin: auto; diff --git a/templates/login.html b/templates/login.html index cf0a8d48..d9fcd2fd 100644 --- a/templates/login.html +++ b/templates/login.html @@ -1,6 +1,6 @@ {% extends "layout.html" %} {% block content %} -
+
{{ form.hidden_tag() }}
From deb03082a4c424f8fc481ff22a6cd9018a73a063 Mon Sep 17 00:00:00 2001 From: huygensCortex <51647351+huygensCortex@users.noreply.github.com> Date: Fri, 24 Nov 2023 20:21:47 -0500 Subject: [PATCH 2/2] chatbot ui fix, login revamp --- static/main.css | 355 ++++++++++++++++++++++++++- templates/chatbot.html | 545 ++++++++--------------------------------- templates/layout.html | 2 +- templates/login.html | 5 +- 4 files changed, 453 insertions(+), 454 deletions(-) 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