Spaces:
Sleeping
Sleeping
| <html class="no-js" lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>AI BTC</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Milonga&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="assets/css/slick.css"> | |
| <link rel="stylesheet" href="assets/css/LineIcons.css"> | |
| <link rel="stylesheet" href="assets/css/materialdesignicons.min.css"> | |
| <link rel="stylesheet" href="assets/css/jquery-ui.min.css"> | |
| <link rel="stylesheet" href="assets/css/nice-select.css"> | |
| <link rel="stylesheet" href="assets/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="assets/css/default.css"> | |
| <link rel="stylesheet" href="assets/css/style.css"> | |
| <style> | |
| @media (max-width: 767px) { | |
| .navbar-style-7 .navbar-container { | |
| background-color: #1BFD9C; | |
| }} | |
| .navbar-style-7 { | |
| background-color: #000; | |
| } | |
| .primary-icon-text, | |
| .primary-btn-text { | |
| color: #1BFD9C; | |
| } | |
| body { | |
| background-color: #000000; | |
| margin: 0; | |
| padding: 0; | |
| color: #000000; | |
| } | |
| p { | |
| font-family: "Milonga", serif; | |
| font-size: 18px; | |
| line-height: 22px; | |
| font-weight: 400; | |
| color:#000000; | |
| margin: 0; | |
| } | |
| .navigation { | |
| background-color: #007bff; | |
| color: #fff; | |
| } | |
| .navbar-top-link a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .navbar-top-link a:hover { | |
| color: #fff; | |
| text-decoration: underline; | |
| } | |
| #chat-container { | |
| background-color: #000000; | |
| width: 100%; | |
| height: calc(100vh - 60px); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: flex-start; | |
| color: #ffffff; | |
| overflow-y: auto; | |
| flex-grow: 1; | |
| padding: 20px; | |
| padding-bottom: 100px; /* Add padding to the bottom of the chat container */ | |
| } | |
| .message { | |
| margin-bottom: 10px; | |
| } | |
| .user-message { | |
| font-family: "Milonga", serif; | |
| font-size: 18px; | |
| line-height: 22px; | |
| font-weight: 400; | |
| color: #1BFD9C; | |
| background-color: #000000; | |
| border-radius: 10px; | |
| padding: 10px; | |
| text-align: left; | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| } | |
| .bot-message { | |
| background-color: #1BFD9C; | |
| border-radius: 10px; | |
| padding: 10px; | |
| text-align: left; | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .bot-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| margin-right: 10px; | |
| } | |
| #input-container { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 100%; | |
| background: none; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 10px; /* Add padding around the input field and button */ | |
| box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* Add a shadow at the bottom */ | |
| animation: slideIn 0.5s ease-in-out; | |
| } | |
| input[type="text"] { | |
| --green: #1BFD9C; | |
| font-size: 15px; /* Increase font size for phone view */ | |
| padding: 0.65em 2.7em; | |
| letter-spacing: 0.06em; | |
| position: relative; | |
| font-family: inherit; | |
| border-radius: 0.6em; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| line-height: 1.4em; | |
| border: 2px solid var(--green); | |
| background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%); | |
| color: var(--green); | |
| box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1); | |
| } | |
| input[type="text"]:focus { | |
| outline: none; | |
| box-shadow: 0 0 5px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2); | |
| } | |
| .navbar-sidebar-7 { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| width: 100%; | |
| z-index: 999; /* Ensure the menu is above other elements */ | |
| } .coin { | |
| font-size: 200px; | |
| width: 0.1em; | |
| height: 1em; | |
| background: linear-gradient(#faa504, #141001); | |
| margin: auto; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| animation: rotate_4001510 3s infinite linear; | |
| transform-style: preserve-3d; | |
| background-color: #000000; | |
| } | |
| .coin .side, | |
| .coin:before, | |
| .coin:after { | |
| content: ""; | |
| position: absolute; | |
| width: 1em; | |
| height: 1em; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| right: -0.4em; | |
| text-align: center; | |
| line-height: 1; | |
| transform: rotateY(-90deg); | |
| -moz-backface-visibility: hidden; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| } | |
| .coin .tails, | |
| .coin:after { | |
| left: -0.4em; | |
| transform: rotateY(90deg); | |
| } | |
| .coin:before, | |
| .coin:after { | |
| background: linear-gradient(#faa504, #141001); | |
| backface-visibility: hidden; | |
| transform: rotateY(90deg); | |
| } | |
| .coin:after { | |
| transform: rotateY(-90deg); | |
| } | |
| @keyframes rotate_4001510 { | |
| 100% { | |
| transform: rotateY(360deg); | |
| } | |
| } | |
| .svg_back { | |
| transform: scaleX(-1); | |
| } | |
| .preloader { | |
| background-color: #000; | |
| } | |
| button { | |
| --green: #1BFD9C; | |
| font-size: 15px; | |
| padding: 0.65em 2.7em; | |
| letter-spacing: 0.06em; | |
| position: relative; | |
| font-family: inherit; | |
| border-radius: 0.6em; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| line-height: 1.4em; | |
| border: 2px solid var(--green); | |
| background: linear-gradient(to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%,transparent 60% , rgba(27, 253, 156, 0.1) 100%); | |
| color: var(--green); | |
| box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1); | |
| } | |
| button:hover { | |
| color: #82ffc9; | |
| box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.6), 0 0 9px 3px rgba(27, 253, 156, 0.2); | |
| } | |
| button:before { | |
| content: ""; | |
| position: absolute; | |
| left: -4em; | |
| width: 4em; | |
| height: 100%; | |
| top: 0; | |
| transition: transform .4s ease-in-out; | |
| background: linear-gradient(to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%,rgba(27, 253, 156, 0.1) 60% , transparent 100%); | |
| } | |
| button:hover:before { | |
| transform: translateX(15em); | |
| } | |
| .typing::after { | |
| content: ""; | |
| display: inline-block; | |
| width: 4px; | |
| height: 12px; | |
| background-color: #000; | |
| animation: typing 1s infinite; | |
| } | |
| @keyframes typing { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes slideIn { | |
| 0% { | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .send-btn { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="preloader hidden"> | |
| <div class="coin"> | |
| <div class="side heads"> | |
| <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 4091.27 4091.73" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <g id="Layer_x0020_1"> | |
| <metadata id="CorelCorpID_0Corel-Layer"></metadata> | |
| <g id="_1421344023328"> | |
| <path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"></path> | |
| <path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"></path> | |
| </g> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="side tails"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="svg_back" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 4091.27 4091.73" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <g id="Layer_x0020_1"> | |
| <metadata id="CorelCorpID_0Corel-Layer"></metadata> | |
| <g id="_1421344023328"> | |
| <path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"></path> | |
| <path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"></path> | |
| </g> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="navigation"> | |
| <header class="navbar-style-7 position-relative"> | |
| <div class="container"> | |
| <div class="navbar-mobile d-lg-none"> | |
| <div class="row align-items-center"> | |
| <div class="col-3"> | |
| <div class="navbar-toggle icon-text-btn"> | |
| <a class="icon-btn primary-icon-text mobile-menu-open-7" href="javascript:void(0)"> | |
| <i class="mdi mdi-menu"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="col-6"> | |
| <div class="mobile-logo text-center"> | |
| <a href="/"><img src="/assets/images/yy.png" alt="Logo"></a> | |
| </div> | |
| </div> | |
| <div class="col-12"> | |
| <div class="input-group mb-3 input-container" id="input-container"> | |
| <input id="user-input" type="text" class="form-control" placeholder="Type your message..."> | |
| <button id="send-btn" class="send-btn">SEND</button> | |
| </div> | |
| </div> | |
| <div class="col-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="navbar-container navbar-sidebar-7"> | |
| <div class="navbar-close d-lg-none"> | |
| <a class="close-mobile-menu-7" href="javascript:void(0)"><i class="mdi mdi-close"></i></a> | |
| </div> | |
| <div class="navbar-top-wrapper"> | |
| <div class="container-lg"> | |
| <div class="navbar-top d-lg-flex justify-content-between"> | |
| <div class="navbar-top-left"> | |
| </div> | |
| <div class="navbar-top-right"> | |
| <div class="navbar-top-link"> | |
| <li><a id="clear-history-btn"><i class="mdi mdi-delete" style="font-size: 24px; margin-right: 5px;"></i> Clear Conversation</a></li> | |
| <br> | |
| <li><a href="/" style="text-decoration: none;"><i class="mdi mdi-alpha-e" style="font-size: 24px; margin-right: 5px;"></i>English</a></li> | |
| </div> | |
| <div class="navbar-top-right"> | |
| <ul class="navbar-top-link"> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="navbar-wrapper"> | |
| <div class="container-lg"> | |
| <nav class="main-navbar d-lg-flex justify-content-between align-items-center"> | |
| <div class="desktop-logo d-none d-lg-block"> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="navbar-top-right"> | |
| <ul class="navbar-top-link"> | |
| <li></li> | |
| </div> | |
| </div> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div id="chat-container"> | |
| <div id="chat-box"></div> | |
| </div> | |
| </div> | |
| <div id="trading-container"></div> | |
| </div> | |
| </div> | |
| </header> | |
| </div> | |
| <script src="assets/js/popper.min.js"></script> | |
| <script src="assets/js/bootstrap.min.js"></script> | |
| <script src="assets/js/vendor/jquery-3.5.1.min.js"></script> | |
| <script src="assets/js/vendor/modernizr-3.7.1.min.js"></script> | |
| <script> | |
| const chatBox = document.getElementById('chat-box'); | |
| const userInput = document.getElementById('user-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const clearHistoryBtn = document.getElementById('clear-history-btn'); | |
| // Event listener for send button click | |
| sendBtn.addEventListener('click', () => { | |
| const userMessage = userInput.value; | |
| userInput.value = ''; | |
| chatBox.innerHTML += ` | |
| <div class="message user-message"> | |
| <img src="https://th.bing.com/th/id/OIP.OYbzbbyzogwtriubL2pP0AHaHa?w=195&h=195&c=7&r=0&o=5&pid=1.7" alt="User Avatar" class="user-avatar"> | |
| <user-message>${userMessage}<user-message/> | |
| </div> | |
| `; | |
| const botMessage = document.createElement('div'); | |
| botMessage.classList.add('message', 'bot-message'); | |
| botMessage.innerHTML = ` | |
| <img src="assets/images/AI.png" alt="Bot Avatar" class="bot-avatar"> | |
| <p class="typing typing-animation"></p> | |
| `; | |
| chatBox.appendChild(botMessage); | |
| fetch('/arabic', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ user_input: userMessage }) | |
| }) | |
| .then(response => response.text()) | |
| .then(data => { | |
| const formattedData = data.replace(/\<br>/g, '<br>'); | |
| const typingElement = botMessage.lastElementChild; | |
| // Split the response data into an array of words | |
| const words = formattedData.split(' '); | |
| // Use a recursive function to display each word with a delay | |
| function displayWords(index) { | |
| if (index < words.length) { | |
| typingElement.innerHTML += words[index] + ' '; | |
| setTimeout(() => { | |
| displayWords(index + 1); | |
| }, 200); // Adjust the delay as needed | |
| } else { | |
| typingElement.classList.remove('typing-animation'); | |
| } | |
| } | |
| displayWords(0); | |
| }); | |
| }); | |
| // Event listener for clear history button click | |
| clearHistoryBtn.addEventListener('click', () => { | |
| fetch('/clear_history') | |
| .then(response => response.text()) | |
| .then(data => { | |
| console.log(data); // You can handle the response data as needed | |
| // Clear the chat box | |
| chatBox.innerHTML = ''; | |
| }); | |
| }); | |
| // Event listener for beforeunload event | |
| window.addEventListener('beforeunload', () => { | |
| fetch('/clear_history') | |
| .then(response => response.text()) | |
| .then(data => { | |
| // Clear the chat box before the page is unloaded | |
| chatBox.innerHTML = ''; | |
| }); | |
| }); | |
| </script> | |
| <script src="assets/js/slick.min.js"></script> | |
| <script src="assets/js/jquery-vj-accordion-steps.js"></script> | |
| <script src="assets/js/jquery-ui.min.js"></script> | |
| <script src="assets/js/jquery.form-validator.min.js"></script> | |
| <script src="assets/js/jquery.nice-select.min.js"></script> | |
| <script src="assets/js/jquery.formatter.min.js"></script> | |
| <script src="assets/js/count-up.min.js"></script> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> |