أساسيات يوكانأكواد CSSالكل

أكثر سكريبت احترافي لمتجر يوكان

في منصة يوكان وكما هو معروف أن لديها القالب القديم والقوالب الحديث التي لم تثر صدى كبير عند أصحاب المتاجر بحيث لم يعيروها اهتماما ، الكل ظل يشتغل بالقالب القديم لكن بسبب معظلة التشابه التي أصبحة موجودة في المتاجر ، الكل اتجه لشراء سكريبتات خاصة بالمتاجر , المعدل من طرف المبرمجين ، و هنا نوفر لك أكثر سكريبت احترافي يمكنك أن تشاهده لمتجر على منصة يوكان .

ماذا نعني بسكريبتات متاجر يوكان ؟

السكربتات المعدله لمتاجر يوكان تكون خاصة بتغيير مظهر المتجر ليجعله من مظهره العدي المألوف إلى مظهر احترافي وجذاب للزبناء يشجعهم أكثر ويترك له انطباع خصوصا الناس الذين يشترون بشكل دائم من المتاجر الإلكتروني ، و نحن هنا وفرنا لكم هذا السكريبت للعمل به وهو أكثر سكريبت احترافي يمكنك أن تشاهده لمتجر على منصة يوكان .

طريقة إدخال السكريبت

لكي تشتغل بهذا السكريبت الإحترافي يجب عليك مشاهدة الفيديو لكي تستطيع عمل هذا فالأمر سهل وبسيط . المهم عليك تأخذ هذا الكود الذي هو عبارة على سكريبت json و الذهاب إلى حاسوبك و الضغط على الماوس من الزر الذي في اليمين ثم إفتح ملف .txt ، بعد ذلك ألصق كود json داخله ، تم إذهب إلى متجرك في يوكان و اضغط على متجر بعد ذلك تصميم ثم بالأسفل سوف تظهر اقونة مكتوب عليها استراد اضغط عليها و اختر جميع الملفات ( ليس فقط ملفات json ) ثم اختر ملف txt الذي ادرجت داخل الكود .

