فراغیب

الگو:کانتینر خط و دایره: تفاوت میان نسخه‌ها

تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی « <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مراحل ثبت سفارش چاپ و تبلیغات</title> <meta name="description" content="مراحل ثبت سفارش خدمات چاپ و تبلیغات؛ از انتخاب محصول و مشخصات تا ارسال فایل و تکمیل سفارش چاپ."> <link rel="stylesheet"...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۸: خط ۸:


<meta name="description"
<meta name="description"
      content="مراحل ثبت سفارش خدمات چاپ و تبلیغات؛ از انتخاب محصول و مشخصات تا ارسال فایل و تکمیل سفارش چاپ.">
content="مراحل ثبت سفارش خدمات چاپ و تبلیغات؛ از انتخاب خدمات و مشخصات تا ارسال فایل، تأیید سفارش و چاپ نهایی.">


<link rel="stylesheet"
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">


<style>
<style>


/* =========================================================
/* =========================================================
   تنظیمات اصلی رنگ و اندازه
   تنظیمات اصلی
   فقط مقادیر این قسمت را تغییر دهید
   فقط رنگ‌ها را از این قسمت تغییر دهید
========================================================= */
========================================================= */


:root {
:root {


     /* رنگ اصلی خطوط و حاشیه */
     /* رنگ خطوط سبز */
     --main-green: #20b957;
     --main-green: #20b957;


خط ۳۱: خط ۳۱:
     --title-color: #777777;
     --title-color: #777777;


     /* رنگ متن مراحل */
     /* رنگ عنوان مراحل */
     --text-color: #666666;
     --text-color: #666666;
    /* رنگ توضیحات */
    --description-color: #999999;


     /* رنگ پس زمینه */
     /* رنگ پس زمینه */
خط ۴۰: خط ۴۳:
     --circle-bg: #ffffff;
     --circle-bg: #ffffff;


     /* رنگ حلقه داخلی */
     /* حلقه خاکستری */
     --inner-ring: #e9e9e9;
     --inner-ring: #e9e9e9;


     /* سایه */
     /* سایه */
     --shadow-color: rgba(0, 0, 0, 0.12);
     --shadow-color: rgba(0,0,0,.12);
 
    /* ضخامت خط سبز */
    --line-width: 2px;


     /* اندازه دایره */
     /* =====================================================
    --circle-size: 230px;
      اندازه دایره‌ها کاملاً ریسپانسیو
    ===================================================== */


     /* ضخامت خطوط سبز */
    --circle-size: clamp(
     --line-width: 2px;
        145px,
        16vw,
        225px
    );
 
    /* اندازه آیکون */
    --icon-size: clamp(
        38px,
        3.5vw,
        52px
    );
 
     /* اندازه عنوان */
     --step-title-size: clamp(
        13px,
        1.25vw,
        17px
    );


     /* رنگ پس زمینه کلی */
     /* فاصله بین عنوان و آیکون */
     --body-bg: #ffffff;
     --icon-margin: clamp(
        7px,
        1vw,
        12px
    );
}
}


خط ۷۳: خط ۱۰۱:
body {
body {
     direction: rtl;
     direction: rtl;
    margin: 0;
    padding: 0;
    background: #fff;
     font-family: Tahoma, Arial, sans-serif;
     font-family: Tahoma, Arial, sans-serif;
    background: var(--body-bg);
    color: var(--text-color);
}
}




/* =========================================================
/* =========================================================
   SECTION
   بخش اصلی
========================================================= */
========================================================= */


.order-process {
.order-process {
     width: 100%;
     width: 100%;
     padding: 30px 10px 40px;
 
     padding-top: clamp(22px, 3vw, 35px);
 
    padding-right: clamp(8px, 2vw, 25px);
    padding-left: clamp(8px, 2vw, 25px);
 
    padding-bottom: clamp(35px, 5vw, 55px);
 
     background: var(--section-bg);
     background: var(--section-bg);
    /* جلوگیری از ایجاد اسکرول افقی */
     overflow: hidden;
     overflow: hidden;
}
}
خط ۹۲: خط ۱۳۱:


