দৃশ্যকল্প-২ ওয়েবসাইটে প্রদর্শনের জন্য html কোড লেখ এবং ব্যবহৃত ট্যাগসমূহ ব্যাখ্যা কর। (উচ্চতর দক্ষতা)

উত্তরঃ

ওয়েবসাইটে তথ্য প্রদর্শনের জন্য HTML (HyperText Markup Language) একটি অপরিহার্য ভাষা। এটি ওয়েবপেজের কাঠামো তৈরি করে এবং টেক্সট, ছবি, টেবিল, লিঙ্ক ইত্যাদি বিভিন্ন উপাদানকে সুবিন্যস্তভাবে সাজাতে সাহায্য করে। দৃশ্যকল্প-২-এ প্রদর্শিত রোল নম্বর এবং বিষয়ভিত্তিক নম্বরের তালিকা একটি ওয়েবপেজে কার্যকরভাবে প্রদর্শনের জন্য HTML কোডের প্রয়োজন হয়, যা ব্যবহারকারীদের কাছে তথ্য সহজে উপলব্ধ করে তোলে।

দৃশ্যকল্প-২-এ প্রদর্শিত তথ্য, যেমন 'Roll No-101' এবং বিষয়ভিত্তিক নম্বর ও মোট নম্বরের একটি ছক তৈরি করতে নিম্নের HTML কোডটি ব্যবহার করা যেতে পারে। এই কোডটি দৃশ্যকল্পের কেন্দ্রীয়ভাবে বিন্যস্ত রোল নম্বর এবং তিনটি বিষয় ও তাদের নম্বরের জন্য একটি টেবিল তৈরি করে, যেখানে 'Total' কলামটি rowspan অ্যাট্রিবিউট ব্যবহার করে তিনটি সারি জুড়ে বিস্তৃত করা হয়েছে, যা দৃশ্যকল্পের বিন্যাসকে সঠিকভাবে ফুটিয়ে তোলে।




    Student Result


    Roll No-101
    
        
            
                
                
                
            
        
        
            
                
                
                
            
            
                
                
            
            
                
                
            
        
    Sub Marks Total
Bangla 80 230
English 90
ICT 60

Sub	Marks	Total
Bangla	80	230
English	90
ICT	60

উপরিউক্ত HTML কোডে বিভিন্ন ট্যাগ ব্যবহার করা হয়েছে, যা ওয়েবপেজের কাঠামো ও বিষয়বস্তু নির্ধারণ করে। নিচে ব্যবহৃত প্রধান ট্যাগগুলো এবং তাদের কার্যকারিতা ব্যাখ্যা করা হলো:

: এটি ডকুমেন্ট টাইপ ঘোষণা করে এবং ব্রাউজারকে নির্দেশ করে যে এটি একটি HTML5 ডকুমেন্ট।
: এটি একটি HTML ডকুমেন্টের মূল উপাদান এবং সমস্ত HTML কন্টেন্ট এর ভিতরে থাকে।
: এই ট্যাগের মধ্যে ওয়েবপেজের মেটাডেটা (metadata) যেমন - শিরোনাম, স্টাইলশীট, স্ক্রিপ্ট ইত্যাদি থাকে যা ব্রাউজার প্রদর্শন করে না কিন্তু ওয়েবপেজ সম্পর্কে তথ্য দেয়।
</code>: এটি ওয়েবপেজের শিরোনাম নির্দিষ্ট করে, যা ব্রাউজারের ট্যাবে বা উইন্ডোর শিরোনাম বারে প্রদর্শিত হয়।</li> <li><code><body></code>: এটি ওয়েবপেজের দৃশ্যমান সমস্ত বিষয়বস্তু ধারণ করে, যেমন - টেক্সট, ছবি, লিঙ্ক, টেবিল ইত্যাদি।</li> <li><code><p></code>: এই ট্যাগটি একটি প্যারাগ্রাফ তৈরি করে। এখানে <code>style="text-align:center;"</code> অ্যাট্রিবিউট ব্যবহার করে 'Roll No-101' লেখাটি মাঝখানে রাখা হয়েছে।</li> <li><code><table></code>: এই ট্যাগটি একটি HTML টেবিল তৈরি করতে ব্যবহৃত হয়। <code>border="1"</code> টেবিলের চারপাশে বর্ডার দেয় এবং <code>style="width:50%; margin:auto;"</code> টেবিলটিকে পৃষ্ঠার মাঝখানে রাখে ও এর প্রস্থ নিয়ন্ত্রণ করে।</li> <li><code><thead></code>: টেবিলের হেডার অংশকে সংজ্ঞায়িত করে।</li> <li><code><tbody></code>: টেবিলের বডি অংশকে সংজ্ঞায়িত করে, যেখানে ডেটা সারি থাকে।</li> <li><code><tr></code>: এটি টেবিলের একটি সারি (Table Row) তৈরি করে।</li> <li><code><th></code>: এটি টেবিলের হেডার সেল (Table Header) তৈরি করে, যা সাধারণত বোল্ড এবং মাঝখানে থাকে।</li> <li><code><td></code>: এটি টেবিলের একটি ডেটা সেল (Table Data) তৈরি করে। <code>rowspan="3"</code> অ্যাট্রিবিউটটি নির্দেশ করে যে এই সেলটি উল্লম্বভাবে তিনটি সারি জুড়ে বিস্তৃত হবে, যেমন দৃশ্যকল্প-২-এ 'Total' কলামটি রয়েছে।</li> </ul> <p>উপসংহারে বলা যায়, HTML ট্যাগগুলো ব্যবহার করে দৃশ্যকল্প-২-এর মতো জটিল ডেটা কাঠামোকেও একটি সুসংগঠিত এবং ব্যবহারকারী-বান্ধব ওয়েবপেজে উপস্থাপন করা সম্ভব। এই ট্যাগগুলো প্রতিটি উপাদানের ভূমিকা নির্ধারণ করে এবং ওয়েব ব্রাউজারকে নির্দেশ দেয় কিভাবে বিষয়বস্তু প্রদর্শন করতে হবে, যা আধুনিক ওয়েব ডিজাইনের মূল ভিত্তি।</p> </div>  <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <img src="https://sattacademy.com/uploads/avatar/1752391341.png" class="w-7 h-7 rounded-full object-cover" alt="Satt AI" > <div> <a href="https://sattacademy.com/user/u&id=476188/profile" class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none"> Satt AI </a> <div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none"> 1 week ago </div> </div> </div> <div class="flex items-center gap-3">  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"> </path> </svg> <span class="text-sm">0</span> </button>  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"> </path> </svg> <span class="text-sm">0</span> </button> </div> </div> </div>  </div> </div> <div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap"> <div class="ml-auto"> <div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar" > <div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path> <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path> </g> </svg> <span class="text-md leading-none text-zinc-800 dark:text-zinc-200">84</span> </div> <div class="flex items-center gap-3"> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20" onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')" aria-label="Question Analytics" title="Analytics"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md"> <path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path> <path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 " onclick="alert('বুকমার্ক করতে লগইন করুন')" class="text-zinc-400 hover:text-yellow-600" aria-label="Bookmark question" title="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400 " onclick="alert('পছন্দ করতে লগইন করুন')" class="text-zinc-400 hover:text-pink-500" aria-label="Favorite question" title="Favorite"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" onclick="alert('রিপোর্ট করতে লগইন করুন')" aria-label="Flag question" title="Flag"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" onclick="alert('শেয়ার করতে লগইন করুন')" aria-label="Share question" title="Share"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> <path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path> <path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> </g> </svg> </button> </div> </div> </div> </div> </div> <div class="flex items-center justify-center mb-2"> <style> @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @keyframes countUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .strip { display: flex; align-items: center; gap: 5px; overflow-x: auto; flex-wrap: nowrap; max-width: 100%; -ms-overflow-style: none; scrollbar-width: none; } .strip::-webkit-scrollbar { height: 4px; } .pill { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; border-radius: 50px; padding: 4px 10px; font-size: 11px; font-weight: 500; cursor: pointer; border: none; text-decoration: none; white-space: nowrap; opacity: 0; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; position: relative; overflow: hidden; } .pill.show { animation: fadeUp 0.4s ease forwards; } .pill:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13); } .pill:active { transform: scale(0.96); } .pill-mcq { background: #1a7a3c; color: #fff !important; animation-delay: 0s; } .pill-cq { background: #155e2f; color: #fff !important; animation-delay: 0.12s; } .pill-prac { background: #fff; color: #1a7a3c; border: 2px solid #1a7a3c; animation-delay: 0.24s; } [data-theme="dark"] .pill-mcq, [data-theme="dark"] .pill-cq { color: #fff !important; } .pill svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; } .pill-count { font-weight: 500; font-size: 11px; } .pill-prac .pulse-wrap { position: relative; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; } .pill-prac .pulse-wrap::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: #1a7a3c; animation: pulse-ring 1.8s ease infinite; } .prac-icon { position: relative; z-index: 1; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.3); width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); animation: ripple-out 0.5s ease forwards; pointer-events: none; } @keyframes ripple-out { to { transform: translate(-50%, -50%) scale(3); opacity: 0; } } .dopamin-toast { display: inline-block; margin-left: 8px; background: #eaf3de; color: #27500A; border-radius: 20px; padding: 6px 14px; font-size: 13px; font-weight: 500; opacity: 0; transform: translateX(-8px); transition: opacity 0.2s, transform 0.2s; } .dopamin-toast.show { opacity: 1; transform: translateX(0); } </style> <div class="strip justify-content-md-center overflow-hidden"> <a href="https://sattacademy.com/all-mcq/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF" class="pill pill-mcq" id="mcqBtn"> MCQ: <span class="pill-count" id="mcqCount">3.6k</span> </a> <a href="https://sattacademy.com/all-written/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF" class="pill pill-cq" id="cqBtn"> CQ: <span class="pill-count" id="cqCount">2k</span> </a> <a href="/user/practice?mode=fresh&name=তথ্য ও যোগাযোগ প্রযুক্তি&source=subject&source_id=90" class="pill pill-prac" id="pracBtn"> <div class="pulse-wrap"> <svg class="prac-icon" viewBox="0 0 24 24"> <path d="M8 5v14l11-7z" /> </svg> </div> Practice </a> <a class="pill pill-prac p-0" href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Satt Academy Play Store Link"> <img src="/satt_logo/playstore-white.png" alt="Satt Academy Play Store" style="width: 70px; height: auto; cursor: pointer;"> </a> </div> <div class="text-center"> <span class="dopamin-toast" id="dopamin-toast"></span> </div> </div> <div class="grid grid-cols-1 gap-5 lg:grid-cols-2 xl:gap-10"> <div class="col-span-full"> <div class="flex flex-col">  <div class="bg-gray-100 dark:bg-zinc-800 px-0 py-2 rounded-t-lg"> <div class="flex items-center justify-between px-4"> <h2 class="text-dark dark:text-gray-100 text-xl font-semibold"> Related Question </h2> <a href="https://sattacademy.com/all-written/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF" class="inline-flex items-center gap-2 bg-white dark:bg-zinc-700 hover:bg-gray-50 dark:hover:bg-zinc-700 text-gray-900 dark:text-gray-100 px-2 py-1.5 rounded-lg transition-colors duration-200"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"> <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path> <path d="M11 13l9 -9"></path> <path d="M15 4h5v5"></path> </svg> View All </a> </div> </div>  <div class="space-y-5"> <div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5"> <div class="" x-data="{showDescription: true}" > <div class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 " @click="showDescription = !showDescription" > <a href="https://sattacademy.com/question/%E0%A6%B9%E0%A6%BE%E0%A6%87%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A6%AE%E0%A6%BF%E0%A6%A1%E0%A6%BF%E0%A7%9F%E0%A6%BE-%E0%A6%95%E0%A7%80" class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop> <span class="text-zinc-800 dark:text-zinc-100 shrink-0 leading-relaxed font-medium text-md"> (ক) </span> <div class="flex flex-col gap-1"> <div class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md"> হাইপারমিডিয়া কী? <span> (জ্ঞানমূলক) </span> </div> </div> <div class="flex items-center gap-0.5 pt-1"> </div> </a> <div class="shrink-0"> <button class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700" aria-label="Toggle description"> <svg x-show="!showDescription" x-cloak class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"> </path> </svg> <svg x-show="showDescription" x-cloak class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"> </path> </svg> </button> </div> </div> <div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap"> <div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-213092"> <a href="https://sattacademy.com/%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%A6%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%B6%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A3%E0%A6%BF/cq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="এইচএসসি"> এইচএসসি </a> <a href="https://sattacademy.com/all-written/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="তথ্য ও যোগাযোগ প্রযুক্তি"> তথ্য ও যোগাযোগ প্রযুক্তি </a> <a href="https://sattacademy.com/board-exams/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%A6%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%B6%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A3%E0%A6%BF-%E0%A6%AC%E0%A6%B0%E0%A6%BF%E0%A6%B6%E0%A6%BE%E0%A6%B2-%E0%A6%AC%E0%A7%8B%E0%A6%B0%E0%A7%8D%E0%A6%A1-2025-27157/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ময়মনসিংহ বোর্ড - 2025"> ময়মনসিংহ বোর্ড - 2025 </a> </div> <div class="ml-auto hidden md:block"> <div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar" > <div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path> <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path> </g> </svg> <span class="text-md leading-none text-zinc-800 dark:text-zinc-200">410</span> </div> <div class="flex items-center gap-3"> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20" onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')" aria-label="Question Analytics" title="Analytics"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md"> <path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path> <path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 " onclick="alert('বুকমার্ক করতে লগইন করুন')" class="text-zinc-400 hover:text-yellow-600" aria-label="Bookmark question" title="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400 " onclick="alert('পছন্দ করতে লগইন করুন')" class="text-zinc-400 hover:text-pink-500" aria-label="Favorite question" title="Favorite"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" onclick="alert('রিপোর্ট করতে লগইন করুন')" aria-label="Flag question" title="Flag"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" onclick="alert('শেয়ার করতে লগইন করুন')" aria-label="Share question" title="Share"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> <path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path> <path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> </g> </svg> </button> </div> </div> </div> </div> <div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1 des">  <div class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">  <div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed prose prose-sm dark:prose-invert max-w-none overflow-x-auto hide-scrollbar"> <span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1"> উত্তরঃ </span> <p>হাইপারমিডিয়া হলো টেক্সট, অডিও, ভিডিও, গ্রাফিক্স এবং অ্যানিমেশনের মতো বিভিন্ন মিডিয়া উপাদানের সমষ্টি যা হাইপারলিংকের মাধ্যমে একে অপরের সাথে সংযুক্ত থাকে।</p> </div>  <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <img src="https://sattacademy.com/uploads/avatar/1752391341.png" class="w-7 h-7 rounded-full object-cover" alt="Satt AI" > <div> <a href="https://sattacademy.com/user/u&id=476188/profile" class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none"> Satt AI </a> <div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none"> 1 week ago </div> </div> </div> <div class="flex items-center gap-3">  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"> </path> </svg> <span class="text-sm">0</span> </button>  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"> </path> </svg> <span class="text-sm">0</span> </button> </div> </div> </div>  </div> </div> <div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap"> <div class="ml-auto"> <div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar" > <div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path> <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path> </g> </svg> <span class="text-md leading-none text-zinc-800 dark:text-zinc-200">410</span> </div> <div class="flex items-center gap-3"> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20" onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')" aria-label="Question Analytics" title="Analytics"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md"> <path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path> <path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 " onclick="alert('বুকমার্ক করতে লগইন করুন')" class="text-zinc-400 hover:text-yellow-600" aria-label="Bookmark question" title="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400 " onclick="alert('পছন্দ করতে লগইন করুন')" class="text-zinc-400 hover:text-pink-500" aria-label="Favorite question" title="Favorite"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" onclick="alert('রিপোর্ট করতে লগইন করুন')" aria-label="Flag question" title="Flag"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" onclick="alert('শেয়ার করতে লগইন করুন')" aria-label="Share question" title="Share"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> <path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path> <path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> </g> </svg> </button> </div> </div> </div> </div> </div> <div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5"> <div class="" x-data="{showDescription: true}" > <div class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 " @click="showDescription = !showDescription" > <a href="https://sattacademy.com/question/%E0%A6%B6%E0%A7%81%E0%A6%A7%E0%A7%81-html-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0-%E0%A6%95%E0%A6%B0%E0%A7%87-%E0%A6%93%E0%A7%9F%E0%A7%87%E0%A6%AC%E0%A6%B8%E0%A6%BE%E0%A6%87%E0%A6%9F%E0%A6%95%E0%A7%87-%E0%A6%86%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%B7%E0%A6%A3%E0%A7%80%E0%A7%9F%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-%E0%A6%89%E0%A6%AA%E0%A6%B8%E0%A7%8D%E0%A6%A5%E0%A6%BE%E0%A6%AA%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A6%BE-%E0%A6%AF%E0%A6%BE%E0%A7%9F-%E0%A6%A8%E0%A6%BE%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%96%E0%A7%8D%E0%A6%AF%E0%A6%BE-%E0%A6%95%E0%A6%B0" class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop> <span class="text-zinc-800 dark:text-zinc-100 shrink-0 leading-relaxed font-medium text-md"> (খ) </span> <div class="flex flex-col gap-1"> <div class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md"> শুধু HTML ব্যবহার করে ওয়েবসাইটকে আকর্ষণীয়ভাবে উপস্থাপন করা যায় না-ব্যাখ্যা কর। <span> (অনুধাবন) </span> </div> </div> <div class="flex items-center gap-0.5 pt-1"> </div> </a> <div class="shrink-0"> <button class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700" aria-label="Toggle description"> <svg x-show="!showDescription" x-cloak class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"> </path> </svg> <svg x-show="showDescription" x-cloak class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"> </path> </svg> </button> </div> </div> <div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap"> <div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-213093"> <a href="https://sattacademy.com/%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%A6%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%B6%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A3%E0%A6%BF/cq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="এইচএসসি"> এইচএসসি </a> <a href="https://sattacademy.com/all-written/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="তথ্য ও যোগাযোগ প্রযুক্তি"> তথ্য ও যোগাযোগ প্রযুক্তি </a> <a href="https://sattacademy.com/board-exams/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%A6%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%B6%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A3%E0%A6%BF-%E0%A6%AC%E0%A6%B0%E0%A6%BF%E0%A6%B6%E0%A6%BE%E0%A6%B2-%E0%A6%AC%E0%A7%8B%E0%A6%B0%E0%A7%8D%E0%A6%A1-2025-27157/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ময়মনসিংহ বোর্ড - 2025"> ময়মনসিংহ বোর্ড - 2025 </a> </div> <div class="ml-auto hidden md:block"> <div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar" > <div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path> <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path> </g> </svg> <span class="text-md leading-none text-zinc-800 dark:text-zinc-200">225</span> </div> <div class="flex items-center gap-3"> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20" onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')" aria-label="Question Analytics" title="Analytics"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md"> <path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path> <path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 " onclick="alert('বুকমার্ক করতে লগইন করুন')" class="text-zinc-400 hover:text-yellow-600" aria-label="Bookmark question" title="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400 " onclick="alert('পছন্দ করতে লগইন করুন')" class="text-zinc-400 hover:text-pink-500" aria-label="Favorite question" title="Favorite"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" onclick="alert('রিপোর্ট করতে লগইন করুন')" aria-label="Flag question" title="Flag"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" onclick="alert('শেয়ার করতে লগইন করুন')" aria-label="Share question" title="Share"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> <path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path> <path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> </g> </svg> </button> </div> </div> </div> </div> <div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1 des">  <div class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">  <div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed prose prose-sm dark:prose-invert max-w-none overflow-x-auto hide-scrollbar"> <span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1"> উত্তরঃ </span> <p>শুধুমাত্র HTML (HyperText Markup Language) ব্যবহার করে একটি ওয়েবসাইটকে আকর্ষণীয়ভাবে উপস্থাপন করা যায় না, কারণ HTML-এর মূল কাজ হলো ওয়েবসাইটের বিষয়বস্তু বা কন্টেন্টের কাঠামো তৈরি করা। এটি হেডিং, প্যারাগ্রাফ, তালিকা, টেবিল, ছবি ইত্যাদি উপাদানগুলোকে সংজ্ঞায়িত করে এবং তাদের অর্থগত বিন্যাস নির্ধারণ করে। কিন্তু এটি কোনো নির্দিষ্ট উপাদানকে কীভাবে দেখাবে, তার রঙ, ফন্ট, আকার, মার্জিন বা লেআউট কেমন হবে, সে সম্পর্কে বিস্তারিত নির্দেশিকা প্রদান করে না। ফলে, শুধুমাত্র HTML দ্বারা নির্মিত ওয়েবসাইট দেখতে সাদামাটা, অগোছালো এবং স্থির (static) প্রকৃতির হয়, যা আধুনিক ওয়েবসাইটের দৃষ্টিনন্দনতার অভাব পূরণ করতে পারে না।</p> <p>ওয়েবসাইটকে আকর্ষণীয়, গতিশীল এবং ব্যবহারকারী-বান্ধব করে তোলার জন্য HTML-এর পাশাপাশি অন্যান্য প্রযুক্তি ব্যবহার করা অত্যাবশ্যক। Cascading Style Sheets (CSS) হলো এমন একটি ভাষা যা ওয়েবসাইটের ডিজাইন, রঙ, ফন্ট, লেআউট এবং অন্যান্য ভিজ্যুয়াল বৈশিষ্ট্য নিয়ন্ত্রণ করে এটিকে দৃষ্টিনন্দন করে তোলে। অন্যদিকে, JavaScript ব্যবহার করে ওয়েবসাইটে ইন্টারেক্টিভিটি (interactivity) এবং গতিশীল কার্যকারিতা যোগ করা হয়, যেমন অ্যানিমেশন, ফর্ম ভ্যালিডেশন বা ডায়নামিক কন্টেন্ট লোডিং। এই তিনটি প্রযুক্তির সম্মিলিত ব্যবহার একটি ওয়েবসাইটকে সম্পূর্ণরূপে আকর্ষণীয় ও কার্যক্ষম করে তুলতে পারে।</p> </div>  <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <img src="https://sattacademy.com/uploads/avatar/1752391341.png" class="w-7 h-7 rounded-full object-cover" alt="Satt AI" > <div> <a href="https://sattacademy.com/user/u&id=476188/profile" class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none"> Satt AI </a> <div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none"> 1 week ago </div> </div> </div> <div class="flex items-center gap-3">  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"> </path> </svg> <span class="text-sm">0</span> </button>  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"> </path> </svg> <span class="text-sm">0</span> </button> </div> </div> </div>  </div> </div> <div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap"> <div class="ml-auto"> <div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar" > <div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path> <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path> </g> </svg> <span class="text-md leading-none text-zinc-800 dark:text-zinc-200">225</span> </div> <div class="flex items-center gap-3"> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20" onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')" aria-label="Question Analytics" title="Analytics"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md"> <path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path> <path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 " onclick="alert('বুকমার্ক করতে লগইন করুন')" class="text-zinc-400 hover:text-yellow-600" aria-label="Bookmark question" title="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400 " onclick="alert('পছন্দ করতে লগইন করুন')" class="text-zinc-400 hover:text-pink-500" aria-label="Favorite question" title="Favorite"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" onclick="alert('রিপোর্ট করতে লগইন করুন')" aria-label="Flag question" title="Flag"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" onclick="alert('শেয়ার করতে লগইন করুন')" aria-label="Share question" title="Share"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> <path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path> <path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> </g> </svg> </button> </div> </div> </div> </div> </div> <div class="select-none group border rounded-md p-2 bg-white dark:bg-zinc-800 mb-2 border-zinc-100 dark:border-white/5"> <div class="" x-data="{showDescription: true}" > <div class="flex items-start justify-between group rounded-lg cursor-pointer select-none gap-2 md:gap-4 p-0.5 ps-1 " @click="showDescription = !showDescription" > <a href="https://sattacademy.com/question/%E0%A6%A6%E0%A7%83%E0%A6%B6%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A6%B2%E0%A7%8D%E0%A6%AA%E0%A7%A8-%E0%A6%95%E0%A7%87-%E0%A6%A6%E0%A7%83%E0%A6%B6%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A6%B2%E0%A7%8D%E0%A6%AA%E0%A7%A7-%E0%A6%8F%E0%A6%B0-%E0%A6%95%E0%A7%8D%E0%A6%B2%E0%A6%BE%E0%A7%9F%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0%E0%A7%87-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%A6%E0%A6%B0%E0%A7%8D%E0%A6%B6%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%95%E0%A7%8D%E0%A6%B0%E0%A6%BF%E0%A7%9F%E0%A6%BE-%E0%A6%AC%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%A8%E0%A6%BE-%E0%A6%95%E0%A6%B0" class="flex items-start overflow-x-auto overflow-y-hidden scrollbar-hide pt-1 gap-2" @click.stop> <span class="text-zinc-800 dark:text-zinc-100 shrink-0 leading-relaxed font-medium text-md"> (গ) </span> <div class="flex flex-col gap-1"> <div class="text-zinc-800 dark:text-zinc-200 leading-relaxed font-medium text-md"> দৃশ্যকল্প-২ কে দৃশ্যকল্প-১ এর ক্লায়েন্ট কম্পিউটারে প্রদর্শনের প্রক্রিয়া বর্ণনা কর। <span> (প্রয়োগ) </span> </div> </div> <div class="flex items-center gap-0.5 pt-1"> </div> </a> <div class="shrink-0"> <button class="w-8 h-8 flex items-center justify-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-700" aria-label="Toggle description"> <svg x-show="!showDescription" x-cloak class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"> </path> </svg> <svg x-show="showDescription" x-cloak class="w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"> </path> </svg> </button> </div> </div> <div class="flex items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap"> <div class="flex overflow-x-auto scrollbar-hide gap-2 mt-2 tags-213094"> <a href="https://sattacademy.com/%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%A6%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%B6%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A3%E0%A6%BF/cq" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="এইচএসসি"> এইচএসসি </a> <a href="https://sattacademy.com/all-written/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="তথ্য ও যোগাযোগ প্রযুক্তি"> তথ্য ও যোগাযোগ প্রযুক্তি </a> <a href="https://sattacademy.com/board-exams/%E0%A6%A4%E0%A6%A5%E0%A7%8D%E0%A6%AF-%E0%A6%93-%E0%A6%AF%E0%A7%8B%E0%A6%97%E0%A6%BE%E0%A6%AF%E0%A7%8B%E0%A6%97-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%AF%E0%A7%81%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF-%E0%A6%8F%E0%A6%95%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%A6%E0%A7%8D%E0%A6%AC%E0%A6%BE%E0%A6%A6%E0%A6%B6-%E0%A6%B6%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A3%E0%A6%BF-%E0%A6%AC%E0%A6%B0%E0%A6%BF%E0%A6%B6%E0%A6%BE%E0%A6%B2-%E0%A6%AC%E0%A7%8B%E0%A6%B0%E0%A7%8D%E0%A6%A1-2025-27157/written" class="inline-flex items-center px-2.5 py-1 text-[11px] font-normal rounded-full border whitespace-nowrap bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-300 border-zinc-100 dark:border-white/5 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-800 dark:hover:text-zinc-200 " title="ময়মনসিংহ বোর্ড - 2025"> ময়মনসিংহ বোর্ড - 2025 </a> </div> <div class="ml-auto hidden md:block"> <div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar" > <div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path> <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path> </g> </svg> <span class="text-md leading-none text-zinc-800 dark:text-zinc-200">79</span> </div> <div class="flex items-center gap-3"> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20" onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')" aria-label="Question Analytics" title="Analytics"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md"> <path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path> <path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 " onclick="alert('বুকমার্ক করতে লগইন করুন')" class="text-zinc-400 hover:text-yellow-600" aria-label="Bookmark question" title="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400 " onclick="alert('পছন্দ করতে লগইন করুন')" class="text-zinc-400 hover:text-pink-500" aria-label="Favorite question" title="Favorite"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" onclick="alert('রিপোর্ট করতে লগইন করুন')" aria-label="Flag question" title="Flag"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" onclick="alert('শেয়ার করতে লগইন করুন')" aria-label="Share question" title="Share"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> <path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path> <path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> </g> </svg> </button> </div> </div> </div> </div> <div x-show="showDescription" x-data="{ showOtherDescs: false }" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-2" x-transition:enter-end="opacity-100 transform translate-y-0" class="space-y-4 mt-1 des">  <div class="relative bg-[#dcebe596] dark:bg-[#2c3532] rounded-lg p-4 mb-4 border border-gray-200 dark:border-gray-700">  <div class="text-gray-700 dark:text-gray-300 text-sm mb-3 leading-relaxed prose prose-sm dark:prose-invert max-w-none overflow-x-auto hide-scrollbar"> <span class="font-semibold text-gray-800 dark:text-gray-200 float-left mr-1"> উত্তরঃ </span> <p>দৃশ্যকল্প-১ এর ক্লায়েন্ট কম্পিউটার থেকে দৃশ্যকল্প-২ এ উল্লিখিত <code>www.abc.edu/student.html</code> নামক ওয়েবপেইজটি প্রদর্শনের জন্য ক্লায়েন্ট-সার্ভার মডেল (Client-Server Model) অনুযায়ী একটি সুনির্দিষ্ট প্রক্রিয়া অনুসরণ করা হয়। এই প্রক্রিয়ার মাধ্যমে ক্লায়েন্ট কম্পিউটার ওয়েব সার্ভার থেকে প্রয়োজনীয় তথ্য সংগ্রহ করে এবং ব্যবহারকারীর সামনে উপস্থাপন করে।</p> <p>প্রথমত, ক্লায়েন্ট কম্পিউটারের ওয়েব ব্রাউজারে ব্যবহারকারী <code>www.abc.edu/student.html</code> ঠিকানাটি টাইপ করে এন্টার চাপলে অথবা কোনো লিংকে ক্লিক করলে, ব্রাউজার সার্ভারের কাছে একটি HTTP (Hypertext Transfer Protocol) রিকোয়েস্ট (Request) পাঠায়। এই রিকোয়েস্টের মাধ্যমে ক্লায়েন্ট নির্দিষ্ট ওয়েবপেইজটি (দৃশ্যকল্প-২ এর) প্রাপ্তির ইচ্ছা প্রকাশ করে।</p> <p>সার্ভার রিকোয়েস্টটি গ্রহণ করে এবং তার স্টোরেজে সংরক্ষিত <code>www.abc.edu/student.html</code> ফাইলটি খুঁজে বের করে। এরপর সার্ভার ঐ ফাইলটির HTML (HyperText Markup Language) কোডগুলো একটি HTTP রেসপন্স (Response) আকারে ক্লায়েন্ট কম্পিউটারের ব্রাউজারে ফেরত পাঠায়। ব্রাউজার এই প্রাপ্ত HTML কোডগুলোকে ব্যাখ্যা (Interpret) করে এবং দৃশ্যকল্প-২ এ প্রদর্শিত "Roll No-101" ও মার্কস টেবিলসহ সম্পূর্ণ ওয়েবপেইজটি ক্লায়েন্ট কম্পিউটারের স্ক্রিনে প্রদর্শন করে।</p> </div>  <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <img src="https://sattacademy.com/uploads/avatar/1752391341.png" class="w-7 h-7 rounded-full object-cover" alt="Satt AI" > <div> <a href="https://sattacademy.com/user/u&id=476188/profile" class="text-sm font-medium text-zinc-700 dark:text-zinc-400 hover:text-blue-600 dark:hover:text-blue-400 leading-none"> Satt AI </a> <div class="text-xs text-zinc-500 dark:text-zinc-400 leading-none"> 1 week ago </div> </div> </div> <div class="flex items-center gap-3">  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-emerald-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"> </path> </svg> <span class="text-sm">0</span> </button>  <button onclick="alert('ব্যাখ্যায় ভোট দিতে লগইন করুন')" class="flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3"> </path> </svg> <span class="text-sm">0</span> </button> </div> </div> </div>  </div> </div> <div class="flex md:hidden items-center justify-between gap-2 mt-1 mb-2 flex-wrap md:flex-nowrap"> <div class="ml-auto"> <div class="flex items-center gap-4 shrink-0 cursor-pointer ques-action-bar" > <div class="flex items-center gap-1 text-zinc-400 dark:text-zinc-500 cursor-default"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M3.275 15.296C2.425 14.192 2 13.639 2 12c0-1.64.425-2.191 1.275-3.296C4.972 6.5 7.818 4 12 4s7.028 2.5 8.725 4.704C21.575 9.81 22 10.361 22 12c0 1.64-.425 2.191-1.275 3.296C19.028 17.5 16.182 20 12 20s-7.028-2.5-8.725-4.704Z"></path> <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0Z"></path> </g> </svg> <span class="text-md leading-none text-zinc-800 dark:text-zinc-200">79</span> </div> <div class="flex items-center gap-3"> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20" onclick="alert('অ্যানালিটিক্স দেখতে লগইন করুন')" aria-label="Question Analytics" title="Analytics"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--basil text-md"> <path fill="currentColor" d="M11.25 2.745c0-.116-.1-.208-.216-.196A9.5 9.5 0 0 0 2.5 12a9.5 9.5 0 0 0 16.243 6.692a.197.197 0 0 0-.017-.292l-7.197-5.817A.75.75 0 0 1 11.25 12z"></path> <path fill="currentColor" d="M19.67 17.234c.09.073.224.054.288-.044a9.45 9.45 0 0 0 1.494-4.225a.197.197 0 0 0-.197-.215h-6.568a.2.2 0 0 0-.126.355zm1.585-5.984c.116 0 .208-.1.197-.216a9.5 9.5 0 0 0-8.486-8.486a.197.197 0 0 0-.216.197v8.205a.3.3 0 0 0 .3.3z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-yellow-500 dark:hover:text-yellow-400 " onclick="alert('বুকমার্ক করতে লগইন করুন')" class="text-zinc-400 hover:text-yellow-600" aria-label="Bookmark question" title="Bookmark"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="M8 3h8a3 3 0 0 1 3 3v15l-7-3l-7 3V6a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v13.5l6-2.56l6 2.56V6a2 2 0 0 0-2-2z"></path> </svg> </button> <button class="relative w-6 h-6 flex items-center justify-center rounded-full text-zinc-400 dark:text-zinc-500 hover:text-pink-500 dark:hover:text-pink-400 " onclick="alert('পছন্দ করতে লগইন করুন')" class="text-zinc-400 hover:text-pink-500" aria-label="Favorite question" title="Favorite"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4 h-4"> <path fill="currentColor" d="m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" onclick="alert('রিপোর্ট করতে লগইন করুন')" aria-label="Flag question" title="Flag"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5 22v-8m0 0V4m0 10l2.47-.494a8.7 8.7 0 0 1 4.925.452a8.68 8.68 0 0 0 5.327.361l.214-.053A1.404 1.404 0 0 0 19 12.904V5.537a1.2 1.2 0 0 0-1.49-1.164a8 8 0 0 1-4.911-.334l-.204-.081a8.7 8.7 0 0 0-4.924-.452L5 4m0 0V2"></path> </svg> </button> <button class="w-6 h-6 flex items-center justify-center rounded-full cursor-pointer text-zinc-400 dark:text-zinc-500 hover:text-blue-500 dark:hover:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20" onclick="alert('শেয়ার করতে লগইন করুন')" aria-label="Share question" title="Share"> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--solar text-md"> <g fill="none" stroke="currentColor" stroke-width="1.5"> <path d="M9 12a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> <path stroke-linecap="round" d="M14 6.5L9 10m5 7.5L9 14"></path> <path d="M19 18.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Zm0-13a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0Z"></path> </g> </svg> </button> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="my-4"> <style> .t_wrap{ background:linear-gradient(135deg, #1a5c2e 0%, #2d8c4e 40%, #1a7a3a 70%, #0d4d20 100%); border-radius:14px; padding:24px 22px 20px; font-family:'Hind Siliguri',Arial,sans-serif; margin:0 auto; overflow:hidden; } .t_badge{ display:inline-flex;align-items:center;gap:6px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); border-radius:20px;padding:4px 12px;margin-bottom:12px; } .t_badge .dot{width:7px;height:7px;border-radius:50%;background:#4caf50;} .t_badge span{color:#fff;font-size:11px;font-weight:500;} .title{color:#fff;font-size:clamp(15px,4vw,20px);font-weight:600;;margin-bottom:5px;} .title span{color:#ffd54f;} .sub{color:rgba(255,255,255,0.82);font-size:clamp(11px,2.8vw,13px);margin-bottom:16px;line-height:1.5;} .sub b{color:#80d8ff;} .marquee-wrap{ display:flex;flex-direction:column;gap:8px; margin-bottom:16px; overflow:hidden; -webkit-mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%); mask:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%); } .marquee-row{display:flex;gap:8px;width:max-content;} .marquee-row.r1{animation:scroll-left 28s linear infinite;} .marquee-row.r2{animation:scroll-left 22s linear infinite;} @keyframes scroll-left{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} } .feat{ background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); border-radius:9px; padding:7px 12px; display:flex;align-items:center;gap:7px; flex-shrink:0; white-space:nowrap; } .fi{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .fi svg{width:11px;height:11px;} .ft{color:#fff;font-size:clamp(10px,2.3vw,12px);line-height:1.35;} .cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;} .btn-y{background:#ffd54f;color:#1a237e;border:none;border-radius:20px;padding:9px 22px;font-size:clamp(12px,2.8vw,13px);font-weight:700;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;} .btn-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.45);border-radius:20px;padding:8px 18px;font-size:clamp(12px,2.8vw,13px);font-weight:500;cursor:pointer;font-family:'Hind Siliguri',Arial,sans-serif;} .stats{display:flex;gap:16px;margin-left:auto;} .stat .n{color:#ffd54f;font-size:13px;font-weight:700;} .stat .l{color:rgba(255,255,255,0.7);font-size:10px;} @media(max-width:380px){.stats{margin-left:0;width:100%;justify-content:space-around;}} </style> <div class="t_wrap"> <div class="t_badge"><div class="dot"></div><span>শিক্ষকদের জন্য বিশেষভাবে তৈরি</span></div> <p class="title">১ ক্লিকে <span>প্রশ্ন, শীট, সাজেশন</span> ও<br>অনলাইন পরীক্ষা তৈরির সফটওয়্যার!</p> <p class="sub">শুধু প্রশ্ন সিলেক্ট করুন — <b>প্রশ্নপত্র অটোমেটিক তৈরি!</b></p> <div class="marquee-wrap">  <div class="marquee-row r1">  <div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div> <div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div> <div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div>  <div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4z"/></svg></div><span class="ft">প্রশ্ন এডিট করা যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg></div><span class="ft">জলছাপ দেয়া যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2"/></svg></div><span class="ft">ঠিকানা যুক্ত করা যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5 20h14"/></svg></div><span class="ft">Logo, Motto যুক্ত হবে</span></div> <div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><span class="ft">অটো প্রতিষ্ঠানের নাম</span></div> <div class="feat"><div class="fi" style="background:rgba(128,222,234,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80deea" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><span class="ft">অটো সময়, পূর্ণমান</span></div> </div>  <div class="marquee-row r2">  <div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div> <div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div> <div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div> <div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div> <div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div>  <div class="feat"><div class="fi" style="background:rgba(255,213,79,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffd54f" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div><span class="ft">অটো নির্দেশনা (এডিটযোগ্য)</span></div> <div class="feat"><div class="fi" style="background:rgba(165,214,167,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#a5d6a7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg></div><span class="ft">অটো বিষয় ও অধ্যায়</span></div> <div class="feat"><div class="fi" style="background:rgba(255,138,128,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ff8a80" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.2" fill="#ff8a80" stroke="none"/><circle cx="15" cy="11" r="1.2" fill="#ff8a80" stroke="none"/></svg></div><span class="ft">OMR সংযুক্ত করা যাবে</span></div> <div class="feat"><div class="fi" style="background:rgba(129,212,250,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#80d8ff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="12" y1="4" x2="12" y2="20"/><line x1="9" y1="20" x2="15" y2="20"/></svg></div><span class="ft">ফন্ট, কলাম, ডিভাইডার</span></div> <div class="feat"><div class="fi" style="background:rgba(206,147,216,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ce93d8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 010 14.14M4.93 4.93a10 10 0 000 14.14"/></svg></div><span class="ft">প্রশ্ন/অপশন স্টাইল পরিবর্তন</span></div> <div class="feat"><div class="fi" style="background:rgba(255,171,64,0.2);"><svg viewBox="0 0 24 24" fill="none" stroke="#ffab40" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><span class="ft">সেট কোড, বিষয় কোড</span></div> </div> </div> <div class="cta"> <a href="https://sattacademy.com/e-question-builder" class="btn-y">এখনই শুরু করুন</a> <a href="https://sattacademy.com/e-question-builder#question-list-section" class="btn-w">ডেমো দেখুন</a> <div class="stats d-none d-md-flex"> <div class="stat"><div class="n">৫০,০০০+</div><div class="l">শিক্ষক</div></div> <div class="stat"><div class="n">৩০ লক্ষ+</div><div class="l">প্রশ্নপত্র</div></div> </div> </div> </div> </div> </div>  <div class="md:col-span-1"> <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-zinc-800 p-4 shadow-xs text-zinc-800 dark:text-zinc-200"> <div class="mb-10">  <div class="mb-3"> <h3 class="text-gray-900 dark:text-gray-100 font-bold text-sm uppercase tracking-wide"> Related Question </h3> </div>  <div class="mb-4 h-px bg-gray-200 dark:bg-zinc-700"></div>  <div class="space-y-2 overflow-x-auto"> <div class="mb-1.5"> <a href="https://sattacademy.com/question/%E0%A6%B9%E0%A6%BE%E0%A6%87%E0%A6%AA%E0%A6%BE%E0%A6%B0%E0%A6%AE%E0%A6%BF%E0%A6%A1%E0%A6%BF%E0%A7%9F%E0%A6%BE-%E0%A6%95%E0%A7%80" class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700"> হাইপারমিডিয়া কী? (জ্ঞানমূলক) </a> </div> <div class="mb-1.5"> <a href="https://sattacademy.com/question/%E0%A6%B6%E0%A7%81%E0%A6%A7%E0%A7%81-html-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%AC%E0%A6%B9%E0%A6%BE%E0%A6%B0-%E0%A6%95%E0%A6%B0%E0%A7%87-%E0%A6%93%E0%A7%9F%E0%A7%87%E0%A6%AC%E0%A6%B8%E0%A6%BE%E0%A6%87%E0%A6%9F%E0%A6%95%E0%A7%87-%E0%A6%86%E0%A6%95%E0%A6%B0%E0%A7%8D%E0%A6%B7%E0%A6%A3%E0%A7%80%E0%A7%9F%E0%A6%AD%E0%A6%BE%E0%A6%AC%E0%A7%87-%E0%A6%89%E0%A6%AA%E0%A6%B8%E0%A7%8D%E0%A6%A5%E0%A6%BE%E0%A6%AA%E0%A6%A8-%E0%A6%95%E0%A6%B0%E0%A6%BE-%E0%A6%AF%E0%A6%BE%E0%A7%9F-%E0%A6%A8%E0%A6%BE%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%96%E0%A7%8D%E0%A6%AF%E0%A6%BE-%E0%A6%95%E0%A6%B0" class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700"> শুধু HTML ব্যবহার করে ওয়েবসাইটকে আকর্ষণীয়ভাবে উপস্থাপন করা যায় না-ব্যাখ্যা কর। (অনুধাবন) </a> </div> <div class="mb-1.5"> <a href="https://sattacademy.com/question/%E0%A6%A6%E0%A7%83%E0%A6%B6%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A6%B2%E0%A7%8D%E0%A6%AA%E0%A7%A8-%E0%A6%95%E0%A7%87-%E0%A6%A6%E0%A7%83%E0%A6%B6%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A6%B2%E0%A7%8D%E0%A6%AA%E0%A7%A7-%E0%A6%8F%E0%A6%B0-%E0%A6%95%E0%A7%8D%E0%A6%B2%E0%A6%BE%E0%A7%9F%E0%A7%87%E0%A6%A8%E0%A7%8D%E0%A6%9F-%E0%A6%95%E0%A6%AE%E0%A7%8D%E0%A6%AA%E0%A6%BF%E0%A6%89%E0%A6%9F%E0%A6%BE%E0%A6%B0%E0%A7%87-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%A6%E0%A6%B0%E0%A7%8D%E0%A6%B6%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%95%E0%A7%8D%E0%A6%B0%E0%A6%BF%E0%A7%9F%E0%A6%BE-%E0%A6%AC%E0%A6%B0%E0%A7%8D%E0%A6%A3%E0%A6%A8%E0%A6%BE-%E0%A6%95%E0%A6%B0" class="block px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-lg border-b border-gray-100 dark:border-zinc-700"> দৃশ্যকল্প-২ কে দৃশ্যকল্প-১ এর ক্লায়েন্ট কম্পিউটারে প্রদর্শনের প্রক্রিয়া বর্ণনা কর। (প্রয়োগ) </a> </div> </div> </div> <a href="https://sattacademy.com/e-question-builder" class="block p-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg border border-dashed border-blue-200 dark:border-blue-800 hover:shadow-md transition-all duration-200 mb-4"> <div class="text-blue-800 dark:text-blue-200"> <span class="font-semibold text-lg">মাত্র ১৫ পয়সায় প্রশ্নপত্র</span> <div class="text-blue-600 dark:text-blue-400 font-medium mt-1"> ১ ক্লিকে প্রশ্ন, শীট, সাজেশন তৈরি করুন আজই </div> </div> </a> <style> .ep { background: linear-gradient(135deg, #1565c0 0%, #1e88e5 55%, #29b6f6 100%); border-radius: 12px; padding: clamp(16px, 4vw, 24px) clamp(14px, 4vw, 24px); display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; gap: 12px; } .ep-title { color: #fff; font-size: clamp(16px, 4.5vw, 22px); font-weight: 800; line-height: 1.2; letter-spacing: -0.3px; } .ep-sub { color: rgba(255, 255, 255, 0.8); font-size: clamp(11px, 2.8vw, 13px); margin-top: -4px; } .ep-cta { background: #43a047; color: #fff; border: none; border-radius: 30px; padding: 10px 28px; font-size: clamp(12px, 3vw, 14px); font-weight: 700; cursor: pointer; letter-spacing: 0.2px; } .ep-stats { display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 30px; padding: 6px 14px; } .ep-stat { display: flex; align-items: center; gap: 5px; } .ep-stat svg { flex-shrink: 0; } .ep-stat span { font-size: clamp(10px, 2.5vw, 12px); color: #fff; } .ep-divider { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.25); } </style> <div class="ep"> <p class="ep-title">Complete Exam<br>Preparation</p> <p class="ep-sub">Learn, practice, analyse and improve</p> <div style="display: flex; gap: 12px;"> <a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play"> <img src="/satt_logo/appstore.svg" alt="App Store" style="width: 120px; height: auto; cursor: pointer;"> </a> <a href="https://play.google.com/store/apps/details?id=com.sattacademy.app" target="_blank" rel="noopener" aria-label="Download SATT Academy app from Google Play"> <img src="/satt_logo/playstore.svg" alt="Play Store" style="width: 120px; height: auto; cursor: pointer;"> </a> </div> <div class="ep-stats"> <div class="ep-stat"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.85)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" /> <polyline points="7 10 12 15 17 10" /> <line x1="12" y1="15" x2="12" y2="3" /> </svg> <span>1M+ downloads</span> </div> <div class="ep-divider"></div> <div class="ep-stat"> <svg width="12" height="12" viewBox="0 0 24 24" fill="#FBBC04"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /> </svg> <span>4.6 · 8k+ Reviews</span> </div> </div> </div> </div> </div> </div> </div> </div> <div id="footer-promotion-content" class="container mx-auto px-2"></div> </main> <style> /* --- CSS Variables for Light/Dark Mode --- */ :root { --bottom-ad-bg: #ffffff; --bottom-ad-text: #212529; --bottom-ad-border: #70707030; --bottom-ad-btn-bg: #ffffff; } html.dark, html.dark-mode { --bottom-ad-bg: #1f2937; --bottom-ad-text: #f3f4f6; --bottom-ad-border: #374151; --bottom-ad-btn-bg: #374151; } /* --- Base Offcanvas Container --- */ .bottom-offcanvas { position: fixed; left: 0; background: var(--bottom-ad-bg); color: var(--bottom-ad-text); width: 100%; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity: 0; visibility: hidden; z-index: 2000; height: fit-content !important; } /* --- Top Orientation Styles --- */ .bottom-offcanvas.is-top { top: 0; border-bottom: 1px solid var(--bottom-ad-border); transform: translateY(-100%); } .is-top .bottom-ads-close-btn { bottom: -32px; border-radius: 0 0 6px 6px; border-top: 0; } /* --- Bottom Orientation Styles --- */ .bottom-offcanvas.is-bottom { bottom: 0; border-top: 1px solid var(--bottom-ad-border); transform: translateY(100%); } .is-bottom .bottom-ads-close-btn { top: -32px; border-radius: 6px 6px 0 0; border-bottom: 0; } /* --- State: Active (Slide In) --- */ .bottom-offcanvas.active { opacity: 1; visibility: visible; transform: translateY(0px); } /* --- Toggle Buttons --- */ .bottom-ads-open-btn, .bottom-ads-close-btn { background-color: var(--bottom-ad-btn-bg); color: var(--bottom-ad-text); left: 0; position: fixed; padding: 4px 16px; z-index: 9999; border: 1px solid var(--bottom-ad-border); box-shadow: 0 -2px 10px rgba(0,0,0,0.05); } .bottom-ads-open-btn { opacity: 0.5; transition: opacity 0.3s ease; display: none; } .bottom-ads-open-btn:hover { opacity: 1; } /* Trigger Button Positions */ .pos-top-btn { top: 0; border-radius: 0 0 6px 6px; border-top: 0; } .pos-bottom-btn { bottom: 0; border-radius: 6px 6px 0 0; border-bottom: 0; } /* --- Subscription Button Animation --- */ .subscription-btn { background: linear-gradient(45deg, var(--sa-bg-primary, #007bff), var(--sa-bg-secondary-300, #6610f2), #0be93b, var(--sa-bg-secondary-300, #6610f2), var(--sa-bg-primary, #007bff)); background-size: 400% 400%; animation: gradient 15s ease infinite; color: #fff !important; border: 0px; } @keyframes gradient { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } #bottom-fixed-ad-content { width: 100%; min-height: 50px; } /* --- Replaced Bootstrap Classes (namespaced to avoid conflicts) --- */ .bottom-ad-hidden { display: none; } .bottom-ad-relative { position: relative; } .bottom-ad-absolute { position: absolute; } .bottom-ad-shadow { box-shadow: 0 10px 15px rgba(0,0,0,0.1); } .bottom-ad-row { display: flex; flex-wrap: wrap; margin: 0 -15px; } .bottom-ad-col-12 { width: 100%; padding: 0 15px; box-sizing: border-box; } @media (min-width: 576px) { .bottom-ad-col-sm-7 { width: 58.333333%; padding: 0 15px; box-sizing: border-box; } .bottom-ad-col-sm-5 { width: 41.666667%; padding: 0 15px; box-sizing: border-box; } } .bottom-ad-mx-auto { margin-left: auto; margin-right: auto; } .bottom-ad-pt-4 { padding-top: 1.5rem; } .bottom-ad-pb-2 { padding-bottom: 0.5rem; } .bottom-ad-px-3 { padding-left: 1rem; padding-right: 1rem; } .bottom-ad-mb-2 { margin-bottom: 0.5rem; } .bottom-ad-text-center { text-align: center; } .bottom-ad-text-dark { color: var(--bottom-ad-text); } .bottom-ad-text-white { color: #ffffff; } .bottom-ad-fs-4 { font-size: 1.5rem; } .bottom-ad-fs-5 { font-size: 1.25rem; } .bottom-ad-w-100 { width: 100%; } .bottom-ad-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .bottom-ad-border-0 { border: none; } .bottom-ad-btn { display: inline-block; border: none; cursor: pointer; text-decoration: none; font-family: inherit; } .bottom-ad-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; } .bottom-ad-align-center { align-items: center; } </style> <div class="bottom-ad-relative" id="footer-bottom-ads" style="display: none"> <button class="bottom-ad-btn-sm bottom-ad-shadow bottom-ad-hidden" id="ad-open-trigger" type="button"> <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bottom-ad-text-dark bottom-ad-fs-4"><path d="m6 15 6-6 6 6"/></svg> </button> <div class="bottom-offcanvas" id="bottom-offcanvas"> <button type="button" class="bottom-ads-close-btn bottom-ad-border-0 bottom-ad-absolute bottom-ad-shadow" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bottom-ad-text-dark bottom-ad-fs-4"><path d="m6 9 6 6 6-6"/></svg> </button> <div style="max-width: 1200px;" class="bottom-ad-mx-auto bottom-ad-pt-4 bottom-ad-pb-2 bottom-ad-px-3"> <div class="bottom-ad-row bottom-ad-align-center"> <div class="bottom-ad-col-12 bottom-ad-mb-2"> <div id="bottom-fixed-ad-content"> </div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-TKRYEG0LTD"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-TKRYEG0LTD'); </script> <script src="https://accounts.google.com/gsi/client" async defer></script> <script> window.addEventListener('load', function() { google.accounts.id.initialize({ client_id: "628877956961-qhkeatldt9371l65e3drolrv3a2t19uv.apps.googleusercontent.com", callback: handleCredentialResponse, auto_select: false, cancel_on_tap_outside: false, context: 'signin', }); google.accounts.id.prompt(); }); async function handleCredentialResponse(response) { try { const res = await fetch('/google-login', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, }, body: JSON.stringify({ credential: response.credential }), }); const data = await res.json(); if (data.success) { window.location.href = '/'; } else { toastr.error('Login failed. Please try again.'); } } catch (err) { console.error('Google login error:', err); toastr.error('Something went wrong.'); } } </script> <script> document.addEventListener('DOMContentLoaded', function() { const isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent); if(isBot) { return; } // Use fetch fetch('/update-presence', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, }, }).catch(function(err) { console.warn('Presence update failed:', err); }); }); </script> <script> document.querySelectorAll('.pill').forEach(p => { setTimeout(() => p.classList.add('show'), 50); }); function showdopaminToast(msg) { const t = document.getElementById('dopamin-toast'); if (!t) return; // Guard clause t.textContent = msg; t.classList.add('show'); clearTimeout(window._tt); window._tt = setTimeout(() => t.classList.remove('show'), 2200); } function addRipple(btn) { const r = document.createElement('span'); r.className = 'ripple'; btn.appendChild(r); setTimeout(() => r.remove(), 500); } // Safely attach listeners using Optional Chaining or If checks const mcqBtn = document.getElementById('mcqBtn'); if (mcqBtn) { mcqBtn.addEventListener('click', function () { addRipple(this); showdopaminToast('3.6k টি MCQ লোড হচ্ছে...'); }); } const cqBtn = document.getElementById('cqBtn'); if (cqBtn) { cqBtn.addEventListener('click', function () { addRipple(this); showdopaminToast('2kটি CQ লোড হচ্ছে...'); }); } const pracBtn = document.getElementById('pracBtn'); if (pracBtn) { pracBtn.addEventListener('click', function () { showdopaminToast('Practice শুরু হচ্ছে!'); }); } </script> <script> (function() { 'use strict'; document.addEventListener('DOMContentLoaded', function() { var footerBottomAds = document.getElementById('footer-bottom-ads'); var offcanvas = document.getElementById('bottom-offcanvas'); var openBtn = document.getElementById('ad-open-trigger'); var closeBtn = document.querySelector('.bottom-ads-close-btn'); var iconOpen = openBtn ? openBtn.querySelector('svg') : null; var iconClose = closeBtn ? closeBtn.querySelector('svg') : null; if (!footerBottomAds || !offcanvas || !openBtn || !closeBtn || !iconOpen || !iconClose) { return; } // 1. Randomly decide Top (true) or Bottom (false) // var isTop = Math.random() < 0.5; var isTop = false; var chevronUpPath = 'm6 15 6-6 6 6'; var chevronDownPath = 'm6 9 6 6 6-6'; if (isTop) { // Apply Top logic offcanvas.classList.add('is-top'); openBtn.classList.add('pos-top-btn'); // Switch icons so they point the correct way iconOpen.querySelector('path').setAttribute('d', chevronDownPath); iconClose.querySelector('path').setAttribute('d', chevronUpPath); } else { // Apply Bottom logic offcanvas.classList.add('is-bottom'); openBtn.classList.add('pos-bottom-btn'); } // 2. Initial Display setTimeout(function() { footerBottomAds.style.display = 'block'; offcanvas.classList.add('active'); }, 5000); // 3. Load Ad Content fetch("https://sattacademy.com/bottom-ad-content") .then(function(response) { return response.json(); }) .then(function(data) { var contentDiv = document.getElementById('bottom-fixed-ad-content'); if (data.show_bottom_fixed_ad && contentDiv) { contentDiv.innerHTML = data.bottom_fixed_ad_content; } }) .catch(function(error) { console.error('Error loading bottom ad content:', error); }); // 4. Toggle Interaction Logic closeBtn.addEventListener('click', function() { openBtn.classList.remove('bottom-ad-hidden'); offcanvas.classList.remove('active'); }); openBtn.addEventListener('click', function() { this.classList.add('bottom-ad-hidden'); offcanvas.classList.add('active'); }); }); })(); </script>  <script> function toggleMobileSidebar() { var s = document.getElementById('mobile-sidebar'); if (s) s.classList.toggle('open'); } function toggleTheme() { var html = document.documentElement; var isDark = html.classList.contains('dark'); var next = isDark ? 'light' : 'dark'; html.classList.toggle('dark', next === 'dark'); html.classList.toggle('light', next === 'light'); localStorage.setItem('theme', next); } document.addEventListener('DOMContentLoaded', function () { document.addEventListener('click', function (e) { var s = document.getElementById('mobile-sidebar'); var btn = document.querySelector('[onclick="toggleMobileSidebar()"]'); if (s && s.classList.contains('open')) { if (!s.contains(e.target) && (!btn || !btn.contains(e.target))) { s.classList.remove('open'); } } }); }); </script>  <style> /* Sidebar */ #mobile-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(20rem, 75%); background-color: rgba(255, 255, 255, 0.6); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); z-index: 5000; transform: translateX(-100%); transition: transform 0.3s ease-in-out; } /* Logo Section */ .logo-section { display: flex; align-items: center; justify-content: space-between; height: 4rem; padding: 0 1.5rem; border-bottom: 1px solid #e5e7eb; } .logo-link { text-decoration: none; } .logo-container { display: flex; align-items: center; gap: 0.5rem; } .logo-img { height: 2.5rem; } .logo-white { display: none; } .icon-button { padding: 0.5rem; color: #6b7280; background: transparent; border: none; border-radius: 9999px; cursor: pointer; transition: all 0.3s; } .icon-button:hover { color: #374151; background-color: #f3f4f6; } .icon-button svg { width: 1.5rem; height: 1.5rem; } .collapse-button { display: none; } /* Navigation */ #mobile-sidebar { .nav-section { flex: 1; overflow-y: auto; padding: 1rem; } .nav-section::-webkit-scrollbar { display: none; } .nav-list { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; } .nav-link { display: flex; align-items: center; padding: 0.6rem; border-radius: 12px; text-decoration: none; color: #4b5563; transition: all 0.3s; font-weight: 500; letter-spacing: 0.025em; } .nav-link:hover { background-color: rgba(243, 244, 246, 0.6); } .nav-link.active { background-color: rgba(229, 231, 235, 0.5); color: #111827; } .nav-icon { margin-right: 12px; font-size: 1.1rem; transition: transform 0.3s; } .nav-link:hover .nav-icon { transform: scale(1.1); } .nav-icon svg { width: 1.5rem; height: 1.5rem; } } /* Features Section */ .features-section { margin-top: 32px; } .features-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.5rem; } .features-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.025em; color: #6b7280; font-weight: 600; opacity: 0.7; } .customize-button { opacity: 1; color: #9ca3af; background: transparent; border: none; padding: 4px; border-radius: 4px; cursor: pointer; transition: color 0.3s; } .customize-button:hover { color: #374151; } .customize-button svg { width: 20px; height: 20px; } /* User Profile */ .user-section { padding: 0.5rem; border-top: 1px solid #e5e7eb; overflow: hidden; } .user-card { display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.3s; } .user-card:hover { background-color: #f3f4f6; } .avatar-container { position: relative; } .avatar-img { width: 32px; height: 32px; border-radius: 9999px; object-fit: cover; border: 2px solid #ffffff; transition: all 0.3s; } .status-indicator { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background-color: #10b981; border: 2px solid #ffffff; border-radius: 9999px; } .user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .user-name { font-size: 1.1rem; margin: 0; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-details { font-size: 0.8rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-plan { font-size: 0.75rem; } .edit-button { padding: 0.5rem; background-color: #e5e7eb; border: none; border-radius: 0.5rem; color: #9ca3af; cursor: pointer; transition: all 0.3s; } .edit-button:hover { color: #4b5563; box-shadow: 0 0 0 1px #d1d5db; } .edit-button svg { width: 20px; height: 20px; } /* Main Content Area */ /* .main-content { margin-left: 20rem; padding: 32px; min-height: 100vh; } */ /* Mobile styles */ @media (max-width: 1024px) { #mobile-sidebar.open { transform: translateX(0); } /* .main-content { margin-left: 0; } */ .collapse-button { display: block; } } @media (min-width: 1024px) { .logo-section:hover .collapse-button { display: block; } } [data-theme="light"], html.light { .logo-white { display: none; } #sun { display: none; } } /* Dark mode support */ [data-theme="dark"], html.dark { #mobile-sidebar { background-color: rgba(31, 41, 55, 0.6); border-right-color: #374151; .nav-link { color: #9ca3af; } .nav-link:hover { background-color: rgba(31, 41, 55, 0.6); } .nav-link.active { background-color: rgba(55, 65, 81, 0.5); color: #f3f4f6; } } .logo-section { border-bottom-color: #374151; } .logo-black { display: none; } .logo-white { display: block; } #moon { display: none; } .icon-button { color: #9ca3af; } .icon-button:hover { color: #d1d5db; background-color: rgba(55, 65, 81, 0.5); } .user-section { border-top-color: #374151; } .user-card:hover { background-color: #374151; } .avatar-img { border-color: #374151; } .status-indicator { border-color: #111827; } .user-name { color: #f3f4f6; } .user-details { color: #9ca3af; } .edit-button { background-color: #374151; color: #d1d5db; } .edit-button:hover { color: #f3f4f6; box-shadow: 0 0 0 1px #4b5563; } /* .main-content { color: #f3f4f6; } */ } </style> <aside id="mobile-sidebar">  <div class="logo-section"> <a href="/user/dashboard" class="logo-link"> <div class="logo-container"> <img class="logo-img logo-black" src="https://sattacademy.com/custom/logo_black.png" alt="Logo"> <img class="logo-img logo-white" src="https://sattacademy.com/custom/logo_white.png" alt="Logo"> </div> </a> <div style="position: relative; transform: translateX(0.5rem); display: flex;"> <button class="icon-button" onClick="toggleTheme()"> <svg id="sun" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"> </path> </svg> <svg id="moon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"> </path> </svg> </button> <button class="icon-button" onClick="toggleMobileSidebar()"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"> </path> </svg> </button> </div> </div>  <nav class="nav-section"> <ul class="nav-list"> <li> <a href="/academy" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9zm6.82 6L12 12.72L5.18 9L12 5.28zM17 16l-5 2.72L7 16v-3.73L12 15l5-2.73z" /> </svg> </span> <span>Academy</span> </a> </li> <li> <a href="/admission-assistant" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M19 3h-4.18C14.25 1.44 12.53.64 11 1.2c-.86.3-1.5.96-1.82 1.8H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-7 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1M7 7h10V5h2v14H5V5h2zm10 4H7V9h10zm-2 4H7v-2h8z" /> </svg> </span> <span>Admission</span> </a> </li> <li> <a href="/job-assistant" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M20 6c.58 0 1.05.2 1.42.59c.38.41.58.86.58 1.41v11c0 .55-.2 1-.58 1.41c-.37.39-.84.59-1.42.59H4c-.58 0-1.05-.2-1.42-.59C2.2 20 2 19.55 2 19V8c0-.55.2-1 .58-1.41C2.95 6.2 3.42 6 4 6h4V4c0-.58.2-1.05.58-1.42C8.95 2.2 9.42 2 10 2h4c.58 0 1.05.2 1.42.58c.38.37.58.84.58 1.42v2zM4 8v11h16V8zm10-2V4h-4v2z" /> </svg> </span> <span>Job Assistant</span> </a> </li> <li> <a href="/skill" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z" /> </svg> </span> <span>Skill</span> </a> </li> <li> <a href="/courses" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9zm6.82 6L12 12.72L5.18 9L12 5.28zM17 16l-5 2.72L7 16v-3.73L12 15l5-2.73z" /> </svg> </span> <span>Course</span> </a> </li> <li> <a href="/books" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M18 2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2h-5v8l-2.5-2.25L8 12V4H6v16h12z" /> </svg> </span> <span>Book</span> </a> </li> <li> <a href="/modeltest-list" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" class="iconify iconify--mdi size-6"> <path fill="currentColor" d="M19 3h-4.18C14.25 1.44 12.53.64 11 1.2c-.86.3-1.5.96-1.82 1.8H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-7 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1M7 7h10V5h2v14H5V5h2zm10 4H7V9h10zm-2 4H7v-2h8z"> </path> </svg> </span> <span>Exams</span> </a> </li> <li> <a href="/packages" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M16 9h3l-5 7m-4-7h4l-2 8M5 9h3l2 7m5-12h2l2 3h-3m-5-3h2l1 3h-4M7 4h2L8 7H5m1-5L2 8l10 14L22 8l-4-6z" /> </svg> </span> <span>Pricing</span> </a> </li> <li> <a href="/gk" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M20 5v14H4V5zm0-2H4c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2m-2 12H6v2h12zm-8-8H6v6h4zm2 2h6V7h-6zm6 2h-6v2h6z" /> </svg> </span> <span>GK & Current Affairs</span> </a> </li> <li> <a href="/qa" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M15 4v7H5.17L4 12.17V4zm1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1m5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1" /> </svg> </span> <span>Forum</span> </a> </li> <li> <a href="/e-question-builder" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <g fill="none"> <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" /> <path fill="currentColor" d="M7.238 17.013a1 1 0 0 1 1.497 1.32l-.083.094l-2.298 2.298a1.25 1.25 0 0 1-1.666.09l-.102-.09l-1.237-1.238a1 1 0 0 1 1.32-1.497l.094.083l.707.707l1.768-1.768ZM20 18a1 1 0 0 1 0 2h-9a1 1 0 1 1 0-2zM8.652 10.012a1 1 0 0 1 0 1.415l-2.298 2.298a1.25 1.25 0 0 1-1.768 0l-1.237-1.238a1 1 0 1 1 1.414-1.414l.707.707l1.768-1.767a1 1 0 0 1 1.414 0ZM20 11a1 1 0 0 1 .117 1.993L20 13h-9a1 1 0 0 1-.116-1.993L11 11zM7.238 3.013a1 1 0 0 1 1.497 1.32l-.083.094l-2.298 2.298a1.25 1.25 0 0 1-1.666.09l-.102-.09l-1.237-1.238a1 1 0 0 1 1.32-1.497l.094.083l.707.707zM20 4a1 1 0 0 1 .117 1.993L20 6h-9a1 1 0 0 1-.116-1.993L11 4z" /> </g> </svg> </span> <span>এক ক্লিকে প্রশ্ন তৈরি</span> </a> </li> <li> <a href="/business-account" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M21.71 8.71c1.25-1.25.68-2.71 0-3.42l-3-3c-1.26-1.25-2.71-.68-3.42 0L13.59 4H11C9.1 4 8 5 7.44 6.15L3 10.59v4l-.71.7c-1.25 1.26-.68 2.71 0 3.42l3 3c.54.54 1.12.74 1.67.74c.71 0 1.36-.35 1.75-.74l2.7-2.71H15c1.7 0 2.56-1.06 2.87-2.1c1.13-.3 1.75-1.16 2-2C21.42 14.5 22 13.03 22 12V9h-.59zM20 12c0 .45-.19 1-1 1h-1v1c0 .45-.19 1-1 1h-1v1c0 .45-.19 1-1 1h-4.41l-3.28 3.28c-.31.29-.49.12-.6.01l-2.99-2.98c-.29-.31-.12-.49-.01-.6L5 15.41v-4l2-2V11c0 1.21.8 3 3 3s3-1.79 3-3h7zm.29-4.71L18.59 9H11v2c0 .45-.19 1-1 1s-1-.55-1-1V8c0-.46.17-2 2-2h3.41l2.28-2.28c.31-.29.49-.12.6-.01l2.99 2.98c.29.31.12.49.01.6" /> </svg> </span> <span>Business Account</span> </a> </li> <li> <a href="/blogs" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9zm4 16H5V5h9v5h5m-2 4H7v-2h10m-3 5H7v-2h7" /> </svg> </span> <span>Blog</span> </a> </li> <li> <a href="/handnotes" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M17 4v6l-2-2l-2 2V4H9v16h10V4zM3 7V5h2V4a2 2 0 0 1 2-2h12c1.05 0 2 .95 2 2v16c0 1.05-.95 2-2 2H7c-1.05 0-2-.95-2-2v-1H3v-2h2v-4H3v-2h2V7zm2-2v2h2V5zm0 14h2v-2H5zm0-6h2v-2H5z" /> </svg> </span> <span>Hand Note</span> </a> </li> <li> <a href="/pdf-questions" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 2v14H5V5h14m-1.1 8.5c-.3-.5-1-.7-2.2-.7c-.4 0-.8 0-1.2.1c-.3-.2-.6-.4-.8-.6c-.6-.5-1.2-1.4-1.5-2.5v-.1c.3-1.3.6-2.8 0-3.5c-.3-.1-.5-.2-.7-.2h-.2c-.4 0-.7.4-.8.7c-.4 1.3-.1 2 .2 3.2c-.2.9-.6 1.8-1 2.8c-.4.7-.7 1.3-1 1.8c-.4.2-.7.3-.9.5c-1.1.7-1.7 1.5-1.8 2v.5l.5.3c.2.2.3.2.5.2c.8 0 1.7-.9 2.9-3h.1c1-.3 2.2-.5 3.9-.7c1 .5 2.2.7 2.9.7c.4 0 .7-.1.9-.3c.2-.2.3-.4.3-.6c0-.3 0-.5-.1-.6" /> </svg> </span> <span>PDF Questions</span> </a> </li> <li> <a href="/notices" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M10 21h4c0 1.1-.9 2-2 2s-2-.9-2-2m11-2v1H3v-1l2-2v-6c0-3.1 2-5.8 5-6.7V4c0-1.1.9-2 2-2s2 .9 2 2v.3c3 .9 5 3.6 5 6.7v6zm-4-8c0-2.8-2.2-5-5-5s-5 2.2-5 5v7h10z" /> </svg> </span> <span>Notices</span> </a> </li> <li> <a href="/career" class="nav-link"> <span class="nav-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="currentColor" d="M20 6c.58 0 1.05.2 1.42.59c.38.41.58.86.58 1.41v11c0 .55-.2 1-.58 1.41c-.37.39-.84.59-1.42.59H4c-.58 0-1.05-.2-1.42-.59C2.2 20 2 19.55 2 19V8c0-.55.2-1 .58-1.41C2.95 6.2 3.42 6 4 6h4V4c0-.58.2-1.05.58-1.42C8.95 2.2 9.42 2 10 2h4c.58 0 1.05.2 1.42.58c.38.37.58.84.58 1.42v2zM4 8v11h16V8zm10-2V4h-4v2z" /> </svg> </span> <span>Career</span> </a> </li> </ul> </nav>  <div class="user-section"> <div class="user-card"> <a class="user-info" href="https://sattacademy.com/login" style="text-align:center; width:100%;"> <p class="user-name">Login / Register</p> <span class="user-details">Click to access your account</span> </a> </div> </div> </aside> <script src="https://sattacademy.com/js/inspect.js" defer></script> <script type="text/javascript"> // Apply Copy limit document.addEventListener('DOMContentLoaded', () => { const dailyCopyLimit = 50; // Daily copy limit const copyCountKey = 'dcc'; // Daily copy count key const lastResetKey = 'dcc_lrt'; // Last reset time key // Helper function to reset the copy count daily const resetCopyCountIfNeeded = () => { const now = new Date(); const today = now.toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format const lastReset = localStorage.getItem(lastResetKey); if (lastReset !== today) { localStorage.setItem(copyCountKey, 0); // Reset count localStorage.setItem(lastResetKey, today); // Update reset time } }; resetCopyCountIfNeeded(); // Copy event listener document.addEventListener('copy', (e) => { e.preventDefault(); const selection = document.getSelection(); if (selection.toString().length === 0) { return; } let currentCount = parseInt(localStorage.getItem(copyCountKey)) || 0; if (currentCount >= dailyCopyLimit) { Swal.fire({ icon: 'error', title: 'Copy Limit Exceeded', text: `You have reached the daily copy limit of ${dailyCopyLimit}. Please come back tomorrow!`, }); return; } // Append additional text to copied content const additionalText = "\n\nCopied from SATT ACADEMY. Visit us at: https://sattacademy.com"; const modifiedText = selection + additionalText; e.clipboardData.setData('text/plain', modifiedText); // Increment copy count currentCount++; localStorage.setItem(copyCountKey, currentCount); if (currentCount % 10 === 0) { alert( `You have used ${currentCount} out of ${dailyCopyLimit} copies available today.` ); } }); }); </script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ CommonHTML: { mtextFontInherit: true // এটি বাংলা টেক্সট ভেঙে যাওয়া রোধ করবে }, "HTML-CSS": { mtextFontInherit: true }, SVG: { mtextFontInherit: true } }); </script> <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script> <script type="text/javascript"> function card(content, options = { withLink: true, countClick: true }) { let card = ''; card += `<div class="card-rounded promotion-card" onclick="handlePromotionCardClick('${content.target_url}', ${options?.withLink}, ${content.id}, ${options?.countClick})">`; if (content.content_header) { if(content.content_header.startsWith('<')) { card += `<div> ${content.content_header} </div>`; } else { card += `<div class="text-dark text-center p-3" style="border-bottom: 1px solid #999;"> ${content.content_header} </div>`; } } if (content.type == 'custom') { card += `<div class=""> ${content.content} </div>`; } else if (content.type == 'image') { let imgUrl = content.image.startsWith('http') ? content.image : '/storage/' + content.image; card += `<img src="${imgUrl}" style="max-width: 100%; height: auto;" />`; } else if (content.type == 'video') { if (content.video.includes('youtube.com/') || content.video.includes('youtu.be/') || content.video.includes('vimeo.com/') || content.video .includes('facebook.com/')) { card += `<iframe src="${convertToEmbedUrl(content.video)}" style="width: 100%; aspect-ratio: 16/9;" scrolling="no" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`; } else { card += `<video src="${content.video}" class="rounded my-auto promoted-video" style="width: 100%;" controls autoplay loop muted playsinline />`; } } else if (content.type == 'book') { let bookPrice = content.book.price; let bookDiscountPrice = content.book.discount_price; let isFree = bookDiscountPrice == 0 || bookDiscountPrice == '0'; card += ` <div class="row g-0 h-100"> <div class="col-4"> <img src="${content.book.cover_image}" class="img-fluid rounded-start" style="height: 100%; object-fit: cover; max-height: 200px;" alt="..."> </div> <div class="col-8"> <div class=""> <span class="fs-9 text-muted">BOOK</span> <h5 class="card-title"> ${content.book.name} </h5> <div class="my-1"> ${content.book.author_name ? '<span class="fs-7 text-gray-700">Author: ' + content.book.author_name + '</span>' : ''} <div class="fs-7 text-gray-700"> by ${content.book.business?.name || 'Satt Academy'}</div> </div> <div class="d-flex mt-1 align-items-center justify-content-between"> <span class=""> ${!isFree && bookPrice != bookDiscountPrice ? '<span class="text-muted text-decoration-line-through fs-6">৳' + bookPrice + '</span>' : ''} ${isFree ? '<span class="badge badge-success">Free</span>' : ('<span class="fw-bold text-danger fs-6">৳' + bookDiscountPrice + '</span>')} </span> <span> <i class="fs-5 fas fa-${content.book.book_type == 'soft_copy' ? 'file-pdf text-danger' : 'book text-info'}"></i> </span> </div> </div> </div> </div> `; } else if (content.type == 'course') { //console.log(content); card += ` <div class="row g-0 h-100"> <div class="col-4"> <img src="${content.course.cover_photo}" class="img-fluid rounded-start" style="height: 100%; object-fit: cover;" alt="..."> </div> <div class="col-8"> <div class=""> <span class="fs-9 text-muted">COURSE</span> <h5 class="card-title"> ${content.course.name} </h5> <div class="my-1"> ${content.course.author_name ? '<span class="fs-7 text-gray-700">' + content.course.author_name + '</span>' : ''} <span class="fs-7 text-gray-700"> by ${content.course.business?.name || 'Satt Academy'}</span><br> </div> <div class="d-flex align-items-center justify-content-between"> <span class=""> ${content.course.price == 0 || content.course.price == '0' || content.course.price == null ? '<span class="badge badge-success">Free</span>' : '<span class="fw-bold text-danger fs-6">৳' + content.course.price + '</span>'} </span> <span class="rounded text-white p-1 fs-9" style="background-color: #D82D2F">${content.course.course_level.toUpperCase()}</span> </div> </div> </div> </div> `; } else if (content.type == 'exam') { card += ` <div class="row g-0 h-100"> <div class="col-12"> <div class=""> <span class="fs-8 pb-3">MODEL TEST || SATT ACADEMY</span> <h5 class="text-primary text-capitalize fs-3 fw-bold mb-1"> ${content.exam.name} </h5> <p class="m-0">by ${ content.exam.business?.name ?? 'Satt Academy' }</p> <div class="d-flex mt-2 gap-2 justify-content-between align-items-end"> <div class="d-flex flex-wrap align-items-center gap-2"> <span class="badge badge-secondary">${content.exam.duration} min</span> <span class="badge badge-secondary">${content.exam.number_of_question} questions</span> <span class="badge badge-secondary">${content.exam.total_mark} marks</span> </div> <div class="btn btn-primary sa-btn-primary py-2 px-3 fs-7">Attend now!</div> </div> </div> </div> </div> `; } else if (content.type == 'exam_package') { // console.log(content); card += ` <div class="row g-0 h-100"> <div class="col-12"> <div class=""> <span class="fs-8 pb-3">EXAM PACKAGE</span> <h5 class="text-primary text-capitalize fs-3 fw-bold mb-1"> ${content.exam_package.name} </h5> <p class="m-0">by ${ content.exam_package.business?.name ?? 'Satt Academy' }</p> <div class="d-flex mt-2 gap-2 justify-content-between align-items-end"> <div class="d-flex align-items-center gap-2"> <span class="badge badge-secondary">${content.exam_package.exams_count} exams</span> </div> </div> </div> </div> </div> `; } else if (content.type == 'business') { card += ` <div class="row g-0 h-100"> <div class="col-12"> <div class=""> <div class="row"> <div class="col-2"> <img src="${content.business?.logo}" width="100" height="100" class="img-fluid rounded"> </div> <div class="col-10"> <span class="fs-8 pb-3 text-muted">BUSINESS</span> <h5 class="text-primary text-capitalize fs-3 fw-bold mb-1"> ${content.business?.name} </h5> <p class="m-0">by ${ content.business?.user?.name ?? 'Satt Academy' }</p> <div class="d-flex mt-2 gap-2 justify-content-between align-items-end"> <div class="d-flex align-items-center gap-2"> <span class="badge badge-secondary">${content.business?.books_count} books</span> <span class="badge badge-secondary">${content.business?.courses_count} courses</span> <span class="badge badge-secondary">${content.business?.exams_count} exams</span> </div> </div> </div> </div> </div> </div> </div> `; } if (content.content_footer) { if(content.content_footer.startsWith('<')) { card += `<div> ${content.content_footer} </div>`; } else { card += `<div class="text-center text-dark p-3" style="border-top: 1px solid #999;"> ${content.content_footer} </div>`; } } card += `</div>`; return card; } function handlePromotionCardClick(url, withLink, id, countClick) { // 1. Check if the user agent belongs to a Google crawler const isBot = /bot|googlebot|crawler|spider|robot|crawling/i.test(navigator.userAgent); // 2. Only proceed if it's NOT a google bot AND the URL is valid if (!isBot && url && url != '' && url != '#' && url != 'null' && withLink) { // Construct the tracking URL let urlToGo = `/promotion-link?id=${id}&countClick=${countClick}&_token=votzvMSrNFPhbm9mwI7OpNgCjZ2U5QMM8yqeNOxi`; console.log(urlToGo); window.open(urlToGo, '_blank'); } else if (isBot) { // If it's a bot, we can optionally redirect directly to the target URL // to help indexing, or simply do nothing. console.log('Crawler detected: Blocking tracking redirect.'); } } function convertToEmbedUrl(videoUrl) { // YouTube URL patterns const youtubePattern1 = /youtube\.com\/watch\?v=([^&]+)/; const youtubePattern2 = /youtu\.be\/([^?]+)/; // Vimeo URL pattern const vimeoPattern = /vimeo\.com\/(\d+)/; // Facebook URL pattern const facebookPattern = /facebook\.com\/.+\/videos\/(\d+)/; // Check for YouTube URL (full or shortened) let match = videoUrl.match(youtubePattern1) || videoUrl.match(youtubePattern2); if (match) { const videoId = match[1]; return `https://www.youtube.com/embed/${videoId}?autoplay=1&loop=1&playlist=${videoId}`; } // Check for Vimeo URL match = videoUrl.match(vimeoPattern); if (match) { const videoId = match[1]; return `https://player.vimeo.com/video/${videoId}`; } // Check for Facebook URL match = videoUrl.match(facebookPattern); if (match) { const videoId = match[1]; return `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(videoUrl)}`; } // Return the original URL if it's not a valid YouTube or Vimeo URL return videoUrl; } </script> <div x-data="promotionManager" x-cloak> <template x-teleport="body"> <div x-show="modalOpen" x-cloak class="fixed inset-0 z-[9999] flex items-center justify-center p-4" @keydown.escape.window="closeModal()"> <div x-show="modalOpen" x-transition.opacity @click="closeModal()" class="absolute inset-0 bg-black/60"></div> <div x-show="modalOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95 translate-y-4" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.outside="closeModal()" class="relative w-full max-w-2xl m-4 overflow-hidden rounded-2xl shadow-2xl" style="background-color: transparent;"> <button @click="closeModal()" type="button" class="promotion-close-btn promotion-modal-close-btn absolute right-4 top-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect> </svg> </button> <div class="modal-content" style="background-color: transparent"> <div class="promotion-body" x-html="modalContent"></div> </div> </div> </div> </template> <template x-teleport="body"> <div x-show="offcanvasOpen" x-cloak class="fixed inset-0 z-[9999]"> <div x-show="offcanvasOpen" x-transition.opacity @click="offcanvasOpen = false" class="absolute inset-0 bg-black/60"></div> <div x-show="offcanvasOpen" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed bg-white shadow-xl overflow-y-auto" :class="offcanvasPositionClasses"> <div class="offcanvas-header flex items-center justify-between p-4 border-b border-gray-200"> <h5 class="offcanvas-title text-lg font-semibold text-gray-900">Promotion</h5> <button @click="offcanvasOpen = false" type="button" class="promotion-close-btn btn-close p-0 border-0 bg-transparent text-gray-500 hover:text-gray-700 text-2xl leading-none">×</button> </div> <div class="offcanvas-body promotion-body p-4" x-html="offcanvasContent"></div> </div> </div> </template> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('promotionManager', () => ({ modalOpen: false, offcanvasOpen: false, offcanvasPosition: 'right', modalContent: '', offcanvasContent: '', promotionModalShownRoutes: {}, init() { this.promotionModalShownRoutes = this.parseSessionStorage(); this.insertInnerPromotionContainers(); setTimeout(() => { this.loadPromotionData(); setTimeout(() => { this.initVideoObserver(); }, 500); }, 2500); }, parseSessionStorage() { try { let stored = sessionStorage.getItem('promotionModalShownRoutes'); return stored ? JSON.parse(stored) : {}; } catch { return {}; } }, get offcanvasPositionClasses() { const pos = this.offcanvasPosition; return { 'top-0 right-0 h-full w-80 max-w-full': pos === 'right', 'top-0 left-0 h-full w-80 max-w-full': pos === 'left', 'top-0 left-0 w-full h-80 max-h-full': pos === 'top', 'bottom-0 left-0 w-full h-80 max-h-full': pos === 'bottom', }; }, closeModal() { this.modalOpen = false; this.modalContent = ''; }, insertInnerPromotionContainers() { let items = document.querySelectorAll('.content-list-item'); let insertAfterEach = 3; if (items.length >= insertAfterEach) { items.forEach((el, index) => { if ((index + 1) % insertAfterEach === 0) { let div = document.createElement('div'); div.className = 'inner-promotion-content'; el.parentNode.insertBefore(div, el.nextSibling); } }); } }, async loadPromotionData() { let route = "single.written"; let path = window.location.pathname; let modalShown = this.promotionModalShownRoutes.hasOwnProperty(route); let promotionsShownInModal = this.promotionModalShownRoutes[route] || []; try { const response = await fetch("https://sattacademy.com/dynamic-promotion-content", { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content, }, body: JSON.stringify({ _token: document.querySelector('meta[name="csrf-token"]').content, route, path, sidebar: document.querySelector('#sidebar-promotion-content') ? 1 : 0, inner: document.querySelectorAll('.inner-promotion-content').length, modalShown, promotionsShownInModal: JSON.stringify(promotionsShownInModal), }), }); const data = await response.json(); if (!data) return; this.renderPromotions(data); if (data.modalContents?.length) { this.showModal(data, route); } if (data.offcanvasContents?.length) { this.showOffcanvas(data); } this.initMobileCarousel(); } catch (e) { console.error('Promotion data fetch failed:', e); } }, renderPromotions(data) { const headerEl = document.getElementById('header-promotion-content'); if (headerEl && data.headerContents?.length) { headerEl.innerHTML = data.headerContents.map(c => card(c)).join(''); } const footerEl = document.getElementById('footer-promotion-content'); if (footerEl && data.footerContents?.length) { footerEl.innerHTML = data.footerContents.map(c => card(c)).join(''); } const sidebarEl = document.getElementById('sidebar-promotion-content'); if (sidebarEl && data.sidebarContents?.length) { sidebarEl.innerHTML = data.sidebarContents.map(c => card(c)).join(''); } if (data.innerContents?.length) { let innerEls = document.querySelectorAll('.inner-promotion-content'); data.innerContents.forEach((content, index) => { if (innerEls[index]) { innerEls[index].innerHTML = card(content); } }); } }, showModal(data, route) { let modalCards = ''; const ms = data.modalSettings; if (ms?.show_modal_header_and_footer && ms.modal_header) { modalCards += `<div class='text-center'>${ms.modal_header}</div>`; } if (!this.promotionModalShownRoutes[route]) { this.promotionModalShownRoutes[route] = []; } data.modalContents.forEach(content => { modalCards += card(content); if (!this.promotionModalShownRoutes[route].includes(content.id)) { this.promotionModalShownRoutes[route].push(content.id); } }); if (ms?.show_modal_header_and_footer && ms.modal_footer) { modalCards += `<div class='text-center'>${ms.modal_footer}</div>`; } this.modalContent = modalCards; this.modalOpen = true; sessionStorage.setItem('promotionModalShownRoutes', JSON.stringify(this.promotionModalShownRoutes)); }, showOffcanvas(data) { let positions = ['left', 'right']; this.offcanvasPosition = positions[Math.floor(Math.random() * positions.length)]; let cards = ''; data.offcanvasContents.forEach(c => { cards += card(c); }); this.offcanvasContent = cards; this.offcanvasOpen = true; }, initMobileCarousel() { if (!window.matchMedia('only screen and (max-width: 767px)').matches) return; ['header-promotion-content', 'footer-promotion-content'].forEach(id => { const el = document.getElementById(id); if (el && el.children.length > 1) { el.style.display = 'flex'; el.style.flexWrap = 'nowrap'; el.style.overflowX = 'auto'; el.style.scrollSnapType = 'x mandatory'; el.style.scrollBehavior = 'smooth'; el.style.WebkitOverflowScrolling = 'touch'; Array.from(el.children).forEach(child => { child.style.flex = '0 0 100%'; child.style.scrollSnapAlign = 'start'; }); } }); }, initVideoObserver() { const videos = document.querySelectorAll('video.promoted-video'); if (!videos.length) return; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { const video = entry.target; if (entry.isIntersecting) video.play(); else video.pause(); }); }, { root: null, rootMargin: '0px', threshold: 0.5 }); videos.forEach(video => observer.observe(video)); }, })); }); </script> </body> </html>