{
  "id": "b6b8ed55-fabe-4e71-a53d-68e842421f92",
  "is_default": true,
  "theme_setting": {
    "store_settings": {
      "is_coupon_visible": false,
      "currencyPrecision": false,
      "header": {
        "notice": {
          "mobile": {
            "above": true,
            "enabled": true,
            "content": "<p>تخفيضات لن تجدها في أي مكان آخر : التوصيل بالمجان 🚛</p>",
            "color": "#ffffff",
            "bgColor": "#00FFC6FF"
          },
          "desktop": {
            "above": true,
            "enabled": true,
            "content": "<p>تخفيضات لن تجدها في أي مكان آخر : التوصيل بالمجان 🚛</p>",
            "color": "#ffffff",
            "bgColor": "#50E3C2FF"
          }
        },
        "mobile": {
          "left": [
            "burger_menu"
          ],
          "center": [
            "store_logo"
          ],
          "right": [
            "user_button",
            "search_icon"
          ],
          "color": {
            "background": "#EDFAF7FF",
            "icons": "#FFFFFFFF"
          },
          "border": {
            "exists": true,
            "color": "#00000000"
          }
        },
        "desktop": {
          "left": [
            "burger_menu",
            "menu"
          ],
          "center": [
            "store_logo"
          ],
          "right": [
            "user_button",
            "search_icon"
          ],
          "color": {
            "background": "#EDFAF7FF",
            "icons": "#50E3C2FF"
          },
          "border": {
            "exists": false,
            "color": "#50E3C2FF"
          }
        }
      },
      "footer": {
        "custom": false,
        "style": {
          "color": {
            "background": "#50E3C2FF",
            "text": "#FFFFFFFF"
          },
          "border": {
            "exists": true,
            "color": "#50E3C2FF"
          }
        },
        "content": null
      },
      "font": {
        "menu": {
          "text": "Cairo",
          "value": "Cairo",
          "category": "sans-serif"
        },
        "body": {
          "text": "Cairo",
          "value": "Cairo",
          "category": "sans-serif"
        }
      },
      "breadcrumbs": {
        "global": false,
        "checkout": false
      }
    },
    "checkout_settings": {
      "one_page_checkout": true
    },
    "product_settings": {
      "enable_reviews": true,
      "skip_to_checkout": true,
      "sticky_on_mobile": true,
      "sticky_on_desktop": true,
      "read_more": false,
      "enable_facebook_share": false,
      "enable_twitter_share": false,
      "enable_whatssap_share": false,
      "enable_product_quantity_selector": true,
      "related_products_section": false,
      "direct_add_to_cart": false,
      "cart_text": "اضغط هنا للطلب",
      "sections": [
        {
          "key": "title",
          "show": true
        },
        {
          "key": "preview",
          "show": true
        },
        {
          "key": "price",
          "show": true
        },
        {
          "key": "variants",
          "show": true
        },
        {
          "key": "scarcity",
          "show": true
        },
        {
          "key": "visitors",
          "show": true
        },
        {
          "key": "countdown",
          "show": true
        },
        {
          "key": "express-checkout",
          "show": true
        },
        {
          "key": "add_to_cart",
          "show": true
        },
        {
          "key": "description",
          "show": true
        }
      ],
      "visitors": {
        "max": 10,
        "min": 5
      },
      "fakeStock": {
        "max": 10,
        "min": 5
      },
      "time": {
        "days": 0,
        "hours": 1,
        "minutes": 0,
        "seconds": 0
      },
      "style": {
        "padding": {
          "top": 30,
          "bottom": 30
        },
        "background": {
          "color": "#00000000"
        },
        "text": {
          "color": "#000000FF"
        },
        "link": {
          "color": "#50E3C2FF"
        },
        "title": {
          "color": "#000000"
        },
        "price": {
          "before": {
            "color": "#747474"
          },
          "after": {
            "color": "#50E3C2FF"
          }
        },
        "addToCart": {
          "text": {
            "color": "#ffffff"
          },
          "background": {
            "color": "#50E3C2FF"
          },
          "border": {
            "color": "#00000000"
          },
          "hover": {
            "text": {
              "color": "#FFFFFFFF"
            },
            "background": {
              "color": "#50E3C2FF"
            },
            "border": {
              "color": "#00000000"
            }
          }
        },
        "quantityButtons": {
          "text": {
            "color": "#FFFFFFFF"
          },
          "background": {
            "color": "#00000000"
          },
          "border": {
            "color": "#00000000"
          },
          "hover": {
            "text": {
              "color": "#FFFFFFFF"
            },
            "background": {
              "color": "#00000000"
            },
            "border": {
              "color": "#00000000"
            }
          }
        },
        "primary": {
          "color": "#50E3C2FF"
        },
        "secondary": {
          "color": "#39DDB8FF"
        },
        "option": {
          "border": {
            "color": "#50E3C2FF"
          }
        }
      },
      "cart_safe_badges": null
    },
    "pages_settings": {
      "home": [
        {
          "type": 4,
          "settings": {
            "format": "horizontal",
            "size": "medium",
            "textsize": "medium",
            "frequency": 5,
            "images": [
              {
                "image": {
                  "name": "stores/e1b16de9e80d08b2ec28a32466c4cdc4/others/t5lfzIEjLbUiNUVIPYfXtyucWQ9M3t7AcBdLJXxA.png",
                  "link": "https://cdn.youcan.shop/stores/e1b16de9e80d08b2ec28a32466c4cdc4/others/t5lfzIEjLbUiNUVIPYfXtyucWQ9M3t7AcBdLJXxA.png"
                },
                "mobileImage": {
                  "name": "stores/e1b16de9e80d08b2ec28a32466c4cdc4/others/yHRVZOPMPFNZaaT9I1VkRHukTi2Nve5Y7ADXWeWN.png",
                  "link": "https://cdn.youcan.shop/stores/e1b16de9e80d08b2ec28a32466c4cdc4/others/yHRVZOPMPFNZaaT9I1VkRHukTi2Nve5Y7ADXWeWN.png"
                },
                "heading": {
                  "text": null,
                  "color": "#000000"
                },
                "subheading": {
                  "text": null,
                  "color": "#000000"
                },
                "height": null,
                "image_shadow": false,
                "position": "middle",
                "link": null
              }
            ],
            "height": null,
            "image_shadow": false,
            "style": []
          },
          "id": "section-1"
        },
        {
          "id": "section-yjy89c1726150136601",
          "type": 5,
          "settings": {
            "content": "<p><img src=\"https://cdn.youcan.shop/stores/e1b16de9e80d08b2ec28a32466c4cdc4/others/uHDnBn06F35luTxLH5YMaW0ZshaGmHvjjy4fWfVU.png\" style=\"width: 1392px;\" class=\"fr-fic fr-dib\" data-name=\"stores/e1b16de9e80d08b2ec28a32466c4cdc4/others/uHDnBn06F35luTxLH5YMaW0ZshaGmHvjjy4fWfVU.png\"></p>",
            "style": {
              "padding": {
                "top": 30,
                "bottom": 30
              },
              "background": {
                "color": "#ffffff"
              }
            }
          }
        },
        {
          "id": "section-ge7ncc1726146943241",
          "type": 3,
          "settings": {
            "title": "تصنيفات الموقع",
            "subtitle": "تسوق الآن و  احصل على تخفيضات كبيرا",
            "categories": [],
            "style": {
              "padding": {
                "top": 30,
                "bottom": 30
              },
              "background": {
                "color": "#ffffff"
              },
              "title": {
                "color": "#FFFFFFFF"
              },
              "subtitle": {
                "color": "#9B9B9BFF"
              },
              "item": {
                "title": {
                  "color": "#3AF1C8FF"
                }
              }
            }
          }
        },
        {
          "id": "section-mtkzvt1726147091714",
          "type": 1,
          "settings": {
            "categoryId": null,
            "title": "أحسن العروض",
            "subtitle": null,
            "type": "style-1",
            "limit": "4",
            "showLoadMore": true,
            "style": {
              "padding": {
                "top": 30,
                "bottom": 30
              },
              "background": {
                "color": "#ffffff"
              },
              "text": {
                "color": "#FFFFFFFF"
              },
              "title": {
                "color": "#FFFFFFFF"
              },
              "subtitle": {
                "color": "#50E3C2FF"
              },
              "item": {
                "price": {
                  "before": {
                    "color": "#747474"
                  },
                  "after": {
                    "color": "#50E3C2FF"
                  }
                },
                "title": {
                  "color": "#000000FF"
                },
                "border": {
                  "color": "#50E3C2FF",
                  "hover": {
                    "color": "#50E3C2FF"
                  }
                },
                "background": {
                  "color": "#ffffff00"
                },
                "button": {
                  "text": {
                    "color": "#50E3C2FF"
                  },
                  "background": {
                    "color": "#50E3C2FF"
                  },
                  "border": {
                    "color": "#50E3C2FF"
                  },
                  "hover": {
                    "text": {
                      "color": "#50E3C2FF"
                    },
                    "background": {
                      "color": "#50E3C2FF"
                    },
                    "border": {
                      "color": "#50E3C2FF"
                    }
                  }
                }
              },
              "button": {
                "text": {
                  "color": "#FFFFFFFF"
                },
                "background": {
                  "color": "#50E3C2FF"
                },
                "border": {
                  "color": "#50E3C2FF"
                },
                "hover": {
                  "text": {
                    "color": "#FFFFFFFF"
                  },
                  "background": {
                    "color": "#50E3C2FF"
                  },
                  "border": {
                    "color": "#50E3C2FF"
                  }
                }
              }
            }
          }
        }
      ]
    },
    "colors_settings": {
      "primary": "#50E3C2FF",
      "light-primary": "#50E3C2FF",
      "dark-primary": "#4A90E2FF",
      "secondary": "#1DCCA4FF",
      "body-background": "#EDFAF7FF",
      "success": "#3EB499FF",
      "info": "#008D6EFF",
      "warning": "#007A5FFF",
      "danger": "#4A4A4AFF"
    }
  }
}