/* =========================================================
/* =========================================================
   TITLE
   عنوان
========================================================= */
========================================================= */


.order-process-title {
.order-process-title {
    width: 100%;
     text-align: center;
     text-align: center;
     margin-bottom: 30px;
 
     margin-bottom: clamp(
        25px,
        4vw,
        45px
    );
}
}


.order-process-title h2 {
.order-process-title h2 {
     color: var(--title-color);
     color: var(--title-color);
     font-size: clamp(22px, 4vw, 30px);
 
     font-size: clamp(
        21px,
        2.5vw,
        30px
    );
 
    line-height: 1.6;
 
     font-weight: 700;
     font-weight: 700;
    line-height: 1.6;
}
}


.order-process-title p {
.order-process-title p {
     margin-top: 5px;
 
     color: #999;
     margin-top: clamp(
     font-size: 13px;
        3px,
        .6vw,
        7px
    );
 
     color: var(--description-color);
 
     font-size: clamp(
        11px,
        1vw,
        14px
    );
 
    line-height: 1.7;
}
}




/* =========================================================
/* =========================================================
   PROCESS CONTAINER
   کانتینر مراحل
========================================================= */
========================================================= */


.process-container {
.process-container {
     width: 100%;
     width: 100%;
     max-width: 1350px;
 
     max-width: 1450px;
 
     margin: 0 auto;
     margin: 0 auto;


     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
    justify-content: center;
    gap: clamp(
        45px,
        7vw,
        70px
    );
}
}




/* =========================================================
/* =========================================================
   EACH STEP
   هر مرحله
========================================================= */
========================================================= */


.process-step {
.process-step {
     position: relative;
     position: relative;
     width: var(--circle-size);
     width: var(--circle-size);
     height: var(--circle-size);
     height: var(--circle-size);
خط ۱۴۱: خط ۲۲۴:


     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
خط ۱۴۹: خط ۲۳۳:


/* =========================================================
/* =========================================================
   CIRCLE
   دایره اصلی
========================================================= */
========================================================= */


خط ۱۵۶: خط ۲۴۰:
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
    position: relative;


     border: var(--line-width) solid var(--main-green);
     border: var(--line-width) solid var(--main-green);
     border-radius: 50%;
     border-radius: 50%;


خط ۱۶۳: خط ۲۵۰:


     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;


     position: relative;
     text-align: center;


     box-shadow:
     box-shadow:
         0 12px 20px var(--shadow-color);
         0 clamp(8px, 1vw, 14px)
        clamp(12px, 1.6vw, 22px)
        var(--shadow-color);


     isolation: isolate;
     z-index: 3;
}
}




/* حلقه خاکستری داخل دایره */
/* =========================================================
  حلقه خاکستری داخل دایره
========================================================= */


.step-circle::before {
.step-circle::before {
خط ۱۸۴: خط ۲۷۸:
     position: absolute;
     position: absolute;


     inset: 7px;
     inset: clamp(
        5px,
        .6vw,
        8px
    );


     border: 5px solid var(--inner-ring);
     border:
 
        clamp(
            3px,
            .35vw,
            5px
        )
 
        solid var(--inner-ring);


     border-radius: 50%;
     border-radius: 50%;


     z-index: -1;
     pointer-events: none;
}
}




/* =========================================================
/* =========================================================
   ICON
   آیکون
========================================================= */
========================================================= */


.step-icon {
.step-icon {


     width: 75px;
     width: clamp(
     height: 75px;
        55px,
        6vw,
        78px
    );
 
     height: clamp(
        55px,
        6vw,
        78px
    );


     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
خط ۲۰۹: خط ۳۲۵:
     color: var(--icon-color);
     color: var(--icon-color);


     font-size: 48px;
     font-size: var(--icon-size);
 
    margin-bottom: var(--icon-margin);


     margin-bottom: 12px;
     flex-shrink: 0;
 
    /* هیچ حرکت یا انیمیشنی ندارد */
    transform: none;
 
    transition: none;
 
    animation: none;
}
}




