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"> <div class="flex px-4 pt-3 gap-2 py-2 text-sm font-medium bg-gray-800 text-white rounded-lg border dark:border-gray-700 "> <p> <i class="fa-brands fa-html5 text-red-600 rtl pl-2 "></i>HTML +</p> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" 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>Tailwind CSS</p> </div> </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="flex justify-center items-center relative transition-all duration-[450ms] ease-in-out w-auto" > <article class="border border-solid border-gray-700 w-full ease-in-out duration-500 left-0 rounded-2xl flex shadow-lg shadow-black/15 bg-white" > <label class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl" for="dashboard" > <input id="dashboard" name="path" type="radio" class="hidden peer/expand" /> <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300" > <path d="M4 13h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1zm-1 7a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v4zm10 0a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v7zm1-10h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1z" ></path> </svg> </label> <label class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl" for="profile" > <input id="profile" name="path" type="radio" class="hidden peer/expand" /> <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300" > <path d="M12 2a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3zm9 11v-1a7 7 0 0 0-7-7h-4a7 7 0 0 0-7 7v1h2v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1z" ></path> </svg> </label> <label class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl" for="messages" > <input id="messages" name="path" type="radio" class="hidden peer/expand" /> <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300" > <path d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z" ></path> <path d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z" ></path> </svg> </label> <label class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl" for="help" > <input id="help" name="path" type="radio" class="hidden peer/expand" /> <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300" > <path d="M11.953 2C6.465 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.493 2 11.953 2zM12 20c-4.411 0-8-3.589-8-8s3.567-8 7.953-8C16.391 4 20 7.589 20 12s-3.589 8-8 8z" ></path> <path d="M11 7h2v7h-2zm0 8h2v2h-2z"></path> </svg> </label> <label class="has-[:checked]:shadow-lg relative w-full h-16 p-4 ease-in-out duration-300 border-solid border-black/10 has-[:checked]:border group flex flex-row gap-3 items-center justify-center text-black rounded-xl" for="settings" > <input id="settings" name="path" type="radio" class="hidden peer/expand" /> <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" class="peer-hover/expand:scale-125 peer-hover/expand:text-blue-400 peer-hover/expand:fill-blue-400 peer-checked/expand:text-blue-400 peer-checked/expand:fill-blue-400 text-2xl peer-checked/expand:scale-125 ease-in-out duration-300" > <path d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z" ></path> <path d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z" ></path> </svg> </label> </article> </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"></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">المشاهدات : 52</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"> <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-57 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .rating { display: flex; flex-direction: row-reverse; gap: 0.3rem; transform-style: preserve-3d; perspective: 1000px; } .rating input { display: none; } .rating label .svgOne { stroke: #ccc; fill: rgba(255, 217, 0, 0); transition: stroke 0.5s ease, fill 0.5s ease; } .rating label .svgTwo { position: absolute; top: -1px; fill: gold; stroke: rgba(255, 217, 0, 0); opacity: 0; transition: stroke 0.5s ease, fill 0.5s ease, opacity 0.5s ease; } .rating label { position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; transition: all 0.5s ease; } /* Étoiles sélectionnées ou survolées */ .rating label:hover .svgOne, .rating label:hover ~ label .svgOne { stroke: gold; } .rating input:checked ~ label .svgOne { stroke: #cccccc00; } .rating input:checked ~ label .svgTwo { transform: rotateX(0deg) rotateY(0deg) translateY(0px); opacity: 1; animation: displayStar 0.5s cubic-bezier(0.75, 0.41, 0.82, 1.2); } @keyframes displayStar { 0% { transform: rotateX(100deg) rotateY(100deg) translateY(10px); } 100% { transform: rotateX(0deg) rotateY(0deg) translateY(0px); } } .ombre { background: radial-gradient( ellipse closest-side, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0) ); width: 30px; height: 8px; opacity: 0; transition: opacity 0.6s ease 0.2s; } /* Étoiles sélectionnées ou survolées */ .rating label:hover .ombre, .rating label:hover ~ label .ombre { opacity: 0.3; } .rating input:checked ~ label .ombre { opacity: 1; } /* Animation de secousse uniquement au hover */ .rating label:hover .svgTwo:hover { animation: chackStar 0.6s ease-out, displayStar none 1s; } @keyframes chackStar { 0% { transform: rotate(0deg); } 20% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } 80% { transform: rotate(-20deg); } 100% { transform: rotate(0deg); } } 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="rating"> <input value="5" name="rating" id="star5" type="radio" /> <label title="5 stars" for="star5"> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgOne" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgTwo" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <div class="ombre"></div> </label> <input value="4" name="rating" id="star4" type="radio" /> <label title="4 stars" for="star4"> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgOne" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgTwo" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <div class="ombre"></div> </label> <input value="3" name="rating" id="star3" type="radio" /> <label title="3 stars" for="star3"> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgOne" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgTwo" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <div class="ombre"></div> </label> <input value="2" name="rating" id="star2" type="radio" /> <label title="2 stars" for="star2"> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgOne" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgTwo" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <div class="ombre"></div> </label> <input value="1" name="rating" id="star1" type="radio" /> <label title="1 star" for="star1"> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgOne" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#000000" fill="none" viewBox="0 0 24 24" height="35" width="35" xmlns="http://www.w3.org/2000/svg" class="svgTwo" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" ></polygon> </svg> <div class="ombre"></div> </label> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="09YeuJmezkXahIAbok7v72yhEW4bhNMYx5Ggq1J4" 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-menu-67' 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-54 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .filter-switch { border: 2px solid #ffc000; border-radius: 30px; position: relative; display: flex; align-items: center; height: 50px; width: 400px; overflow: hidden; } .filter-switch input { display: none; } .filter-switch label { flex: 1; text-align: center; cursor: pointer; border: none; border-radius: 30px; position: relative; overflow: hidden; z-index: 1; transition: all 0.5s; font-weight: 500; font-size: 18px; } .filter-switch .background { position: absolute; width: 49%; height: 38px; background-color: #ffc000; top: 4px; left: 4px; border-radius: 30px; transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #option2:checked ~ .background { left: 50%; } #option1:checked + label[for="option1"] { color: #212121; font-weight: bold; } #option2:checked + label[for="option2"] { color: #212121; font-weight: bold; } #option1:not(:checked) + label[for="option1"], #option2:not(:checked) + label[for="option2"] { color: #7d7d7d; } 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 id="firstFilter" class="filter-switch"> <input checked="" id="option1" name="options" type="radio" /> <label class="option" for="option1">Option 1</label> <input id="option2" name="options" type="radio" /> <label class="option" for="option2">Option 2</label> <span class="background"></span> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="09YeuJmezkXahIAbok7v72yhEW4bhNMYx5Ggq1J4" 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 >
اختيار 78
حفظ
عرض الكود
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"> تقييم 3 </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/evaluation3' 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-52 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> /* radio settings 👇 */ .theme-popup { /* total */ --total_text_color: #e0e0e0; --total_font_family: Menlo, Roboto Mono, monospace; /* button */ --btn_bg: #3A3A3A; --btn_padding: 0.5em; --btn_height: 2em; --btn_border_radius: 0.3125em; --btn_outline_width: 0.0625em; --btn_outline_color: #A0A0A0; --btn_outline_offset: 0.0625em; --btn_gap: 0.3125em; /* list */ --list_padding: 0.5em; --list_bg: var(--btn_bg); --list_border_radius: var(--btn_border_radius); --list_gap: 0.1875em; --list_btn_hover_bg: #5A5656; --list_btn_active: #b9b9b970; --list_btn_border_radius: 0.25em; --list_btn_padding: 0.35em 1em; --list_btn_gap: 0.4375em; --list_btn_outline_width: 0.0625em; --list_btn_outline_color: rgb(212, 210, 210); --list_offset: 0.35em; --list_btn_font_size: 14px; --list_position_left: 0; --list_position_right: unset; /* 👆 if you want to change sides just switch one property */ /* from properties to "unset" and the other to 0 */ } .theme-popup__button .theme-popup__icons svg, #light, #dark, #default, #checkbox, .theme-popup__list-container { display: none; } .theme-popup { color: var(--total_text_color); font-family: var(--total_font_family); position: relative; user-select: none; } .theme-popup__list-container { position: absolute; left: var(--list_position_left); right: var(--list_position_right); top: calc(var(--btn_height) + var(--list_offset)); } .theme-popup__icons { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; } .theme-popup__button { line-height: var(--btn_height); background-color: var(--btn_bg); padding: 0 var(--btn_padding); display: inline-flex; align-items: center; column-gap: var(--btn_gap); border-radius: var(--btn_border_radius); border: none; color: inherit; font-family: inherit; outline: none; font-weight: bold; } .theme-popup__list { margin: 0; list-style-type: none; padding: var(--list_padding); border-radius: var(--list_border_radius); background-color: var(--list_bg); display: flex; flex-direction: column; row-gap: var(--list_gap); } .theme-popup__list label { display: flex; align-items: center; justify-content: start; column-gap: var(--list_btn_gap); padding: var(--list_btn_padding); border-radius: var(--list_btn_border_radius); white-space: nowrap; } .theme-popup__list label span { font-size: var(--list_btn_font_size); } /* actions */ #checkbox:checked~.theme-popup__button { outline: var(--btn_outline_width) solid var(--btn_outline_color); outline-offset: var(--btn_outline_offset); } #checkbox:checked~.theme-popup__list-container { display: block; } .theme-popup__list label:hover, .theme-popup__button:hover, #checkbox:checked~.theme-popup__button { background-color: var(--list_btn_hover_bg); } #default:checked~.theme-popup__list-container label[for="default"], #light:checked~.theme-popup__list-container label[for="light"], #dark:checked~.theme-popup__list-container label[for="dark"] { background-color: var(--list_btn_active); outline: var(--list_btn_outline_width) solid var(--list_btn_outline_color); } #default:checked~label svg.default, #light:checked~label svg.sun, #dark:checked~label svg.moon { display: block; } 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="theme-popup"> <input type="radio" name="theme" id="default" checked=""> <input type="radio" name="theme" id="light"> <input type="radio" name="theme" id="dark"> <input type="checkbox" id="checkbox"> <label for="checkbox" class="theme-popup__button"> <span class="theme-popup__icons"> <svg class="default" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.52267C6.13332 2.64713 4.86254 3.27802 3.9372 4.29146C3.01186 5.3049 2.49882 6.62766 2.49882 8C2.49882 9.37234 3.01186 10.6951 3.9372 11.7085C4.86254 12.722 6.13332 13.3529 7.5 13.4773V2.52267ZM1.5 8C1.5 4.41 4.41 1.5 8 1.5C11.59 1.5 14.5 4.41 14.5 8C14.5 11.59 11.59 14.5 8 14.5C4.41 14.5 1.5 11.59 1.5 8Z" fill="currentColor"></path> </svg> <svg class="sun" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_78_63)"> <path d="M7.99998 3.99256C5.79024 3.99256 3.99254 5.79061 3.99254 8.00035C3.99254 10.2101 5.79024 12.0081 7.99998 12.0081C10.2094 12.0081 12.0074 10.2105 12.0074 8.00035C12.0074 5.79026 10.2094 3.99256 7.99998 3.99256ZM7.99998 2.81453C7.79266 2.81453 7.59383 2.73219 7.4472 2.58563C7.30057 2.43907 7.21814 2.24027 7.21805 2.03295V0.781931C7.21805 0.57455 7.30043 0.375663 7.44707 0.229022C7.59371 0.0823818 7.7926 0 7.99998 0C8.20736 0 8.40625 0.0823818 8.55289 0.229022C8.69953 0.375663 8.78191 0.57455 8.78191 0.781931V2.03295C8.78182 2.24027 8.6994 2.43907 8.55276 2.58563C8.40613 2.73219 8.2073 2.81453 7.99998 2.81453ZM7.99998 13.1851C7.8973 13.1851 7.79562 13.2053 7.70075 13.2446C7.60588 13.2839 7.51968 13.3415 7.44707 13.4141C7.37446 13.4868 7.31687 13.573 7.27757 13.6678C7.23828 13.7627 7.21805 13.8644 7.21805 13.9671V15.2177C7.21805 15.4251 7.30043 15.624 7.44707 15.7706C7.59371 15.9173 7.7926 15.9996 7.99998 15.9996C8.20736 15.9996 8.40625 15.9173 8.55289 15.7706C8.69953 15.624 8.78191 15.4251 8.78191 15.2177V13.9671C8.78182 13.7597 8.69941 13.5609 8.55279 13.4142C8.40617 13.2676 8.20733 13.1852 7.99998 13.1851ZM11.6662 4.33339C11.5197 4.18671 11.4374 3.98785 11.4374 3.78051C11.4374 3.57318 11.5197 3.37432 11.6662 3.22764L12.5509 2.34296C12.6232 2.26911 12.7095 2.21033 12.8047 2.17003C12.8999 2.12972 13.0021 2.1087 13.1055 2.10816C13.2088 2.10762 13.3113 2.12758 13.4069 2.16689C13.5025 2.2062 13.5894 2.26408 13.6625 2.33717C13.7356 2.41026 13.7934 2.49712 13.8327 2.59273C13.872 2.68833 13.892 2.79078 13.8915 2.89415C13.8909 2.99752 13.8699 3.09976 13.8296 3.19494C13.7893 3.29013 13.7305 3.37639 13.6567 3.44872L12.772 4.33339C12.6254 4.48001 12.4265 4.56238 12.2191 4.56238C12.0117 4.56238 11.8129 4.48001 11.6662 4.33339ZM4.33337 11.667C4.26081 11.5943 4.17463 11.5366 4.07976 11.4973C3.98489 11.4579 3.8832 11.4377 3.78049 11.4377C3.67779 11.4377 3.5761 11.4579 3.48123 11.4973C3.38636 11.5366 3.30018 11.5943 3.22762 11.667L2.34294 12.5513C2.19882 12.6984 2.11858 12.8965 2.11966 13.1025C2.12073 13.3084 2.20303 13.5057 2.34867 13.6513C2.49431 13.797 2.69154 13.8793 2.8975 13.8803C3.10347 13.8814 3.30154 13.8012 3.4487 13.657L4.33337 12.772C4.40599 12.6995 4.46361 12.6134 4.50291 12.5186C4.54222 12.4237 4.56245 12.3221 4.56245 12.2195C4.56245 12.1169 4.54222 12.0152 4.50291 11.9204C4.46361 11.8256 4.40599 11.7395 4.33337 11.667ZM13.1851 8C13.1851 7.56811 13.5351 7.21807 13.967 7.21807H15.218C15.3221 7.21585 15.4256 7.23444 15.5224 7.27273C15.6191 7.31102 15.7073 7.36825 15.7817 7.44106C15.8561 7.51387 15.9152 7.6008 15.9555 7.69675C15.9958 7.7927 16.0166 7.89574 16.0166 7.99982C16.0166 8.10391 15.9958 8.20695 15.9555 8.3029C15.9152 8.39884 15.8561 8.48577 15.7817 8.55859C15.7073 8.6314 15.6191 8.68863 15.5224 8.72692C15.4256 8.76521 15.3221 8.78379 15.218 8.78158H13.967C13.8644 8.78162 13.7627 8.76144 13.6678 8.72218C13.573 8.68293 13.4868 8.62536 13.4141 8.55278C13.3415 8.4802 13.2839 8.39403 13.2446 8.29918C13.2053 8.20433 13.1851 8.10267 13.1851 8ZM2.81451 8C2.81451 7.89732 2.79428 7.79564 2.75499 7.70077C2.71569 7.6059 2.65809 7.5197 2.58548 7.44709C2.51288 7.37448 2.42668 7.31689 2.33181 7.27759C2.23694 7.23829 2.13526 7.21807 2.03258 7.21807H0.781912C0.67785 7.21585 0.574393 7.23444 0.477607 7.27273C0.380821 7.31102 0.292654 7.36825 0.218276 7.44106C0.143897 7.51387 0.0848039 7.6008 0.044461 7.69675C0.00411808 7.7927 -0.0166626 7.89574 -0.0166626 7.99982C-0.0166626 8.10391 0.00411808 8.20695 0.044461 8.3029C0.0848039 8.39884 0.143897 8.48577 0.218276 8.55859C0.292654 8.6314 0.380821 8.68863 0.477607 8.72692C0.574393 8.76521 0.67785 8.78379 0.781912 8.78158H2.03293C2.24022 8.78158 2.43901 8.69923 2.58559 8.55266C2.73216 8.40608 2.81451 8.20729 2.81451 8ZM11.6662 11.667C11.8129 11.5204 12.0118 11.4381 12.2191 11.4381C12.4264 11.4381 12.6253 11.5204 12.772 11.667L13.6567 12.5516C13.8033 12.6983 13.8856 12.8971 13.8856 13.1045C13.8855 13.3118 13.8031 13.5106 13.6565 13.6572C13.5839 13.7298 13.4977 13.7874 13.4028 13.8266C13.308 13.8659 13.2063 13.8861 13.1037 13.8861C12.8963 13.8861 12.6975 13.8037 12.5509 13.657L11.6662 12.7724C11.5936 12.6998 11.536 12.6137 11.4967 12.5188C11.4574 12.424 11.4371 12.3223 11.4371 12.2197C11.4371 12.117 11.4574 12.0153 11.4967 11.9205C11.536 11.8257 11.5936 11.7395 11.6662 11.667ZM4.33337 4.33339C4.48 4.18675 4.56237 3.98788 4.56237 3.78051C4.56237 3.57315 4.48 3.37427 4.33337 3.22764L3.4487 2.34331C3.3011 2.20166 3.10386 2.12349 2.89929 2.12558C2.69473 2.12766 2.49913 2.20983 2.35445 2.35447C2.20976 2.4991 2.12753 2.69468 2.12538 2.89924C2.12323 3.10381 2.20133 3.30107 2.34294 3.44872L3.22762 4.33339C3.30018 4.40608 3.38636 4.46374 3.48123 4.50308C3.5761 4.54243 3.67779 4.56268 3.78049 4.56268C3.8832 4.56268 3.98489 4.54243 4.07976 4.50308C4.17463 4.46374 4.26081 4.40608 4.33337 4.33339Z" fill="currentColor"></path> </g> <defs> <clipPath> <rect width="16" height="16" fill="currentColor"></rect> </clipPath> </defs> </svg> <svg class="moon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_78_60)"> <path d="M7.24135 14C10.1123 13.9981 12.6803 12.2445 13.7367 9.59537C13.7953 9.44832 13.727 9.39266 13.5866 9.46575C12.7818 9.88471 11.888 10.1036 10.9806 10.104C7.86082 10.1042 5.33169 7.57506 5.33188 4.45524C5.3323 3.64636 5.50645 2.84701 5.84254 2.11127C6.17863 1.37552 6.66883 0.720544 7.27996 0.190644C7.42672 0.0486062 7.38444 -0.0171645 7.09498 0.00382823C3.42058 0.029058 0.24231 3.13569 0.24231 7.00113C0.24231 10.8666 3.3758 14.0002 7.24135 14Z" fill="currentColor"></path> </g> <defs> <clipPath> <rect width="14" height="14" fill="currentColor"></rect> </clipPath> </defs> </svg> </span> Theme </label> <div class="theme-popup__list-container"> <ul class="theme-popup__list"> <li> <label for="default"> <span class="theme-popup__icons"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2.52267C6.13332 2.64713 4.86254 3.27802 3.9372 4.29146C3.01186 5.3049 2.49882 6.62766 2.49882 8C2.49882 9.37234 3.01186 10.6951 3.9372 11.7085C4.86254 12.722 6.13332 13.3529 7.5 13.4773V2.52267ZM1.5 8C1.5 4.41 4.41 1.5 8 1.5C11.59 1.5 14.5 4.41 14.5 8C14.5 11.59 11.59 14.5 8 14.5C4.41 14.5 1.5 11.59 1.5 8Z" fill="currentColor"></path> </svg> </span> <span> OS Default </span> </label> </li> <li> <label for="light"> <span class="theme-popup__icons"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_78_63)"> <path d="M7.99998 3.99256C5.79024 3.99256 3.99254 5.79061 3.99254 8.00035C3.99254 10.2101 5.79024 12.0081 7.99998 12.0081C10.2094 12.0081 12.0074 10.2105 12.0074 8.00035C12.0074 5.79026 10.2094 3.99256 7.99998 3.99256ZM7.99998 2.81453C7.79266 2.81453 7.59383 2.73219 7.4472 2.58563C7.30057 2.43907 7.21814 2.24027 7.21805 2.03295V0.781931C7.21805 0.57455 7.30043 0.375663 7.44707 0.229022C7.59371 0.0823818 7.7926 0 7.99998 0C8.20736 0 8.40625 0.0823818 8.55289 0.229022C8.69953 0.375663 8.78191 0.57455 8.78191 0.781931V2.03295C8.78182 2.24027 8.6994 2.43907 8.55276 2.58563C8.40613 2.73219 8.2073 2.81453 7.99998 2.81453ZM7.99998 13.1851C7.8973 13.1851 7.79562 13.2053 7.70075 13.2446C7.60588 13.2839 7.51968 13.3415 7.44707 13.4141C7.37446 13.4868 7.31687 13.573 7.27757 13.6678C7.23828 13.7627 7.21805 13.8644 7.21805 13.9671V15.2177C7.21805 15.4251 7.30043 15.624 7.44707 15.7706C7.59371 15.9173 7.7926 15.9996 7.99998 15.9996C8.20736 15.9996 8.40625 15.9173 8.55289 15.7706C8.69953 15.624 8.78191 15.4251 8.78191 15.2177V13.9671C8.78182 13.7597 8.69941 13.5609 8.55279 13.4142C8.40617 13.2676 8.20733 13.1852 7.99998 13.1851ZM11.6662 4.33339C11.5197 4.18671 11.4374 3.98785 11.4374 3.78051C11.4374 3.57318 11.5197 3.37432 11.6662 3.22764L12.5509 2.34296C12.6232 2.26911 12.7095 2.21033 12.8047 2.17003C12.8999 2.12972 13.0021 2.1087 13.1055 2.10816C13.2088 2.10762 13.3113 2.12758 13.4069 2.16689C13.5025 2.2062 13.5894 2.26408 13.6625 2.33717C13.7356 2.41026 13.7934 2.49712 13.8327 2.59273C13.872 2.68833 13.892 2.79078 13.8915 2.89415C13.8909 2.99752 13.8699 3.09976 13.8296 3.19494C13.7893 3.29013 13.7305 3.37639 13.6567 3.44872L12.772 4.33339C12.6254 4.48001 12.4265 4.56238 12.2191 4.56238C12.0117 4.56238 11.8129 4.48001 11.6662 4.33339ZM4.33337 11.667C4.26081 11.5943 4.17463 11.5366 4.07976 11.4973C3.98489 11.4579 3.8832 11.4377 3.78049 11.4377C3.67779 11.4377 3.5761 11.4579 3.48123 11.4973C3.38636 11.5366 3.30018 11.5943 3.22762 11.667L2.34294 12.5513C2.19882 12.6984 2.11858 12.8965 2.11966 13.1025C2.12073 13.3084 2.20303 13.5057 2.34867 13.6513C2.49431 13.797 2.69154 13.8793 2.8975 13.8803C3.10347 13.8814 3.30154 13.8012 3.4487 13.657L4.33337 12.772C4.40599 12.6995 4.46361 12.6134 4.50291 12.5186C4.54222 12.4237 4.56245 12.3221 4.56245 12.2195C4.56245 12.1169 4.54222 12.0152 4.50291 11.9204C4.46361 11.8256 4.40599 11.7395 4.33337 11.667ZM13.1851 8C13.1851 7.56811 13.5351 7.21807 13.967 7.21807H15.218C15.3221 7.21585 15.4256 7.23444 15.5224 7.27273C15.6191 7.31102 15.7073 7.36825 15.7817 7.44106C15.8561 7.51387 15.9152 7.6008 15.9555 7.69675C15.9958 7.7927 16.0166 7.89574 16.0166 7.99982C16.0166 8.10391 15.9958 8.20695 15.9555 8.3029C15.9152 8.39884 15.8561 8.48577 15.7817 8.55859C15.7073 8.6314 15.6191 8.68863 15.5224 8.72692C15.4256 8.76521 15.3221 8.78379 15.218 8.78158H13.967C13.8644 8.78162 13.7627 8.76144 13.6678 8.72218C13.573 8.68293 13.4868 8.62536 13.4141 8.55278C13.3415 8.4802 13.2839 8.39403 13.2446 8.29918C13.2053 8.20433 13.1851 8.10267 13.1851 8ZM2.81451 8C2.81451 7.89732 2.79428 7.79564 2.75499 7.70077C2.71569 7.6059 2.65809 7.5197 2.58548 7.44709C2.51288 7.37448 2.42668 7.31689 2.33181 7.27759C2.23694 7.23829 2.13526 7.21807 2.03258 7.21807H0.781912C0.67785 7.21585 0.574393 7.23444 0.477607 7.27273C0.380821 7.31102 0.292654 7.36825 0.218276 7.44106C0.143897 7.51387 0.0848039 7.6008 0.044461 7.69675C0.00411808 7.7927 -0.0166626 7.89574 -0.0166626 7.99982C-0.0166626 8.10391 0.00411808 8.20695 0.044461 8.3029C0.0848039 8.39884 0.143897 8.48577 0.218276 8.55859C0.292654 8.6314 0.380821 8.68863 0.477607 8.72692C0.574393 8.76521 0.67785 8.78379 0.781912 8.78158H2.03293C2.24022 8.78158 2.43901 8.69923 2.58559 8.55266C2.73216 8.40608 2.81451 8.20729 2.81451 8ZM11.6662 11.667C11.8129 11.5204 12.0118 11.4381 12.2191 11.4381C12.4264 11.4381 12.6253 11.5204 12.772 11.667L13.6567 12.5516C13.8033 12.6983 13.8856 12.8971 13.8856 13.1045C13.8855 13.3118 13.8031 13.5106 13.6565 13.6572C13.5839 13.7298 13.4977 13.7874 13.4028 13.8266C13.308 13.8659 13.2063 13.8861 13.1037 13.8861C12.8963 13.8861 12.6975 13.8037 12.5509 13.657L11.6662 12.7724C11.5936 12.6998 11.536 12.6137 11.4967 12.5188C11.4574 12.424 11.4371 12.3223 11.4371 12.2197C11.4371 12.117 11.4574 12.0153 11.4967 11.9205C11.536 11.8257 11.5936 11.7395 11.6662 11.667ZM4.33337 4.33339C4.48 4.18675 4.56237 3.98788 4.56237 3.78051C4.56237 3.57315 4.48 3.37427 4.33337 3.22764L3.4487 2.34331C3.3011 2.20166 3.10386 2.12349 2.89929 2.12558C2.69473 2.12766 2.49913 2.20983 2.35445 2.35447C2.20976 2.4991 2.12753 2.69468 2.12538 2.89924C2.12323 3.10381 2.20133 3.30107 2.34294 3.44872L3.22762 4.33339C3.30018 4.40608 3.38636 4.46374 3.48123 4.50308C3.5761 4.54243 3.67779 4.56268 3.78049 4.56268C3.8832 4.56268 3.98489 4.54243 4.07976 4.50308C4.17463 4.46374 4.26081 4.40608 4.33337 4.33339Z" fill="currentColor"></path> </g> <defs> <clipPath> <rect width="16" height="16" fill="currentColor"></rect> </clipPath> </defs> </svg> </span> <span> Light </span> </label> </li> <li> <label for="dark"> <span class="theme-popup__icons"> <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_78_60)"> <path d="M7.24135 14C10.1123 13.9981 12.6803 12.2445 13.7367 9.59537C13.7953 9.44832 13.727 9.39266 13.5866 9.46575C12.7818 9.88471 11.888 10.1036 10.9806 10.104C7.86082 10.1042 5.33169 7.57506 5.33188 4.45524C5.3323 3.64636 5.50645 2.84701 5.84254 2.11127C6.17863 1.37552 6.66883 0.720544 7.27996 0.190644C7.42672 0.0486062 7.38444 -0.0171645 7.09498 0.00382823C3.42058 0.029058 0.24231 3.13569 0.24231 7.00113C0.24231 10.8666 3.3758 14.0002 7.24135 14Z" fill="currentColor"></path> </g> <defs> <clipPath> <rect width="14" height="14" fill="currentColor"></rect> </clipPath> </defs> </svg> </span> <span> Night </span> </label> </li> </ul> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="09YeuJmezkXahIAbok7v72yhEW4bhNMYx5Ggq1J4" 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"> اختيار 92 </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-92' 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":"5NTwr3GenxTqmc9P7rK2","name":"layout.footer","path":"ar\/resource\/select-menu","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ar"},"checksum":"0895511fa6d8a97264f8943f36be565eec89359204e5a9e54a49c58814b5b7e6"}" wire:effects="[]" wire:id="5NTwr3GenxTqmc9P7rK2" 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="09YeuJmezkXahIAbok7v72yhEW4bhNMYx5Ggq1J4" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>