بعد ذلك إنسخ السكريبت الذي بالأسفل واذهب إلى الإعدادات الخاصة بمتجرك واضغط على أونلاين القالب القديم وبعد ذلك اضغك على CSS/JavaScript configs ثم ألصق الكود في ( رمز العنوان الإضافي ) .

<style>
.notice-bar {
  position: relative;
  background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
  background-size: 600% 600%;
  color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(80, 227, 194);
  animation: gradientAnimation 10s ease infinite;
  padding: 10px 0;
  overflow: hidden;
}
@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.notice-bar::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: rgb(80, 227, 194);
  border-radius: 50% 50% 0 0;
  z-index: 1;
  animation: rollEffect 2s ease-in-out infinite alternate;
}
@keyframes rollEffect {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

.notice-bar .container {
  position: relative;
  z-index: 2;
}

.notice-bar p {
  text-align: center;
  margin: 0;
}

.notice-bar span {
  color: rgb(65, 65, 65);
  font-family: sans-serif;
  font-size: 14px;
  background-color: rgb(255, 255, 255);
  padding: 5px;
  border-radius: 5px;
}
</style>
<style>
@media (max-width: 991px) {
  .header-switcher {
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
    background-size: 600% 600%;
    border-radius: 20%; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; 
    height: 40px; 
    padding: 5px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none; 
    cursor: pointer;
    animation: gradientAnimation 10s ease infinite; 
  }
  
  .header-switcher:hover {
    transform: scale(1.05); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  }
  
  .header-switcher i {
    font-size: 24px; 
    color: #ffffff; 
  }
}
@media (min-width: 992px) {
  .header-switcher {
    background-color: transparent; 
    border-radius: 0; 
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto; 
    padding: 0;
    box-shadow: none; 
    text-decoration: none; 
  }
  
  .header-switcher i {
    font-size: 24px;
    color: #000000; 
  }
}

@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

</style>
  



<style>
@media (max-width: 991px) {
  .cart-icon {
    background-color: #57edcc; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px; 
    padding: 5px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    
    
    
  }
  
  .cart-icon:hover {
    transform: scale(1.1); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  }
  
  .cart-icon i {
    font-size: 24px;
    color: #ffffff; 
  }
}

</style>
<style>
  @media (max-width: 991px) {
  .header-switcher {
    background-color: #57edcc;
    border-radius: 20%; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; 
    height: 40px; 
    padding: 5px; 
    border: none; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; 
  }
  
  .header-switcher:hover {
    transform: scale(1.05); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
  }
  
  .header-switcher i {
    font-size: 24px;
    color: #ffffff; 
  }
}

</style>
<style>

.slide {
    border-radius: 0 0 20px 20px; 
    background-color: #fff; 
    box-shadow: #fff; 
    overflow: hidden;
    position: relative; 
    animation: zoom 20s infinite; 
}


@keyframes zoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}