/* =========================================================
/* =========================================================
   TEXT
   متن مرحله
========================================================= */
========================================================= */


.step-content {
.step-content {
    position: relative;
    z-index: 4;
    width: 100%;
    padding-left: clamp(
        10px,
        1.5vw,
        20px
    );
    padding-right: clamp(
        10px,
        1.5vw,
        20px
    );
     text-align: center;
     text-align: center;
    padding: 0 15px;
}
}


خط ۲۲۸: خط ۳۷۱:
     color: var(--text-color);
     color: var(--text-color);


     font-size: 17px;
     font-size: var(--step-title-size);


     font-weight: 700;
     font-weight: 700;


     line-height: 1.7;
     line-height: 1.7;
    white-space: normal;
}
}


.step-content p {
.step-content p {


     margin-top: 4px;
     margin-top: 3px;


     color: #999;
     color: var(--description-color);


     font-size: 11px;
     font-size: clamp(
        9px,
        .8vw,
        12px
    );


     line-height: 1.7;
     line-height: 1.6;
}
}




/* =========================================================
/* =========================================================
   GREEN CONNECTOR
   خطوط اتصال موبایل
  در موبایل به صورت عمودی
========================================================= */
========================================================= */


خط ۲۵۸: خط ۴۰۶:
     position: absolute;
     position: absolute;


     width: 50px;
     width: clamp(
     height: 75px;
        35px,
        12vw,
        55px
    );
 
     height: clamp(
        40px,
        12vw,
        65px
    );


    bottom: -48px;
     left: 50%;
     left: 50%;
    bottom: clamp(
        -55px,
        -7vw,
        -40px
    );


     transform: translateX(-50%);
     transform: translateX(-50%);


     border-right: var(--line-width) solid var(--main-green);
     border-left:
     border-left: var(--line-width) solid var(--main-green);
        var(--line-width)
        solid
        var(--main-green);
 
     border-right:
        var(--line-width)
        solid
        var(--main-green);


     border-radius: 40px;
     border-radius: 40px;


     z-index: 0;
     z-index: 1;
}
}




/* =========================================================
/* =========================================================
   نقطه اتصال پایین
   نقطه اتصال موبایل
========================================================= */
========================================================= */


خط ۲۸۵: خط ۴۵۴:
     position: absolute;
     position: absolute;


     width: 9px;
     width: clamp(
     height: 9px;
        7px,
        1.2vw,
        10px
    );
 
     height: clamp(
        7px,
        1.2vw,
        10px
    );
 
    left: calc(50% + 20px);
 
    bottom: clamp(
        -61px,
        -7.8vw,
        -48px
    );


     background: var(--section-bg);
     background: var(--section-bg);


     border: 2px solid var(--main-green);
     border:
        2px solid
        var(--main-green);


     border-radius: 50%;
     border-radius: 50%;


    bottom: -55px;
     z-index: 5;
    left: calc(50% + 22px);
 
     z-index: 4;
}
}




/* =========================================================
/* =========================================================
   DESKTOP
   TABLET و DESKTOP
========================================================= */
========================================================= */


