<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>إخفاء الرسالة</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.x.x/dist/tailwind.min.css" rel="stylesheet">
    <style>
      .glowing-text{color:#0f0;text-shadow:0 0 10px #0f0,0 0 20px #0f0,0 0 30px #0f0,0 0 40px #0f0}.footer-text{font-size:.875rem;color:#777;text-align:center;padding:10px;background-color:#333;margin-top:20px}
    </style>
  </head>
  <body class="antialiased bg-gray-900 text-gray-100" x-data="app_data">
    <div class="flex flex-col w-full max-w-full mx-auto bg-gray-800 rounded-lg shadow-xl">

      <div class="flex items-center justify-center px-3 py-4 bg-gray-700 text-2xl font-semibold glowing-text">
        Ayres Cyber
      </div>

      <div class="flex justify-around bg-gray-700 py-3">
        <a href="#" @click="tab = 'hide'" class="text-center w-1/2 px-2 py-2 text-lg font-medium hover:text-green-400 hover:bg-gray-600" :class="tab == 'hide' ? 'bg-gray-600 text-green-400' : 'text-gray-300'">
          إخفاء الرسالة
        </a>
        <a href="#" @click="tab = 'reveal'" class="text-center w-1/2 px-2 py-2 text-lg font-medium hover:text-green-400 hover:bg-gray-600" :class="tab == 'reveal' ? 'bg-gray-600 text-green-400' : 'text-gray-300'">
          كشف الرسالة
        </a>
      </div>
      <div x-show="tab === 'hide'" class="flex-1 p-6">
        <h1 class="text-xl font-semibold border-b border-gray-600 pb-3">إخفاء الرسالة</h1>
        <div class="mt-4">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-300" for="i00">رسالة سرية:</label>
            <input x-model="hide.secretMessage" class="w-full px-4 py-2 mt-2 text-gray-800 rounded-lg border border-gray-600 bg-gray-300" id="i00" type="text" placeholder="I love you!">
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-300" for="i01">رسالة المرسلة:</label>
            <textarea x-model="hide.content" class="w-full h-32 px-4 py-2 mt-2 text-gray-800 rounded-lg border border-gray-600 bg-gray-300" id="i01" placeholder="Hi, how are you doing?"></textarea>
          </div>

          <div class="mb-4">
            <button @click="hide.submit()" class="w-full px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-500">إخفاء الرسالة السرية!</button>
          </div>

          <div x-show="hide.result !== ''" class="mb-4">
            <label class="block text-sm font-medium text-gray-300" for="i02">نتيجة:</label>
            <textarea :value="hide.result" readonly class="w-full h-32 px-4 py-2 mt-2 text-gray-800 rounded-lg border border-gray-600 bg-gray-300" id="i02"></textarea>
          </div>
        </div>
      </div>

      <div x-show="tab === 'reveal'" class="flex-1 p-6">
        <h1 class="text-xl font-semibold border-b border-gray-600 pb-3">كشف الرسالة</h1>
        <div class="mt-4">
          <div class="mb-4">
            <textarea x-model="reveal.content" class="w-full h-32 px-4 py-2 mt-2 text-gray-800 rounded-lg border border-gray-600 bg-gray-300" id="i10" placeholder="مرحبًا، كيف حالك؟"></textarea>
          </div>

          <div class="mb-4">
            <button @click="reveal.submit()" class="w-full px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-500">كشف الرسالة السرية!</button>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-300" for="i11">الرسالة السرية هي:</label>
            <textarea :value="reveal.result" readonly class="w-full h-32 px-4 py-2 mt-2 text-gray-800 rounded-lg border border-gray-600 bg-gray-300" id="i11"></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-text">
      2025 - v1.0 - by Aymen & Esraa
    </div>

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    <script>
      const app_data={tab:"hide",hide:{secretMessage:"Ayres نحن فريق ",content:"مرحبًا، كيف حالك؟",result:"",submit(){let e=convertToZWC(this.secretMessage),t=Math.floor(this.content.length/2);this.result=this.content.slice(0,t)+"‎"+e+"‏"+this.content.slice(t)}},reveal:{content:"",result:"",submit(){let e=this.content.matchAll(/\u200e(.*?)\u200f/g),t=[...e];if(t){let s=[];t.forEach(e=>{s.push(retrieveMessage(e[1]))}),this.result=s.join("\n\n")}else this.result=""}}},convertToZWC=e=>{let t=Array.from(new TextEncoder().encode(e)),s=t.map(e=>e.toString(2).padStart(8,"0").split("")).flat();return s.map(e=>0==e?"​":1==e?"‌":void 0).join("")},retrieveMessage=e=>{let t=e.split("").map(e=>"​"==e?"0":"‌"==e?"1":void 0),s=chunk(t,8).map(e=>parseInt(e,2));return new TextDecoder().decode(Uint8Array.from(s))},chunk=(e,t)=>{let s=[],n=0;for(;n<e.length;)s.push(e.slice(n,t+n).join("")),n+=t;return s};
    </script>
  </body>
</html>