.mobile-image, .desktop-image {
    width: 100%;
    height: auto;
    display: block;
}

.hidden-desktop {
    display: none; 
}
</style>
<style>
.app-heading {
  position: relative;
  overflow: hidden;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.heading-primary {
  background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
  background-size: 600% 600%;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 1.5em;
  font-weight: bold;
  position: relative;
  animation: gradientMove 10s linear infinite;
}

.heading-description {
  font-size: 1.2em;
  color: #333;
  position: relative;
  padding-top: 10px;
  animation: gradientMove 10s linear infinite, move 10s linear infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes move {
  0% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(-10px);
  }
}

.categories-list-section {
  padding: 20px;
}

.heading-primary {
  font-size: 24px;
  font-weight: bold;
}

.heading-description {
  font-size: 16px;   
  color: #555;
}

.categories-style-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
}

.category-item {
  flex: 1 1 calc(25% - 10px); 
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 10px; 
  animation: zoomAnimation 10s infinite; 
  border-radius: 20px; 
  background-color: #fff; 
}

.category-item img {
  width: 100%;
  height: auto; 
  display: block;
  object-fit: cover; 
}

.category-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes zoomAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}


@media (max-width: 768px) {
  .category-item {
    flex: 1 1 calc(50% - 10px); 
  }
}

@media (max-width: 480px) {
  .category-item {
    flex: 1 1 calc(50% - 10px);
  }
}


</style>

<style>

.products-style-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; 
  justify-content: center; 
  width: 100%;
}

.product-item {
  flex: 1 1 calc(25% - 10px);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background-color: #eefcf9;
  padding: 10px; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  transition: background-color 0.3s ease; 
  
}

@keyframes border-bounce {
  0% {
    border: 3px solid #50e3c2;
  }
  50% {
    border: 3px solid #28a091;
  }
  100% {
    border: 3px solid #50e3c2; 
  }
}


.product-thumbnail {
  display: block;
  overflow: hidden;
  border-radius: 15px; 
}

.product-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px; 
  object-fit: cover;
}


.product-details {
  margin-top: 10px; 
}

.product-info {
  text-align: center;
}

.product-title {
  font-size: 18px; 
  margin-bottom: 10px;
  line-height: 1.4; 
}

.product-price {
  font-size: 14px;
  color: #333;
}

.currency-value {
  font-weight: bold;
}

.currency-value.before {
  text-decoration: line-through; 
  color: #888;
}


.product-actions {
  text-align: center;
  margin-top: 10px;
}

.button.small-button {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 5px; 
}

.button.secondary-button {
  background-color: #007bff; 
  color: #fff;
  border: none;
}

.button.secondary-button:hover {
  background-color: #0056b3; 
}