@media (min-width: 768px) {
@media (min-width: 768px) {
    .order-process {
        padding: 25px 15px 40px;
    }
    .order-process-title {
        margin-bottom: 35px;
    }


     .process-container {
     .process-container {
خط ۳۱۹: خط ۴۹۶:
         flex-direction: row;
         flex-direction: row;


         justify-content: center;
         align-items: center;


         align-items: center;
         justify-content: space-between;


        /*
        فاصله صفر است تا 5 دایره
        دقیقاً داخل عرض قرار بگیرند
        */
         gap: 0;
         gap: 0;
        padding-left: 0;
        padding-right: 0;
     }
     }




     .process-step {
     .process-step {
         width: var(--circle-size);
 
         height: var(--circle-size);
        /*
        هر مرحله 20 درصد فضای موجود
        را در اختیار دارد
        */
        width: 20%;
 
        height: auto;
 
        aspect-ratio: 1 / 1;
 
         max-width: var(--circle-size);
 
         /*
        جلوگیری از بیرون رفتن دایره
        */
        flex: 0 1 var(--circle-size);
     }
     }




     /* -----------------------------------------------------
     /* =====================================================
       اتصال افقی بین دایره‌ها
       خط اتصال افقی
     ----------------------------------------------------- */
     ===================================================== */


     .process-step:not(:last-child)::after {
     .process-step:not(:last-child)::after {


         width: 105px;
         width: clamp(
         height: 75px;
            45px,
            7vw,
            100px
        );
 
         height: clamp(
            45px,
            5.5vw,
            75px
        );
 
        /*
        خط از لبه دایره به سمت دایره بعدی
        */


         top: 50%;
         top: 50%;
         right: -53px;
 
         right: clamp(
            -55px,
            -5vw,
            -35px
        );
 
         left: auto;
         left: auto;


خط ۳۵۰: خط ۵۶۸:
         transform: translateY(-50%);
         transform: translateY(-50%);


         border-top: var(--line-width) solid var(--main-green);
         border-left: 0;
        border-bottom: var(--line-width) solid var(--main-green);


         border-right: 0;
         border-right: 0;
         border-left: 0;
 
         border-top:
            var(--line-width)
            solid
            var(--main-green);
 
        border-bottom:
            var(--line-width)
            solid
            var(--main-green);


         border-radius: 50px;
         border-radius: 50px;


         z-index: 0;
         z-index: 1;
     }
     }




     /* -----------------------------------------------------
     /* =====================================================
       نقطه اتصال
       نقطه اتصال دسکتاپ
     ----------------------------------------------------- */
     ===================================================== */


     .process-step:not(:last-child)::before {
     .process-step:not(:last-child)::before {


         width: 9px;
         width: clamp(
         height: 9px;
            7px,
            .7vw,
            10px
        );
 
         height: clamp(
            7px,
            .7vw,
            10px
        );


         top: 50%;
         top: 50%;


         right: -4px;
         right: clamp(
            -7px,
            -.5vw,
            -4px
        );
 
         left: auto;
         left: auto;


خط ۳۸۲: خط ۶۲۲:
         background: var(--section-bg);
         background: var(--section-bg);


         border: 2px solid var(--main-green);
         border:
            2px solid
            var(--main-green);


         z-index: 5;
         z-index: 5;
    }
}
/* =========================================================
  دسکتاپ متوسط
  768 تا 1100
========================================================= */
@media (min-width: 768px) and (max-width: 1100px) {
    :root {
        --circle-size: clamp(
            140px,
            17vw,
            175px
        );
        --icon-size: clamp(
            32px,
            4vw,
            42px
        );
        --step-title-size: clamp(
            11px,
            1.4vw,
            14px
        );
     }
     }




     /* -----------------------------------------------------
     .process-container {
      دایره‌ها روی خطوط قرار بگیرند
    ----------------------------------------------------- */


     .step-circle {
        max-width: 100%;
         z-index: 3;
 
        padding-left: 8px;
        padding-right: 8px;
    }
 
 
     .process-step:not(:last-child)::after {
 
        width: clamp(
            35px,
            5vw,
            60px
        );
 
         right: clamp(
            -32px,
            -4vw,
            -25px
        );
     }
     }


خط ۴۰۰: خط ۶۸۸:


/* =========================================================
/* =========================================================
   DESKTOP LARGE
   دسکتاپ بزرگ
  بالای 1100
========================================================= */
========================================================= */


@media (min-width: 1100px) {
@media (min-width: 1101px) {


     :root {
     :root {
         --circle-size: 240px;
 
         --circle-size: clamp(
            180px,
            16vw,
            225px
        );
     }
     }


     .process-container {
     .process-container {
        max-width: 1360px;
    }


    .step-icon {
         max-width: 1400px;
         font-size: 50px;
     }
     }


    .step-content h3 {
        font-size: 17px;
    }
}
}




/* =========================================================
/* =========================================================
   TABLET
   مانیتورهای خیلی بزرگ
========================================================= */
========================================================= */


@media (min-width: 768px) and (max-width: 1099px) {
@media (min-width: 1500px) {


     :root {
     :root {
        --circle-size: 190px;
    }


    .process-step:not(:last-child)::after {
        --circle-size: 225px;
         width: 75px;
 
         right: -38px;
         --icon-size: 52px;
 
         --step-title-size: 17px;
     }
     }


     .step-icon {
     .process-container {
        font-size: 42px;
    }


    .step-content h3 {
         max-width: 1400px;
         font-size: 14px;
     }
     }


خط ۴۵۰: خط ۷۳۵:


/* =========================================================
/* =========================================================
   MOBILE
   موبایل
========================================================= */
========================================================= */


@media (max-width: 767px) {
@media (max-width: 767px) {


     .order-process {
     .process-container {
         padding-top: 25px;
 
         padding-bottom: 35px;
        width: 100%;
 
         max-width: 100%;
 
         gap: clamp(
            40px,
            9vw,
            60px
        );
     }
     }


     :root {
 
         --circle-size: min(230px, 72vw);
     .process-step {
 
         width: var(--circle-size);
 
        height: var(--circle-size);
 
        max-width: none;
 
        aspect-ratio: auto;
     }
     }


     .process-container {
 
         gap: 45px;
    /* در موبایل توضیحات مخفی می‌شوند */
 
     .step-content p {
         display: none;
     }
     }


    .step-icon {
        font-size: 44px;
        margin-bottom: 10px;
    }


     .step-content h3 {
     .step-content h3 {
         font-size: 16px;
 
         font-size: clamp(
            14px,
            4vw,
            17px
        );
     }
     }


     .step-content p {
 
         display: none;
     .step-icon {
 
         font-size: clamp(
            38px,
            11vw,
            48px
        );
     }
     }


خط ۴۸۵: خط ۷۹۶:


/* =========================================================
/* =========================================================
   SMALL MOBILE
   موبایل کوچک
========================================================= */
========================================================= */


خط ۴۹۱: خط ۸۰۲:


     :root {
     :root {
         --circle-size: 205px;
 
         --circle-size: 190px;
     }
     }


     .step-icon {
     .order-process {
         font-size: 40px;
 
        padding-right: 5px;
         padding-left: 5px;
     }
     }


    .step-content h3 {
}
         font-size: 15px;
 
 
/* =========================================================
  جلوگیری از حرکت و افکت ناخواسته
========================================================= */
 
.step-circle,
.step-icon,
.step-circle *,
.process-step {
 
    transition: none !important;
 
    animation: none !important;
}
 
 
/* =========================================================
  دسترسی بهتر
========================================================= */
 
@media (prefers-reduced-motion: reduce) {
 
    *,
    *::before,
    *::after {
 
         scroll-behavior: auto !important;
 
        animation: none !important;
 
        transition: none !important;
     }
     }
}
}


خط ۵۱۵: خط ۸۵۹:
======================================================= -->
======================================================= -->


<section class="order-process"
<section
        aria-labelledby="order-process-title">
    class="order-process"
    aria-labelledby="order-process-title">


     <div class="order-process-title">
 
     <!-- عنوان بخش -->
 
    <header class="order-process-title">


         <h2 id="order-process-title">
         <h2 id="order-process-title">
خط ۵۲۵: خط ۸۷۳:


         <p>
         <p>
             ثبت سفارش آسان و سریع خدمات چاپ و تبلیغات
             سفارش خدمات چاپ و تبلیغات در چند مرحله ساده
         </p>
         </p>


     </div>
     </header>
 


    <!-- مراحل -->


     <div class="process-container">
     <div class="process-container">




         <!-- مرحله اول -->
         <!-- ===============================================
            مرحله 1
        ================================================ -->


         <article class="process-step">
         <article
            class="process-step"
            aria-label="مرحله اول انتخاب خدمات چاپ">


             <div class="step-circle">
             <div class="step-circle">


                 <div class="step-icon" aria-hidden="true">
                 <div
                     <i class="fa-solid fa-box-open"></i>
                    class="step-icon"
                    aria-hidden="true">
 
                     <i class="fa-solid fa-print"></i>
 
                 </div>
                 </div>


خط ۵۶۱: خط ۹۱۹:




         <!-- مرحله دوم -->
         <!-- ===============================================
            مرحله 2
        ================================================ -->


         <article class="process-step">
         <article
            class="process-step"
            aria-label="مرحله دوم انتخاب مشخصات سفارش">


             <div class="step-circle">
             <div class="step-circle">


                 <div class="step-icon" aria-hidden="true">
                 <div
                     <i class="fa-solid fa-hand-pointer"></i>
                    class="step-icon"
                    aria-hidden="true">
 
                     <i class="fa-solid fa-list-check"></i>
 
                 </div>
                 </div>


خط ۵۷۸: خط ۹۴۴:


                     <p>
                     <p>
                         تعیین جنس، ابعاد و تیراژ
                         تعیین ابعاد، جنس و تیراژ چاپ
                     </p>
                     </p>


خط ۵۸۸: خط ۹۵۴:




         <!-- مرحله سوم -->
         <!-- ===============================================
            مرحله 3
        ================================================ -->


         <article class="process-step">
         <article
            class="process-step"
            aria-label="مرحله سوم ارسال فایل چاپی">


             <div class="step-circle">
             <div class="step-circle">


                 <div class="step-icon" aria-hidden="true">
                 <div
                    class="step-icon"
                    aria-hidden="true">
 
                     <i class="fa-solid fa-file-arrow-up"></i>
                     <i class="fa-solid fa-file-arrow-up"></i>
                 </div>
                 </div>


خط ۶۱۵: خط ۹۸۹:




         <!-- مرحله چهارم -->
         <!-- ===============================================
            مرحله 4
        ================================================ -->


         <article class="process-step">
         <article
            class="process-step"
            aria-label="مرحله چهارم تایید سفارش">


             <div class="step-circle">
             <div class="step-circle">


                 <div class="step-icon" aria-hidden="true">
                 <div
                     <i class="fa-solid fa-list-check"></i>
                    class="step-icon"
                    aria-hidden="true">
 
                     <i class="fa-solid fa-clipboard-check"></i>
 
                 </div>
                 </div>


خط ۶۳۲: خط ۱٬۰۱۴:


                     <p>
                     <p>
                         بررسی نهایی مشخصات سفارش
                         بررسی و تأیید نهایی سفارش
                     </p>
                     </p>


خط ۶۴۲: خط ۱٬۰۲۴:




         <!-- مرحله پنجم -->
         <!-- ===============================================
            مرحله 5
        ================================================ -->


         <article class="process-step">
         <article
            class="process-step"
            aria-label="مرحله پنجم چاپ و تحویل سفارش">


             <div class="step-circle">
             <div class="step-circle">


                 <div class="step-icon" aria-hidden="true">
                 <div
                     <i class="fa-solid fa-print"></i>
                    class="step-icon"
                    aria-hidden="true">
 
                     <i class="fa-solid fa-box-open"></i>
 
                 </div>
                 </div>


خط ۶۵۵: خط ۱٬۰۴۵:


                     <h3>
                     <h3>
                         چاپ و تحویل
                         چاپ و تحویل سفارش
                     </h3>
                     </h3>


                     <p>
                     <p>
                         چاپ سفارش و تحویل نهایی
                         چاپ نهایی و تحویل سفارش
                     </p>
                     </p>


برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کانتینر_خط_و_دایره»