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="button-wrap"> <button class="button"> <div class="glow"></div> <div class="bg"> <div class="shine"></div> </div> <div class="wave"></div> <div class="wrap"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 974 367" height="367" width="974" class="circuit" > <g class="circuit-path circuit-path-2"> <g class="circuit-side"> <path stroke-width="2" stroke="url(#paint0_linear_73_31)" d="M0 1H185.5" style="--i: 1" ></path> <path stroke-width="2" stroke="url(#paint1_linear_73_31)" d="M0 33H185.5" style="--i: 2" ></path> <path stroke-width="2" stroke="url(#paint2_linear_73_31)" d="M10 84.5L50.6881 62.7689C52.8625 61.6075 55.2896 61 57.7547 61H185.5" style="--i: 3" ></path> <path stroke-width="2" stroke="url(#paint3_linear_73_31)" d="M973.5 1H788" style="--i: 4" ></path> <path stroke-width="2" stroke="url(#paint4_linear_73_31)" d="M973.5 33H788" style="--i: 5" ></path> <path stroke-width="2" stroke="url(#paint5_linear_73_31)" d="M963.5 84.5L922.812 62.7689C920.638 61.6075 918.21 61 915.745 61H788" style="--i: 6" ></path> </g> <g class="circuit-bottom"> <path stroke-width="2" stroke="url(#paint6_linear_73_31)" d="M412.5 112V186.744C412.5 192.676 409.004 198.051 403.582 200.456L359.418 220.044C353.996 222.449 350.5 227.824 350.5 233.756V354" style="--i: 7" ></path> <path stroke-width="2" stroke="url(#paint7_linear_73_31)" d="M533.5 112V209.625C533.5 213.402 534.925 217.04 537.491 219.812L560.509 244.688C563.075 247.46 564.5 251.098 564.5 254.875V355" style="--i: 8" ></path> <path stroke-width="2" stroke="url(#paint8_linear_73_31)" d="M503.5 112V191.79C503.5 194.856 502.56 197.849 500.808 200.364L475.192 237.136C473.44 239.651 472.5 242.644 472.5 245.71V367" style="--i: 9" ></path> <path stroke-width="2" stroke="url(#paint9_linear_73_31)" d="M443.5 112V355" style="--i: 10" ></path> <path stroke-width="2" stroke="url(#paint10_linear_73_31)" d="M472.5 112V355" style="--i: 11" ></path> <path stroke-width="2" stroke="url(#paint11_linear_73_31)" d="M562.5 112V166.617C562.5 174.855 569.145 181.552 577.383 181.616L611.617 181.884C619.855 181.948 626.5 188.645 626.5 196.883V305" style="--i: 12" ></path> </g> </g> <g class="circuit-path circuit-path-1"> <g class="circuit-side"> <path stroke-width="2" stroke="url(#paint0_linear_73_31)" d="M0 1H185.5" style="--i: 1" ></path> <path stroke-width="2" stroke="url(#paint1_linear_73_31)" d="M0 33H185.5" style="--i: 2" ></path> <path stroke-width="2" stroke="url(#paint2_linear_73_31)" d="M10 84.5L50.6881 62.7689C52.8625 61.6075 55.2896 61 57.7547 61H185.5" style="--i: 3" ></path> <path stroke-width="2" stroke="url(#paint3_linear_73_31)" d="M973.5 1H788" style="--i: 4" ></path> <path stroke-width="2" stroke="url(#paint4_linear_73_31)" d="M973.5 33H788" style="--i: 5" ></path> <path stroke-width="2" stroke="url(#paint5_linear_73_31)" d="M963.5 84.5L922.812 62.7689C920.638 61.6075 918.21 61 915.745 61H788" style="--i: 6" ></path> </g> <g class="circuit-bottom"> <path stroke-width="2" stroke="url(#paint6_linear_73_31)" d="M412.5 112V186.744C412.5 192.676 409.004 198.051 403.582 200.456L359.418 220.044C353.996 222.449 350.5 227.824 350.5 233.756V354" style="--i: 7" ></path> <path stroke-width="2" stroke="url(#paint7_linear_73_31)" d="M533.5 112V209.625C533.5 213.402 534.925 217.04 537.491 219.812L560.509 244.688C563.075 247.46 564.5 251.098 564.5 254.875V355" style="--i: 8" ></path> <path stroke-width="2" stroke="url(#paint8_linear_73_31)" d="M503.5 112V191.79C503.5 194.856 502.56 197.849 500.808 200.364L475.192 237.136C473.44 239.651 472.5 242.644 472.5 245.71V367" style="--i: 9" ></path> <path stroke-width="2" stroke="url(#paint9_linear_73_31)" d="M443.5 112V355" style="--i: 10" ></path> <path stroke-width="2" stroke="url(#paint10_linear_73_31)" d="M472.5 112V355" style="--i: 11" ></path> <path stroke-width="2" stroke="url(#paint11_linear_73_31)" d="M562.5 112V166.617C562.5 174.855 569.145 181.552 577.383 181.616L611.617 181.884C619.855 181.948 626.5 188.645 626.5 196.883V305" style="--i: 12" ></path> </g> </g> <g class="circuit-bg"> <g class="circuit-side"> <path stroke-width="2" stroke="url(#paint0_linear_73_31)" d="M0 1H185.5" ></path> <path stroke-width="2" stroke="url(#paint1_linear_73_31)" d="M0 33H185.5" ></path> <path stroke-width="2" stroke="url(#paint2_linear_73_31)" d="M10 84.5L50.6881 62.7689C52.8625 61.6075 55.2896 61 57.7547 61H185.5" ></path> <path stroke-width="2" stroke="url(#paint3_linear_73_31)" d="M973.5 1H788" ></path> <path stroke-width="2" stroke="url(#paint4_linear_73_31)" d="M973.5 33H788" ></path> <path stroke-width="2" stroke="url(#paint5_linear_73_31)" d="M963.5 84.5L922.812 62.7689C920.638 61.6075 918.21 61 915.745 61H788" ></path> </g> <g class="circuit-bottom"> <path stroke-width="2" stroke="url(#paint6_linear_73_31)" d="M412.5 112V186.744C412.5 192.676 409.004 198.051 403.582 200.456L359.418 220.044C353.996 222.449 350.5 227.824 350.5 233.756V354" ></path> <path stroke-width="2" stroke="url(#paint7_linear_73_31)" d="M533.5 112V209.625C533.5 213.402 534.925 217.04 537.491 219.812L560.509 244.688C563.075 247.46 564.5 251.098 564.5 254.875V355" ></path> <path stroke-width="2" stroke="url(#paint8_linear_73_31)" d="M503.5 112V191.79C503.5 194.856 502.56 197.849 500.808 200.364L475.192 237.136C473.44 239.651 472.5 242.644 472.5 245.71V367" ></path> <path stroke-width="2" stroke="url(#paint9_linear_73_31)" d="M443.5 112V355" ></path> <path stroke-width="2" stroke="url(#paint10_linear_73_31)" d="M472.5 112V355" ></path> <path stroke-width="2" stroke="url(#paint11_linear_73_31)" d="M562.5 112V166.617C562.5 174.855 569.145 181.552 577.383 181.616L611.617 181.884C619.855 181.948 626.5 188.645 626.5 196.883V305" ></path> </g> </g> <defs> <linearGradient gradientUnits="userSpaceOnUse" y2="1.5" x2="265" y1="1.5" x1="0" id="paint0_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.155"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="33.5" x2="265" y1="33.5" x1="0" id="paint1_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="72.75" x2="265" y1="72.75" x1="10" id="paint2_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="1.5" x2="708.5" y1="1.5" x1="973.5" id="paint3_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.155"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="33.5" x2="708.5" y1="33.5" x1="973.5" id="paint4_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="72.75" x2="708.5" y1="72.75" x1="963.5" id="paint5_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="97" x2="390" y1="354" x1="390" id="paint6_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.105"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="97" x2="556" y1="355" x1="556" id="paint7_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.105"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="97" x2="526" y1="355" x1="526" id="paint8_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.105"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="97" x2="466" y1="355" x1="466" id="paint9_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.105"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="97" x2="495" y1="355" x1="495" id="paint10_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.105"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> <linearGradient gradientUnits="userSpaceOnUse" y2="97" x2="585" y1="305" x1="585" id="paint11_linear_73_31" > <stop stop-opacity="0" stop-color="#FEC33B" offset="0.105"></stop> <stop stop-color="#FEC33B" offset="1"></stop> </linearGradient> </defs> </svg> <div class="wrap-content"> <div class="content"> <div class="outline"></div> <div class="glyphs"> <span class="text"> <span data-label="S" style="--i: 3">S</span> <span data-label="t" style="--i: 4">t</span> <span data-label="a" style="--i: 5">a</span> <span data-label="r" style="--i: 6">r</span> <span data-label="t" style="--i: 7">t</span> <span data-label="S" style="--i: 8">S</span> <span data-label="h" style="--i: 9">h</span> <span data-label="i" style="--i: 10">i</span> <span data-label="p" style="--i: 11">p</span> <span data-label="p" style="--i: 12">p</span> <span data-label="i" style="--i: 13">i</span> <span data-label="n" style="--i: 14">n</span> <span data-label="g" style="--i: 15">g</span> </span> <div class="icon-1"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 63 91" height="91" width="63" > <path fill="black" d="M9.3662 51.0001H21.9999V74.8271C21.9999 77.5581 25.352 78.8687 27.2043 76.862L53.3523 48.5349C55.1262 46.6132 53.7632 43.5001 51.1479 43.5001H39.9999V18.1557C39.9999 15.427 36.6525 14.1153 34.7986 16.1175L7.16492 45.9619C5.38659 47.8824 6.74874 51.0001 9.3662 51.0001Z" ></path> <g class="strokes"> <path stroke-width="2" stroke="white" d="M9.3662 51.0001H21.9999V74.8271C21.9999 77.5581 25.352 78.8687 27.2043 76.862L53.3523 48.5349C55.1262 46.6132 53.7632 43.5001 51.1479 43.5001H39.9999V18.1557C39.9999 15.427 36.6525 14.1153 34.7986 16.1175L7.16492 45.9619C5.38659 47.8824 6.74874 51.0001 9.3662 51.0001Z" class="stroke" ></path> <path stroke-width="2" stroke="white" d="M9.3662 51.0001H21.9999V74.8271C21.9999 77.5581 25.352 78.8687 27.2043 76.862L53.3523 48.5349C55.1262 46.6132 53.7632 43.5001 51.1479 43.5001H39.9999V18.1557C39.9999 15.427 36.6525 14.1153 34.7986 16.1175L7.16492 45.9619C5.38659 47.8824 6.74874 51.0001 9.3662 51.0001Z" class="stroke" ></path> </g> <g class="lightnings"> <path stroke-linecap="round" fill="none" stroke-width="4" stroke="currentColor" d="M16 2L4.41532 14.8856C4.30625 15.007 4.3805 15.2008 4.54271 15.2182L13.9949 16.2327C14.1573 16.2501 14.2314 16.4443 14.122 16.5655L2 30" class="lightning lightning-1" ></path> <path stroke-linecap="round" fill="none" stroke-width="4" stroke="currentColor" d="M61 61L49.4153 73.8856C49.3062 74.007 49.3805 74.2008 49.5427 74.2182L58.9949 75.2327C59.1573 75.2501 59.2314 75.4443 59.122 75.5655L47 89" class="lightning lightning-1" ></path> <g> <path stroke-linecap="round" fill="none" stroke-width="4" stroke="currentColor" d="M16 2L4.41532 14.8856C4.30625 15.007 4.3805 15.2008 4.54271 15.2182L13.9949 16.2327C14.1573 16.2501 14.2314 16.4443 14.122 16.5655L2 30" class="lightning lightning-2" ></path> <path stroke-linecap="round" fill="none" stroke-width="4" stroke="currentColor" d="M61 61L49.4153 73.8856C49.3062 74.007 49.3805 74.2008 49.5427 74.2182L58.9949 75.2327C59.1573 75.2501 59.2314 75.4443 59.122 75.5655L47 89" class="lightning lightning-2" ></path> </g> </g> </svg> </div> <div class="icon-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 930 211" height="211" width="930" > <g> <path stroke-linecap="round" stroke-width="20" stroke="currentColor" d="M422 122.5L443.3 143.8C443.688 144.188 444.315 144.191 444.707 143.808L492.5 97" class="check" ></path> <path fill="currentColor" d="M363.631 87.9615C335.323 93.6429 314 118.644 314 148.625C314 182.797 341.702 210.5 375.875 210.5H536.75C577.757 210.5 611 177.257 611 136.25C611 97.6771 581.587 65.9741 543.966 62.3461C531.322 26.1173 496.853 0.125015 456.312 0.125015C406.723 0.125015 366.217 39.0161 363.631 87.9615ZM388.347 89.2671C387.75 100.554 379.584 110.003 368.502 112.228C351.528 115.634 338.75 130.665 338.75 148.625C338.75 169.129 355.371 185.75 375.875 185.75H536.75C564.088 185.75 586.25 163.588 586.25 136.25C586.25 110.55 566.644 89.3983 541.59 86.9814C531.976 86.0548 523.78 79.6199 520.597 70.5009C511.314 43.901 486.004 24.875 456.312 24.875C419.955 24.875 390.242 53.3951 388.347 89.2671Z" clip-rule="evenodd" fill-rule="evenodd" ></path> </g> <g> <mask height="211" width="297" y="0" x="314" maskUnits="userSpaceOnUse" style="mask-type: alpha" id="cloud-mask" > <path stroke-linecap="round" stroke-width="20" stroke="red" d="M422 122.5L443.3 143.8C443.688 144.188 444.315 144.191 444.707 143.808L492.5 97" ></path> <path fill="red" d="M363.631 87.9615C335.323 93.6429 314 118.644 314 148.625C314 182.797 341.702 210.5 375.875 210.5H536.75C577.757 210.5 611 177.257 611 136.25C611 97.6771 581.587 65.9741 543.966 62.3461C531.322 26.1173 496.853 0.125015 456.312 0.125015C406.723 0.125015 366.217 39.0161 363.631 87.9615ZM388.347 89.2671C387.75 100.554 379.584 110.003 368.502 112.228C351.528 115.634 338.75 130.665 338.75 148.625C338.75 169.129 355.371 185.75 375.875 185.75H536.75C564.088 185.75 586.25 163.588 586.25 136.25C586.25 110.55 566.644 89.3983 541.59 86.9814C531.976 86.0548 523.78 79.6199 520.597 70.5009C511.314 43.901 486.004 24.875 456.312 24.875C419.955 24.875 390.242 53.3951 388.347 89.2671Z" clip-rule="evenodd" fill-rule="evenodd" ></path> </mask> </g> <g mask="url(#cloud-mask)"> <path fill="url(#cloud-mask-bg)" d="M15 -2H336L286 213H-35L15 -2Z" class="cloud-mask" ></path> </g> <path fill="currentColor" d="M21.7241 59.4122C9.33335 61.8967 0 72.8301 0 85.9412C0 100.885 12.1256 113 27.0833 113H97.5C115.449 113 130 98.4624 130 80.5294C130 63.6609 117.126 49.7968 100.658 48.2102C95.1242 32.3668 80.0367 21 62.2917 21C40.5858 21 22.8559 38.0076 21.7241 59.4122ZM32.5423 59.9831C32.2813 64.9192 28.7066 69.0511 23.8561 70.0241C16.4265 71.514 10.8333 78.0871 10.8333 85.9412C10.8333 94.9079 18.1087 102.176 27.0833 102.176H97.5C109.466 102.176 119.167 92.4845 119.167 80.5294C119.167 69.2903 110.585 60.0405 99.6185 58.9836C95.4102 58.5783 91.8228 55.7643 90.4296 51.7764C86.3666 40.1438 75.2879 31.8235 62.2917 31.8235C46.3774 31.8235 33.3718 44.2958 32.5423 59.9831Z" clip-rule="evenodd" fill-rule="evenodd" class="cloud cloud-1" ></path> <path fill="currentColor" d="M821.724 98.4122C809.333 100.897 800 111.83 800 124.941C800 139.885 812.126 152 827.083 152H897.5C915.449 152 930 137.462 930 119.529C930 102.661 917.126 88.7968 900.658 87.2102C895.124 71.3668 880.037 60 862.292 60C840.586 60 822.856 77.0076 821.724 98.4122ZM832.542 98.9831C832.281 103.919 828.707 108.051 823.856 109.024C816.426 110.514 810.833 117.087 810.833 124.941C810.833 133.908 818.109 141.176 827.083 141.176H897.5C909.466 141.176 919.167 131.485 919.167 119.529C919.167 108.29 910.585 99.0405 899.618 97.9836C895.41 97.5783 891.823 94.7643 890.43 90.7764C886.367 79.1438 875.288 70.8235 862.292 70.8235C846.377 70.8235 833.372 83.2958 832.542 98.9831Z" clip-rule="evenodd" fill-rule="evenodd" class="cloud cloud-2" ></path> <defs> <linearGradient gradientUnits="userSpaceOnUse" y2="85" x2="-6.00001" y1="150" x1="306" id="cloud-mask-bg" > <stop stop-color="currentColor"></stop> <stop stop-opacity="0" stop-color="currentColor" offset="1" ></stop> </linearGradient> </defs> </svg> </div> </div> </div> </div> </div> </button> </div></code></pre> </div> <div id="code-css" class="code-section hidden"> <div class="flex justify-between items-center mb-2"> <h3 class="text-md font-semibold text-gray-900 dark:text-white">CSS Code</h3> <button id="copy-css" onclick="copyToClipboard('css', 'copy-css')" class="px-2 py-1 text-sm font-normal bg-gray-800 text-white rounded-md flex items-center space-x-2"> <i class="fas fa-copy text-gray-300"></i><span>نسخ</span> </button> </div> <pre class="bg-gray-900 text-white rounded p-3 overflow-auto text-sm line-numbers language-css"><code class="language-css">.button-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: radial-gradient( rgba(255, 255, 255, 0.02) 1px, transparent 3px ), radial-gradient(circle at center, #11161f 0%, #08090b 100%); background-size: 7px 7px, 100% 100%; background-position: 0 0, center center; } .button { --radius: 18px; outline: none; cursor: pointer; font-size: 22px; background: transparent; border: 0; position: relative; width: 228px; height: 64px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6); border-radius: var(--radius); } .button::before, .button::after { content: ""; position: absolute; top: 40%; z-index: 0; height: 50px; width: 50%; background: black; filter: blur(10px); border-radius: 10px; opacity: 0.7; pointer-events: none; touch-action: none; } .button::before { left: -2px; transform: rotate(-15deg); } .button::after { right: -2px; transform: rotate(15deg); } .glow { position: absolute; inset: 0; box-shadow: 0 0 200px 5px rgba(255, 208, 0, 0.4); pointer-events: none; touch-action: none; } .glow::before { content: ""; position: absolute; margin: auto; background: rgba(160, 158, 122, 0.05); border-radius: 50%; filter: blur(50px); inset: 0; height: 500px; width: 150px; transform: rotate(-45deg); } .wave { position: absolute; width: 100%; height: 100%; inset: 0; margin: auto; transition: all 0.3s linear; } .wave::before, .wave::after { content: ""; position: absolute; width: 100%; height: 100%; border: 0.5px solid rgba(255, 208, 0, 0.4); inset: 0; filter: blur(2px); border-radius: 30px; } .button:focus .wave::before, .button:focus .wave::after { animation: wave 2.2s linear; } .button:focus .wave::after { animation-delay: 0.35s; } @keyframes wave { 0%, 40% { transform: scale(1); opacity: 0; box-shadow: 0 0 30px 10px black, inset 0 0 30px rgba(255, 255, 255, 0.1); } 60% { transform: scale(1.2, 1.5); opacity: 1; } 100% { transform: scale(1.6, 2); opacity: 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } } .bg { position: absolute; inset: -7px; border-radius: calc(var(--radius) * 1.35); z-index: 1; overflow: hidden; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6); } .bg::before, .bg::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius) * 1.35); } .bg::after { background: black; box-shadow: inset 0 0 0 1px rgba(92, 83, 54, 0.4), inset -2px 0 0 -1px rgba(92, 83, 54, 1), inset 0 -2px 0 -1px rgba(92, 83, 54, 0.1); } .bg .shine { transition: all 0.5s linear; color: rgba(255, 239, 168, 0.85); } .button:active .bg .shine { color: rgba(42, 255, 205, 0.85); } .bg .shine::before { content: ""; position: absolute; z-index: 2; background: currentColor; width: 10px; height: 10px; opacity: 0.3; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; filter: blur(2px); transform: translateY(0) scale(0); animation: shine 2.2s linear infinite; } @keyframes shine { 0% { transform: translateY(0) scale(0); } 20% { transform: translateY(0) scale(25); } 100% { transform: translateY(-280px) scale(20, 18); } } .outline { position: absolute; overflow: hidden; inset: 0; outline: none; border-radius: inherit; transition: all 0.4s ease; } .outline::before { content: ""; position: absolute; inset: 0; width: 120px; height: 300px; margin: auto; background: linear-gradient( to right, transparent 0%, #ffea00 50%, transparent 100% ); animation: spin 1.7s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .circuit { position: absolute; left: 50%; top: 50%; transform: translate(-50%); width: 392px; height: auto; margin-top: -13px; pointer-events: none; touch-action: none; } .circuit-bg { opacity: 0.5; } .circuit-path { opacity: 0; transition: opacity 0.4s linear; } .circuit-path .circuit-side path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: line-1 1.7s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s); } @keyframes line-1 { 0% { stroke-dashoffset: 200; filter: blur(2px) brightness(2); } 70% { stroke-dashoffset: 0; } 100% { opacity: 0; } } .circuit-path .circuit-bottom path { stroke-dasharray: 250; stroke-dashoffset: -250; animation: line-2 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.1s); } @keyframes line-2 { 0% { stroke-dashoffset: -250; filter: blur(2px) brightness(2); } 70% { stroke-dashoffset: 0; } 100% { opacity: 0; } } .circuit-path-2 .circuit-side path { animation-duration: 0.7s; } .circuit-path-2 .circuit-bottom path { animation-duration: 0.9s; } .circuit-path-2 .circuit-side path, .circuit-path-2 .circuit-bottom path { filter: sepia(50%) saturate(500%) hue-rotate(90deg) brightness(100%) contrast(100%) drop-shadow(0 0 0 white); } .button .circuit-path-1, .button:hover .circuit-path-2 { opacity: 1; } .button:hover .circuit-path-1 { opacity: 0; } .button:focus .wrap:hover .circuit-path-1 { opacity: 1; } .button:focus .wrap:hover .circuit-path-2, .button:active .wrap:hover .circuit-path-1 { opacity: 0; } .button:active .wrap:hover .circuit-path-2 { opacity: 1; } .wrap-content { position: absolute; inset: 0; z-index: 1; transition: all 0.3s ease; } .button:active .wrap-content { transform: scale(0.97, 0.96); } .content { border-radius: var(--radius); overflow: hidden; height: 100%; padding: 2px; background: #fedc83; box-shadow: inset 0 0 16px 6px #c88a00, inset 0 -10px 10px -8px #ffac82; position: relative; } .button:hover .content { animation: shake 0.5s linear infinite; } @keyframes shake { 15% { transform: translate(1px, 1px); } 30% { transform: translate(0, -1px); } 45% { transform: translate(1px, -1px); } 55% { transform: translate(-1px, 1px); } 70% { transform: translate(1px, 0); } 85% { transform: translate(-1px, -1px); } } .button:focus .content { animation: shake-out 1.9s ease forwards; } @keyframes shake-out { 5% { transform: translate(2px, 2px); } 10% { transform: translate(0, -2px); } 15% { transform: translate(2px, -2px); } 20% { transform: translate(-2px, 2px); } 25% { transform: translate(2px, 0); } 30% { transform: translate(-2px, -2px); } 35% { transform: translate(2px, 2px); } 40% { transform: translate(0, -2px); } 45% { transform: translate(2px, -2px); } 48% { transform: scale(0.9); } 100% { transform: translate(0); } } .glyphs { pointer-events: none; touch-action: none; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; height: 100%; gap: 10px; border-radius: calc(var(--radius) * 0.85); font-weight: 600; background: #fedc83; box-shadow: inset 0 0 16px 6px #c88a00, 0 0 10px 10px rgba(0, 0, 0, 0.2), inset 0 -10px 10px -8px rgb(255, 89, 0); transition: all 0.3s ease; } .text { transition: all 0.3s ease; transform: translateY(-1px); display: flex; align-items: center; justify-content: center; } .text span { display: block; color: transparent; position: relative; } .text span:nth-child(5) { margin-right: 5px; } .text span { animation: char-in 1.2s ease backwards calc(var(--i) * 0.03s); } .text span::before, .text span::after { content: attr(data-label); position: absolute; color: black; text-shadow: 0 2px 3px #dabc45; left: 0; } .text span::before { opacity: 0; transform: translateY(-100%); } .button:hover .text span::before { animation: char-in 0.7s ease calc(var(--i) * 0.03s); } .button:hover .text span::after { opacity: 1; animation: char-out 0.7s ease calc(var(--i) * 0.03s) backwards; } .button:focus .text span { animation: char-out-2 0.7s ease forwards calc((var(--i)) * -0.02s); } @keyframes char-in { 0% { opacity: 0; transform: translateY(60%); filter: blur(20px); color: blue; } 30% { transform: translateY(-15%); opacity: 1; filter: blur(1px); color: #ff5100; } 60% { transform: translateY(5%); opacity: 1; filter: blur(0); } 100% { transform: translateY(0); opacity: 1; } } @keyframes char-out { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-70%); opacity: 0; filter: blur(4px); } } @keyframes char-out-2 { 0%, 50% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-70%); opacity: 0; filter: blur(4px); } } .icon-1 svg, .icon-2 svg { margin-top: 3px; } .button .icon-2 { position: absolute; filter: blur(5px); opacity: 0; animation: icon-2-out 0.6s ease-in forwards; } @keyframes icon-2-out { 0% { transform: translateX(0); filter: blur(0); opacity: 1; } 100% { transform: translateX(100px); filter: blur(5px); opacity: 0; } } .button .icon-2 svg { height: 28px; width: auto; overflow: visible; } .button .icon-2 .cloud { animation: cloud 6s linear infinite 0.3s; opacity: 0; filter: blur(10px); animation-play-state: paused; } .button .icon-2 .cloud-2 { animation-delay: 1.5s; } .button:focus .icon-2 .cloud { animation-play-state: running; } @keyframes cloud { 0%, 20% { transform: translateX(-140px); opacity: 0; } 70% { transform: translateX(0); opacity: 0.7; } 100% { transform: translateX(140px); opacity: 0; } } .button:focus .icon-2 { animation: icon-2-in 1.5s cubic-bezier(0.5, -0.15, 0.3, 1) 0.8s forwards; } @keyframes icon-2-in { 0% { transform: translateY(20px); filter: blur(5px); opacity: 0; } 100% { transform: translateY(0); filter: blur(0); opacity: 1; } } .button:focus .icon-2 .check { stroke-dasharray: 110; stroke-dashoffset: 110; animation: check 1.5s cubic-bezier(0.5, -0.15, 0.3, 1) forwards 1.2s; } @keyframes check { 0% { stroke-dashoffset: 110; stroke-width: 5px; } 100% { stroke-dashoffset: 0; } } .button .cloud-mask { animation: cloud-mask 2.2s ease infinite; } @keyframes cloud-mask { 0%, 5% { transform: translateX(0); opacity: 0.5; } 65%, 100% { transform: translateX(640px); opacity: 1; } } #cloud-mask-bg { color: #ffefa8; } .button:active #cloud-mask-bg { color: #90ffeb; } .icon-1 { margin-right: -8px; animation: icon-1-in 1s cubic-bezier(0.5, -0.15, 0.3, 1.4) forwards; } @keyframes icon-1-in { 0% { transform: translateX(-230px) scale(2.5) rotate(-130deg); filter: blur(4px); } 80% { transform: translateX(5px); filter: blur(3px); color: #ffd15b; } 100% { transform: translate(0); } } .icon-1:active path:nth-child(1) { animation: none; } .button:focus .icon-1 { animation: icon-1-out 1.5s ease-in-out forwards; } @keyframes icon-1-out { 0% { transform: translate(0); } 40% { transform: translateX(-250px) scale(2) rotate(-90deg); filter: blur(5px); } 40.0001% { transform: translate(-80px, -80px) scale(4); filter: contrast(2); opacity: 1; color: white; background-color: transparent; box-shadow: none; } 70%, 97% { transform: translate(-80px, 70px) scale(1); box-shadow: 0 0 50px 100px white; background-color: white; border-radius: 50%; } 100% { opacity: 0; } } .icon-1 svg { height: 32px; width: auto; overflow: visible; fill: #3a3631; } .icon-1 .stroke { stroke-dasharray: 90; stroke-dashoffset: -90; filter: blur(2px); animation: icon-stroke 3s linear infinite; } @keyframes icon-stroke { 0% { stroke-dashoffset: -90; } 100% { stroke-dashoffset: 90; } } .icon-1 .stroke:nth-child(1) { stroke: #00ffff; stroke-width: 4px; } .icon-1 .stroke:nth-child(2) { stroke: #ff7700; stroke-width: 3px; animation-delay: 1.5s; } .icon-1 .lightnings > g { transform: translate(15px, -15px); } .icon-1 .lightning { transform-origin: center; animation: lightning-1 0.9s linear infinite; } .icon-1 .lightning:last-child { animation: lightning-1 1.1s linear infinite 0.2s; } .icon-1 .lightning-2 { transform-origin: center; animation: lightning-2 0.9s linear infinite 0.2s; } .icon-1 .lightning-2:last-child { animation: lightning-2 1.1s linear infinite 0.4s; } .icon-1 g { opacity: 0; transition: 0.4s linear; } .button:hover .icon-1 g { opacity: 1; } @keyframes lightning-1 { 0% { transform: translate(30px, -30px); filter: blur(10px); opacity: 0; color: white; } 50% { transform: translate(0); filter: blur(0); opacity: 1; color: #acacac; } 100% { transform: translate(-30px, 30px); filter: blur(10px); opacity: 0; color: white; } } @keyframes lightning-2 { 0% { transform: translate(30px, -30px); filter: blur(10px); opacity: 0; } 50% { transform: translate(0); filter: blur(0); opacity: 1; color: white; } 100% { transform: translate(-30px, 30px); filter: blur(10px); opacity: 0; } }</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">المشاهدات : 57</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-138 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap"); :root { --shiny-cta-bg: #000000; --shiny-cta-bg-subtle: #1a1818; --shiny-cta-fg: #ffffff; --shiny-cta-highlight: blue; --shiny-cta-highlight-subtle: #8484ff; } @property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; } @property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; } .shiny-cta { --animation: gradient-angle linear infinite; --duration: 3s; --shadow-size: 2px; isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px; padding: 1.25rem 2.5rem; font-family: inherit; font-size: 1.125rem; line-height: 1.2; border: 1px solid transparent; border-radius: 360px; color: var(--shiny-cta-fg); background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box, conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4) ) border-box; box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle); &::before, &::after, span::before { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; } &:active { translate: 0 1px; } } /* Dots pattern */ .shiny-cta::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size); background: radial-gradient( circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0 ) padding-box; background-size: var(--space) var(--space); background-repeat: space; mask-image: conic-gradient( from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black ); border-radius: inherit; opacity: 0.4; z-index: -1; } /* Inner shimmer */ .shiny-cta::after { --animation: shimmer linear infinite; width: 100%; aspect-ratio: 1; background: linear-gradient( -50deg, transparent, var(--shiny-cta-highlight), transparent ); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.6; } .shiny-cta span { z-index: 1; &::before { --size: calc(100% + 1rem); width: var(--size); height: var(--size); box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight); opacity: 0; } } /* Animate */ .shiny-cta { --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1); transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; &, &::before, &::after { animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused; animation-composition: add; } span::before { transition: opacity var(--transition); animation: calc(var(--duration) * 1.5) breathe linear infinite; } } .shiny-cta:is(:hover, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-cta-highlight-subtle); &, &::before, &::after { animation-play-state: running; } span::before { opacity: 1; } } @keyframes gradient-angle { to { --gradient-angle: 360deg; } } @keyframes shimmer { to { rotate: 360deg; } } @keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } } 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"> <button class="shiny-cta"> <span>Get unlimited access</span> </button> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="y9QtQDJiIm4N0m5DaoadoWlfaKKT8nHmqJRlV8Yg" 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 >
الزر TI5
حفظ
عرض الكود
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/app-store-button' 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-93 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .btn-container { --pupil-color: rgb(156, 207, 255); --pupil-move: 20%; --sensor-height: 130dvmax; --sensor-width: calc(var(--sensor-height) * 82.84 / 100); } .btn-button { --back-color: #fff; } .btn-lid { --back-color: transparent; } /**********/ /* Styles */ /**********/ /* Container */ .btn-container { position: relative; } /* Button */ .btn-button { background: #fff; border: 3px solid #000; border-radius: 10rem; cursor: pointer; padding: 2rem; position: relative; z-index: 100; } .btn-button:hover, .btn-button:hover .btn-lid { animation: squint 100ms forwards; } .btn-button:active .btn-pupil { animation: agitate 100ms infinite 500ms; border-width: 0.5rem; padding: 1rem; } .btn-lid { border-radius: 10rem; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 101; } .btn-pupil { background: #000; border: 0.8rem solid var(--pupil-color); border-radius: 10rem; padding: 0.7rem; transition: all 200ms ease-out; } /* Sensors */ .btn-sensor { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0); height: var(--sensor-height); left: calc(50% - var(--sensor-width) / 2); overflow: hidden; position: absolute; top: calc(50% - var(--sensor-height) / 2); transform: rotate(calc(var(--a) * 1deg)) translateY(calc(var(--sensor-height) * -50 / 100)); width: var(--sensor-width); z-index: 99; } /************/ /* Tracking */ /************/ .sensor-n:hover ~ .btn-button .btn-pupil { transform: translateX(0) translateY(calc(-3 * var(--pupil-move))); } .sensor-ne:hover ~ .btn-button .btn-pupil { transform: translateX(calc(2 * var(--pupil-move))) translateY(calc(-2 * var(--pupil-move))); } .sensor-e:hover ~ .btn-button .btn-pupil { transform: translateX(calc(3 * var(--pupil-move))) translateY(0); } .sensor-se:hover ~ .btn-button .btn-pupil { transform: translateX(calc(2 * var(--pupil-move))) translateY(calc(2 * var(--pupil-move))); } .sensor-s:hover ~ .btn-button .btn-pupil { transform: translateX(0) translateY(calc(3 * var(--pupil-move))); } .sensor-sw:hover ~ .btn-button .btn-pupil { transform: translateX(calc(-2 * var(--pupil-move))) translateY(calc(2 * var(--pupil-move))); } .sensor-w:hover ~ .btn-button .btn-pupil { transform: translateX(calc(-3 * var(--pupil-move))) translateY(0); } .sensor-nw:hover ~ .btn-button .btn-pupil { transform: translateX(calc(-2 * var(--pupil-move))) translateY(calc(-2 * var(--pupil-move))); } /**************/ /* Animations */ /**************/ @keyframes agitate { 0% { transform: scale(1.2) translate(0%, -10%); } 25% { transform: scale(1.2) translate(-10%, 10%); } 50% { transform: scale(1.2) translate(10%, -5%); } 75% { transform: scale(1.2) translate(-10%, -5%); } 100% { transform: scale(1.2) translate(10%, 10%); } } @keyframes squint { 0% { background: var(--back-color); } 25% { background: linear-gradient( 0deg, #000 0% 9%, var(--back-color) 10% 90%, #000 91% 100% ); } 50% { background: linear-gradient( 0deg, #000 0% 18%, var(--back-color) 19% 81%, #000 82% 100% ); } 75% { background: linear-gradient( 0deg, #000 0% 27%, var(--back-color) 28% 72%, #000 73% 100% ); } 100% { background: linear-gradient( 0deg, #000 0% 35%, var(--back-color) 36% 64%, #000 65% 100% ); } } 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="btn-container"> <div style="--a: 0;" class="btn-sensor sensor-n"></div> <div style="--a: 45;" class="btn-sensor sensor-ne"></div> <div style="--a: 90;" class="btn-sensor sensor-e"></div> <div style="--a: 135;" class="btn-sensor sensor-se"></div> <div style="--a: 180;" class="btn-sensor sensor-s"></div> <div style="--a: 225;" class="btn-sensor sensor-sw"></div> <div style="--a: 270;" class="btn-sensor sensor-w"></div> <div style="--a: 315;" class="btn-sensor sensor-nw"></div> <button class="btn-button"> <div class="btn-lid"></div> <div class="btn-pupil"></div> </button> <button class="btn-button"> <div class="btn-lid"></div> <div class="btn-pupil"></div> </button> </div> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="y9QtQDJiIm4N0m5DaoadoWlfaKKT8nHmqJRlV8Yg" 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/runaway-button' 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-91 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .button { display: flex; background-color: #039be5; background-image: linear-gradient(to top right, #0163E0,#18ACFE); color: #ffffff; padding: 0.5rem 1.4rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; text-align: center; vertical-align: middle; align-items: center; border-radius: 0.5rem; gap: 0.75rem; border: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); cursor: pointer; transition: .6s ease; } .button svg { height: 30px; } .button:hover { box-shadow: none; } 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"> <button class="button"> <svg stroke="#ffffff" xml:space="preserve" viewBox="-143 145 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" fill="#ffffff"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path d="M329,145h-432c-22.1,0-40,17.9-40,40v432c0,22.1,17.9,40,40,40h432c22.1,0,40-17.9,40-40V185C369,162.9,351.1,145,329,145z M169.5,357.6l-2.9,38.3h-39.3v133H77.7v-133H51.2v-38.3h26.5v-25.7c0-11.3,0.3-28.8,8.5-39.7c8.7-11.5,20.6-19.3,41.1-19.3 c33.4,0,47.4,4.8,47.4,4.8l-6.6,39.2c0,0-11-3.2-21.3-3.2c-10.3,0-19.5,3.7-19.5,14v29.9H169.5z"></path> </g></svg> Continue with Facebook </button> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="y9QtQDJiIm4N0m5DaoadoWlfaKKT8nHmqJRlV8Yg" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>' class="w-full rounded-xl h-auto" style="overflow: hidden;" onload="resizeIframe(this)" title="home.CodePreview >
زر فيسبوك
حفظ
عرض الكود
HTML & CSS
<div class="flex gap-2 px-3 py-3 relative mt-auto"> <h3 class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate"> زر تسجيل ال... </h3> <button type="button" onclick="showLoginAlert()" class="add-to-wishlist-btn text-sm font-medium text-gray-800 dark:text-white truncate flex items-center"> <i class="fa-solid fa-bookmark dark:text-gray-100 text-gray-700 px-2" aria-hidden="true"></i> حفظ </button> </div> <a href='https://yartechnology.com/ar/resource/login-button' 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-89 " srcdoc='<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> <style> .pushable { position: relative; background: transparent; padding: 0px; border: none; cursor: pointer; outline-offset: 4px; outline-color: deeppink; transition: filter 250ms; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .shadow { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: hsl(226, 25%, 69%); border-radius: 8px; filter: blur(2px); will-change: transform; transform: translateY(2px); transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); } .edge { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 8px; background: linear-gradient( to right, hsl(248, 39%, 39%) 0%, hsl(248, 39%, 49%) 8%, hsl(248, 39%, 39%) 92%, hsl(248, 39%, 29%) 100% ); } .front { display: block; position: relative; border-radius: 8px; background: hsl(248, 53%, 58%); padding: 16px 32px; color: white; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1rem; transform: translateY(-4px); transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); } .pushable:hover { filter: brightness(110%); } .pushable:hover .front { transform: translateY(-6px); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); } .pushable:active .front { transform: translateY(-2px); transition: transform 34ms; } .pushable:hover .shadow { transform: translateY(4px); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); } .pushable:active .shadow { transform: translateY(1px); transition: transform 34ms; } .pushable:focus:not(:focus-visible) { outline: none; } 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"> <button class="pushable"> <span class="shadow"></span> <span class="edge"></span> <span class="front"> Push Me </span> </button> </div> </div> <script> </script> <!-- Livewire Scripts --> <script src="/livewire/livewire.js?id=def850b5" data-csrf="y9QtQDJiIm4N0m5DaoadoWlfaKKT8nHmqJRlV8Yg" 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 >
زر k28
حفظ
عرض الكود
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/illuminated-button' 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":"N3znakGqmDI9errFFqP2","name":"layout.footer","path":"ar\/resource\/electric-button","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"ar"},"checksum":"97c044c88bdf3953ac06f7981618256839ad353faafc0cba17f95d912523bb1a"}" wire:effects="[]" wire:id="N3znakGqmDI9errFFqP2" 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="y9QtQDJiIm4N0m5DaoadoWlfaKKT8nHmqJRlV8Yg" data-update-uri="/livewire/update" data-navigate-once="true"></script> </body> </html>