@media (max-width: 768px) {
  .product-item {
    flex: 1 1 calc(50% - 10px); 
  }

  .product-title {
    font-size: 16px; 
  }
}

@media (max-width: 480px) {
  .product-item {
    flex: 1 1 calc(50% - 10px); 
  }

  .product-title {
    font-size: 16px; 
  }
}

@keyframes move-horizontal {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px); 
  }
  100% {
    transform: translateX(0);
  }
}


.load-more {
  text-align: center;
  margin: 20px 0; 
  animation: move-horizontal 4s ease-in-out infinite; 
}

.load-more .button {
  background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
  color: #fff;
  padding: 10px 20px; 
  border-radius: 5px; 
  text-decoration: none; 
  font-size: 16px; 
  font-weight: bold; 
  display: inline-block; 
  transition: background 0.3s ease, color 0.3s ease;
   animation: gradientMove 10s linear infinite, move 10s linear infinite;
}
 
  

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



</style> 
<style>
  .footer {
  position: relative;
  background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
  background-size: 600% 600%;
  color: rgb(255, 255, 255);
  border-top: 1px solid rgb(80, 227, 194);
  animation: gradientAnimation 10s ease infinite, fadeIn 2s ease-out;
  padding: 20px 0;
  overflow: hidden;
}


@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.footer::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: rgb(80, 227, 194);
  border-radius: 0 0 50% 50%;
  z-index: 1;
  
}
</style>
<style>
.footer-container {
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 100%; 
}

.footer-brand {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 30px;
  display: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.footer-brand:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

</style>



<script>
  document.addEventListener('DOMContentLoaded', function() {
    var signatureDiv = document.createElement('div');
    signatureDiv.className = 'hamzon-tech-signature';
    signatureDiv.innerHTML = '© 2024 حقوق الطبع والنشر - <a href="https://www.youtube.com/@HamzonTech" target="_blank">Hamzon Tech</a> | للتواصل معنا: <a href="https://wa.me/212643667402" target="_blank">واتساب</a>';

    document.body.appendChild(signatureDiv);
    var additionalSignature = signatureDiv.cloneNode(true);
    document.querySelector('.footer').appendChild(additionalSignature);
  });
</script>
<style>
  .hamzon-tech-signature {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 1000;
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out;
  }

  .hamzon-tech-signature:hover {
    opacity: 1;
  }

  .hamzon-tech-signature a {
    color: #57edcc;
    text-decoration: none;
  }

  .hamzon-tech-signature a:hover {
    text-decoration: underline;
  }
</style>

<style>

.product-slider .slick-slide img {
    transition: transform 5s ease; 
}

.product-slider .slick-slide:hover img {
    transform: scale(1.1); 
}

</style>
<style>
.checkout {
    border: 5px solid #50e3c2; 
    border-radius: 20px;
    margin: 0 0 10px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25), 0px 0px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease-in-out;
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091); 
    background-size: 600% 600%;
    animation: gradientAnimation 10s ease infinite; 
}



.checkout-heading {
    animation: zoom 3s infinite linear;
    text-align: center;
    font-weight: bold !important;
    font-size: 5rem;
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091); 
    background-size: 600% 600%; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    animation: gradientAnimation 10s ease infinite;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: none;
}


@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes zoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.checkout-form {
    padding: 30px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.checkout-form:hover {
    background-color: rgba(255, 255, 255, 0.9); 
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="url"],
.checkout-form input[type="search"],
.checkout-form input[type="number"],
.checkout-form input[type="tel"],
.checkout-form input[type="password"],
.checkout-form textarea {
    border-color: #50e3c2;
    border-radius: 15px;
    padding: 12px 18px;
    background-color: #ffffff;
    border: 2px solid;
    transition: all 2s ease-in-out;
}

.checkout-form input:focus,
.checkout-form textarea:focus {
    border-color: #28a091;
    transform: scale(1.02);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="url"],
.checkout-form input[type="search"],
.checkout-form input[type="number"],
.checkout-form input[type="tel"],
.checkout-form input[type="password"],
.checkout-form textarea {
    border-radius: 15px;
    padding: 12px 18px;
    background-color: #ffffff;
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091); 
    background-size: 600% 600%;
    color: #ffffff; 
    font-weight: bold; 
    border: none; 
    animation: gradientBorder 10s ease infinite; 
    transition: all 2s ease-in-out;
}

.checkout-form input::placeholder,
.checkout-form textarea::placeholder {
    color: #FFFF; 
    font-weight: bold; 
}

@keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.checkout-form input:focus,
.checkout-form textarea:focus {
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091); /
    background-size: 600% 600%;
    color: #ffffff; 
    font-weight: bold; 
    transform: scale(1.02);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    animation: gradientBorder 10s ease infinite;
</style>
<style>
.product-section .quantity {
    display: inline-flex;
    align-items: center;
    color: #fff; 
    justify-content: center;
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
    background-size: 600% 600%;
    animation: gradientAnimation 10s ease infinite;
    padding: 5px 10px; /* Adjust padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Removed border */
}

/* Gradient animation keyframes */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

    </style>
    <style>
  .button.single-submit {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091); 
    background-size: 600% 600%;
    animation: gradientAnimation 10s ease infinite;
    padding: 10px 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none; 
    color: white;
    font-size: 16px; 
    cursor: pointer; 
}


@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.button.single-submit:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
    transform: translateY(-2px);
}

    </style>
    <style>
  

.product-section.single-visitors b {
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091); 
    background-size: 600% 600%;
    animation: gradientAnimation 10s ease infinite;
    border-radius: 5px; 
    padding: 2px 5px;
    color: white; 
}


@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


    </style>
<style>

.textual-buttons-container {
    display: flex;
    gap: 10px;
}


.textual-button {
    display: inline-block;
    border-radius: 5px;
    padding: 2px 5px; 
    border: 2px solid transparent; 
    color: black;
    cursor: pointer; 
}


input[type="radio"]:checked + label {
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
    background-size: 600% 600%;
    animation: gradientAnimation 10s ease infinite;
    border-radius: 5px; /* Rounded corners for the border */
    border: none; /* Remove border */
    color: white; /* Text color inside the border when selected */
}

/* Gradient animation keyframes */
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.textual-button input[type="radio"] {
    display: none; /* Hide radio buttons */
}

.textual-button label {
    display: block;
    padding: 10px 15px;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
}

</style>
<style>
.single-countdown {
    display: flex;
    
    padding: 10px;
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091); 
    background-size: 300% 300%;
    animation: gradientAnimation 10s ease infinite;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    color: #ffffff; 
}


@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



</style>
<style>

.sticky-cart-bar .single-submit {
  position: relative;
  background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
  background-size: 600% 600%;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  animation: gradientAnimation 10s ease infinite;
}


@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.sticky-cart-bar .single-submit:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

</style>
<style>
.product-details {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

.product-actions {
    margin-top: 10px; 
    text-align: center; 
}

@media (max-width: 768px) {
    .button {
        padding: 6px 12px; 
        font-size: 12px;
    }
}


@keyframes gradientButton {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.product-actions .button {
    position: relative;
    background: linear-gradient(270deg, #50e3c2, #38c0a3, #28a091);
    background-size: 600% 600%;
    color: #fff;
    border: none;
    padding: 8px 16px; 
    border-radius: 5px;
    font-size: 14px; 
    font-weight: bold;
    cursor: pointer;
    animation: gradientButton 10s ease-in-out infinite;
    max-width: 100%; 
    box-sizing: border-box; 
}


.product-actions .button:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


}</style>
<style>

.product-details {
  direction: rtl; 
}

.product-section {
  box-sizing: border-box;
  width: 100%; 
}

.single-title {
  width: 100%;
  text-align: right; 
}

.thumbnail img {
  width: 100%;
  height: auto; 
}


.single-price {
  width: 100%;
  text-align:right; 
}

.countdown-section {
  width: 100%;
  text-align: center;
}

.single-progress {
  width: 100%;
  background-color: #f1f1f1; 
}

.single-countdown {
  display: flex;
  justify-content: space-between; 
}


.quantity {
  display: flex;
  align-items: center; 
  justify-content: center; 
}

.single-quantity {
  width: 60px;
  text-align: center; 
}


```.single-title {
  
  text-align: right; 
}
 
</style>
 <style>
 .single-hurry-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #000; 
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.single-hurry-section:hover {
    background: #e2e6ea; 
}

.single-hurry {
    position: relative;
    z-index: 1;
    animation: textGlow 1.5s infinite;
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 5px rgba(255,255,255,0.8), 0 0 10px rgba(255,255,255,0.6);
    }
    50% {
        text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,0.8);
    }
    100% {
        text-shadow: 0 0 5px rgba(255,255,255,0.8), 0 0 10px rgba(255,255,255,0.6);
    }
}
</style>

مقالات ذات صلة

زر الذهاب إلى الأعلى