Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>VoyageVirtuoso</title> | |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <link rel="stylesheet" href="static/style.css"/> | |
| <style> | |
| body,html { | |
| height: 100%; | |
| margin: 0; | |
| background: rgb(168, 69, 163); | |
| background: -webkit-linear-gradient(to right, rgb(40, 59, 34), rgb(54, 60, 70), rgb(32, 32, 43)); | |
| background: linear-gradient(to right, rgb(56, 109, 150), rgb(79, 98, 136), rgb(33, 33, 78)); | |
| } | |
| .chat { | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| } | |
| .card { | |
| height: 500px; | |
| border-radius: 15px !important; | |
| background-color: rgba(0,0,0,0.4) !important; | |
| } | |
| .contacts_body { | |
| padding: 0.75rem 0 !important; | |
| overflow-y: auto; | |
| white-space: nowrap; | |
| } | |
| .msg_card_body { | |
| overflow-y: auto; | |
| /* Added overflow and height for auto-scroll feature */ | |
| overflow-y: scroll; | |
| height: 350px; /* Adjust as needed */ | |
| scroll-behavior: smooth; /* Smooth scrolling */ | |
| } | |
| .card-header { | |
| border-radius: 15px 15px 0 0 !important; | |
| border-bottom: 0 !important; | |
| } | |
| .card-footer { | |
| border-radius: 0 0 15px 15px !important; | |
| border-top: 0 !important; | |
| } | |
| .container { | |
| align-content: center; | |
| } | |
| .search { | |
| border-radius: 15px 0 0 15px !important; | |
| background-color: rgba(0,0,0,0.3) !important; | |
| border:0 !important; | |
| color:white !important; | |
| } | |
| .search:focus { | |
| box-shadow:none !important; | |
| outline:0px !important; | |
| } | |
| .type_msg { | |
| background-color: rgba(0,0,0,0.3) !important; | |
| border:0 !important; | |
| color:rgb(216, 206, 113) !important; | |
| height: 60px !important; | |
| overflow-y: auto; | |
| } | |
| .type_msg:focus { | |
| box-shadow:none !important; | |
| outline:0px !important; | |
| } | |
| .attach_btn { | |
| border-radius: 15px 0 0 15px !important; | |
| background-color: rgba(0,0,0,0.3) !important; | |
| border:0 !important; | |
| color: white !important; | |
| cursor: pointer; | |
| } | |
| .send_btn { | |
| border-radius: 0 15px 15px 0 !important; | |
| background-color: rgba(0,0,0,0.3) !important; | |
| border:0 !important; | |
| color: white !important; | |
| cursor: pointer; | |
| } | |
| .search_btn { | |
| border-radius: 0 15px 15px 0 !important; | |
| background-color: rgba(0,0,0,0.3) !important; | |
| border:0 !important; | |
| color: white !important; | |
| cursor: pointer; | |
| } | |
| .contacts { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .contacts li { | |
| width: 100% !important; | |
| padding: 5px 10px; | |
| margin-bottom: 15px !important; | |
| } | |
| .active { | |
| background-color: rgba(0,0,0,0.3); | |
| } | |
| .user_img { | |
| height: 70px; | |
| width: 70px; | |
| border:1.5px solid #f5f6fa; | |
| } | |
| .user_img_msg { | |
| height: 40px; | |
| width: 40px; | |
| border:1.5px solid #f5f6fa; | |
| } | |
| .img_cont { | |
| position: relative; | |
| height: 70px; | |
| width: 70px; | |
| } | |
| .img_cont_msg { | |
| height: 40px; | |
| width: 40px; | |
| } | |
| .online_icon { | |
| position: absolute; | |
| height: 15px; | |
| width:15px; | |
| background-color: #4cd137; | |
| border-radius: 50%; | |
| bottom: 0.2em; | |
| right: 0.4em; | |
| border:1.5px solid white; | |
| } | |
| .offline { | |
| background-color: #c23616 !important; | |
| } | |
| .user_info { | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| margin-left: 15px; | |
| } | |
| .user_info span { | |
| font-size: 20px; | |
| color: white; | |
| } | |
| .user_info p { | |
| font-size: 10px; | |
| color: rgba(255,255,255,0.6); | |
| } | |
| .video_cam { | |
| margin-left: 50px; | |
| margin-top: 5px; | |
| } | |
| .video_cam span { | |
| color: white; | |
| font-size: 20px; | |
| cursor: pointer; | |
| margin-right: 20px; | |
| } | |
| .msg_cotainer { | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| margin-left: 10px; | |
| border-radius: 25px; | |
| background-color: rgb(82, 172, 255); | |
| padding: 10px; | |
| position: relative; | |
| } | |
| .msg_cotainer_send { | |
| margin-top: auto; | |
| margin-bottom: auto; | |
| margin-right: 10px; | |
| border-radius: 25px; | |
| background-color: #58cc71; | |
| padding: 10px; | |
| position: relative; | |
| } | |
| .msg_time { | |
| position: absolute; | |
| left: 0; | |
| bottom: -15px; | |
| color: rgba(255,255,255,0.5); | |
| font-size: 10px; | |
| } | |
| .msg_time_send { | |
| position: absolute; | |
| right:0; | |
| bottom: -15px; | |
| color: rgba(255,255,255,0.5); | |
| font-size: 10px; | |
| } | |
| .msg_head { | |
| position: relative; | |
| } | |
| #action_menu_btn { | |
| position: absolute; | |
| right: 10px; | |
| top: 10px; | |
| color: white; | |
| cursor: pointer; | |
| font-size: 20px; | |
| } | |
| .action_menu { | |
| z-index: 1; | |
| position: absolute; | |
| padding: 15px 0; | |
| background-color: rgba(0,0,0,0.5); | |
| color: white; | |
| border-radius: 15px; | |
| top: 30px; | |
| right: 15px; | |
| display: none; | |
| } | |
| .action_menu ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .action_menu ul li { | |
| width: 100%; | |
| padding: 10px 15px; | |
| margin-bottom: 5px; | |
| } | |
| .action_menu ul li i { | |
| padding-right: 10px; | |
| } | |
| .action_menu ul li:hover { | |
| cursor: pointer; | |
| background-color: rgba(0,0,0,0.2); | |
| } | |
| @media(max-width: 576px) { | |
| .contacts_card { | |
| margin-bottom: 15px !important; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-fluid h-100"> | |
| <div class="row justify-content-center h-100"> | |
| <div class="col-md-8 col-xl-6 chat"> | |
| <div class="card"> | |
| <div class="card-header msg_head"> | |
| <div class="d-flex bd-highlight"> | |
| <div class="img_cont"> | |
| <img src="https://img.freepik.com/premium-photo/3d-render-robot-airport-terminal-3d-illustration_847439-956.jpg?w=740" class="rounded-circle user_img"> | |
| <span class="online_icon"></span> | |
| </div> | |
| <div class="user_info"> | |
| <span>VoyageVirtuoso</span> | |
| <p>Welcome to VoyageVirtuoso, your AI wildlife guide. Explore nature with accurate information and insights about wildlife and habitats. Ask any question about wildlife and nature, and VoyageVirtuoso will provide factual and informative answers to enrich your journey.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="messageFormeight" class="card-body msg_card_body"> | |
| </div> | |
| <div class="card-footer"> | |
| <form id="messageArea" class="input-group"> | |
| <input type="text" id="text" name="msg" placeholder="What would you like to know?" autocomplete="off" class="form-control type_msg" required/> | |
| <div class="input-group-append"> | |
| <button type="submit" id="send" class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| $("#messageArea").on("submit", function(event) { | |
| const date = new Date(); | |
| const hour = date.getHours(); | |
| const minute = date.getMinutes(); | |
| const str_time = hour+":"+minute; | |
| var rawText = $("#text").val(); | |
| var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">'+ str_time + '</span></div><div class="img_cont_msg"><img src="https://img.freepik.com/free-photo/portrait-young-student-education-day_23-2150980074.jpg?t=st=1718541721~exp=1718545321~hmac=1560e26c9f7f8c5266c235dae982fd2b0e13267f24035f0a6e5fa545436a99d9&w=826" class="rounded-circle user_img_msg"></div></div>'; | |
| $("#text").val(""); | |
| $("#messageFormeight").append(userHtml); | |
| $.ajax({ | |
| data: { | |
| msg: rawText, | |
| }, | |
| type: "POST", | |
| url: "/get", | |
| }).done(function(data) { | |
| var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://www.prdistribution.com/spirit/uploads/pressreleases/2019/newsreleases/--waterless-geothermal-gets-installed-in-historic-breakers-mansion-.png" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>'; | |
| $("#messageFormeight").append($.parseHTML(botHtml)); | |
| }); | |
| event.preventDefault(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |