Open main menu
الرأيسية
المتجر
المدونة
موارد برمجية
المفضلة
تسجيل الدخول
انشاء حساب
العربية (AR)
English (US)
العربية (AR)
كوردى (KU)
رجوع
معاينة الكود المباشر
<div class="flex justify-between items-center mb-4 flex-wrap rtl "> <h2 class="text-2xl font-bold text-gray-900 dark:text-white pt-4 ">قسم الاكواد</h2> <div class="space-x-1 pt-4"> <button onclick="showCodeSection('html')" class="px-4 py-2 text-sm font-medium bg-gray-800 dark:bg-gray-800 text-white rounded-lg border dark:border-gray-700 "> <i class="fa-brands fa-html5 text-red-600 rtl pl-2 "></i>HTML</button> <button onclick="showCodeSection('css')" class="px-4 py-2 text-sm font-medium bg-gray-800 dark:bg-gray-800 text-white rounded-lg border dark:border-gray-700 "> <i class="fa-brands fa-css3 text-blue-500 rtl pl-2 "></i>CSS</button> <button onclick="showCodeSection('js')" class="px-4 py-2 text-sm font-medium bg-gray-800 dark:bg-gray-800 text-white rounded-lg border dark:border-gray-700 "> <i class="fa-brands fa-js rounded-lg text-yellow-400 rtl pl-2 "></i>JS</button> </div> </div> <div id="code-html" class="code-section"> <div class="flex justify-between items-center mb-2"> <h3 class="text-md font-semibold text-gray-900 dark:text-white">HTML Code</h3> <button id="copy-html" onclick="copyToClipboard('html', 'copy-html')" class="px-2 py-1 text-sm font-normal bg-gray-800 text-white rounded-md flex items-center space-x-2"> <i class="fas fa-copy text-gray-300"></i><span>نسخ</span> </button> </div> <pre class="bg-gray-900 text-white rounded p-3 overflow-auto text-sm line-numbers language-html"><code class="language-html"><div class="input-wrapper"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <g data-name="Layer 2"> <g data-name="inbox"> <rect width="24" height="24" transform="rotate(180 12 12)" opacity="0" ></rect> <path d="M20.79 11.34l-3.34-6.68A3 3 0 0 0 14.76 3H9.24a3 3 0 0 0-2.69 1.66l-3.34 6.68a2 2 0 0 0-.21.9V18a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5.76a2 2 0 0 0-.21-.9zM8.34 5.55a1 1 0 0 1 .9-.55h5.52a1 1 0 0 1 .9.55L18.38 11H16a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-2a1 1 0 0 0-1-1H5.62z" ></path> </g> </g> </svg> <input type="text" name="text" class="input" placeholder="info@gmail.com" /> <button class="Subscribe-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="10" viewBox="0 0 38 15" class="arrow" > <path d="M10 7.519l-.939-.344h0l.939.344zm14.386-1.205l-.981-.192.981.192zm1.276 5.509l.537.843.148-.094.107-.139-.792-.611zm4.819-4.304l-.385-.923h0l.385.923zm7.227.707a1 1 0 0 0 0-1.414L31.343.448a1 1 0 0 0-1.414 0 1 1 0 0 0 0 1.414l5.657 5.657-5.657 5.657a1 1 0 0 0 1.414 1.414l6.364-6.364zM1 7.519l.554.833.029-.019.094-.061.361-.23 1.277-.77c1.054-.609 2.397-1.32 3.629-1.787.617-.234 1.17-.392 1.623-.455.477-.066.707-.008.788.034.025.013.031.021.039.034a.56.56 0 0 1 .058.235c.029.327-.047.906-.39 1.842l1.878.689c.383-1.044.571-1.949.505-2.705-.072-.815-.45-1.493-1.16-1.865-.627-.329-1.358-.332-1.993-.244-.659.092-1.367.305-2.056.566-1.381.523-2.833 1.297-3.921 1.925l-1.341.808-.385.245-.104.068-.028.018c-.011.007-.011.007.543.84zm8.061-.344c-.198.54-.328 1.038-.36 1.484-.032.441.024.94.325 1.364.319.45.786.64 1.21.697.403.054.824-.001 1.21-.09.775-.179 1.694-.566 2.633-1.014l3.023-1.554c2.115-1.122 4.107-2.168 5.476-2.524.329-.086.573-.117.742-.115s.195.038.161.014c-.15-.105.085-.139-.076.685l1.963.384c.192-.98.152-2.083-.74-2.707-.405-.283-.868-.37-1.28-.376s-.849.069-1.274.179c-1.65.43-3.888 1.621-5.909 2.693l-2.948 1.517c-.92.439-1.673.743-2.221.87-.276.064-.429.065-.492.057-.043-.006.066.003.155.127.07.099.024.131.038-.063.014-.187.078-.49.243-.94l-1.878-.689zm14.343-1.053c-.361 1.844-.474 3.185-.413 4.161.059.95.294 1.72.811 2.215.567.544 1.242.546 1.664.459a2.34 2.34 0 0 0 .502-.167l.15-.076.049-.028.018-.011c.013-.008.013-.008-.524-.852l-.536-.844.019-.012c-.038.018-.064.027-.084.032-.037.008.053-.013.125.056.021.02-.151-.135-.198-.895-.046-.734.034-1.887.38-3.652l-1.963-.384zm2.257 5.701l.791.611.024-.031.08-.101.311-.377 1.093-1.213c.922-.954 2.005-1.894 2.904-2.27l-.771-1.846c-1.31.547-2.637 1.758-3.572 2.725l-1.184 1.314-.341.414-.093.117-.025.032c-.01.013-.01.013.781.624zm5.204-3.381c.989-.413 1.791-.42 2.697-.307.871.108 2.083.385 3.437.385v-2c-1.197 0-2.041-.226-3.19-.369-1.114-.139-2.297-.146-3.715.447l.771 1.846z" ></path></svg >Subscribe </button> </div></code></pre> </div> <div id="code-css" class="code-section hidden"> <div class="flex justify-between items-center mb-2"> <h3 class="text-md font-semibold text-gray-900 dark:text-white">CSS Code</h3> <button id="copy-css" onclick="copyToClipboard('css', 'copy-css')" class="px-2 py-1 text-sm font-normal bg-gray-800 text-white rounded-md flex items-center space-x-2"> <i class="fas fa-copy text-gray-300"></i><span>نسخ</span> </button> </div> <pre class="bg-gray-900 text-white rounded p-3 overflow-auto text-sm line-numbers language-css"><code class="language-css">.input-wrapper { width: fit-content; height: 45px; border-radius: 20px; padding: 5px; box-sizing: content-box; display: flex; align-items: center; background-color: #292524; } .icon { width: 30px; fill: rgb(255, 255, 255); margin-left: 8px; transition: all 0.3s; } .input { max-width: 170px; height: 100%; border: none; outline: none; padding-left: 15px; background-color: #292524; color: white; font-size: 1em; } .input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #292524 inset; -webkit-text-fill-color: #ffffff; } .Subscribe-btn { height: 100%; width: 95px; border: none; border-radius: 15px; color: rgb(0, 0, 0); cursor: pointer; background-color: #ffffff; font-weight: 500; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s; } .arrow { /* display: none; */ position: absolute; margin-right: 150px; transition: all 0.3s; } .input-wrapper:active .icon { transform: scale(1.3); } .Subscribe-btn:hover { color: white; } .Subscribe-btn:hover .arrow { margin-right: 0; animation: jello-vertical 0.9s both; transform-origin: right; } @keyframes jello-vertical { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(0.75, 1.25, 1); } 40% { transform: scale3d(1.25, 0.75, 1); } 50% { transform: scale3d(0.85, 1.15, 1); } 65% { transform: scale3d(1.05, 0.95, 1); } 75% { transform: scale3d(0.95, 1.05, 1); } 100% { transform: scale3d(1, 1, 1); } } .Subscribe-btn:active { transform: scale(0.9); }</code></pre> </div> <div id="code-js" class="code-section hidden"> <div class="flex justify-between items-center mb-2"> <h3 class="text-md font-semibold text-gray-900 dark:text-white">JS Code</h3> <button id="copy-js" onclick="copyToClipboard('js', 'copy-js')" class="px-2 py-1 text-sm font-normal bg-gray-800 text-white rounded-md flex items-center space-x-2"> <i class="fas fa-copy text-gray-300"></i><span>نسخ</span> </button> </div> <pre class="bg-gray-900 text-white rounded p-3 overflow-auto text-sm line-numbers language-javascript"><code class="language-javascript"></code></pre> </div> </div> </div> <div class="flex items-center mt-10 mb-3 justify-between border dark:border-gray-700 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg"> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> <span id="views-count" class="text-sm dark:text-gray-50 text-gray-800">المشاهدات : 46</span> </div> <div class="bg-white shadow border text-gray-600 dark:text-gray-300 dark:border-gray-700 dark:bg-gray-800 rounded-xl p-6"> <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">اسم المورد </h3> <p class="text-gray-600 dark:text-gray-300"> مدخلات الاشتراك </p> <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-6 mb-4"> الوصف</h3> <p> <p>مدخلات الاشتراك عن طريق الايميل</p> </p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.0.2/glide.js"></script> <div class="sm:mx-10 md:mx-20 ltr mx-5"> <div class="relative w-full glide-03 "> <div class="overflow-hidden mx-auto pb-14" data-glide-el="track"> <ul class="relative w-full overflow-hidden p-0 whitespace-no-wrap flex flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform]"> <div class="block relative bg-gray-50 dark:bg-gray-800 shadow-lg rounded-xl border border-gray-300 dark:border-gray-700"> <div class="flex px-4 pt-3 gap-2"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 48 48"> <path fill="#00acc1" d="M24,9.604c-6.4,0-10.4,3.199-12,9.597c2.4-3.199,5.2-4.398,8.4-3.599 c1.826,0.456,3.131,1.781,4.576,3.247C27.328,21.236,30.051,24,36,24c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.6 c-1.825-0.456-3.13-1.781-4.575-3.247C32.672,12.367,29.948,9.604,24,9.604L24,9.604z M12,24c-6.4,0-10.4,3.199-12,9.598 c2.4-3.199,5.2-4.399,8.4-3.599c1.825,0.457,3.13,1.781,4.575,3.246c2.353,2.388,5.077,5.152,11.025,5.152 c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.599c-1.826-0.456-3.131-1.781-4.576-3.246C20.672,26.764,17.949,24,12,24 L12,24z"></path> </svg> <p class="dark:text-gray-50 text-gray-800 ">Tailwind CSS</p> </div> <iframe id="iframe-115 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> body { overflow: hidden; } </style> <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style> </head> <body> <div class="rounded-xl min-h-[300px] max-h-[450px] flex flex-col mb-8"> <!-- Code Preview --> <div class="relative w-full flex justify-center items-center p-6 overflow-hidden flex-1"> <div class="flex flex-col justify-around bg-gray-800 p-4 border border-white border-opacity-30 rounded-lg shadow-md max-w-xs mx-auto" > <div class="flex flex-row items-center justify-between mb-3"> <input class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2 mb-3 flex-grow" type="text" name="cardName" id="cardName" placeholder="Full Name" /> <div class="flex items-center justify-center relative w-14 h-9 bg-gray-800 border border-white border-opacity-20 rounded-md" > <svg class="text-white fill-current" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 48 48" > <path fill="#ff9800" d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z" ></path> <path fill="#d50000" d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z" ></path> <path fill="#ff3d00" d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z" ></path> </svg> </div> </div> <div class="flex flex-col space-y-3"> <input class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2" type="text" name="cardNumber" id="cardNumber" placeholder="0000 0000 0000 0000" /> <div class="flex flex-row justify-between"> <input class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2" type="text" name="expiryDate" id="expiryDate" placeholder="MM/AA" /> <input class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2" type="text" name="cvv" id="cvv" placeholder="CVV" /> </div> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="jMuWlKNL4H7swkltBpK5wm66ZhOrgw5KxUmGUCpm" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>' class="w-full rounded-xl h-auto" style="overflow: hidden;" onload="resizeIframe(this)" title="home.CodePreview >
بطاقة الدفع
حفظ
عرض الكود
Tailwind CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> ادخال الراب... </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/link-input' class="flex ltr justify-center items-center whitespace-nowrap rounded-lg px-3 text-sm font-medium dark:text-gray-50 text-gray-900"> <svg class="fill-gray-900 dark:fill-gray-50 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="14"> <path d="M12.82 8.116A.5.5 0 0 0 12 8.5V10h-.185a3 3 0 0 1-2.258-1.025l-.4-.457-1.328 1.519.223.255A5 5 0 0 0 11.815 12H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM12.82.116A.5.5 0 0 0 12 .5V2h-.185a5 5 0 0 0-3.763 1.708L3.443 8.975A3 3 0 0 1 1.185 10H1a1 1 0 1 0 0 2h.185a5 5 0 0 0 3.763-1.708l4.609-5.267A3 3 0 0 1 11.815 4H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM1 4h.185a3 3 0 0 1 2.258 1.025l.4.457 1.328-1.52-.223-.254A5 5 0 0 0 1.185 2H1a1 1 0 0 0 0 2Z" /> </svg> <span>عرض الكود</span> </a> </div> </div> <div class="block relative bg-gray-50 dark:bg-gray-800 shadow-lg rounded-xl border border-gray-300 dark:border-gray-700"> <div class="flex px-4 pt-3 gap-2"> <i class="fa-brands fa-css3 text-blue-500 text-xl "></i> <p class="dark:text-gray-50 text-gray-800 ">HTML & CSS</p> </div> <iframe id="iframe-113 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .messageBox { width: fit-content; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #2d2d2d; padding: 0 15px; border-radius: 10px; border: 1px solid rgb(63, 63, 63); } .messageBox:focus-within { border: 1px solid rgb(110, 110, 110); } .fileUploadWrapper { width: fit-content; height: 100%; display: flex; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; } #file { display: none; } .fileUploadWrapper label { cursor: pointer; width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; position: relative; } .fileUploadWrapper label svg { height: 18px; } .fileUploadWrapper label svg path { transition: all 0.3s; } .fileUploadWrapper label svg circle { transition: all 0.3s; } .fileUploadWrapper label:hover svg path { stroke: #fff; } .fileUploadWrapper label:hover svg circle { stroke: #fff; fill: #3c3c3c; } .fileUploadWrapper label:hover .tooltip { display: block; opacity: 1; } .tooltip { position: absolute; top: -40px; display: none; opacity: 0; color: white; font-size: 10px; text-wrap: nowrap; background-color: #000; padding: 6px 10px; border: 1px solid #3c3c3c; border-radius: 5px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596); transition: all 0.3s; } #messageInput { width: 200px; height: 100%; background-color: transparent; outline: none; border: none; padding-left: 10px; color: white; } #messageInput:focus ~ #sendButton svg path, #messageInput:valid ~ #sendButton svg path { fill: #3c3c3c; stroke: white; } #sendButton { width: fit-content; height: 100%; background-color: transparent; outline: none; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; } #sendButton svg { height: 18px; transition: all 0.3s; } #sendButton svg path { transition: all 0.3s; } #sendButton:hover svg path { fill: #3c3c3c; stroke: white; } body { overflow: hidden; } </style> <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style> </head> <body> <div class="rounded-xl min-h-[300px] max-h-[450px] flex flex-col mb-8"> <!-- Code Preview --> <div class="relative w-full flex justify-center items-center p-6 overflow-hidden flex-1"> <div class="messageBox"> <div class="fileUploadWrapper"> <label for="file"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 337 337"> <circle stroke-width="20" stroke="#6c6c6c" fill="none" r="158.5" cy="168.5" cx="168.5" ></circle> <path stroke-linecap="round" stroke-width="25" stroke="#6c6c6c" d="M167.759 79V259" ></path> <path stroke-linecap="round" stroke-width="25" stroke="#6c6c6c" d="M79 167.138H259" ></path> </svg> <span class="tooltip">Add an image</span> </label> <input type="file" id="file" name="file" /> </div> <input required="" placeholder="Message..." type="text" id="messageInput" /> <button id="sendButton"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 664 663"> <path fill="none" d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888" ></path> <path stroke-linejoin="round" stroke-linecap="round" stroke-width="33.67" stroke="#6c6c6c" d="M646.293 331.888L17.7538 17.6187L155.245 331.888M646.293 331.888L17.753 646.157L155.245 331.888M646.293 331.888L318.735 330.228L155.245 331.888" ></path> </svg> </button> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="jMuWlKNL4H7swkltBpK5wm66ZhOrgw5KxUmGUCpm" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>' class="w-full rounded-xl h-auto" style="overflow: hidden;" onload="resizeIframe(this)" title="home.CodePreview >
ادخال الرسا...
حفظ
عرض الكود
Tailwind CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> تحميل الملف... </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/upload-file-56' class="flex ltr justify-center items-center whitespace-nowrap rounded-lg px-3 text-sm font-medium dark:text-gray-50 text-gray-900"> <svg class="fill-gray-900 dark:fill-gray-50 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="14"> <path d="M12.82 8.116A.5.5 0 0 0 12 8.5V10h-.185a3 3 0 0 1-2.258-1.025l-.4-.457-1.328 1.519.223.255A5 5 0 0 0 11.815 12H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM12.82.116A.5.5 0 0 0 12 .5V2h-.185a5 5 0 0 0-3.763 1.708L3.443 8.975A3 3 0 0 1 1.185 10H1a1 1 0 1 0 0 2h.185a5 5 0 0 0 3.763-1.708l4.609-5.267A3 3 0 0 1 11.815 4H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM1 4h.185a3 3 0 0 1 2.258 1.025l.4.457 1.328-1.52-.223-.254A5 5 0 0 0 1.185 2H1a1 1 0 0 0 0 2Z" /> </svg> <span>عرض الكود</span> </a> </div> </div> <div class="block relative bg-gray-50 dark:bg-gray-800 shadow-lg rounded-xl border border-gray-300 dark:border-gray-700"> <div class="flex px-4 pt-3 gap-2"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 48 48"> <path fill="#00acc1" d="M24,9.604c-6.4,0-10.4,3.199-12,9.597c2.4-3.199,5.2-4.398,8.4-3.599 c1.826,0.456,3.131,1.781,4.576,3.247C27.328,21.236,30.051,24,36,24c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.6 c-1.825-0.456-3.13-1.781-4.575-3.247C32.672,12.367,29.948,9.604,24,9.604L24,9.604z M12,24c-6.4,0-10.4,3.199-12,9.598 c2.4-3.199,5.2-4.399,8.4-3.599c1.825,0.457,3.13,1.781,4.575,3.246c2.353,2.388,5.077,5.152,11.025,5.152 c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.599c-1.826-0.456-3.131-1.781-4.576-3.246C20.672,26.764,17.949,24,12,24 L12,24z"></path> </svg> <p class="dark:text-gray-50 text-gray-800 ">Tailwind CSS</p> </div> <iframe id="iframe-76 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> body { overflow: hidden; } </style> <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style> </head> <body> <div class="rounded-xl min-h-[300px] max-h-[450px] flex flex-col mb-8"> <!-- Code Preview --> <div class="relative w-full flex justify-center items-center p-6 overflow-hidden flex-1"> <div> <label class="text-gray-600"> Phone number </label> <div class="relative mt-2 max-w-xs text-gray-500"> <div class="absolute inset-y-0 left-3 my-auto h-6 flex items-center border-r pr-2"> <select class="text-sm bg-transparent outline-none rounded-lg h-full"> <option>US</option> <option>ES</option> <option>MR</option> </select> </div> <input type="number" placeholder="+1 (555) 000-000" class="w-full pl-[4.5rem] pr-3 py-2 appearance-none bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg" /> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="jMuWlKNL4H7swkltBpK5wm66ZhOrgw5KxUmGUCpm" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>' class="w-full rounded-xl h-auto" style="overflow: hidden;" onload="resizeIframe(this)" title="home.CodePreview >
إدخال رقم ا...
حفظ
عرض الكود
Tailwind CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> إدخال المبل... </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/amount-input' class="flex ltr justify-center items-center whitespace-nowrap rounded-lg px-3 text-sm font-medium dark:text-gray-50 text-gray-900"> <svg class="fill-gray-900 dark:fill-gray-50 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="14"> <path d="M12.82 8.116A.5.5 0 0 0 12 8.5V10h-.185a3 3 0 0 1-2.258-1.025l-.4-.457-1.328 1.519.223.255A5 5 0 0 0 11.815 12H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM12.82.116A.5.5 0 0 0 12 .5V2h-.185a5 5 0 0 0-3.763 1.708L3.443 8.975A3 3 0 0 1 1.185 10H1a1 1 0 1 0 0 2h.185a5 5 0 0 0 3.763-1.708l4.609-5.267A3 3 0 0 1 11.815 4H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM1 4h.185a3 3 0 0 1 2.258 1.025l.4.457 1.328-1.52-.223-.254A5 5 0 0 0 1.185 2H1a1 1 0 0 0 0 2Z" /> </svg> <span>عرض الكود</span> </a> </div> </div> <div class="block relative bg-gray-50 dark:bg-gray-800 shadow-lg rounded-xl border border-gray-300 dark:border-gray-700"> <div class="flex px-4 pt-3 gap-2"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 48 48"> <path fill="#00acc1" d="M24,9.604c-6.4,0-10.4,3.199-12,9.597c2.4-3.199,5.2-4.398,8.4-3.599 c1.826,0.456,3.131,1.781,4.576,3.247C27.328,21.236,30.051,24,36,24c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.6 c-1.825-0.456-3.13-1.781-4.575-3.247C32.672,12.367,29.948,9.604,24,9.604L24,9.604z M12,24c-6.4,0-10.4,3.199-12,9.598 c2.4-3.199,5.2-4.399,8.4-3.599c1.825,0.457,3.13,1.781,4.575,3.246c2.353,2.388,5.077,5.152,11.025,5.152 c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.599c-1.826-0.456-3.131-1.781-4.576-3.246C20.672,26.764,17.949,24,12,24 L12,24z"></path> </svg> <p class="dark:text-gray-50 text-gray-800 ">Tailwind CSS</p> </div> <iframe id="iframe-74 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> body { overflow: hidden; } </style> <!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style> </head> <body> <div class="rounded-xl min-h-[300px] max-h-[450px] flex flex-col mb-8"> <!-- Code Preview --> <div class="relative w-full flex justify-center items-center p-6 overflow-hidden flex-1"> <div class="relative max-w-xs"> <svg class="w-6 h-6 text-gray-400 absolute left-3 inset-y-0 my-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> </svg> <input type="text" placeholder="Enter your email" class="w-full pl-12 pr-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg" /> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="jMuWlKNL4H7swkltBpK5wm66ZhOrgw5KxUmGUCpm" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>' class="w-full rounded-xl h-auto" style="overflow: hidden;" onload="resizeIframe(this)" title="home.CodePreview >
إدخال البري...
حفظ
عرض الكود
HTML & CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> اختيار المل... </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/select-file' class="flex ltr justify-center items-center whitespace-nowrap rounded-lg px-3 text-sm font-medium dark:text-gray-50 text-gray-900"> <svg class="fill-gray-900 dark:fill-gray-50 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="14"> <path d="M12.82 8.116A.5.5 0 0 0 12 8.5V10h-.185a3 3 0 0 1-2.258-1.025l-.4-.457-1.328 1.519.223.255A5 5 0 0 0 11.815 12H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM12.82.116A.5.5 0 0 0 12 .5V2h-.185a5 5 0 0 0-3.763 1.708L3.443 8.975A3 3 0 0 1 1.185 10H1a1 1 0 1 0 0 2h.185a5 5 0 0 0 3.763-1.708l4.609-5.267A3 3 0 0 1 11.815 4H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM1 4h.185a3 3 0 0 1 2.258 1.025l.4.457 1.328-1.52-.223-.254A5 5 0 0 0 1.185 2H1a1 1 0 0 0 0 2Z" /> </svg> <span>عرض الكود</span> </a> </div> </div> </ul> </div> </div> </div> <script> function resizeIframe(iframe) { var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; var contentHeight = iframeDocument.documentElement.scrollHeight; iframe.style.height = contentHeight + 'px'; } </script> <script> var glide02 = new Glide('.glide-03', { type: 'carousel', focusAt: 'center', perView: 3, autoplay: 2500, animationDuration: 700, gap: 24, classes: { activeNav: '[&>*]:bg-slate-700', }, breakpoints: { 1024: { perView: 2 }, 640: { perView: 1 } }, }); glide02.mount(); </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css"> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> const translations = { copied: "تم النسخ!", Saved: "تم الحفظ", Save: "حفظ", }; function showCodeSection(section) { const sections = document.querySelectorAll('.code-section'); sections.forEach(s => s.classList.add('hidden')); document.getElementById(`code-${section}`).classList.remove('hidden'); } function copyToClipboard(section, buttonId) { const codeElement = document.querySelector(`#code-${section} code`); const text = codeElement.textContent; navigator.clipboard.writeText(text).then(() => { const button = document.getElementById(buttonId); const icon = button.querySelector('i'); const span = button.querySelector('span'); icon.className = 'fas fa-check'; span.textContent = translations.copied; setTimeout(() => { icon.className = 'fas fa-copy'; span.textContent = 'Copy'; }, 2000); }).catch(err => { console.error('Error copying code: ', err); }); } </script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script> function showLoginAlert() { Swal.fire({ title: 'يرجى تسجيل الدخول', text: 'لتتمكن من إضافة المنتج إلى المفضلة.', icon: 'warning', confirmButtonText: 'تسجيل الدخول', showCancelButton: true, customClass: { popup: 'small-alert', title: 'compact-title', text: 'compact-text', content: 'compact-content', icon: 'compact-icon' }, }).then((result) => { if (result.isConfirmed) { window.location.href = "https://yartechnology.com/ar/login"; } }); } </script> <script> $(document).ready(function() { $('.wishlist-form').on('submit', function(e) { e.preventDefault(); var form = $(this); var button = form.find('button'); var spinner = form.find('.loading-spinner'); var buttonText = form.find('.button-text'); var icon = form.find('i'); spinner.removeClass('hidden'); $.ajax({ url: form.attr('action'), method: 'POST', data: form.serialize(), success: function(response) { if (response.status === 'Item added to wishlist!') { icon.removeClass('fa-bookmark dark:text-gray-100 text-gray-700').addClass('fa-bookmark text-yellow-300'); buttonText.text(translations.Saved); } else if (response.status === 'Item removed from wishlist!') { icon.removeClass('fa-bookmark text-yellow-300').addClass('fa-bookmark dark:text-gray-100 text-gray-700'); buttonText.text(translations.Save); } spinner.addClass('hidden'); }, error: function() { spinner.addClass('hidden'); alert('حدث خطأ! الرجاء المحاولة لاحقًا.'); } }); }); }); </script> </main> </div> <footer wire:snapshot="{"data":[],"memo":{"id":"gQIM8Z7QHqbbPhzYl0A9","name":"layout.footer","path":"ar\/resource\/subscription-input","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ar"},"checksum":"0281e7ef6aa67135b8f4a342d57c210cb3e0b48c4daf635cba69757ffffb692b"}" wire:effects="[]" wire:id="gQIM8Z7QHqbbPhzYl0A9" class="mt-auto w-full dark:bg-gray-900 py-10 px-4 sm:px-6 lg:px-8 mx-auto"> <!-- Grid --> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-6 mb-10"> <div class="col-span-full hidden lg:col-span-1 lg:block"> <p class="mt-3 text-xs sm:text-sm text-gray-600 dark:text-neutral-400"> <a href="https://yartechnology.com"> © <span id="currentYear"></span> YarTechnology</a> </p> </div> <script> // جلب التاريخ الحالي const currentYear = new Date().getFullYear(); // إدراج التاريخ في النص document.getElementById('currentYear').textContent = currentYear; </script> <!-- End Col --> <!-- End Col --> <div> <h4 class="text-xs font-semibold text-gray-900 uppercase dark:text-neutral-100">الصفحات</h4> <div class="mt-3 grid space-y-3 text-sm"> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://yartechnology.com/ar">الرأيسية</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">معلومات عنا</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://yartechnology.com/ar/blog">المدونة</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://yartechnology.com/ar/shop">المتجر</a> </p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://yartechnology.com/ar/wishlist">المفضلة</a></p> </div> </div> <!-- End Col --> <div> <h4 class="text-xs font-semibold text-gray-900 uppercase dark:text-neutral-100">الموارد</h4> <div class="mt-3 grid space-y-3 text-sm"> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://yartechnology.com/ar/resources">موارد برمجية</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">المساعدة والدعم</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://yartechnology.com/ar/jobs">طلبات التوظيف</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">سياسة الخصوصية</a></p> </div> </div> <!-- End Col --> <div> <h4 class="text-xs font-semibold text-gray-900 uppercase dark:text-neutral-100">مواقع التواصل الاجتماعي</h4> <div class="mt-3 grid space-y-3 text-sm"> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://www.instagram.com/yartechnology/profilecard/?igsh=Y2FqbXNzMjFrNjlr">انستكرام</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://www.facebook.com/share/1GEJk9e3Xy/">فيسبوك</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://youtube.com/@yartechnology?si=RxbenISWblFIjLcV">يوتيوب</a> </div> <h4 class="mt-7 text-xs font-semibold text-gray-900 uppercase dark:text-neutral-100">تواصل معنا</h4> <div class="mt-3 grid space-y-3 text-sm"> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="https://wa.me/9647511286165" target="_blank">+964 751 128 6165</a></p> <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="mailto:info@yartechnology.com" target="_blank">info@yartechnology.com</a></p> </div> </div> <!-- End Col --> </div> <!-- End Grid --> <div class="pt-5 mt-5 border-t border-gray-200 dark:border-neutral-700"> <div class=""> <div class="flex flex-wrap items-center justify-between gap-3"> <div class="space-x-4 text-sm"> <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">المساعدة والدعم</a> <a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="#">سياسة الخصوصية</a> </div> <p class="mt-1 text-xs sm:text-sm text-gray-600 dark:text-neutral-400"> <a href="https://yartechnology.com"> © 2025 YarTechnology</a> </p> </div> <!-- End Col --> </div> </div> </footer> <script src="https://yartechnology.com/js/spotlight-effect.js"></script> <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> AOS.init(); // تهيئة مكتبة AOS // إعادة تفعيل AOS عند التمرير للأعلى $(window).on('scroll', function() { if ($(this).scrollTop() === 0) { // عندما تكون الصفحة في الأعلى AOS.refresh(); // تحديث AOS } }); </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="jMuWlKNL4H7swkltBpK5wm66ZhOrgw5KxUmGUCpm" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>