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="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></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">.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); } }</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">المشاهدات : 70</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"> مشغل الموسيقى بأستخدام الAI </p> <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-6 mb-4"> الوصف</h3> <p> <p>مشغل الموسيقى بأستخدام الAI </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-140 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .cardContainer { width: fit-content; position: relative; display: flex; align-items: center; justify-content: center; } .card { position: relative; width: 220px; height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 10px; border-radius: 10px; backdrop-filter: blur(30px); background-color: rgba(65, 65, 65, 0.308); border: 1px solid rgba(255, 255, 255, 0.089); cursor: pointer; } .city { font-weight: 700; font-size: 0.9em; letter-spacing: 1.2px; color: white; } .weather { font-weight: 500; font-size: 0.7em; letter-spacing: 1.2px; color: rgb(197, 197, 197); } .temp { font-size: 1.8em; color: white; } .minmaxContainer { width: 100%; display: flex; align-items: center; justify-content: space-between; } .min, .max { width: 50%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding: 0px 20px; gap: 4px; } .max { align-items: flex-start; border-left: 2px solid white; } .maxHeading, .minHeading { font-size: 0.7em; font-weight: 600; color: white; } .maxTemp, .minTemp { font-size: 0.6em; font-weight: 500; color: rgb(197, 197, 197); } .cardContainer::before { width: 100px; height: 100px; content: ""; position: absolute; background-color: rgb(144, 161, 255); z-index: -1; border-radius: 50%; left: 100px; top: 50px; transition: all 1s; } .cardContainer:hover::before { transform: translate(-50px, 50px); } 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="cardContainer"> <div class="card"> <p class="city">PINK CITY</p> <p class="weather">PARTILY CLOUDY</p> <svg class="weather" version="1.1" id="Layer_1" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 100 100" xml:space="preserve" > <image id="image0" width="100" height="100" x="0" y="0" href="data:image/png;base64,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" ></image> </svg> <p class="temp">32°</p> <div class="minmaxContainer"> <div class="min"> <p class="minHeading">Min</p> <p class="minTemp">30°</p> </div> <div class="max"> <p class="maxHeading">Max</p> <p class="maxTemp">32°</p> </div> </div> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="PE2s8ObQ7zEA0ab4ANb8ror992nvQf67jAcfWpPu" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>' class="w-full rounded-xl h-auto" style="overflow: hidden;" onload="resizeIframe(this)" title="home.CodePreview >
بطاقة الطقس
حفظ
عرض الكود
Tailwind CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> شكل الهاتف </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/phone-template' 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-106 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .h3 span { font-weight: 800; background: linear-gradient(125deg, #b663ff, #13c1ef); text-transform: uppercase; -webkit-background-cLip: text; -webkit-text-filL-coLor: transparent; } .h3::after { content: ''; margin-top: -5px; height: 3px; width: 25%; background: linear-gradient(125deg, #b663ff, #13c1ef); display: block; } .main { display: flex; justify-content: center; align-items: center; } .card { width: 80%; position: relative; background-color: rgb(16 16 16); border: 1px solid rgb(255 255 255 / 5%); border-radius: 1.5rem; padding: 1rem; } .card:after { content: ""; height: 70px; width: 1px; position: absolute; left: -1px; top: 65%; transition: top, opacity; transition-duration: 600ms; transition-timing-function: ease; background: linear-gradient(transparent, mediumslateblue,transparent); box-shadow: 0 0 30px mediumslateblue; opacity: 0; } .card:after { top: 65%; opacity: 0; } .card:hover:after { top: 25%; opacity: 1; } .card-content { display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: radial-gradient( rgba(255, 255, 255, 0.1) 1px, transparent 1px ); background-position: 50% 50%; background-size: 1.1rem 1.1rem; padding: 2.3rem; border-radius: 1.25rem; overflow: hidden; } .card-content .h1,.h3,.p { text-align: center; } .card-content .h1 { color: rgb(250 249 246); font-size: 2.6rem; } .card-content .h3 { color: #fff; text-transform: uppercase; font-size: 1.5rem; } .card-content .p { color: rgb(255 255 255 / 75%); line-height: 1.3rem; } @media(max-width: 700px) { .card { width: calc(100% - 2rem); margin: 0rem 1rem; padding: 0.75rem; border-radius: 1rem; } } @media(max-width: 600px) { .card-content { padding: 3rem; } .card-content .h1 { font-size: 2.2rem; } } 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="main"> <div class="card"> <div class="card-content"> <div class="h3"><span>Yar</span>Technology</div> <div class="h1">Love to Code.</div> <p class="p">Love to spend hours in codeing and get lost in own fantasy world of code, the feeling 😂🚀😊 </p> </div> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="PE2s8ObQ7zEA0ab4ANb8ror992nvQf67jAcfWpPu" 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 >
u8 بطاقة
حفظ
عرض الكود
Tailwind CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> اشعار النشر </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/publication-notice' 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-104 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .notificationCard { width: 220px; height: 280px; background: rgb(245, 245, 245); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 35px; gap: 10px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.123); border-radius: 20px; } .bellIcon { width: 50px; margin: 20px 0px; } .bellIcon path { fill: rgb(168, 131, 255); } .notificationHeading { color: black; font-weight: 600; font-size: 0.8em; } .notificationPara { color: rgb(133, 133, 133); font-size: 0.6em; font-weight: 600; text-align: center; } .buttonContainer { display: flex; flex-direction: column; gap: 5px; } .AllowBtn { width: 120px; height: 25px; background-color: rgb(168, 131, 255); color: white; border: none; border-radius: 20px; font-size: 0.7em; font-weight: 600; cursor: pointer; } .NotnowBtn { width: 120px; height: 25px; color: rgb(168, 131, 255); border: none; background-color: transparent; font-weight: 600; font-size: 0.7em; cursor: pointer; border-radius: 20px; } .NotnowBtn:hover { background-color: rgb(239, 227, 255); } .AllowBtn:hover { background-color: rgb(153, 110, 255); } 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="notificationCard"> <p class="notificationHeading">Push notifications</p> <svg class="bellIcon" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"></path></svg> <p class="notificationPara">Allow push notifications so you will get latest updates</p> <div class="buttonContainer"> <button class="AllowBtn">Allow</button> <button class="NotnowBtn">Now now</button> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="PE2s8ObQ7zEA0ab4ANb8ror992nvQf67jAcfWpPu" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>' class="w-full rounded-xl h-auto" style="overflow: hidden;" onload="resizeIframe(this)" title="home.CodePreview >
بطاقة الإشع...
حفظ
عرض الكود
Tailwind CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> بطاقة المها... </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/skills-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"> <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-102 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .container { position: relative; display: flex; justify-content: center; align-items: center; } .container .glass { position: relative; width: 180px; height: 200px; background: linear-gradient(#fff2, transparent); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; transition: 0.5s; border-radius: 10px; margin: 0 -45px; backdrop-filter: blur(10px); transform: rotate(calc(var(--r) * 1deg)); } .container:hover .glass { transform: rotate(0deg); margin: 0 10px; } .container .glass::before { content: attr(data-text); position: absolute; bottom: 0; width: 100%; height: 40px; background: rgba(255, 255, 255, 0.05); display: flex; justify-content: center; align-items: center; color: #fff; } .container .glass svg { font-size: 2.5em; fill: #fff; } 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="container"> <div data-text="Github" style="--r:-15;" class="glass"> <svg viewBox="0 0 496 512" height="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" ></path> </svg> </div> <div data-text="Code" style="--r:5;" class="glass"> <svg viewBox="0 0 640 512" height="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" ></path> </svg> </div> <div data-text="Earn" style="--r:25;" class="glass"> <svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"> <path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z" ></path> </svg> </div> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="PE2s8ObQ7zEA0ab4ANb8ror992nvQf67jAcfWpPu" 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"> 6g بطاقة </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-6g' 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":"ezZYFsmNWvjrZI6lXfBK","name":"layout.footer","path":"ar\/resource\/ai-music-player","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ar"},"checksum":"6da35bf2120ad64d63d2a700610df1e7fb9b75829e74393716e6390a03f2314f"}" wire:effects="[]" wire:id="ezZYFsmNWvjrZI6lXfBK" 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="PE2s8ObQ7zEA0ab4ANb8ror992nvQf67jAcfWpPu" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>