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="wrapper"> <div class="title-text"> <div class="title login">Login Form</div> <div class="title signup">Signup Form</div> </div> <div class="form-container"> <div class="slide-controls"> <input type="radio" name="slide" id="login" checked> <input type="radio" name="slide" id="signup"> <label for="login" class="slide login">Login</label> <label for="signup" class="slide signup">Signup</label> <div class="slider-tab"></div> </div> <div class="form-inner"> <form action="#" class="login"> <div class="field"> <input type="text" placeholder="Email Address" required> </div> <div class="field"> <input type="password" placeholder="Password" required> </div> <div class="pass-link"><a href="#">Forgot password?</a></div> <div class="field btn"> <div class="btn-layer"></div> <input type="submit" value="Login"> </div> <div class="signup-link">Not a member? <a href="">Signup now</a></div> </form> <form action="#" class="signup"> <div class="field"> <input type="text" placeholder="Email Address" required> </div> <div class="field"> <input type="password" placeholder="Password" required> </div> <div class="field"> <input type="password" placeholder="Confirm password" required> </div> <div class="field btn"> <div class="btn-layer"></div> <input type="submit" value="Signup"> </div> </form> </div> </div> </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">@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ font-family: 'Poppins', sans-serif; } html,body{ place-items: center; } .wrapper{ overflow: hidden; max-width: 390px; background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0px 15px 20px rgba(0,0,0,0.1); } .wrapper .title-text{ display: flex; width: 200%; } .wrapper .title{ width: 50%; font-size: 35px; font-weight: 600; text-align: center; transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); } .wrapper .slide-controls{ position: relative; display: flex; height: 50px; width: 100%; overflow: hidden; margin: 30px 0 10px 0; justify-content: space-between; border: 1px solid lightgrey; border-radius: 15px; } .slide-controls .slide{ height: 100%; width: 100%; color: #fff; font-size: 18px; font-weight: 500; text-align: center; line-height: 48px; cursor: pointer; z-index: 1; transition: all 0.6s ease; } .slide-controls label.signup{ color: #000; } .slide-controls .slider-tab{ position: absolute; height: 100%; width: 50%; left: 0; z-index: 0; border-radius: 15px; background: -webkit-linear-gradient(left,#003366,#004080,#0059b3 , #0073e6); transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); } input[type="radio"]{ display: none; } #signup:checked ~ .slider-tab{ left: 50%; } #signup:checked ~ label.signup{ color: #fff; cursor: default; user-select: none; } #signup:checked ~ label.login{ color: #000; } #login:checked ~ label.signup{ color: #000; } #login:checked ~ label.login{ cursor: default; user-select: none; } .wrapper .form-container{ width: 100%; overflow: hidden; } .form-container .form-inner{ display: flex; width: 200%; } .form-container .form-inner form{ width: 50%; transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); } .form-inner form .field{ height: 50px; width: 100%; margin-top: 20px; } .form-inner form .field input{ height: 100%; width: 100%; outline: none; padding-left: 15px; border-radius: 15px; border: 1px solid lightgrey; border-bottom-width: 2px; font-size: 17px; transition: all 0.3s ease; } .form-inner form .field input:focus{ border-color: #1a75ff; /* box-shadow: inset 0 0 3px #fb6aae; */ } .form-inner form .field input::placeholder{ color: #999; transition: all 0.3s ease; } form .field input:focus::placeholder{ color: #1a75ff; } .form-inner form .pass-link{ margin-top: 5px; } .form-inner form .signup-link{ text-align: center; margin-top: 30px; } .form-inner form .pass-link a, .form-inner form .signup-link a{ color: #1a75ff; text-decoration: none; } .form-inner form .pass-link a:hover, .form-inner form .signup-link a:hover{ text-decoration: underline; } form .btn{ height: 50px; width: 100%; border-radius: 15px; position: relative; overflow: hidden; } form .btn .btn-layer{ height: 100%; width: 300%; position: absolute; left: -100%; background: -webkit-linear-gradient(right,#003366,#004080,#0059b3 , #0073e6); border-radius: 15px; transition: all 0.4s ease;; } form .btn:hover .btn-layer{ left: 0; } form .btn input[type="submit"]{ height: 100%; width: 100%; z-index: 1; position: relative; background: none; border: none; color: #fff; padding-left: 0; border-radius: 15px; font-size: 20px; font-weight: 500; cursor: pointer; }</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">const loginText = document.querySelector(".title-text .login"); const loginForm = document.querySelector("form.login"); const loginBtn = document.querySelector("label.login"); const signupBtn = document.querySelector("label.signup"); const signupLink = document.querySelector("form .signup-link a"); signupBtn.onclick = (()=>{ loginForm.style.marginLeft = "-50%"; loginText.style.marginLeft = "-50%"; }); loginBtn.onclick = (()=>{ loginForm.style.marginLeft = "0%"; loginText.style.marginLeft = "0%"; }); signupLink.onclick = (()=>{ signupBtn.click(); return false; });</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">المشاهدات : 60</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"> فورم تسجيل الدخول 4 </p> <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-6 mb-4"> الوصف</h3> <p> <p>فورم تسجيل الدخول 4</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-144 " 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 mx-auto w-full max-w-md bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:rounded-xl sm:px-10"> <div class="w-full"> <div class="text-center"> <h1 class="text-3xl font-semibold text-gray-900">Sign in</h1> <p class="mt-2 text-gray-500">Sign in below to access your account</p> </div> <div class="mt-5"> <form action=""> <div class="relative mt-6"> <input type="email" name="email" id="email" placeholder="Email Address" class="peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none" autocomplete="NA" /> <label for="email" class="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800">Email Address</label> </div> <div class="relative mt-6"> <input type="password" name="password" id="password" placeholder="Password" class="peer peer mt-1 w-full border-b-2 border-gray-300 px-0 py-1 placeholder:text-transparent focus:border-gray-500 focus:outline-none" /> <label for="password" class="pointer-events-none absolute top-0 left-0 origin-left -translate-y-1/2 transform text-sm text-gray-800 opacity-75 transition-all duration-100 ease-in-out peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:top-0 peer-focus:pl-0 peer-focus:text-sm peer-focus:text-gray-800">Password</label> </div> <div class="my-6"> <button type="submit" class="w-full rounded-md bg-black px-3 py-4 text-white focus:bg-gray-600 focus:outline-none">Sign in</button> </div> <p class="text-center text-sm text-gray-500">Don't have an account yet? <a class="font-semibold text-gray-600 hover:underline focus:text-gray-800 focus:outline-none">Sign up </a>. </p> </form> </div> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="fGjxPlaCrsQDLiI2ByCPQemtW6Gb9rupQ6nFGFpm" 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/signup-form' 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-123 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .form { --black: #000000; --ch-black: #141414; --eer-black: #1b1b1b; --night-rider: #2e2e2e; --white: #ffffff; --af-white: #f3f3f3; --ch-white: #e1e1e1; --tomato: #fa5656; font-family: Helvetica, sans-serif; border: 2px solid var(--glow-color); padding: 25px; display: flex; max-width: 420px; flex-direction: column; align-items: center; overflow: hidden; color: var(--night-rider); background-color: var(--white); border-radius: 8px; position: relative; box-shadow: 10px 10px 10px rgba(0, 0, 0, .15); } /*----heading and description-----*/ .info { margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; } .title { font-size: 1.5rem; font-weight: 900; } .description { margin-top: 10px; font-size: 1rem; } /*----input-fields------*/ .form .input-fields { display: flex; justify-content: space-between; gap: 10px; } .form .input-fields input { height: 2.5em; width: 2.5em; outline: none; text-align: center; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 1.5rem; color: var(--ch-black); border-radius: 5px; border: 2.5px solid var(--ch-white); background-color: var(--ch-white); } .form .input-fields input:focus { border: 1px solid var(--night-rider); box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .15); transform: scale(1.05); transition: 0.5s; } /*-----verify and clear buttons-----*/ .action-btns { display: flex; margin-top: 20px; gap: 0.5rem; } .verify { padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1rem; font-weight: 500; color: var(--white); text-shadow: none; background: var(--ch-black); box-shadow: transparent; border: 1px solid var(--night-rider); transition: 0.5s ease; user-select: none; } .verify:hover,.verify:focus { color: var(--white); background: var(--night-rider); } .clear { padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 1rem; font-weight: 500; color: var(--night-rider); text-shadow: none; background: transparent; border: 1px solid var(--night-rider); transition: 0.5s ease; user-select: none; } .clear:hover,.clear:focus { color: var(--tomato); background-color: var(--white); border: 1px solid var(--tomato); } /*-----close button------*/ .close { position: absolute; right: 10px; top: 10px; background-color: var(--ch-white); color: var(--af-white); height: 30px; width: 30px; display: grid; place-items: center; border-radius: 5px; cursor: pointer; font-weight: 600; transition: .5s ease; } .close:hover { background-color: var(--tomato); color: var(--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"> <form class="form"> <span class="close">X</span> <div class="info"> <span class="title">Two-Factor Verification</span> <p class="description">Enter the two-factor authentication code provided by the authenticator app </p> </div> <div class="input-fields"> <input placeholder="" type="tel" maxlength="1"> <input placeholder="" type="tel" maxlength="1"> <input placeholder="" type="tel" maxlength="1"> <input placeholder="" type="tel" maxlength="1"> </div> <div class="action-btns"> <a class="verify" >Verify</a> <a class="clear" >Clear</a> </div> </form> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="fGjxPlaCrsQDLiI2ByCPQemtW6Gb9rupQ6nFGFpm" 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/file-upload-form' 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-121 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .form { display: flex; align-items: center; flex-direction: column; justify-content: space-around; width: 300px; background-color: white; border-radius: 12px; padding: 20px; } .title { font-size: 20px; font-weight: bold; color: black } .message { color: #a3a3a3; font-size: 14px; margin-top: 4px; text-align: center } .inputs { margin-top: 10px } .inputs input { width: 32px; height: 32px; text-align: center; border: none; border-bottom: 1.5px solid #d2d2d2; margin: 0 10px; } .inputs input:focus { border-bottom: 1.5px solid royalblue; outline: none; } .action { margin-top: 24px; padding: 12px 16px; border-radius: 8px; border: none; background-color: royalblue; color: white; cursor: pointer; align-self: end; } 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"> <form class="form"> <div class="title">OTP</div> <div class="title">Verification Code</div> <p class="message">We have sent a verification code to your mobile number</p> <div class="inputs"> <input id="input1" type="text" maxlength="1"> <input id="input2" type="text" maxlength="1"> <input id="input3" type="text" maxlength="1"> <input id="input4" type="text" maxlength="1"> </div> <button class="action">verify me</button> </form> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="fGjxPlaCrsQDLiI2ByCPQemtW6Gb9rupQ6nFGFpm" 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/login-form-3' 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-117 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> @import "compass/css3"; * { box-sizing: border-box; } body { font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; color:white; font-size:12px; } form { background:#111; width:300px; margin:30px auto; border-radius:0.4em; border:1px solid #191919; overflow:hidden; position:relative; box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2); } form:after { content:""; display:block; position:absolute; height:1px; width:100px; left:20%; background:linear-gradient(left, #111, #444, #b6b6b8, #444, #111); top:0; } form:before { content:""; display:block; position:absolute; width:8px; height:5px; border-radius:50%; left:34%; top:-7px; box-shadow: 0 0 6px 4px #fff; } .inset { padding:20px; border-top:1px solid #19191a; } form h1 { font-size:18px; text-shadow:0 1px 0 black; text-align:center; padding:15px 0; border-bottom:1px solid rgba(0,0,0,1); position:relative; } form h1:after { content:""; display:block; width:250px; height:100px; position:absolute; top:0; left:50px; pointer-events:none; transform:rotate(70deg); background:linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0)); } label { color:#666; display:block; padding-bottom:9px; } input[type=text], input[type=password] { width:100%; padding:8px 5px; background:linear-gradient(#1f2124, #27292c); border:1px solid #222; box-shadow: 0 1px 0 rgba(255,255,255,0.1); border-radius:0.3em; margin-bottom:20px; } label[for=remember]{ color:white; display:inline-block; padding-bottom:0; padding-top:5px; } input[type=checkbox] { display:inline-block; vertical-align:top; } .p-container { padding:0 20px 20px 20px; } .p-container:after { clear:both; display:table; content:""; } .p-container span { display:block; float:left; color:#0d93ff; padding-top:8px; } input[type=submit] { padding:5px 20px; border:1px solid rgba(0,0,0,0.4); text-shadow:0 -1px 0 rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 10px 10px rgba(255,255,255,0.1); border-radius:0.3em; background:#0184ff; color:white; float:right; font-weight:bold; cursor:pointer; font-size:13px; } input[type=submit]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -10px 10px rgba(255,255,255,0.1); } input[type=text]:hover, input[type=password]:hover, label:hover ~ input[type=text], label:hover ~ input[type=password] { background:#27292c; } 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"> <form> <h1>Employer Log in</h1> <div class="inset"> <p> <label for="email">EMAIL ADDRESS</label> <input type="text" name="email" id="email"> </p> <p> <label for="password">PASSWORD</label> <input type="password" name="password" id="password"> </p> <p> <input type="checkbox" name="remember" id="remember"> <label for="remember">Remember me for 14 days</label> </p> </div> <p class="p-container"> <span>Forgot password ?</span> <input type="submit" name="go" id="go" value="Log in"> </p> </form> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="fGjxPlaCrsQDLiI2ByCPQemtW6Gb9rupQ6nFGFpm" 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/login-form-1' 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":"wRNJNexTJ0Hd8OclLekF","name":"layout.footer","path":"ar\/resource\/login-form-4","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ar"},"checksum":"2c75521cde4792839b2502c6ac946a1d32a981ba60f2ee734b08c1dbeb69782d"}" wire:effects="[]" wire:id="wRNJNexTJ0Hd8OclLekF" 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="fGjxPlaCrsQDLiI2ByCPQemtW6Gb9rupQ6nFGFpm" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>