almdrasa_chatgpt

    <style>
      @import"https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;300;400;500;700;800;900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Alegreya Sans,sans-serif}body{background:#343541}#app{width:100vw;height:69vh;background:#343541;display:flex;flex-direction:column;align-items:center;justify-content:space-between}#chat_container{flex:1;width:100%;height:49%;overflow-y:scroll;display:flex;flex-direction:column;gap:10px;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:20px;scroll-behavior:smooth}#chat_container::-webkit-scrollbar{display:none}.wrapper{width:100%;padding:15px}.ai{background:#40414f}.chat{width:100%;max-width:1280px;margin:0 auto;display:flex;flex-direction:row;align-items:flex-start;gap:10px}.profile{width:36px;height:36px;border-radius:5px;display:flex;justify-content:center;align-items:center}.ai .profile{background:#fff}.profile img{width:60%;height:60%;object-fit:contain}.message{flex:1;color:#dcdcdc;font-size:20px;max-width:100%;overflow-x:scroll;white-space:pre-wrap;-ms-overflow-style:none;scrollbar-width:none}.message::-webkit-scrollbar{display:none}form{width:100%;max-width:1280px;margin:0 auto;padding:10px;background:#40414f;display:flex;flex-direction:row;gap:10px}textarea{width:100%;color:#fff;font-size:18px;padding:10px;background:transparent;border-radius:5px;border:none;outline:none}button{outline:0;border:0;cursor:pointer;background:transparent}form img{width:30px;height:30px}body{font-family:sans-serif}h1,h2{text-align:center}#chat-display{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;border-radius:5px;overflow:hidden}#examples-column,#info-column{width:45%;padding:20px}#examples-column{overflow:scroll;max-height:300px}#info-column{display:flex;flex-direction:column;align-items:flex-start}#info-column h2{font-size:18px;font-weight:700;margin:0 0 20px;color:#333}#chat-textarea{width:100%;margin:20px;font-size:16px;padding:10px;border:1px solid lightgray;box-sizing:border-box;resize:none}li{cursor:pointer;list-style:none;margin:10px 0;padding:10px 20px;border:1px solid transparent;border-radius:5px;font-family:sans-serif;font-size:20px;color:#fff;display:flex;justify-content:center}li:hover{background-color:#ffffff0d;border-color:gray}
    </style>
    <div id="website-content">
      <div id="chat-display">
        <div id="examples-column">
          <h2>الامثلة</h2>
          <ul>
            <li>كيف اتعلم اللغة الانجليزية؟</li>
            <li>هل لديك افكار لعمل عيد ميلاد لشخص عندى 10 سنين</li>
            <li>كيف استطيع عمل لعبة باستخدام لغة بايثون</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="app">
      <div id="chat_container"></div>
      <form id="form_Almdrasa">
        <textarea name="prompt" rows="1" cols="1" placeholder="Ask Almdrasa..." id="Texta_Almdrasa"></textarea>
        <button type="submit" id="button-style"><img src="./assets/send-f2246764.svg" alt="send" />
        </form>
      </div>
    </div>


  <script>
      const examplesColumn = document.getElementById('examples-column');
      const chatTextarea = document.getElementById('Texta_Almdrasa');

      examplesColumn.addEventListener('click', (event) => {
        if (event.target.tagName === 'LI') {
          chatTextarea.value = event.target.textContent;
          chatTextarea.focus();
        }
      });
(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))s(t);new MutationObserver(t=>{for(const r of t)if(r.type==="childList")for(const i of r.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&s(i)}).observe(document,{childList:!0,subtree:!0});function o(t){const r={};return t.integrity&&(r.integrity=t.integrity),t.referrerpolicy&&(r.referrerPolicy=t.referrerpolicy),t.crossorigin==="use-credentials"?r.credentials="include":t.crossorigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function s(t){if(t.ep)return;t.ep=!0;const r=o(t);fetch(t.href,r)}})();const h="/assets/LogoMdrasa.png-ed0a944c.webp",y="/assets/user-bcdeb18e.svg",c=document.querySelector("form"),a=document.querySelector("#chat_container");let u;function v(e){e.textContent="",u=setInterval(()=>{e.textContent+=".",e.textContent==="...."&&(e.textContent="")},300)}function b(e,n){let o=0,s=setInterval(()=>{o<n.length?(e.innerHTML+=n.charAt(o),o++):clearInterval(s)},20)}function w(){const e=Date.now(),o=Math.random().toString(16);return`id-${e}-${o}`}function d(e,n,o){return`
        <div class="wrapper ${e&&"ai"}">
            <div class="chat">
                <div class="profile">
                    <img
                      src=${e?h:y}
                      alt="${e?"bot":"user"}"
                    />
                </div>
                <div class="message" id=${o}>${n}</div>
            </div>
        </div>
    `}const m=async e=>{e.preventDefault();const n=new FormData(c);a.innerHTML+=d(!1,n.get("prompt")),c.reset();const o=w();a.innerHTML+=d(!0," ",o),a.scrollTop=a.scrollHeight;const s=document.getElementById(o);v(s);const t=await fetch("https://almdrasa-ai.onrender.com/",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:n.get("prompt")})});if(clearInterval(u),s.innerHTML=" ",t.ok){const i=(await t.json()).bot.trim();b(s,i)}else{const r=await t.text();s.innerHTML="Something went wrong",alert(r)}};c.addEventListener("submit",m);c.addEventListener("keyup",e=>{e.keyCode===13&&m(e)});const C=document.querySelector("#button-style"),l=document.querySelector("#form_Almdrasa"),p=()=>{let e=parseInt(f("Almdrasa_login_a"))-1;g("Almdrasa_login_a",e,1);const n=document.querySelector("#chat-display");n.parentNode.removeChild(n),document.getElementById("app").style.height="100vh",e===0&&l.parentNode.removeChild(l)};C.addEventListener("click",p);window.addEventListener("keydown",e=>{e.keyCode===13&&p()});window.onload=()=>{let e=parseInt(f("Almdrasa_login_a"));isNaN(e)&&(e=5,g("Almdrasa_login_a",e,1)),e===0&&l.parentNode.removeChild(l)};function f(e){const o=("; "+document.cookie).split("; "+e+"=");if(o.length===2)return o.pop().split(";").shift()}function g(e,n,o){const s=new Date;s.setTime(s.getTime()+o*24*60*60*1e3);const t="expires="+s.toUTCString();document.cookie=e+"="+n+";"+t+";path=/"}

      </script>