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="realistic-clock"> <div class="clock-face"> <div class="glass-cover"></div> <div class="hour hand"></div> <div class="minute hand"></div> <div class="second hand"></div> <div class="center-circle"></div> <div class="clock-numbers"> <p style="top: 0.5px; left: 135px;" class="number">12</p> <p style="top: 100px; right: 10px;" class="number">3</p> <p style="bottom: 0.5px; left: 135px;" class="number">6</p> <p style="top: 100px; left: 10px;" class="number">9</p> </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">.realistic-clock { position: relative; width: 300px; height: 300px; margin: 50px auto; } .clock-face { position: relative; width: 100%; height: 100%; background: radial-gradient(circle, #333, #111); border-radius: 50%; border: 10px solid #cec5c5; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1); } .glass-cover { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3); pointer-events: none; } .center-circle { position: absolute; width: 20px; height: 20px; background: radial-gradient(circle, #666, #333); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); } .hand { position: absolute; background: #222; border-radius: 2px; left: 50%; transform-origin: bottom; transform: translateX(-50%); box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); } .hour { width: 10px; height: 100px; top: 70px; background: linear-gradient(to bottom, #1d6981, #444); animation: rotate-hour 43200s linear infinite; } .minute { width: 6px; height: 100px; top: 60px; background: linear-gradient(to bottom, #bbb, #666); animation: rotate-minute 3600s linear infinite; } .second { width: 3px; height: 100px; top: 45px; background: red; animation: rotate-second 60s linear infinite; } .number { position: absolute; font-size: 20px; font-weight: bold; color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); } @keyframes rotate-hour { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes rotate-minute { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes rotate-second { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }</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">المشاهدات : 48</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-142 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .grid { --perspective: 800px; position: absolute; left: 0; right: 0; top: -2.5rem; bottom: -2.5rem; display: grid; grid-template-columns: repeat(5, 1fr); transform-style: preserve-3d; } .grid .area { position: relative; z-index: 1; } .grid input { opacity: 0; width: 0; height: 0; position: absolute; } .grid::after, .grid::before { content: ""; position: absolute; inset: 0; margin: auto; filter: blur(70px); opacity: 0.5; pointer-events: none; } .grid::after { width: 600px; height: 380px; background: radial-gradient(#f0d4e9 100%, #ae98c7 0%); transform: translateZ(-100px) translateX(-40px) translateY(-120px); } .grid::before { width: 500px; height: 500px; background: radial-gradient(#b0a8d9 100%, #a2a1bf 0%); transform: translateZ(-120px) translateX(100px) translateY(100px); } .wrap { display: flex; align-items: center; justify-items: center; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 9; transform-style: preserve-3d; cursor: pointer; } .card { transform-style: preserve-3d; padding: 7px 7px 7px 7px; will-change: transform; transition: all 0.6s ease; width: 326px; height: 360px; border-radius: 25px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(0, 0, 60, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.5); padding-bottom: 70px; pointer-events: none; } .card::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; transition: all 0.5s linear; background: rgba(208, 228, 255, 0.3); backdrop-filter: blur(10px); } .outline { position: absolute; overflow: hidden; inset: 0; outline: none; transition: all 0.4s ease; border-radius: 27px; transform-style: preserve-3d; } .outline::before { content: ""; position: absolute; inset: 0; width: 400px; height: 550px; margin: auto; background: linear-gradient( to right, transparent 0%, white 50%, transparent 100% ); animation: rotate 3s linear infinite; transform: translateZ(10px); animation-play-state: paused; } .wave { position: absolute; width: 200px; height: 200px; inset: 0; bottom: 60px; margin: auto; opacity: 0; transition: all 0.3s linear; } .wave::before, .wave::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 30px rgba(106, 76, 172, 0.5); filter: blur(2px); inset: 0; animation: wave 1.5s linear infinite; } .wave::after { animation-delay: 0.4s; } .circle-1 { width: 224px; height: 224px; border-radius: 50%; position: absolute; box-shadow: inset 0 0 3px 0 white, inset 60px 40px 30px -40px rgba(106, 76, 172, 0.15), 20px 20px 70px -5px rgb(150, 166, 197), -50px -50px 70px 20px rgba(255, 255, 255, 0.7), inset 0 0 30px 0 white; background: hsl(0deg 0% 70% / 10%); display: flex; align-items: center; justify-content: center; animation: circle1 4.2s ease-in-out infinite 0.3s; transform-style: preserve-3d; z-index: 1; --z: 0px; } .circle-1::after, .circle-1::before { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); width: 30%; height: 30%; } .circle-1::before { background: #ff0073; top: 30%; right: 30%; } .circle-1::after { background: #00baff; bottom: 10%; left: 30%; } .circle-1 .lines { animation: rotate 30s linear infinite; } .circle-1 .lines svg { stroke: white; animation: lines 3s ease-in-out infinite; stroke-width: 2px; } .circle-1 .lines path { animation: line 3s ease-in-out calc(var(--i) * -1s) infinite; stroke-dasharray: 100; stroke-dashoffset: 10; transition: all 0.3s linear; } .circle-2 { width: 123px; height: 123px; border-radius: 50%; position: absolute; transform-style: preserve-3d; animation: circle2 4.2s ease-in-out infinite; background-color: white; z-index: 9; --z: 10px; } .circle-2::before, .circle-2::after { content: ""; position: absolute; border-radius: 50%; filter: blur(30px); z-index: 1; } .circle-2::before { background: #ff0073; width: 30%; height: 30%; top: 20%; right: 20%; } .circle-2::after { background: #00bbff; width: 20%; height: 20%; bottom: 10%; left: 40%; } .circle-2 .bg { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 25px 10px rgba(255, 255, 255, 0.8), 0 0 10px 10px rgba(255, 255, 255, 0.9); background-color: #9292d8; animation: bgRotate 2.5s linear infinite; animation-play-state: paused; transition: all 0.3s ease; } .circle-2 .bg::before { content: ""; position: absolute; inset: 0; animation: bg 4s linear infinite; border-radius: inherit; transition: all 0.4s linear; box-shadow: inset 0 0 25px 10px rgba(255, 255, 255, 0.8); opacity: 0; } .icon { transform: translateZ(50px); display: flex; align-items: center; justify-content: center; padding-top: 4px; position: absolute; z-index: 1; } .icon svg { width: 64px; transition: all 0.8s cubic-bezier(0.7, -1, 0.3, 1.5); position: absolute; } .icon-2 { transform: translateY(80px) scale(0.7) rotateX(90deg); filter: blur(2px); opacity: 0; mask-image: linear-gradient( to bottom, rgb(255 255 255 / 100%) 10%, rgb(255 255 255 / 20%) ); } .icon-2 .cut { stroke-dasharray: 732; stroke-dashoffset: 732; animation: reducePath 0.5s ease forwards; } .card footer { transform: translateZ(10px); padding: 12px 18px; position: absolute; bottom: 17px; left: 17px; right: 17px; transform-style: preserve-3d; } .card footer::before { content: ""; border-radius: 15px; animation: footer 9s ease infinite 0.8s; position: absolute; z-index: -1; inset: 0; filter: blur(15px) brightness(1.5); transform: scaleY(0); background: rgba(236, 237, 246, 0.7); box-shadow: inset 0 0 2px 0 white, 0 5px 10px -5px rgba(0, 0, 60, 0.25); backdrop-filter: blur(5px); background: linear-gradient( to bottom, rgb(242 243 252 / 80%) 0%, rgb(220 220 232 / 80%) 100% ); } .card footer p { display: flex; flex-wrap: wrap; gap: 0 4px; font-size: 11px; position: relative; z-index: 10; transform: translateZ(20px); line-height: 17px; transition: all 0.3s ease; color: #696969; } .card footer .bold { font-weight: 600; color: black; } .card footer span { display: inline-block; animation: labels 9s ease calc(1s + var(--i) * 0.05s) infinite; opacity: 0; } /** STATES */ .wrap input:checked + .card .circle-1, .wrap input:checked + .card .circle-2, .wrap input:checked + .card .circle-1 .lines, .wrap input:checked + .card .circle-1 .lines svg, .wrap input:checked + .card .circle-1 .lines path, .wrap input:checked + .card .outline::before, .wrap input:checked + .card .circle-2 .bg { animation-play-state: paused; } .wrap input:checked + .card .circle-1 .lines path { opacity: 0; } .wrap input:checked + .card .wave { opacity: 0; } .wrap:hover .card:before { backdrop-filter: blur(10px); background: transparent; } .wrap:hover .outline::before { animation-play-state: running; } .wrap:hover input:checked + .card .icon-2 { transform: translateY(80px) scale(0.7) rotateX(90deg); filter: blur(2px); opacity: 0; } .wrap:hover input:checked + .card .icon-1 { transform: none; filter: none; opacity: 1; } .wrap:hover .icon-1 { transform: translateY(-80px) scale(0.7) rotateX(90deg); filter: blur(2px); opacity: 0; } .wrap:hover .icon-2 { transform: none; filter: none; opacity: 0.6; } .wrap:hover .icon-2 .cut { animation: growPath 0.3s ease 0.6s forwards; } .wrap:hover footer p { transform: translateY(-4px) translateZ(20px); } .wrap:hover .bg { animation-play-state: running; } .wrap:hover .wave { opacity: 1; } .wrap:hover .circle-2 .bg::before { opacity: 0.2; } .wrap:hover .card { transform: perspective(var(--perspective)) rotateX(0) rotateY(0) scale3d(1, 1, 1); } .area:nth-child(15):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(15deg) scale3d(1, 1, 1); } .area:nth-child(14):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(7deg) scale3d(1, 1, 1); } .area:nth-child(13):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(0) scale3d(1, 1, 1); } .area:nth-child(12):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(-7deg) scale3d(1, 1, 1); } .area:nth-child(11):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(-15deg) scale3d(1, 1, 1); } .area:nth-child(10):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(0) rotateY(15deg) scale3d(1, 1, 1); } .area:nth-child(9):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(0) rotateY(7deg) scale3d(1, 1, 1); } .area:nth-child(8):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(0) rotateY(0) scale3d(1, 1, 1); } .area:nth-child(7):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(0) rotateY(-7deg) scale3d(1, 1, 1); } .area:nth-child(6):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(0) rotateY(-15deg) scale3d(1, 1, 1); } .area:nth-child(5):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(15deg) rotateY(15deg) scale3d(1, 1, 1); } .area:nth-child(4):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(15deg) rotateY(7deg) scale3d(1, 1, 1); } .area:nth-child(3):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(15deg) rotateY(0) scale3d(1, 1, 1); } .area:nth-child(2):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(15deg) rotateY(-7deg) scale3d(1, 1, 1); } .area:nth-child(1):hover ~ .wrap .card { transform: perspective(var(--perspective)) rotateX(15deg) rotateY(-15deg) scale3d(1, 1, 1); } @keyframes lines { 0% { transform: scale(0.41); } 15% { transform: scale(0.37); } 36% { transform: scale(0.41); } 50% { transform: scale(0.38); } 65% { transform: scale(0.43); } 80% { transform: scale(0.39); } 100% { transform: scale(0.41); } } @keyframes line { 0% { stroke-dashoffset: 10; } 50% { stroke-dashoffset: 45; } 100% { stroke-dashoffset: 10; } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes circle1 { 0% { transform: scale(0.97) translateZ(calc(20px + var(--z))); } 15% { transform: scale(1) translateZ(calc(30px + var(--z))); } 30% { transform: scale(0.98) translateZ(calc(20px + var(--z))); } 45% { transform: scale(1) translateZ(calc(30px + var(--z))); } 60% { transform: scale(0.97) translateZ(calc(20px + var(--z))); } 85% { transform: scale(1) translateZ(calc(30px + var(--z))); } 100% { transform: scale(0.97) translateZ(calc(20px + var(--z))); } } @keyframes circle2 { 0% { transform: scale(1) translateZ(calc(20px + var(--z))); } 15% { transform: scale(1.03) translateZ(calc(30px + var(--z))); } 30% { transform: scale(0.98) translateZ(calc(20px + var(--z))); } 45% { transform: scale(1.04) translateZ(calc(30px + var(--z))); } 60% { transform: scale(0.97) translateZ(calc(20px + var(--z))); } 85% { transform: scale(1.03) translateZ(calc(30px + var(--z))); } 100% { transform: scale(1) translateZ(calc(20px + var(--z))); } } @keyframes growPath { from { stroke-dashoffset: 732; } to { stroke-dashoffset: 0; } } @keyframes reducePath { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 732; } } @keyframes bgRotate { 0% { transform: rotate(0deg); } 20% { transform: rotate(90deg); } 40% { transform: rotate(180deg) scale(0.95, 1); } 60%, 100% { transform: rotate(360deg); } } @keyframes bg { 20% { background-color: red; } 40% { background-color: #5eff7e; } 60% { background-color: #2cb5ff; } 80% { background-color: #fc63ff; } } @keyframes wave { 0% { transform: scale(1); opacity: 0; box-shadow: 0 0 30px rgba(106, 76, 172, 0.9); } 35% { transform: scale(1.3); opacity: 1; } 70%, 100% { transform: scale(1.6); opacity: 0; box-shadow: 0 0 30px rgba(106, 76, 172, 0.3); } } @keyframes footer { 0%, 3% { transform: scaleY(0); filter: blur(15px) brightness(1.5); } 10%, 82% { filter: blur(0); transform: scaleY(1); } 86% { transform: scaleY(0); filter: blur(15px) brightness(1.5); } } @keyframes labels { 0% { transform: translateY(-30px) rotate(-30deg); filter: blur(10px); } 5% { transform: translateY(10px); filter: blur(0); } 10% { transform: translateY(0); opacity: 1; } 73% { transform: translateY(0); opacity: 1; } 76% { transform: translateY(-5px); filter: blur(0); } 80% { transform: translateY(15px); opacity: 0; filter: blur(5px); } } 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="grid"> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <div class="area"></div> <label class="wrap"> <input type="checkbox" /> <div class="card"> <div class="wave"></div> <div class="outline"></div> <div class="circle-1"> <div class="lines"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 463 462" stroke="currentColor" height="462" width="463" > <path stroke-linecap="round" d="M231.5 97V5" style="--i: 1"></path> <path stroke-linecap="round" d="M239.914 97.2644L245.691 5.44598" style="--i: 2" ></path> <path stroke-linecap="round" d="M248.295 98.0566L259.825 6.78207" style="--i: 3" ></path> <path stroke-linecap="round" d="M256.609 99.3735L273.848 9.00308" style="--i: 4" ></path> <path stroke-linecap="round" d="M264.824 101.21L287.704 12.1002" style="--i: 5" ></path> <path stroke-linecap="round" d="M272.908 103.558L301.338 16.0612" style="--i: 6" ></path> <path stroke-linecap="round" d="M280.829 106.41L314.696 20.8705" style="--i: 7" ></path> <path stroke-linecap="round" d="M288.554 109.753L327.726 26.5091" style="--i: 8" ></path> <path stroke-linecap="round" d="M296.055 113.575L340.376 32.9547" style="--i: 9" ></path> <path stroke-linecap="round" d="M303.301 117.86L352.597 40.1819" style="--i: 10" ></path> <path stroke-linecap="round" d="M310.263 122.592L364.339 48.1622" style="--i: 11" ></path> <path stroke-linecap="round" d="M316.915 127.751L375.558 56.864" style="--i: 12" ></path> <path stroke-linecap="round" d="M323.229 133.318L386.208 66.2531" style="--i: 13" ></path> <path stroke-linecap="round" d="M329.182 139.271L396.247 76.2924" style="--i: 14" ></path> <path stroke-linecap="round" d="M334.749 145.585L405.636 86.9422" style="--i: 15" ></path> <path stroke-linecap="round" d="M339.908 152.237L414.338 98.1605" style="--i: 16" ></path> <path stroke-linecap="round" d="M344.64 159.199L422.318 109.903" style="--i: 17" ></path> <path stroke-linecap="round" d="M348.925 166.445L429.545 122.124" style="--i: 18" ></path> <path stroke-linecap="round" d="M352.747 173.946L435.991 134.774" style="--i: 19" ></path> <path stroke-linecap="round" d="M356.09 181.671L441.629 147.804" style="--i: 20" ></path> <path stroke-linecap="round" d="M358.942 189.592L446.439 161.162" style="--i: 21" ></path> <path stroke-linecap="round" d="M361.29 197.676L450.4 174.796" style="--i: 22" ></path> <path stroke-linecap="round" d="M363.126 205.891L453.497 188.652" style="--i: 23" ></path> <path stroke-linecap="round" d="M364.443 214.205L455.718 202.675" style="--i: 24" ></path> <path stroke-linecap="round" d="M365.236 222.586L457.054 216.809" style="--i: 25" ></path> <path stroke-linecap="round" d="M365.5 231L457.5 231" style="--i: 26" ></path> <path stroke-linecap="round" d="M365.236 239.414L457.054 245.191" style="--i: 27" ></path> <path stroke-linecap="round" d="M364.443 247.795L455.718 259.325" style="--i: 28" ></path> <path stroke-linecap="round" d="M363.126 256.109L453.497 273.348" style="--i: 29" ></path> <path stroke-linecap="round" d="M361.29 264.324L450.4 287.204" style="--i: 30" ></path> <path stroke-linecap="round" d="M358.942 272.408L446.439 300.838" style="--i: 31" ></path> <path stroke-linecap="round" d="M356.09 280.329L441.629 314.196" style="--i: 32" ></path> <path stroke-linecap="round" d="M352.747 288.054L435.991 327.226" style="--i: 33" ></path> <path stroke-linecap="round" d="M348.925 295.555L429.545 339.876" style="--i: 34" ></path> <path stroke-linecap="round" d="M344.64 302.801L422.318 352.097" style="--i: 35" ></path> <path stroke-linecap="round" d="M339.908 309.763L414.338 363.839" style="--i: 36" ></path> <path stroke-linecap="round" d="M334.749 316.415L405.636 375.058" style="--i: 37" ></path> <path stroke-linecap="round" d="M329.182 322.729L396.247 385.708" style="--i: 38" ></path> <path stroke-linecap="round" d="M323.229 328.682L386.208 395.747" style="--i: 39" ></path> <path stroke-linecap="round" d="M316.915 334.249L375.558 405.136" style="--i: 40" ></path> <path stroke-linecap="round" d="M310.263 339.408L364.339 413.838" style="--i: 41" ></path> <path stroke-linecap="round" d="M303.301 344.14L352.597 421.818" style="--i: 42" ></path> <path stroke-linecap="round" d="M296.055 348.425L340.376 429.045" style="--i: 43" ></path> <path stroke-linecap="round" d="M288.554 352.247L327.726 435.491" style="--i: 44" ></path> <path stroke-linecap="round" d="M280.829 355.59L314.696 441.129" style="--i: 45" ></path> <path stroke-linecap="round" d="M272.908 358.442L301.338 445.939" style="--i: 46" ></path> <path stroke-linecap="round" d="M264.824 360.79L287.704 449.9" style="--i: 47" ></path> <path stroke-linecap="round" d="M256.609 362.626L273.848 452.997" style="--i: 48" ></path> <path stroke-linecap="round" d="M248.295 363.943L259.825 455.218" style="--i: 49" ></path> <path stroke-linecap="round" d="M239.914 364.736L245.691 456.554" style="--i: 50" ></path> <path stroke-linecap="round" d="M231.5 365L231.5 457" style="--i: 51" ></path> <path stroke-linecap="round" d="M223.086 364.736L217.309 456.554" style="--i: 52" ></path> <path stroke-linecap="round" d="M214.705 363.943L203.175 455.218" style="--i: 53" ></path> <path stroke-linecap="round" d="M206.391 362.626L189.152 452.997" style="--i: 54" ></path> <path stroke-linecap="round" d="M198.176 360.79L175.296 449.9" style="--i: 55" ></path> <path stroke-linecap="round" d="M190.092 358.442L161.662 445.939" style="--i: 56" ></path> <path stroke-linecap="round" d="M182.171 355.59L148.304 441.129" style="--i: 57" ></path> <path stroke-linecap="round" d="M174.446 352.247L135.274 435.491" style="--i: 58" ></path> <path stroke-linecap="round" d="M166.945 348.425L122.624 429.045" style="--i: 59" ></path> <path stroke-linecap="round" d="M159.699 344.14L110.403 421.818" style="--i: 60" ></path> <path stroke-linecap="round" d="M152.737 339.408L98.6605 413.838" style="--i: 61" ></path> <path stroke-linecap="round" d="M146.085 334.249L87.4422 405.136" style="--i: 62" ></path> <path stroke-linecap="round" d="M139.771 328.682L76.7924 395.747" style="--i: 63" ></path> <path stroke-linecap="round" d="M133.818 322.729L66.7531 385.708" style="--i: 64" ></path> <path stroke-linecap="round" d="M128.251 316.415L57.364 375.058" style="--i: 65" ></path> <path stroke-linecap="round" d="M123.092 309.763L48.6622 363.839" style="--i: 66" ></path> <path stroke-linecap="round" d="M118.36 302.801L40.6819 352.097" style="--i: 67" ></path> <path stroke-linecap="round" d="M114.075 295.555L33.4547 339.876" style="--i: 68" ></path> <path stroke-linecap="round" d="M110.253 288.054L27.0091 327.226" style="--i: 69" ></path> <path stroke-linecap="round" d="M106.91 280.329L21.3705 314.196" style="--i: 70" ></path> <path stroke-linecap="round" d="M104.058 272.408L16.5612 300.838" style="--i: 71" ></path> <path stroke-linecap="round" d="M101.71 264.324L12.6002 287.204" style="--i: 72" ></path> <path stroke-linecap="round" d="M99.8735 256.109L9.50308 273.348" style="--i: 73" ></path> <path stroke-linecap="round" d="M98.5566 247.795L7.28207 259.325" style="--i: 74" ></path> <path stroke-linecap="round" d="M97.7644 239.414L5.94596 245.191" style="--i: 75" ></path> <path stroke-linecap="round" d="M97.5 231H5.5" style="--i: 76" ></path> <path stroke-linecap="round" d="M97.7644 222.586L5.94598 216.809" style="--i: 77" ></path> <path stroke-linecap="round" d="M98.5566 214.205L7.28207 202.675" style="--i: 78" ></path> <path stroke-linecap="round" d="M99.8735 205.891L9.50308 188.652" style="--i: 79" ></path> <path stroke-linecap="round" d="M101.71 197.676L12.6002 174.796" style="--i: 80" ></path> <path stroke-linecap="round" d="M104.058 189.592L16.5612 161.162" style="--i: 81" ></path> <path stroke-linecap="round" d="M106.91 181.671L21.3705 147.804" style="--i: 82" ></path> <path stroke-linecap="round" d="M110.253 173.946L27.0091 134.774" style="--i: 83" ></path> <path stroke-linecap="round" d="M114.075 166.445L33.4547 122.124" style="--i: 84" ></path> <path stroke-linecap="round" d="M118.36 159.199L40.6819 109.903" style="--i: 85" ></path> <path stroke-linecap="round" d="M123.092 152.237L48.6622 98.1605" style="--i: 86" ></path> <path stroke-linecap="round" d="M128.251 145.585L57.364 86.9422" style="--i: 87" ></path> <path stroke-linecap="round" d="M133.818 139.271L66.7531 76.2924" style="--i: 88" ></path> <path stroke-linecap="round" d="M139.771 133.318L76.7923 66.2531" style="--i: 89" ></path> <path stroke-linecap="round" d="M146.085 127.751L87.4422 56.864" style="--i: 90" ></path> <path stroke-linecap="round" d="M152.737 122.592L98.6605 48.1622" style="--i: 91" ></path> <path stroke-linecap="round" d="M159.699 117.86L110.403 40.1819" style="--i: 92" ></path> <path stroke-linecap="round" d="M166.945 113.575L122.624 32.9547" style="--i: 93" ></path> <path stroke-linecap="round" d="M174.446 109.753L135.274 26.5091" style="--i: 94" ></path> <path stroke-linecap="round" d="M182.171 106.41L148.304 20.8705" style="--i: 95" ></path> <path stroke-linecap="round" d="M190.092 103.558L161.662 16.0612" style="--i: 96" ></path> <path stroke-linecap="round" d="M198.176 101.21L175.296 12.1002" style="--i: 97" ></path> <path stroke-linecap="round" d="M206.391 99.3735L189.152 9.00308" style="--i: 98" ></path> <path stroke-linecap="round" d="M214.705 98.0566L203.175 6.78207" style="--i: 99" ></path> <path stroke-linecap="round" d="M223.086 97.2644L217.309 5.44595" style="--i: 100" ></path> </svg> </div> </div> <div class="circle-2"> <div class="bg"></div> </div> <div class="icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon-1" > <defs> <linearGradient y2="100%" x2="0%" y1="0%" x1="0%" id="grad-1"> <stop stop-color="rgba(255, 255, 255, 0.6)" offset="0%"></stop> <stop stop-color="rgba(255, 255, 255, 0.2)" offset="100%"></stop> </linearGradient> </defs> <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 1 0 6 0V5a3 3 0 0 0-3-3zM5 12a1 1 0 1 1 2 0 5 5 0 0 0 10 0 1 1 0 1 1 2 0 7.001 7.001 0 0 1-6 6.93V21a1 1 0 1 1-2 0v-2.07A7.001 7.001 0 0 1 5 12z" clip-rule="evenodd" fill-rule="evenodd" fill="url(#grad-1)" ></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 800 800" class="icon-2" > <path d="M623.961 465.502C630.134 444.383 633.336 422.34 633.333 400C633.333 391.16 629.822 382.681 623.57 376.43C617.319 370.179 608.841 366.667 600 366.667C591.16 366.667 582.681 370.179 576.43 376.43C570.179 382.681 566.667 391.16 566.667 400C566.667 402.679 566.602 405.351 566.474 408.015L623.961 465.502ZM546.326 479.791C538.769 493.651 529.215 506.487 517.851 517.851C486.595 549.107 444.203 566.667 400 566.667C355.797 566.667 313.405 549.107 282.149 517.851C250.893 486.595 233.333 444.203 233.333 400C233.333 391.16 229.822 382.681 223.57 376.43C217.319 370.179 208.841 366.667 200 366.667C191.16 366.667 182.681 370.179 176.43 376.43C170.179 382.681 166.667 391.16 166.667 400C166.659 456.117 186.873 510.358 223.605 552.783C260.337 595.208 311.126 622.977 366.667 631V700C366.667 708.841 370.179 717.319 376.43 723.57C382.681 729.822 391.16 733.333 400 733.333C408.841 733.333 417.319 729.822 423.57 723.57C429.822 717.319 433.333 708.841 433.333 700V631C488.874 622.977 539.663 595.208 576.395 552.783C583.12 545.015 589.292 536.851 594.887 528.352L546.326 479.791ZM500 341.541V166.667C500 140.145 489.464 114.71 470.711 95.9561C451.957 77.2024 426.522 66.6667 400 66.6667C373.478 66.6667 348.043 77.2024 329.289 95.9561C315.947 109.299 306.764 126.024 302.576 144.116L500 341.541ZM300 233.464L495.664 429.128C490.926 444.686 482.421 459.001 470.711 470.711C451.957 489.464 426.522 500 400 500C373.478 500 348.043 489.464 329.289 470.711C310.536 451.957 300 426.522 300 400V233.464Z" clip-rule="evenodd" fill-rule="evenodd" ></path> <path stroke-linecap="round" stroke-width="60" stroke="white" d="M150.368 125.871L667.5 643.002" class="cut" ></path> </svg> </div> <footer> <p> <span class="bold" style="--i: 1">Advanced</span> <span class="bold" style="--i: 2">voice-activated</span> <span class="bold" style="--i: 3">AI.</span> <span style="--i: 4">Control</span> <span style="--i: 5">your</span> <span style="--i: 6">world</span> <span style="--i: 7">hands-free</span> <span style="--i: 8">with</span> <span style="--i: 9">instant</span> <span style="--i: 10">voice</span> <span style="--i: 11">commands.</span> </p> </footer> </div> </label> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="q4N69UFP2apvWNTTJZQTDPZp4ZEWhpQIkO78efm5" 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/weather-card' class="flex ltr justify-center items-center whitespace-nowrap rounded-lg px-3 text-sm font-medium dark:text-gray-50 text-gray-900"> <svg class="fill-gray-900 dark:fill-gray-50 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="14"> <path d="M12.82 8.116A.5.5 0 0 0 12 8.5V10h-.185a3 3 0 0 1-2.258-1.025l-.4-.457-1.328 1.519.223.255A5 5 0 0 0 11.815 12H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM12.82.116A.5.5 0 0 0 12 .5V2h-.185a5 5 0 0 0-3.763 1.708L3.443 8.975A3 3 0 0 1 1.185 10H1a1 1 0 1 0 0 2h.185a5 5 0 0 0 3.763-1.708l4.609-5.267A3 3 0 0 1 11.815 4H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM1 4h.185a3 3 0 0 1 2.258 1.025l.4.457 1.328-1.52-.223-.254A5 5 0 0 0 1.185 2H1a1 1 0 0 0 0 2Z" /> </svg> <span>عرض الكود</span> </a> </div> </div> <div class="block relative bg-gray-50 dark:bg-gray-800 shadow-lg rounded-xl border border-gray-300 dark:border-gray-700"> <div class="flex px-4 pt-3 gap-2"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 48 48"> <path fill="#00acc1" d="M24,9.604c-6.4,0-10.4,3.199-12,9.597c2.4-3.199,5.2-4.398,8.4-3.599 c1.826,0.456,3.131,1.781,4.576,3.247C27.328,21.236,30.051,24,36,24c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.6 c-1.825-0.456-3.13-1.781-4.575-3.247C32.672,12.367,29.948,9.604,24,9.604L24,9.604z M12,24c-6.4,0-10.4,3.199-12,9.598 c2.4-3.199,5.2-4.399,8.4-3.599c1.825,0.457,3.13,1.781,4.575,3.246c2.353,2.388,5.077,5.152,11.025,5.152 c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.599c-1.826-0.456-3.131-1.781-4.576-3.246C20.672,26.764,17.949,24,12,24 L12,24z"></path> </svg> <p class="dark:text-gray-50 text-gray-800 ">Tailwind CSS</p> </div> <iframe id="iframe-139 " 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 flex justify-center h-[300px] w-[160px] border border-4 border-black rounded-2xl bg-gray-50" > <span class="border border-black bg-black w-20 h-2 rounded-br-xl rounded-bl-xl" ></span> <span class="absolute -right-2 top-14 border border-4 border-black h-7 rounded-md" ></span> <span class="absolute -right-2 bottom-36 border border-4 border-black h-10 rounded-md" ></span> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="q4N69UFP2apvWNTTJZQTDPZp4ZEWhpQIkO78efm5" 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"> u8 بطاقة </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/card-u8' class="flex ltr justify-center items-center whitespace-nowrap rounded-lg px-3 text-sm font-medium dark:text-gray-50 text-gray-900"> <svg class="fill-gray-900 dark:fill-gray-50 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="14"> <path d="M12.82 8.116A.5.5 0 0 0 12 8.5V10h-.185a3 3 0 0 1-2.258-1.025l-.4-.457-1.328 1.519.223.255A5 5 0 0 0 11.815 12H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM12.82.116A.5.5 0 0 0 12 .5V2h-.185a5 5 0 0 0-3.763 1.708L3.443 8.975A3 3 0 0 1 1.185 10H1a1 1 0 1 0 0 2h.185a5 5 0 0 0 3.763-1.708l4.609-5.267A3 3 0 0 1 11.815 4H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM1 4h.185a3 3 0 0 1 2.258 1.025l.4.457 1.328-1.52-.223-.254A5 5 0 0 0 1.185 2H1a1 1 0 0 0 0 2Z" /> </svg> <span>عرض الكود</span> </a> </div> </div> <div class="block relative bg-gray-50 dark:bg-gray-800 shadow-lg rounded-xl border border-gray-300 dark:border-gray-700"> <div class="flex px-4 pt-3 gap-2"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 48 48"> <path fill="#00acc1" d="M24,9.604c-6.4,0-10.4,3.199-12,9.597c2.4-3.199,5.2-4.398,8.4-3.599 c1.826,0.456,3.131,1.781,4.576,3.247C27.328,21.236,30.051,24,36,24c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.6 c-1.825-0.456-3.13-1.781-4.575-3.247C32.672,12.367,29.948,9.604,24,9.604L24,9.604z M12,24c-6.4,0-10.4,3.199-12,9.598 c2.4-3.199,5.2-4.399,8.4-3.599c1.825,0.457,3.13,1.781,4.575,3.246c2.353,2.388,5.077,5.152,11.025,5.152 c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.599c-1.826-0.456-3.131-1.781-4.576-3.246C20.672,26.764,17.949,24,12,24 L12,24z"></path> </svg> <p class="dark:text-gray-50 text-gray-800 ">Tailwind CSS</p> </div> <iframe id="iframe-105 " 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="absolute z-50 flex w-3/4 max-w-96 h-24 bg-white rounded-xl overflow-hidden shadow-lg" > <svg width="16" height="96" xmlns="http://www.w3.org/2000/svg"> <path d="M 8 0 Q 4 4.8, 8 9.6 T 8 19.2 Q 4 24, 8 28.8 T 8 38.4 Q 4 43.2, 8 48 T 8 57.6 Q 4 62.4, 8 67.2 T 8 76.8 Q 4 81.6, 8 86.4 T 8 96 L 0 96 L 0 0 Z" fill="#66cdaa" stroke="#66cdaa" stroke-width="2" stroke-linecap="round" ></path> </svg> <div class="mx-2.5 overflow-hidden w-full"> <p class="mt-1.5 text-xl font-bold text-[#66cdaa] leading-8 mr-3 overflow-hidden text-ellipsis whitespace-nowrap" > Success ! </p> <p class="overflow-hidden leading-5 break-all text-zinc-400 max-h-10"> So good!<br /> The post has been published. </p> </div> <button class="w-16 cursor-pointer focus:outline-none"> <svg class="w-7 h-7" fill="none" stroke="mediumseagreen" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" ></path> </svg> </button> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="q4N69UFP2apvWNTTJZQTDPZp4ZEWhpQIkO78efm5" 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/notification-card' class="flex ltr justify-center items-center whitespace-nowrap rounded-lg px-3 text-sm font-medium dark:text-gray-50 text-gray-900"> <svg class="fill-gray-900 dark:fill-gray-50 mr-2" xmlns="http://www.w3.org/2000/svg" width="16" height="14"> <path d="M12.82 8.116A.5.5 0 0 0 12 8.5V10h-.185a3 3 0 0 1-2.258-1.025l-.4-.457-1.328 1.519.223.255A5 5 0 0 0 11.815 12H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM12.82.116A.5.5 0 0 0 12 .5V2h-.185a5 5 0 0 0-3.763 1.708L3.443 8.975A3 3 0 0 1 1.185 10H1a1 1 0 1 0 0 2h.185a5 5 0 0 0 3.763-1.708l4.609-5.267A3 3 0 0 1 11.815 4H12v1.5a.5.5 0 0 0 .82.384l3-2.5a.5.5 0 0 0 0-.768l-3-2.5ZM1 4h.185a3 3 0 0 1 2.258 1.025l.4.457 1.328-1.52-.223-.254A5 5 0 0 0 1.185 2H1a1 1 0 0 0 0 2Z" /> </svg> <span>عرض الكود</span> </a> </div> </div> <div class="block relative bg-gray-50 dark:bg-gray-800 shadow-lg rounded-xl border border-gray-300 dark:border-gray-700"> <div class="flex px-4 pt-3 gap-2"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="22" height="22" viewBox="0 0 48 48"> <path fill="#00acc1" d="M24,9.604c-6.4,0-10.4,3.199-12,9.597c2.4-3.199,5.2-4.398,8.4-3.599 c1.826,0.456,3.131,1.781,4.576,3.247C27.328,21.236,30.051,24,36,24c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.6 c-1.825-0.456-3.13-1.781-4.575-3.247C32.672,12.367,29.948,9.604,24,9.604L24,9.604z M12,24c-6.4,0-10.4,3.199-12,9.598 c2.4-3.199,5.2-4.399,8.4-3.599c1.825,0.457,3.13,1.781,4.575,3.246c2.353,2.388,5.077,5.152,11.025,5.152 c6.4,0,10.4-3.199,12-9.598c-2.4,3.199-5.2,4.399-8.4,3.599c-1.826-0.456-3.131-1.781-4.576-3.246C20.672,26.764,17.949,24,12,24 L12,24z"></path> </svg> <p class="dark:text-gray-50 text-gray-800 ">Tailwind CSS</p> </div> <iframe id="iframe-103 " 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 h-full w-full flex items-center justify-center"> <div class="profileCard_container relative p-10 border-2 border-dashed rounded-full border-spacing-4 border-gray-400/50"> <button class="profile_item left-[45px] -top-[4px] absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500"> <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1"> <svg viewBox="0 0 128 128"> <g fill="#61DAFB"><circle r="11.4" cy="64" cx="64"></circle><path d="M107.3 45.2c-2.2-.8-4.5-1.6-6.9-2.3.6-2.4 1.1-4.8 1.5-7.1 2.1-13.2-.2-22.5-6.6-26.1-1.9-1.1-4-1.6-6.4-1.6-7 0-15.9 5.2-24.9 13.9-9-8.7-17.9-13.9-24.9-13.9-2.4 0-4.5.5-6.4 1.6-6.4 3.7-8.7 13-6.6 26.1.4 2.3.9 4.7 1.5 7.1-2.4.7-4.7 1.4-6.9 2.3C8.2 50 1.4 56.6 1.4 64s6.9 14 19.3 18.8c2.2.8 4.5 1.6 6.9 2.3-.6 2.4-1.1 4.8-1.5 7.1-2.1 13.2.2 22.5 6.6 26.1 1.9 1.1 4 1.6 6.4 1.6 7.1 0 16-5.2 24.9-13.9 9 8.7 17.9 13.9 24.9 13.9 2.4 0 4.5-.5 6.4-1.6 6.4-3.7 8.7-13 6.6-26.1-.4-2.3-.9-4.7-1.5-7.1 2.4-.7 4.7-1.4 6.9-2.3 12.5-4.8 19.3-11.4 19.3-18.8s-6.8-14-19.3-18.8zM92.5 14.7c4.1 2.4 5.5 9.8 3.8 20.3-.3 2.1-.8 4.3-1.4 6.6-5.2-1.2-10.7-2-16.5-2.5-3.4-4.8-6.9-9.1-10.4-13 7.4-7.3 14.9-12.3 21-12.3 1.3 0 2.5.3 3.5.9zM81.3 74c-1.8 3.2-3.9 6.4-6.1 9.6-3.7.3-7.4.4-11.2.4-3.9 0-7.6-.1-11.2-.4-2.2-3.2-4.2-6.4-6-9.6-1.9-3.3-3.7-6.7-5.3-10 1.6-3.3 3.4-6.7 5.3-10 1.8-3.2 3.9-6.4 6.1-9.6 3.7-.3 7.4-.4 11.2-.4 3.9 0 7.6.1 11.2.4 2.2 3.2 4.2 6.4 6 9.6 1.9 3.3 3.7 6.7 5.3 10-1.7 3.3-3.4 6.6-5.3 10zm8.3-3.3c1.5 3.5 2.7 6.9 3.8 10.3-3.4.8-7 1.4-10.8 1.9 1.2-1.9 2.5-3.9 3.6-6 1.2-2.1 2.3-4.2 3.4-6.2zM64 97.8c-2.4-2.6-4.7-5.4-6.9-8.3 2.3.1 4.6.2 6.9.2 2.3 0 4.6-.1 6.9-.2-2.2 2.9-4.5 5.7-6.9 8.3zm-18.6-15c-3.8-.5-7.4-1.1-10.8-1.9 1.1-3.3 2.3-6.8 3.8-10.3 1.1 2 2.2 4.1 3.4 6.1 1.2 2.2 2.4 4.1 3.6 6.1zm-7-25.5c-1.5-3.5-2.7-6.9-3.8-10.3 3.4-.8 7-1.4 10.8-1.9-1.2 1.9-2.5 3.9-3.6 6-1.2 2.1-2.3 4.2-3.4 6.2zM64 30.2c2.4 2.6 4.7 5.4 6.9 8.3-2.3-.1-4.6-.2-6.9-.2-2.3 0-4.6.1-6.9.2 2.2-2.9 4.5-5.7 6.9-8.3zm22.2 21l-3.6-6c3.8.5 7.4 1.1 10.8 1.9-1.1 3.3-2.3 6.8-3.8 10.3-1.1-2.1-2.2-4.2-3.4-6.2zM31.7 35c-1.7-10.5-.3-17.9 3.8-20.3 1-.6 2.2-.9 3.5-.9 6 0 13.5 4.9 21 12.3-3.5 3.8-7 8.2-10.4 13-5.8.5-11.3 1.4-16.5 2.5-.6-2.3-1-4.5-1.4-6.6zM7 64c0-4.7 5.7-9.7 15.7-13.4 2-.8 4.2-1.5 6.4-2.1 1.6 5 3.6 10.3 6 15.6-2.4 5.3-4.5 10.5-6 15.5C15.3 75.6 7 69.6 7 64zm28.5 49.3c-4.1-2.4-5.5-9.8-3.8-20.3.3-2.1.8-4.3 1.4-6.6 5.2 1.2 10.7 2 16.5 2.5 3.4 4.8 6.9 9.1 10.4 13-7.4 7.3-14.9 12.3-21 12.3-1.3 0-2.5-.3-3.5-.9zM96.3 93c1.7 10.5.3 17.9-3.8 20.3-1 .6-2.2.9-3.5.9-6 0-13.5-4.9-21-12.3 3.5-3.8 7-8.2 10.4-13 5.8-.5 11.3-1.4 16.5-2.5.6 2.3 1 4.5 1.4 6.6zm9-15.6c-2 .8-4.2 1.5-6.4 2.1-1.6-5-3.6-10.3-6-15.6 2.4-5.3 4.5-10.5 6-15.5 13.8 4 22.1 10 22.1 15.6 0 4.7-5.8 9.7-15.7 13.4z"></path></g> </svg> </span> </button> <button class="profile_item right-[45px] -top-[4px] absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500"> <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1"> <svg viewBox="0 0 48 48" y="0px" x="0px" xmlns="http://www.w3.org/2000/svg"> <path 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" fill="#00acc1"></path> </svg> </span> </button> <button class="profile_item -left-4 top-20 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500"> <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1"> <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M45.5 129c11.9 0 21.5-9.6 21.5-21.5V86H45.5C33.6 86 24 95.6 24 107.5S33.6 129 45.5 129zm0 0" fill="#0acf83"></path><path d="M24 64.5C24 52.6 33.6 43 45.5 43H67v43H45.5C33.6 86 24 76.4 24 64.5zm0 0" fill="#a259ff"></path><path d="M24 21.5C24 9.6 33.6 0 45.5 0H67v43H45.5C33.6 43 24 33.4 24 21.5zm0 0" fill="#f24e1e"></path><path d="M67 0h21.5C100.4 0 110 9.6 110 21.5S100.4 43 88.5 43H67zm0 0" fill="#ff7262"></path><path d="M110 64.5c0 11.9-9.6 21.5-21.5 21.5S67 76.4 67 64.5 76.6 43 88.5 43 110 52.6 110 64.5zm0 0" fill="#1abcfe"></path></svg> </span> </button> <button class="profile_item -right-4 top-20 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500"> <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1"> <svg viewBox="0 0 48 48" y="0px" x="0px" xmlns="http://www.w3.org/2000/svg"> <linearGradient gradientUnits="userSpaceOnUse" y2="40.968" y1="4.776" x2="35.821" x1="10.608" id="ezltMdBuodGDdUF~YSi~Aa_v9uZbuVoWleB_gr1"><stop stop-color="#0d61a9" offset="0"></stop><stop stop-color="#16528c" offset="1"></stop></linearGradient><path d="M24,4C12.97,4,4,12.976,4,24s8.97,20,19.999,20C35.03,44,44,35.024,44,24S35.03,4,24,4z" fill="url(#ezltMdBuodGDdUF~YSi~Aa_v9uZbuVoWleB_gr1)"></path><path opacity=".05" d="M24,43.001C13.521,43.001,4.995,34.477,4.995,24c0-10.476,8.525-18.999,19.004-18.999 c10.48,0,19.006,8.523,19.006,18.999C43.005,34.477,34.479,43.001,24,43.001z M20.778,38.651C21.83,38.883,22.912,39,24.001,39 c1.344,0,2.682-0.181,3.984-0.539l-3.676-10.072L20.778,38.651z M9.416,20.488C9.14,21.632,9.001,22.808,9.001,24 c0,4.864,2.259,9.284,6.111,12.093L9.416,20.488z M38.753,21.289c-0.211,0.895-0.507,1.818-0.893,2.783l-3.829,11.082 C37.169,32.322,39,28.265,39,24C39,23.088,38.917,22.182,38.753,21.289z M20.025,30.673l2.442-7.328l-2.265-6.308 c-0.613-0.051-1.086-0.112-1.086-0.112c-0.854-0.053-1.5-0.783-1.47-1.694c0.03-0.921,0.735-1.616,1.641-1.616l0.222,0.014 c1.825,0.125,3.188,0.188,4.051,0.188c1.606,0,4.162-0.195,4.188-0.197c0.001,0,0.002,0,0.003,0c1.006,0,1.715,0.637,1.77,1.549 c0.045,0.76-0.455,1.633-1.473,1.757c-0.078,0.009-0.294,0.034-0.596,0.062l4.483,13.401l0.693-2.308 c0.786-2.016,1.177-3.647,1.177-4.888c0-1.386-0.644-2.439-1.211-3.368c-0.117-0.191-0.228-0.373-0.327-0.546l-0.197-0.318 c-0.778-1.26-1.511-2.449-1.511-3.931c0-1.329,0.831-2.61,2.067-3.307C30.121,9.961,27.091,9,24.001,9 c-4.183,0-8.113,1.719-10.948,4.751c1.342-0.057,2.676-0.159,2.693-0.16l0.134-0.005c0.882,0,1.588,0.668,1.641,1.554 c0.045,0.76-0.457,1.634-1.478,1.757c-0.068,0.008-0.285,0.033-0.592,0.062L20.025,30.673z"></path><path opacity=".07" d="M24,42.501C13.796,42.501,5.495,34.202,5.495,24c0-10.2,8.301-18.499,18.504-18.499 C34.203,5.501,42.505,13.8,42.505,24C42.505,34.202,34.204,42.501,24,42.501z M20.126,39.009c1.258,0.326,2.559,0.491,3.875,0.491 c1.571,0,3.128-0.238,4.637-0.709l-4.343-11.898L20.126,39.009z M9.365,18.892C8.791,20.532,8.501,22.245,8.501,24 c0,5.553,2.88,10.554,7.599,13.339L9.365,18.892z M38.622,18.85c-0.106,1.604-0.502,3.227-1.225,5.036l-4.404,12.743 C37.039,33.739,39.5,29.021,39.5,24C39.5,22.245,39.2,20.5,38.622,18.85z M20.026,32.253l2.971-8.915l-2.433-6.775 c-0.747-0.052-1.384-0.134-1.384-0.134c-0.606-0.039-1.055-0.537-1.034-1.182c0.021-0.646,0.512-1.132,1.141-1.132 c0.119,0.005,2.741,0.202,4.272,0.202c1.636,0,4.2-0.196,4.226-0.198c0.003,0,0.005,0,0.008,0c0.714,0,1.191,0.455,1.229,1.081 c0.033,0.545-0.312,1.143-1.034,1.23c-0.028,0.003-0.539,0.064-1.211,0.114l5.185,15.498l1.146-3.816 c0.8-2.048,1.198-3.728,1.198-5.032c0-1.527-0.712-2.693-1.285-3.629c-0.114-0.187-0.223-0.364-0.32-0.534l-0.205-0.332 c-0.739-1.197-1.437-2.328-1.437-3.669c0-1.431,1.13-2.757,2.557-3.191C30.893,9.678,27.52,8.5,24.001,8.5 c-4.695,0-9.141,2.146-12.074,5.785c1.621-0.024,3.834-0.194,3.858-0.196l0.094-0.003c0.624,0,1.104,0.456,1.142,1.083 c0.033,0.546-0.313,1.144-1.039,1.231c-0.027,0.003-0.535,0.064-1.208,0.114L20.026,32.253z"></path><path d="M23.999,6.001c-9.93,0-18.004,8.075-18.004,17.999S14.072,42.001,24,42.001 c9.929,0,18.005-8.077,18.005-18.001S33.929,6.001,23.999,6.001z M8.001,24c0-2.324,0.497-4.521,1.384-6.512L17.019,38.4 C11.681,35.806,8.001,30.336,8.001,24z M24.001,40c-1.57,0-3.084-0.226-4.52-0.652l4.8-13.952l4.918,13.477 c0.033,0.077,0.078,0.149,0.118,0.22C27.65,39.676,25.862,40,24.001,40z M26.095,16.085c0.962-0.047,1.832-0.152,1.832-0.152 c0.861-0.104,0.757-1.373-0.104-1.316c0,0-2.589,0.2-4.264,0.2c-1.569,0-4.217-0.2-4.217-0.2c-0.86-0.059-0.96,1.26-0.098,1.316 c0,0,0.818,0.106,1.679,0.152l2.603,7.248l-3.5,10.501l-5.931-17.778c0.964-0.047,1.828-0.152,1.828-0.152 c0.866-0.104,0.761-1.373-0.099-1.316c0,0-2.595,0.2-4.264,0.2c-0.304,0-0.383,0.035-0.611-0.039C13.848,10.666,18.612,8,24.001,8 c4.167,0,7.96,1.584,10.804,4.198c-0.071-0.002-0.135-0.008-0.206-0.008c-1.57,0-3.041,1.375-3.041,2.84 c0,1.315,0.763,2.423,1.576,3.752c0.607,1.062,1.67,2.435,1.67,4.412c0,1.375-0.405,3.095-1.219,5.175l-1.599,5.326L26.095,16.085z M32.047,37.835L36.932,23.7c0.913-2.286,1.219-4.109,1.219-5.737c0-0.586-0.037-1.135-0.108-1.645C39.289,18.604,40,21.219,40,24 C40,29.902,36.805,35.063,32.047,37.835z" fill="#fff"></path> </svg> </span> </button> <button class="profile_item bottom-8 -left-0 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500"> <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1"> <svg preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-4 0 264 264"> <g> <path fill="#FF2D20" d="M255.855641,59.619717 C255.950565,59.9710596 256,60.3333149 256,60.6972536 L256,117.265345 C256,118.743206 255.209409,120.108149 253.927418,120.843385 L206.448786,148.178786 L206.448786,202.359798 C206.448786,203.834322 205.665123,205.195421 204.386515,205.937838 L105.27893,262.990563 C105.05208,263.119455 104.804608,263.201946 104.557135,263.289593 C104.464333,263.320527 104.376687,263.377239 104.278729,263.403017 C103.585929,263.58546 102.857701,263.58546 102.164901,263.403017 C102.051476,263.372083 101.948363,263.310215 101.840093,263.26897 C101.613244,263.186479 101.376082,263.1143 101.159544,262.990563 L2.07258227,205.937838 C0.7913718,205.201819 0,203.837372 0,202.359798 L0,32.6555248 C0,32.2843161 0.0515567729,31.9234187 0.144358964,31.5728326 C0.175293028,31.454252 0.24747251,31.3459828 0.288717928,31.2274022 C0.366053087,31.0108638 0.438232569,30.7891697 0.55165747,30.5880982 C0.628992629,30.4540506 0.742417529,30.3457814 0.83521972,30.2220451 C0.953800298,30.0570635 1.06206952,29.8869261 1.20127281,29.7425672 C1.31985339,29.6239866 1.4745237,29.5363401 1.60857131,29.4332265 C1.75808595,29.3094903 1.89213356,29.1754427 2.06227091,29.0774848 L2.06742659,29.0774848 L51.6134853,0.551122364 C52.8901903,-0.183535768 54.4613221,-0.183535768 55.7380271,0.551122364 L105.284086,29.0774848 L105.294397,29.0774848 C105.459379,29.1805983 105.598582,29.3094903 105.748097,29.4280708 C105.882144,29.5311844 106.031659,29.6239866 106.15024,29.7374115 C106.294599,29.8869261 106.397712,30.0570635 106.521448,30.2220451 C106.609095,30.3457814 106.727676,30.4540506 106.799855,30.5880982 C106.918436,30.7943253 106.985459,31.0108638 107.06795,31.2274022 C107.109196,31.3459828 107.181375,31.454252 107.212309,31.5779883 C107.307234,31.9293308 107.355765,32.2915861 107.356668,32.6555248 L107.356668,138.651094 L148.643332,114.878266 L148.643332,60.6920979 C148.643332,60.3312005 148.694889,59.9651474 148.787691,59.619717 C148.823781,59.4959808 148.890804,59.3877116 148.93205,59.269131 C149.014541,59.0525925 149.08672,58.8308984 149.200145,58.629827 C149.27748,58.4957794 149.390905,58.3875102 149.478552,58.2637739 C149.602288,58.0987922 149.705401,57.9286549 149.84976,57.7842959 C149.968341,57.6657153 150.117856,57.5780688 150.251903,57.4749553 C150.406573,57.351219 150.540621,57.2171714 150.705603,57.1192136 L150.710758,57.1192136 L200.261973,28.5928511 C201.538395,27.8571345 203.110093,27.8571345 204.386515,28.5928511 L253.932573,57.1192136 C254.107866,57.2223271 254.241914,57.351219 254.396584,57.4697996 C254.525476,57.5729132 254.674991,57.6657153 254.793572,57.7791402 C254.93793,57.9286549 255.041044,58.0987922 255.16478,58.2637739 C255.257582,58.3875102 255.371007,58.4957794 255.443187,58.629827 C255.561767,58.8308984 255.628791,59.0525925 255.711282,59.269131 C255.757683,59.3877116 255.824707,59.4959808 255.855641,59.619717 Z M247.740605,114.878266 L247.740605,67.8378666 L230.402062,77.8192579 L206.448786,91.6106946 L206.448786,138.651094 L247.745761,114.878266 L247.740605,114.878266 Z M198.194546,199.97272 L198.194546,152.901386 L174.633101,166.357704 L107.351512,204.757188 L107.351512,252.27191 L198.194546,199.97272 Z M8.25939501,39.7961379 L8.25939501,199.97272 L99.0921175,252.266755 L99.0921175,204.762344 L51.6392637,177.906421 L51.6237967,177.89611 L51.603174,177.885798 C51.443348,177.792996 51.3093004,177.658949 51.1597857,177.545524 C51.0308938,177.44241 50.8813791,177.359919 50.7679542,177.246494 L50.7576429,177.231027 C50.6235953,177.102135 50.5307931,176.942309 50.4173682,176.79795 C50.3142546,176.658747 50.1905184,176.540167 50.1080276,176.395808 L50.1028719,176.380341 C50.0100697,176.22567 49.9533572,176.040066 49.8863334,175.864773 C49.8193096,175.710103 49.7316631,175.565744 49.6904177,175.400762 L49.6904177,175.395606 C49.6388609,175.19969 49.6285496,174.993463 49.6079269,174.792392 C49.5873041,174.637722 49.5460587,174.483051 49.5460587,174.328381 L49.5460587,174.31807 L49.5460587,63.5689658 L25.5979377,49.7723734 L8.25939501,39.8012935 L8.25939501,39.7961379 Z M53.6809119,8.89300821 L12.3994039,32.6555248 L53.6706006,56.4180414 L94.9469529,32.6503692 L53.6706006,8.89300821 L53.6809119,8.89300821 Z M75.1491521,157.19091 L99.0972731,143.404629 L99.0972731,39.7961379 L81.7587304,49.7775291 L57.8054537,63.5689658 L57.8054537,167.177457 L75.1491521,157.19091 Z M202.324244,36.934737 L161.047891,60.6972536 L202.324244,84.4597702 L243.59544,60.6920979 L202.324244,36.934737 Z M198.194546,91.6106946 L174.24127,77.8192579 L156.902727,67.8378666 L156.902727,114.878266 L180.850848,128.664547 L198.194546,138.651094 L198.194546,91.6106946 Z M103.216659,197.616575 L163.759778,163.052915 L194.023603,145.781396 L152.778185,122.034346 L105.289242,149.374903 L62.0073307,174.292291 L103.216659,197.616575 Z"></path> </g> </svg> </span> </button> <button class="profile_item bottom-8 -right-0 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500"> <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1"> <svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M2.001 90.458h4.108V74.235l6.36 14.143c.75 1.712 1.777 2.317 3.792 2.317s3.003-.605 3.753-2.317l6.36-14.143v16.223h4.108V74.262c0-1.58-.632-2.345-1.936-2.739-3.121-.974-5.215-.131-6.163 1.976l-6.241 13.958-6.043-13.959c-.909-2.106-3.042-2.949-6.163-1.976C2.632 71.917 2 72.681 2 74.261v16.197zm31.898-13.206h4.107v8.938c-.038.485.156 1.625 2.406 1.661 1.148.018 8.862 0 8.934 0V77.208h4.117c.019 0-.004 14.514-.004 14.574.022 3.58-4.441 4.357-6.499 4.417H33.988v-2.764c.022 0 12.963.003 12.995-.001 2.645-.279 2.332-1.593 2.331-2.035v-1.078h-8.731c-4.062-.037-6.65-1.81-6.683-3.85-.002-.187.089-9.129-.001-9.219z" fill="#00618A"></path><path d="M56.63 90.458h11.812c1.383 0 2.727-.289 3.793-.789 1.777-.816 2.646-1.922 2.646-3.372v-3.002c0-1.185-.987-2.292-2.923-3.028-1.027-.396-2.292-.605-3.517-.605h-4.978c-1.659 0-2.449-.5-2.646-1.606-.039-.132-.039-.237-.039-.369v-1.87c0-.105 0-.211.039-.342.197-.843.632-1.08 2.094-1.212l.395-.026h11.733v-2.738H63.504c-1.659 0-2.528.105-3.318.342-2.449.764-3.517 1.975-3.517 4.082v2.396c0 1.844 2.095 3.424 5.61 3.793.396.025.79.053 1.185.053h4.267c.158 0 .316 0 .435.025 1.304.105 1.856.343 2.252.816a.98.98 0 01.315.737v2.397c0 .289-.197.658-.592.974-.355.316-.948.527-1.738.58l-.435.026H56.63v2.738zm43.881-4.766c0 2.817 2.094 4.397 6.32 4.714.395.026.79.052 1.185.052h10.706V87.72h-10.784c-2.41 0-3.318-.606-3.318-2.055V71.497h-4.108v14.195zm-23.008.142v-9.765c0-2.48 1.742-3.985 5.186-4.46a7.8 7.8 0 011.108-.079h7.799c.396 0 .752.026 1.147.079 3.444.475 5.187 1.979 5.187 4.46v9.765c0 2.014-.74 3.09-2.445 3.792l4.048 3.653h-4.771l-3.274-2.956-3.296.209h-4.395a9.075 9.075 0 01-2.414-.343c-2.613-.712-3.88-2.085-3.88-4.355zm4.434-.237c0 .132.039.265.079.423.237 1.135 1.307 1.768 2.929 1.768h3.732l-3.428-3.095h4.771l2.989 2.7c.552-.295.914-.743 1.041-1.32.039-.132.039-.264.039-.396v-9.368c0-.105 0-.238-.039-.37-.238-1.056-1.307-1.662-2.89-1.662h-6.216c-1.82 0-3.008.792-3.008 2.032v9.288z" fill="#E48E00"></path><path d="M122.336 66.952c-2.525-.069-4.454.166-6.104.861-.469.198-1.216.203-1.292.79.257.271.297.674.502 1.006.394.637 1.059 1.491 1.652 1.938.647.489 1.315 1.013 2.011 1.437 1.235.754 2.615 1.184 3.806 1.938.701.446 1.397 1.006 2.082 1.509.339.247.565.634 1.006.789v-.071c-.231-.294-.291-.698-.503-1.006l-.934-.934c-.913-1.212-2.071-2.275-3.304-3.159-.982-.705-3.18-1.658-3.59-2.801l-.072-.071c.696-.079 1.512-.331 2.154-.503 1.08-.29 2.045-.215 3.16-.503l1.508-.432v-.286c-.563-.578-.966-1.344-1.58-1.867-1.607-1.369-3.363-2.737-5.17-3.879-1.002-.632-2.241-1.043-3.304-1.579-.356-.181-.984-.274-1.221-.575-.559-.711-.862-1.612-1.293-2.441a93.068 93.068 0 01-2.585-5.458c-.544-1.245-.9-2.473-1.579-3.59-3.261-5.361-6.771-8.597-12.208-11.777-1.157-.677-2.55-.943-4.021-1.292l-2.37-.144c-.481-.201-.983-.791-1.436-1.077-1.802-1.138-6.422-3.613-7.756-.358-.842 2.054 1.26 4.058 2.011 5.099.527.73 1.203 1.548 1.58 2.369.248.54.29 1.081.503 1.652.521 1.406.976 2.937 1.651 4.236.341.658.718 1.351 1.149 1.939.264.36.718.52.789 1.077-.443.62-.469 1.584-.718 2.369-1.122 3.539-.699 7.938.934 10.557.501.805 1.681 2.529 3.303 1.867 1.419-.578 1.103-2.369 1.509-3.95.092-.357.035-.621.215-.861v.072l1.293 2.585c.957 1.541 2.654 3.15 4.093 4.237.746.563 1.334 1.538 2.298 1.867v-.073h-.071c-.188-.291-.479-.411-.719-.646-.562-.551-1.187-1.235-1.651-1.867-1.309-1.776-2.465-3.721-3.519-5.745-.503-.966-.94-2.032-1.364-3.016-.164-.379-.162-.953-.502-1.148-.466.72-1.149 1.303-1.509 2.154-.574 1.36-.648 3.019-.861 4.739l-.144.071c-1.001-.241-1.352-1.271-1.724-2.154-.94-2.233-1.115-5.83-.287-8.401.214-.666 1.181-2.761.789-3.376-.187-.613-.804-.967-1.148-1.437a11.222 11.222 0 01-1.149-2.011c-.77-1.741-1.129-3.696-1.938-5.457-.388-.842-1.042-1.693-1.58-2.441-.595-.83-1.262-1.44-1.724-2.442-.164-.356-.387-.927-.144-1.293.077-.247.188-.35.432-.431.416-.321 1.576.107 2.01.287 1.152.479 2.113.934 3.089 1.58.468.311.941.911 1.508 1.077h.646c1.011.232 2.144.071 3.088.358 1.67.508 3.166 1.297 4.524 2.155 4.139 2.614 7.522 6.334 9.838 10.772.372.715.534 1.396.861 2.154.662 1.528 1.496 3.101 2.154 4.596.657 1.491 1.298 2.996 2.227 4.237.488.652 2.374 1.002 3.231 1.364.601.254 1.585.519 2.154.861 1.087.656 2.141 1.437 3.16 2.155.509.362 2.076 1.149 2.154 1.798zM90.237 39.593a5.124 5.124 0 00-1.293.144v.071h.072c.251.517.694.849 1.005 1.293l.719 1.508.071-.071c.445-.313.648-.814.646-1.58-.179-.188-.205-.423-.359-.646-.204-.3-.602-.468-.861-.719z" fill="#00618A"></path></svg> </span> </button> <button class="profile_item right-[40%] -bottom-4 absolute rounded-full bg-cover cursor-pointer border border-gray-400/50 p-[2px] active:scale-95 hover:scale-95 transition-all duration-500"> <span class="block w-[40px] h-[40px] transition-all duration-500 rounded-full z-[2] bg-white p-1"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 -30 150 150"> <path fill="#F90" d="M122.714 62.703c5.28-.643 16.924-2.027 18.997.643 2.072 2.621-2.319 13.649-4.293 18.544-.592 1.484.691 2.077 2.023.94 8.684-7.319 10.954-22.6 9.178-24.825-1.777-2.175-17.023-4.055-26.3 2.473-1.431 1.038-1.184 2.423.395 2.225z"></path> <path fill="#F90" d="M74.852 89.456c20.28 0 43.865-6.38 60.099-18.396 2.664-1.978.345-4.994-2.369-3.758-18.207 7.714-37.993 11.473-56.003 11.473-26.694 0-52.5-7.368-73.42-19.533-1.827-1.088-3.208.791-1.679 2.176 19.343 17.505 44.951 28.038 73.372 28.038z"></path> <path fill="#252F3E" d="M42.632 32.835c0 1.83.197 3.313.542 4.401a26.505 26.505 0 001.58 3.56c.246.396.345.792.345 1.138 0 .495-.296.99-.938 1.484l-3.108 2.077c-.444.296-.889.445-1.283.445-.494 0-.987-.248-1.48-.693a15.29 15.29 0 01-1.777-2.324 38.28 38.28 0 01-1.53-2.918c-3.848 4.55-8.684 6.825-14.506 6.825-4.145 0-7.45-1.187-9.868-3.56-2.418-2.374-3.652-5.54-3.652-9.495 0-4.204 1.48-7.616 4.49-10.187 3.01-2.572 7.007-3.857 12.09-3.857 1.677 0 3.404.148 5.23.395 1.825.248 3.7.643 5.674 1.088v-3.61c0-3.758-.79-6.379-2.32-7.912-1.578-1.533-4.243-2.274-8.042-2.274-1.727 0-3.503.197-5.329.642a39.247 39.247 0 00-5.329 1.682 14.14 14.14 0 01-1.727.643c-.345.098-.592.148-.79.148-.69 0-1.036-.494-1.036-1.533V6.577c0-.791.1-1.385.346-1.73.246-.347.69-.693 1.381-1.04 1.727-.89 3.8-1.631 6.217-2.225C20.23.94 22.797.642 25.51.642c5.872 0 10.164 1.336 12.927 4.006 2.714 2.67 4.096 6.726 4.096 12.165v16.022h.099zm-20.033 7.517c1.628 0 3.306-.297 5.082-.89 1.776-.594 3.355-1.682 4.687-3.165.79-.94 1.382-1.978 1.678-3.165.296-1.187.493-2.621.493-4.302v-2.077a41.135 41.135 0 00-4.539-.84 37.099 37.099 0 00-4.638-.298c-3.306 0-5.724.643-7.352 1.978-1.628 1.336-2.418 3.215-2.418 5.687 0 2.324.592 4.055 1.826 5.242 1.184 1.236 2.911 1.83 5.18 1.83zm39.621 5.34c-.888 0-1.48-.148-1.875-.494-.394-.297-.74-.99-1.036-1.929L47.714 5.044c-.296-.99-.444-1.632-.444-1.978 0-.791.394-1.236 1.184-1.236h4.835c.938 0 1.58.148 1.925.494.395.297.69.99.987 1.929l8.29 32.736 7.697-32.736c.246-.99.542-1.632.937-1.929.395-.297 1.085-.494 1.974-.494h3.947c.938 0 1.579.148 1.974.494.395.297.74.99.937 1.929l7.796 33.132L98.29 4.253c.295-.99.64-1.632.986-1.929.395-.297 1.036-.494 1.925-.494h4.588c.79 0 1.234.395 1.234 1.236 0 .247-.049.494-.099.791a7.041 7.041 0 01-.345 1.236L94.688 43.32c-.297.989-.642 1.631-1.037 1.928-.394.297-1.036.495-1.875.495h-4.243c-.938 0-1.58-.149-1.974-.495-.394-.346-.74-.989-.937-1.978l-7.648-31.895-7.599 31.846c-.247.989-.543 1.632-.938 1.978-.394.346-1.085.494-1.973.494H62.22zm63.405 1.336c-2.566 0-5.132-.297-7.599-.89-2.467-.594-4.391-1.237-5.674-1.979-.79-.445-1.332-.94-1.53-1.384a3.503 3.503 0 01-.296-1.385v-2.522c0-1.038.395-1.533 1.135-1.533.296 0 .592.05.888.148.296.1.74.297 1.234.495a26.791 26.791 0 005.428 1.73c1.973.396 3.898.594 5.871.594 3.109 0 5.527-.544 7.204-1.632 1.678-1.088 2.566-2.67 2.566-4.698 0-1.384-.444-2.521-1.332-3.461-.888-.94-2.566-1.78-4.984-2.571l-7.154-2.226c-3.602-1.137-6.267-2.818-7.895-5.044-1.628-2.176-2.467-4.599-2.467-7.17 0-2.077.444-3.907 1.332-5.489.888-1.582 2.072-2.967 3.553-4.055 1.48-1.137 3.157-1.978 5.131-2.571 1.974-.594 4.046-.841 6.217-.841 1.086 0 2.221.05 3.306.198 1.135.148 2.171.346 3.207.544.987.247 1.925.494 2.813.79.888.298 1.579.594 2.072.891.691.396 1.185.791 1.481 1.236.296.396.444.94.444 1.632V8.16c0 1.039-.395 1.583-1.135 1.583-.395 0-1.036-.198-1.875-.594-2.813-1.285-5.971-1.928-9.474-1.928-2.812 0-5.033.445-6.562 1.384-1.53.94-2.319 2.374-2.319 4.402 0 1.384.493 2.57 1.48 3.51s2.812 1.88 5.427 2.72l7.007 2.226c3.553 1.137 6.118 2.72 7.648 4.747 1.53 2.027 2.27 4.351 2.27 6.923 0 2.126-.444 4.055-1.283 5.736-.888 1.681-2.072 3.165-3.602 4.352-1.53 1.236-3.355 2.126-5.477 2.769-2.22.692-4.54 1.039-7.056 1.039z"></path> </svg> </span> </button> <button class="profile_item w-[200px] h-[200px] p-1 border-2 rounded-full hover:border-gray-400/50 cursor-pointer transition-all duration-500 z-0"> <div class="w-full bg-white h-full flex items-center justify-center p-2 rounded-full active:scale-95 hover:scale-95 object-cover transition-all duration-500"> <span class="w-20 h-20 inline-block"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M9.99296258,10.5729355 C12.478244,10.5729355 14.4929626,8.55821687 14.4929626,6.0729355 C14.4929626,3.58765413 12.478244,1.5729355 9.99296258,1.5729355 C7.5076812,1.5729355 5.49296258,3.58765413 5.49296258,6.0729355 C5.49296258,8.55821687 7.5076812,10.5729355 9.99296258,10.5729355 Z M10,0 C13.3137085,0 16,2.6862915 16,6 C16,8.20431134 14.8113051,10.1309881 13.0399615,11.173984 C16.7275333,12.2833441 19.4976819,15.3924771 19.9947005,19.2523727 C20.0418583,19.6186047 19.7690435,19.9519836 19.3853517,19.9969955 C19.0016598,20.0420074 18.6523872,19.7816071 18.6052294,19.4153751 C18.0656064,15.2246108 14.4363723,12.0699838 10.034634,12.0699838 C5.6099956,12.0699838 1.93381693,15.231487 1.39476476,19.4154211 C1.34758036,19.7816499 0.998288773,20.0420271 0.614600177,19.9969899 C0.230911582,19.9519526 -0.0418789616,19.6185555 0.00530544566,19.2523267 C0.500630192,15.4077896 3.28612316,12.3043229 6.97954305,11.1838052 C5.19718955,10.1447285 4,8.21217353 4,6 C4,2.6862915 6.6862915,0 10,0 Z" fill="#555"></path> </svg> </span> </div> </button> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="q4N69UFP2apvWNTTJZQTDPZp4ZEWhpQIkO78efm5" 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/three-cards' 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":"jCvB1JmhaMoJqDNQD9Ci","name":"layout.footer","path":"ar\/resource\/watch-design","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ar"},"checksum":"97690ca1207e01b13b50d600aaa0e39a2ddb994c74c4e91c6552b2b5b6f23684"}" wire:effects="[]" wire:id="jCvB1JmhaMoJqDNQD9Ci" 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="q4N69UFP2apvWNTTJZQTDPZp4ZEWhpQIkO78efm5" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>