Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
HTML
<div id="mediq-login-page" dir="rtl">

<style>
/* ============================================================
   MEDIQ - MEDICAL EQUIPMENT MANAGEMENTLOGIN PAGE
   Confluence Server / Data Center
   Page ID: 174855060

   BACKGROUND:
   LOGIN PAGEModern Hospital Room with Medical Bed.png

   Confluence Server / Data CenterLOGO:
   MediQ Heart Medical Logo1.png
   ============================================================ */

#mediq-login-page,
#mediq-login-page * {
    box-sizing: border-box;
}

#mediq-login-page {
    --mq-primarynavy: #09b6ad#082b4b;
    --mq-primary-darktext: #079c98#173b59;
    --mq-primary-lightmuted: #53d6d2#7089a0;
    --mq-navyprimary: #082947#08b8b0;
    --mq-text: #143b5c;
    --mq-muted: #71879bprimary-dark: #05a49e;
    --mq-border: rgba(180175, 204202, 218, .5560);

    position: fixedrelative;

    insetwidth: 0100%;
    zmin-indexheight: 99999760px;

    widthoverflow: 100vw;
    height: 100vhhidden;

    overflowdirection: hiddenrtl;

    font-family:
 Tahoma, Arial, sans-serif;

    color: var(--mq-text);
 Tahoma,
    background:
        linear-gradient(Arial,
            90deg,sans-serif;

            rgba(247, 253, 255, .98) 0%,color: var(--mq-text);

    background:
        rgba(247, 253, 255, .92) 26%,url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png")
        center center   rgba(236, 249, 251, .40) 55%,/ cover
            rgba(8, 83, 100, .10) 100%
        ),
        url("/download/attachments/PAGE_ID/mediq-login-bg.jpg");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* no-repeat;
}


/* =============================================================
   LEFT BACKGROUNDLIGHT OVERLAY
   ============================================================ */

#mediq-login-page::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.9394) 28%17%,
            rgba(255,255,255,.2870) 55%31%,
            rgba(0255,87255,105255,.0822) 100%44%,
          );

  rgba(255,255,255,0) 58%
      z-index: 0  );
}


/* ============================================================
   DECORATIVEMAIN BOTTOM WAVESLAYOUT
   ============================================================ */

.mq-wave-onelayout {
    position: absoluterelative;

    left: -8%;
    bottom: -25%z-index: 5;

    width: 120%100%;
    min-height: 47%760px;

    backgroundpadding:
        linear-gradient(54px
        clamp(50px, 7vw, 120px);

     90deg,display: grid;

    grid-template-columns:
        rgbaminmax(75520px, 217, 220, .32),620px)
            rgba(0, 175, 180, .60minmax(80px, 1fr)
        minmax(410px, 465px);

    borderalign-radiusitems: 50% 55% 0 0center;

    transformgap: rotate(-3deg)20px;

    z-indexdirection: 1ltr;

    pointer-events: none;
}

.mq-wave-two}


/* ============================================================
   LEFT CONTENT
   ============================================================ */

.mq-intro {
    positiongrid-column: absolute1;

    leftwidth: -12%100%;
    bottommax-width: -31%620px;

    widthdirection: 130%rtl;
    heighttext-align: 45%right;

    background:
        linear-gradient(align-self: center;
}


/* ============================================================
            90deg,MAIN LOGO
            rgba(191, 247, 247, .65),
            rgba(0, 157, 165, .34)
        );

    border-radius: 50% 60% 0 0;

    transform: rotate(3deg);

    z-index: 1;

    pointer-events: none;
}


/* وسط چین
   ===================================================================== */

.mq-main-logo-wrap {
    width: 100%;

   PAGE LAYOUT
   ============================================================ */

.mq-login-layout { display: flex;

    justify-content: center;
    positionalign-items: relativecenter;

    zmargin-indexbottom: 530px;
}

.mq-main-logo {
    widthdisplay: 100%block;

    max-width: 1500px330px;

    heightmax-width: 100%76%;

    marginheight: 0 auto;

    paddingobject-fit: 4vh 6vwcontain;

    displayobject-position: gridcenter center;

    grid-template-columns:
        minmax(500px, 1fr)
        minmax(400px, 480px);

    align-items: center;

    gap: 7vw;

    direction: ltr;
}


/* ==}


/* ============================================================
   INTRO / LEFT SIDESHORT LINE
   ============================================================ */

.mq-introaccent-line {
    directionwidth: rtl62px;

    displayheight: flex4px;

    flex-direction: column;
margin:
        0
        0
    align-items: flex-end;

    31px
       text-align: rightauto;

    maxborder-widthradius: 630px10px;

    justify-self: start;
}


/* ==background:
        linear-gradient(
            90deg,
            #0ccbc0,
            #049f9c
        );
}


/* ============================================================
   TITLE
   یک خط + راست چین BRAND+ Bold
   ============================================================ */

.mq-brandtitle {
    margin: 0;

    width: 100%;

    displaycolor: flexvar(--mq-navy);

    direction: ltrrtl;

    text-align-items: centerright;

    justifyfont-contentsize: flex-start38px;

    gapline-height: 17px1.55;

    marginfont-bottomweight: 42px900;
}

.mq-logo-symbol {
    positionletter-spacing: relative-1px;

    widthwhite-space: 86pxnowrap;
    height: 78px;

    flex: 0 0 86px;
}

.mq-heart-left,
.mq-heart-right {
    position: absolute;

    width: 43px;
    height: 65px;

    border: 8px solid var(--mq-primary);

    border-top-left-radius: 40px;
    border-top-right-radius: 40px
/* ============================================================
   DESCRIPTION
   یک خط + راست چین + Bold
   ============================================================ */

.mq-description {
    width: 100%;

    margin-top: 15px;

    border-bottomcolor: 0#58758f;
}

.mq-heart-left {
    leftdirection: 12pxrtl;

    transform:
text-align: right;

        rotate(-42deg)font-size: 16px;

        skewY(-7deg)font-weight: 700;

    borderline-colorheight: #56d5d52;
}

.mq-heart-right {
    right: 11px;

    transform:
        rotate(42deg)
        skewY(7deg);

    border-color: #00a9a5white-space: nowrap;
}


.mq-logo-word {/* ============================================================
    font-family: Arial, sans-serif;

    font-size: 50px;

    line-height: 1FEATURE CARDS
   ============================================================ */

.mq-features {
    width: 100%;

    fontmargin-weighttop: 80036px;

    letter-spacingdisplay: -2pxgrid;

    colorgrid-template-columns: #082a49;
}

.mq-logo-word span {

        color: var(--mq-primary);
}

.mq-logo-description {repeat(4, minmax(0, 1fr));

    directiongap: rtl12px;

    text-aligndirection: rightrtl;

 }

.mq-feature {
   margin-top: 8px min-height: 128px;

    padding:
        15px
        8px
        13px;

    font-size: 14pxborder:
        1px solid
        rgba(202, 224, 235, .78);

    fontborder-weightradius: 70015px;

    color: #163c5c;
}


/* ============================================================
   INTRO TEXT
   ============================================================ */

.mq-small-line {
    width: 58px;
    height: 4px;

    border-radius: 10pxbackground:
        rgba(255,255,255,.72);

    box-shadow:
        0 9px 30px
        rgba(26, 82, 105, .045);

    backdrop-filter:
        blur(12px);

    background: var(-webkit-mq-primary);

backdrop-filter:
    margin-bottom: 34px;
}

.mq-title {
    margin: 0blur(12px);

    colordisplay: #092c4bflex;

    fontflex-sizedirection: clamp(36px, 3.3vw, 58px)column;

    linealign-heightitems: 1.55center;

    fontjustify-weightcontent: 900center;

    lettertext-spacingalign: -1pxcenter;
}

.mq-feature-subtitleicon {
    margin-topwidth: 45px;
    height: 13px45px;

    maxmargin-widthbottom: 580px10px;

    colorborder-radius: #647e9413px;

    font-sizedisplay: 17pxflex;

    linealign-heightitems: 2center;

    fontjustify-weightcontent: 500center;
}


/* ============================================================
   FEATURE CARDS
   ============================================================ */

.mq-features {.mq-feature-icon svg {
    width: 25px;
    height: 25px;

    widthfill: 100%none;

    margin-topstroke: 39pxcurrentColor;

    displaystroke-width: grid2;

    gridstroke-template-columns:
linecap: round;

        repeat(4, minmax(110px, 1fr));

    gap: 13px;
}
stroke-linejoin: round;
}


/* CARD 1 */

.mq-feature:nth-child(1)
.mq-feature-icon {
    min-heightcolor: 128px#0ab3aa;

    paddingbackground:
 17px 10px;

    border: 1px solid rgba(216, 233, 240, .8);

linear-gradient(
       border-radius: 17px;

    background:145deg,
        rgba(255, 255, 255, .61);

    backdrop-filter: #e0fbf8,
        blur(14px);

    -webkit-backdrop-filter:#c8f4f0
        blur(14px);
}


/* CARD   box-shadow:
 2 */

.mq-feature:nth-child(2)
.mq-feature-icon {
    color: #3d92e5;

  0 10px 35pxbackground:
        rgba(44, 103, 121, .045);

linear-gradient(
            145deg,
      display: flex;

    flex-direction: column;

 #eaf5ff,
      align-items: center;

    justify-content: center;

 #dcecff
       text-align: center);
}


/* CARD 3 */

.mq-feature:nth-child(3)
.mq-feature-icon {
    widthcolor: 43px#05ad94;

    heightbackground: 43px;

    margin-bottom: 11px;

    border-radius: 13px;

    display: flex;

    align-items: center;
linear-gradient(
            145deg,
            #e2faf5,
            #d1f6ee
        );
}


/* CARD 4 */

.mq-feature:nth-child(4)
.mq-feature-icon {
    justify-contentcolor: center#6689b6;

    background:
        linear-gradient(
            145deg,
            #e4fbfa#edf3fa,
            #c9f4f2#e2ebf7
        );
}


.mq-feature-title {
    color: #05aaa4#133956;

    direction: rtl;

    font-size: 23px13px;

    font-weight: bold800;
}

.mq-feature:nth-child(2)
.mq-feature-icon {
    backgroundline-height: #eef6ff1.8;

    color: #4b8fdc;
}

.mq-feature:nth-child(3)
.mq-feature-icon {
    background: #e5faf7;
    color: #00a98e;
}

.mq-feature:nth-child(4)
.mq-feature-icon {
    background: #eff4fc;
    color: #6f8eb5;
}

.mq-feature-title {
    color: #153d5d;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.8;
}


/* =====text-align: center;
}


/* ============================================================
   LOGIN CARD
   ============================================================
   LOGIN PANEL
   ============================================================ */

.mq-login-card {
    directiongrid-column: rtl3;

    width: 100%;

    min-height: 610px;

    padding: 50px 43px 37px
        42px
        38px
        30px;

    border-radiusdirection: 30pxrtl;

    border:
        1px solid
        rgba(255, 255, 255, .7588);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(241238,250249,252,.7679)
        );

    backdropbox-filter:shadow:
        0 30px 85px
        blur(25pxrgba(17, 68, 90, .18);

    -webkit-backdrop-filter:
        blur(25px);

    box-shadow-webkit-backdrop-filter:
        0 30px 90px
        rgba(17, 70, 91, .15);

    justify-self: endblur(25px);
}


/* ============================================================
   LOGIN BRANDLOGO
   ============================================================ */

.mq-login-brandlogo-wrap {
    displaywidth: flex100%;

    directiondisplay: ltrflex;

    align-items: center;

    justify-content: center;

    gap: 10px;
}

.mq-login-symbollogo {
    positiondisplay: relativeblock;

    width: 55px245px;

    heightmax-width: 50px78%;
}

.mq-login-symbol::before,
.mq-login-symbol::after {
    contentheight: ""auto;

    positionobject-fit: absolutecontain;
}


/* ============================================================
   top: 4px;

WELCOME
   وسط چین width:+ 28px;Bold
    height: 40px============================================================ */

.mq-welcome {
    width: 100%;

    border: 6px solidmargin-top: 32px;

    color: var(--mq-primarynavy);

    border-bottomdirection: 0rtl;

    bordertext-radiusalign: 30px 30px 0 0center;
}

.mq-login-symbol::before {
    leftfont-size: 5px23px;

    transformfont-weight: rotate(-40deg)900;

    borderline-colorheight: #4dd2d11.8;
}

.mq-login-symbol::afterwelcome-description {
    rightwidth: 5px100%;

    transformmargin-top: rotate(40deg)5px;

    border-color: #00aaa6#718aa0;
}

.mq-login-word {
    colordirection: #082c4brtl;

    fonttext-familyalign: Arial, sans-serifcenter;

    font-size: 37px13px;

    font-weight: 800600;

    letterline-spacingheight: -1px1.9;
}

.mq-login-word span {
    color: var(--mq-primary);
}

.mq-login-brand-caption
/* ============================================================
   FORM
   ============================================================ */

.mq-form {
    text-alignwidth: center100%;

    color: #173b59;

    font-size: 11pxmargin-top: 27px;

    font-weightdirection: 700rtl;

    margin-top: 3px;
}


/* ============================================================
   WELCOMEFIELD
   ============================================================ */

.mq-login-headingfield {
    margin-topposition: 43pxrelative;

    text-alignwidth: center100%;

    colormargin-bottom: #0b2e4b14px;
}

.mq-input {
    font-sizedisplay: 21pxblock;

    font-weightwidth: 900100%;
}

.mq-login-caption {    height: 58px;

    padding:
        0
        49px
        0
        52px;

    margin-top: 10pxborder:
        1px solid
        rgba(171, 198, 215, .67);

    textborder-alignradius: center13px;

    coloroutline: #7990a3none;

    font-sizebackground: 12px
        rgba(255,255,255,.76);
}


/* ===========
    color: #173b59;

    direction: rtl;
    text-align: right;

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.mq-input::placeholder {
    color: #70889f;

    opacity: 1;

    direction: rtl;

    text-align: right;

    font-size: 14px;

    font-weight: 600;
}

.mq-input:focus {
    background:
        rgba(255,255,255,.96);

    border-color:
        var(--mq-primary);

    box-shadow:
        0 0 0 3px
        rgba(8,184,176,.10);
}


/* ============================================================
   RIGHT FIELD ICON
   ============================================================ */

.mq-field-icon {
    position: absolute;

    right: 17px;

    top: 50%;

    transform:
        translateY(-50%);

    width: 21px;
    height: 21px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #66829c;

    pointer-events: none;
}

.mq-field-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   PASSWORD EYE
   ============================================================ */

.mq-password-toggle {
    position: absolute;

    left: 12px;

    top: 50%;

    transform:
        translateY(-50%);

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;

    border-radius: 9px;

    outline: none;

    background: transparent;

    color: #66829c;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        background .15s ease,
        color .15s ease;
}

.mq-password-toggle:hover {
    background:
        rgba(8,184,176,.08);

    color:
        var(--mq-primary-dark);
}

.mq-password-toggle svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   REMEMBER
   ============================================================ */

.mq-options {
    width: 100%;

    margin:
        13px
        0
        19px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    direction: rtl;
}

.mq-remember {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #59748b;

    direction: rtl;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    user-select: none;
}

.mq-remember input {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color:
        var(--mq-primary);
}


/* ============================================================
   SUBMIT
   ============================================================ */

.mq-submit {
    width: 100%;
    height: 60px;

    border: 0;

    border-radius: 13px;

    outline: none;

    background:
        linear-gradient(
            90deg,
            #05aaa5,
            #0bc2b8
        );

    color: #fff;

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 13px 28px
        rgba(3, 166, 160, .20);

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        filter .17s ease;
}

.mq-submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 18px 35px
        rgba(3,166,160,.27);

    filter:
        brightness(1.015);
}

.mq-submit:active {
    transform:
        translateY(0);
}


/* ============================================================
   ERROR
   ============================================================ */

.mq-error {
    display: none;

    width: 100%;

    margin-top: 12px;

    padding:
        10px
        12px;

    border:
        1px solid
        #fecdd3;

    border-radius: 9px;

    background:
        #fff1f2;

    color:
        #be123c;

    direction: rtl;

    text-align: right;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.8;
}


/* ============================================================
   DIVIDER
   ============================================================ */

.mq-divider {
    width: 100%;
    height: 1px;

    margin:
        29px
        0
        22px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(131,160,179,.35),
            transparent
        );
}


/* ============================================================
   SUPPORT
   ============================================================ */

.mq-support {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    direction: rtl;

    color: #6f879c;

    text-align: center;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.9;
}

.mq-support-icon {
    flex: 0 0 auto;

    width: 19px;
    height: 19px;

    color: #163d5d;
}

.mq-support-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   LOADING
   ============================================================ */

.mq-loader {
    display: none;

    width: 21px;
    height: 21px;

    margin: auto;

    border:
        3px solid
        rgba(255,255,255,.38);

    border-top-color:
        #fff;

    border-radius: 50%;

    animation:
        mq-spin
        .7s
        linear
        infinite;
}

.mq-submit.loading {
    pointer-events: none;

    opacity: .88;
}

.mq-submit.loading
.mq-submit-text {
    display: none;
}

.mq-submit.loading
.mq-loader {
    display: block;
}

@keyframes mq-spin {
    to {
        transform:
            rotate(360deg);
    }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .mq-layout {
        grid-template-columns:
            minmax(430px, 1fr)
            30px
            400px;

        padding:
            45px
            35px;
    }

    .mq-title {
        font-size: 32px;
    }

    .mq-description {
        font-size: 14px;
    }

    .mq-main-logo {
        width: 290px;
    }

    .mq-features {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 900px) {

    #mediq-login-page {
        overflow: visible;

        background-position:
            65%
            center;
    }

    .mq-layout {
        display: flex;

        flex-direction: column;

        min-height: auto;

        padding:
            35px
            20px;

        gap: 35px;
    }

    .mq-login-card {
        order: 1;

        width:
            min(100%, 470px);

        min-height: auto;
    }

    .mq-intro {
        order: 2;

        width:
            min(100%, 620px);
    }

    .mq-title {
        white-space: normal;
    }

    .mq-description {
        white-space: normal;
    }
}


@media (max-width: 520px) {

    .mq-layout {
        padding:
            22px
            12px
            40px;
    }

    .mq-login-card {
        padding:
            32px
            22px
            27px;

        border-radius:
            22px;
    }

    .mq-login-logo {
        width:
            210px;
    }

    .mq-main-logo {
        width:
            265px;
    }

    .mq-title {
        font-size:
            29px;

        white-space: normal;
    }

    .mq-description {
        font-size:
            13px;

        white-space: normal;
    }

    .mq-features {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


/* ============================================================
   MEDIQ - FINAL FULL SCREEN FIX
   Confluence Server / Data Center
   ============================================================ */


/* ------------------------------------------------------------
   1. حذف کامل Footer کانفلوئنس
   ------------------------------------------------------------ */

#footer,
footer#footer,
footer.aui-footer,
.aui-footer,
#footer-logo,
#poweredby,
#footer-build-information,
.footer-body,
.footer-logo,
#footer .footer-body,
#footer .footer-logo {
    display: none !important;
    visibility: hidden !important;

    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
}


/* ------------------------------------------------------------
   2. حذف فضای خالی خود Confluence
   ------------------------------------------------------------ */

html,
body {
    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


#page,
#full-height-container,
#main,
#content,
#main-content,
.aui-page-panel,
.aui-page-panel-inner,
.aui-page-panel-content,
.content-body {
    width: 100% !important;
    height: 100% !important;

    min-height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


/* ------------------------------------------------------------
   3. خود صفحه MediQ تمام Viewport
   ------------------------------------------------------------ */

#mediq-login-page {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    min-width: 100vw !important;
    min-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    z-index: 9999 !important;

    background-size: cover !important;
    background-position: center center !important;
}


/* ------------------------------------------------------------
   4. Layout داخلی دقیقاً هم‌اندازه صفحه
   ------------------------------------------------------------ */

#mediq-login-page .mq-layout {
    width: 100% !important;
    height: 100vh !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding:
        clamp(25px, 4vh, 55px)
        clamp(45px, 7vw, 120px) !important;

    align-items: center !important;
}


/* ------------------------------------------------------------
   5. پنل Login متناسب با ارتفاع صفحه
   ------------------------------------------------------------ */

#mediq-login-page .mq-login-card {
    align-self: center !important;

    min-height: 0 !important;

    max-height: calc(100vh - 70px) !important;
}


/* ------------------------------------------------------------
   6. بخش سمت چپ دقیقاً وسط ارتفاع صفحه
   ------------------------------------------------------------ */

#mediq-login-page .mq-intro {
    align-self: center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   7. جلوگیری از Scroll اضافی Confluence
   ------------------------------------------------------------ */

body {
    position: relative !important;

    overflow: hidden !important;
}


/* ------------------------------------------------------------
   8. جلوگیری از فضای خالی پایین صفحه
   ------------------------------------------------------------ */

#content,
#main-content,
.aui-page-panel-content {
    min-height: 0 !important;
}


/* ------------------------------------------------------------
   9. تنظیم برای مانیتورهای با ارتفاع کمتر
   مثل Laptop در Zoom 100%
   ------------------------------------------------------------ */

@media (max-height: 850px) {

    #mediq-login-page .mq-layout {
        padding:
            20px
            clamp(45px, 7vw, 110px) !important;
    }


    #mediq-login-page .mq-main-logo {
        width: 285px !important;
    }


    #mediq-login-page .mq-main-logo-wrap {
        margin-bottom: 20px !important;
    }


    #mediq-login-page .mq-accent-line {
        margin-bottom: 20px !important;
    }


    #mediq-login-page .mq-title {
        font-size: 32px !important;
    }


    #mediq-login-page .mq-description {
        margin-top: 9px !important;

        font-size: 14px !important;
    }


    #mediq-login-page .mq-features {
        margin-top: 24px !important;
    }


    #mediq-login-page .mq-feature {
        min-height: 105px !important;

        padding: 10px 7px !important;
    }


    #mediq-login-page .mq-feature-icon {
        width: 40px !important;
        height: 40px !important;

        margin-bottom: 6px !important;
    }


    #mediq-login-page .mq-login-card {
        min-height: 0 !important;

        padding:
            28px
            34px
            24px !important;
    }


    #mediq-login-page .mq-login-logo {
        width: 210px !important;
    }


    #mediq-login-page .mq-welcome {
        margin-top: 20px !important;

        font-size: 20px !important;
    }


    #mediq-login-page .mq-form {
        margin-top: 18px !important;
    }


    #mediq-login-page .mq-input {
        height: 52px !important;
    }


    #mediq-login-page .mq-submit {
        height: 54px !important;
    }


    #mediq-login-page .mq-divider {
        margin:
            20px
            0
            16px !important;
    }

}


/* ------------------------------------------------------------
   10. مانیتورهای خیلی کوتاه
   ------------------------------------------------------------ */

@media (max-height: 700px) {

    #mediq-login-page .mq-layout {
        transform: scale(.92);

        transform-origin: center center;

        width: 108.695% !important;
        height: 108.695vh !important;

        margin-left: -4.347% !important;
    }

}

</style>


<div class="mq-layout">


    <!-- ======================================================
         LEFT CONTENT
         ====================================================== -->

    <section class="mq-intro">


        <!-- REAL MEDIQ LOGO -->

        <div class="mq-main-logo-wrap">

            <img
                class="mq-main-logo"
                src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo1.png"
                alt="MediQ"
            >

        </div>


        <div class="mq-accent-line"></div>


        <!-- TITLE -->

        <h1 class="mq-title">
            مدیریت هوشمند تجهیزات پزشکی
        </h1>


        <!-- DESCRIPTION -->

        <div class="mq-description">
            ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی در یک پلتفرم یکپارچه
        </div>



        <!-- ==================================================
             FEATURES
             ================================================== -->

        <div class="mq-features">


            <!-- ACCURATE INFORMATION -->

            <div class="mq-feature">

                <div class="mq-feature-icon">

                    <svg viewBox="0 0 24 24">

                        <path
                            d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3z"
                        ></path>

                        <path
                            d="M9 12l2 2 4-5"
                        ></path>

                    </svg>

                </div>

                <div class="mq-feature-title">

                    اطلاعات دقیق

                    <br>

                    و به‌روز

                </div>

            </div>



            <!-- MAINTENANCE -->

            <div class="mq-feature">

                <div class="mq-feature-icon">

                    <svg viewBox="0 0 24 24">

                        <circle
                            cx="12"
                            cy="12"
                            r="3"
                        ></circle>

                        <path
                            d="
                            M19.4 15
                            a1.7 1.7 0 0 0 .3 1.9
                            l.1.1
                            -2.1 2.1
                            -.1-.1
                            a1.7 1.7 0 0 0-1.9-.3
                            1.7 1.7 0 0 0-1 1.5
                            V20
                            h-3
                            v-.2
                            a1.7 1.7 0 0 0-1-1.5
                            1.7 1.7 0 0 0-1.9.3
                            l-.1.1
                            -2.1-2.1
                            .1-.1
                            A1.7 1.7 0 0 0 7 14.6
                            a1.7 1.7 0 0 0-1.5-1
                            H5
                            v-3
                            h.5
                            A1.7 1.7 0 0 0 7 9.6
                            a1.7 1.7 0 0 0-.3-1.9
                            l-.1-.1
                            2.1-2.1
                            .1.1
                            a1.7 1.7 0 0 0 1.9.3
                            1.7 1.7 0 0 0 1-1.5
                            V4
                            h3
                            v.4
                            a1.7 1.7 0 0 0 1 1.5
                            1.7 1.7 0 0 0 1.9-.3
                            l.1-.1
                            2.1 2.1
                            -.1.1
                            a1.7 1.7 0 0 0-.3 1.9
                            1.7 1.7 0 0 0 1.5 1
                            h.5
                            v3
                            h-.5
                            a1.7 1.7 0 0 0-1.5 1z
                            "
                        ></path>

                    </svg>

                </div>

                <div class="mq-feature-title">

                    نگهداری و تعمیرات

                    <br>

                    کارآمد

                </div>

            </div>



            <!-- REPORT -->

            <div class="mq-feature">

                <div class="mq-feature-icon">

                    <svg viewBox="0 0 24 24">

                        <path
                            d="M5 20V11"
                        ></path>

                        <path
                            d="M10 20V6"
                        ></path>

                        <path
                            d="M15 20V9"
                        ></path>

                        <path
                            d="M20 20V3"
                        ></path>

                    </svg>

                </div>

                <div class="mq-feature-title">

                    گزارش‌های

                    <br>

                    تحلیلی

                </div>

            </div>



            <!-- ASSETS -->

            <div class="mq-feature">

                <div class="mq-feature-icon">

                    <svg viewBox="0 0 24 24">

                        <path
                            d="M12 3l7 4-7 4-7-4 7-4z"
                        ></path>

                        <path
                            d="M5 7v9l7 4 7-4V7"
                        ></path>

                        <path
                            d="M12 11v9"
                        ></path>

                    </svg>

                </div>

                <div class="mq-feature-title">

                    مدیریت کامل

                    <br>

                    دارایی‌ها

                </div>

            </div>


        </div>


    </section>



    <!-- ======================================================
         LOGIN CARD
         ====================================================== -->

    <section class="mq-login-card">


        <!-- REAL LOGO -->

        <div class="mq-login-logo-wrap">

            <img
                class="mq-login-logo"
                src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo1.png"
    FORM
            ============================================================ */

.mq-login-form {
alt="MediQ"
     margin-top: 32px;
}

.mq-input-wrapper {
    position: relative;>

    margin-bottom: 14px;
}

.mq-input {
    width: 100%;    </div>



        <!-- WELCOME -->

    height: 58px;

    padding:<div class="mq-welcome">
        0 48px
   به پلتفرم مدیکیو خوش آمدید
 0 48px;

       border:</div>


        1px solid<div class="mq-welcome-description">
        rgba(190, 210, 222, .72);

    border-radius: 13px;

    برای ادامه، وارد حساب کاربری خود شوید.
    outline: none;

    background:</div>



        rgba(255,255,255,.80);

<!-- ==================================================
    color: #173c59;

    font-family: inherit;

    font-size: 13px;
LOGIN FORM
    text-align: right;

    transition: .2s ease;
}

.mq-input::placeholder {
    color: #7890a4;
}

.mq-input:focus {
    border-color: var(--mq-primary);

    background: #fff;

    box-shadow:
 ================================================== -->

        <form
            0 0 0 3px
id="mqLoginForm"
            rgba(9,182,173,.10);
}

.mq-input-icon {
class="mq-form"
      position: absolute;

    left: 17px;

 method="post"
       top: 50%;

    transform:action="/dologin.action"
        translateY(-50%);>


     color: #68839a;

       font-size: 20px;<!-- USERNAME -->

    pointer-events: none;
}

.mq-password-toggle {
        <div class="mq-field">

          position: absolute;

    left: 48px;

<input
       top: 50%;

    transform:
        translateY(-50%);

id="mqUsername"
         border: 0;

    background: transparent;

    color: #6f879a;

 class="mq-input"
     font-size: 17px;

    cursor: pointer;

    padding: 5px;
}


/* ============================================================
   REMEMBER ME
   ============================================================ */

.mq-form-options {
    margin:
    type="text"
                    name="os_username"
            14px 2px
        19px;

placeholder="نام کاربری"
         display: flex;

    align-items: center;

    justify-content: flex-start;
}

.mq-remember {
 autocomplete="username"
         display: flex;

    align-items: center;

    gap: 8px;required

     color: #557086;

    font-size: 11px;

    cursor: pointer;>
}

.mq-remember input {
         accent-color:
        var(--mq-primary);

 <span class="mq-field-icon">

   width: 17px;
    height: 17px;
}


/* ============================================================
   LOGIN BUTTON
   ============================================================ */

.mq-login-button {
    width: 100%;

    height: 60px;

    border: 0;

    border-radius: 13px;

    background:
            <svg viewBox="0 0 24 24">

                        <circle
            linear-gradient(
            90deg,
    cx="12"
        #08aaa7,
            #0bc4b9
        );

 cy="8"
   color: #fff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:r="4"
        0 12px 28px
        rgba(4, 169, 163, .20);

    transition:></circle>

        transform .18s ease,
        box-shadow .18s ease;
}

.mq-login-button:hover {
    transform:<path
        translateY(-2px);

    box-shadow:
        0 17px 34px
      d="M5  rgba(4,169,163,.28);
}

.mq-login-button:active {
    transform:
20c0-4 3-7 7-7s7 3 7 7"
         translateY(0);
}


/* ============================================================
   ERROR
   ============================================================ */

.mq-login-error {
       display: none; ></path>

     margin-top: 13px;

        padding: 11px 13px;

    border-radius: 10px; </svg>

    background: #fff1f2;

    border: 1px solid #fecdd3;

    color: #be123c;</span>

    font-size: 11px;

       line-height: 1.8;
}


/* ============================================================
   SUPPORT
   ============================================================ */

.mq-support-divider {
    height: 1px;

    margin: </div>



            <!-- PASSWORD -->

            <div class="mq-field">

                <input
                    id="mqPassword"
                    class="mq-input"
        30px 0
        23px;

    background:type="password"
        linear-gradient(
            90deg,name="os_password"
            transparent,
            rgba(144,171,188,.40),placeholder="رمز عبور"
            transparent
        );
}

.mq-support {autocomplete="current-password"
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;required

     color: #71889b;

    font-size: 10px;

    text-align: center; >


     line-height: 1.8;
}

.mq-support-icon {
    color: #17415f;

    font-size: 17px;
}


/* ============================================================<!-- LOCK -->

   LOADING
   ============================================================ */

.mq-login-button.loading {
    pointer-events: none;

    opacity: .85;
}

.mq-login-button.loading
.mq-button-text {
    display: none;
}

.mq-loader {
    display: none;

    width: 21px;
    height: 21px;

    margin: auto;

    border:
<span class="mq-field-icon">

                    <svg viewBox="0 0 24 24">

                        <rect
                           3px solid
x="5"
          rgba(255,255,255,.4);

     border-top-color:
        #fff;

    border-radius: 50%;
 y="10"
    animation:
        mq-spin .7s
        linear infinite;
}

.mq-login-button.loading
.mq-loader {
    display: block;
}

@keyframes mq-spin {

 width="14"
       to {
        transform:
            rotate(360deg);
height="10"
     }

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media
(max-width: 1100px) {

    .mq-login-layout {
                       rx="2"
                        ></rect>

               grid-template-columns:
         <path
   1fr 420px;

        gap: 35px;

          padding:
      d="M8 10V7a4 4 0 0 1 30px8 35px;0v3"
    }

      .mq-title {
        font-size: 38px;
    }></path>

    .mq-features {
        grid-template-columns:
            repeat(2,1fr);
<path
     }

}


@media
(max-width: 850px) {

    #mediq-login-page {
        overflow-y: auto;

        background-position:d="M12 14v2"
            65%   center;
    }

    .mq-login-layout { ></path>

        display: flex;

           flex-direction: column; </svg>

        height: auto;

        min-height: 100vh; </span>



        padding:
        <!-- EYE -->

  30px 20px;

        gap: 30px;
    }
<button
    .mq-intro {
        width: 100%;

      id="mqPasswordToggle"
  max-width: 550px;

        align-items: center;

        text-align: center;

class="mq-password-toggle"
          order: 2;
    }

    .mq-brand { type="button"
        justify-content: center;
         }

    .mq-small-line {title="نمایش رمز عبور"
        margin-left: auto;
        margin-right: auto;
  aria-label="نمایش رمز }
عبور"
    .mq-subtitle {
        text-align: center;
    }>

    .mq-login-card {
        max-width: 480px;

      <svg
  min-height: auto;

          order: 1;
    }

}


@media
(max-width: 520px) {

    .mq-login-layout { id="mqEyeIcon"
        padding:
            18px 12px
   viewBox="0 0 24 24"
      40px;
    }

    .mq-login-card {
     >

   padding:
            37px 23px
        <path
    28px;

        border-radius: 23px;
    }

    .mq-title {
       d="M2 font12s4-size: 31px;
    }

    .mq-subtitle {7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"
        font-size: 14px;
    }

    .mq-features {
        grid-template-columns:></path>

            repeat(2,1fr);
    }

    .mq-logo-word {
   <circle
     font-size: 39px;
    }

}
</style>


<!-- =========================================================
          BACKGROUND WAVES
     ========================================================= -->

<div class="mq-wave-one"></div>
<div class="mq-wave-two"></div>


<div class="mq-login-layout">


    <!-- =====================================================
 cx="12"
                            cy="12"
                            r="3"
                        ></circle>

                   LEFT </svg>

 INTRO
         ===================================================== -->      </button>

    <section class="mq-intro">        </div>



            <!-- LOGOREMEMBER -->

            <div class="mq-brandoptions">

            <div    <label class="mq-logo-symbolremember">

                 <span class="mq-heart-left"></span>
   <input
                       <span classtype="mq-heart-right"></span>

checkbox"
            </div>


            <div>

name="os_cookie"
                       <div classvalue="mq-logo-wordtrue">
                    Medi<span>Q</span>
    >

            </div>

        <span>
        <div class="mq-logo-description">
               مرا به خاطر بسپار
  مدیریت تجهیزات پزشکی
                </div>span>

                </div>label>

            </div>



        <div class="mq-small-line"></div>


   <!--     <h1 class="mq-title"DESTINATION -->

            مدیریت هوشمند<input
            <br>
            تجهیزات پزشکی

id="mqDestination"
        </h1>


        <div classtype="mq-subtitlehidden">

            ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی
 name="os_destination"
                <br>value="/"
            در یک پلتفرم یکپارچه>



        </div>


        <!-- FEATURESLOGIN -->

        <div class="mq-features">


    <button
               <div classid="mq-featuremqSubmit">

                <div class="mq-feature-iconsubmit">
                    ✓type="submit"
                </div>>

                <div<span class="mq-featuresubmit-titletext">

                    اطلاعاتورود به دقیقسامانه
                </span>

    <br>
            <span class="mq-loader"></span>

       و به‌روز

    </button>



            </div>!-- ERROR -->

            </div>


<div
               <div classid="mq-featuremqError">

                <div class="mq-feature-iconerror">
            ></div>


        ⚙
</form>



        <!-- DIVIDER -->

         <<div class="mq-divider"></div>



        <!-- SUPPORT -->

        <div class="mq-feature-titlesupport">


            <span>
        نگهداری و تعمیرات
      در صورت مشکل در ورود، با واحد فناوری اطلاعات تماس بگیرید.
    <br>
        </span>


            کارآمد<span class="mq-support-icon">

                </div>

    <svg viewBox="0 0 24 24">

        </div>


            <div class="mq-feature">

<path
                <div class="mq-feature-icon">
       d="M4 13v-2a8 8 0 0 1 16 0v2"
      ▥
                <></div>path>

                <div class="mq-feature-title">

    <path
                گزارش‌های
        d="M4 13H3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 <br>2h2v-6z"
                    تحلیلی></path>

                </div>

    <path
        </div>


            <div class="mq-feature">

   d="M20 13h1a2 2 0 0 1 2 2v2a2 2 0 0   <div class="mq-feature-icon">1-2 2h-2v-6z"
                    ◈></path>

                </div>

    <path
            <div class="mq-feature-title">

           d="M19 19c0 2-2       مدیریت کامل2-4 2"
                    <br>></path>

                </svg>

    دارایی‌ها

        </span>


        </div>


            </section>


</div>


<script>
(function        </div>() {

    </section>"use strict";



    <!--/* ========================================================
       MEDIQ  LOGIN CARDCONFIG
         ======================================================== -->*/

    <sectionvar CFG class="mq-login-card">= {


        <div class="mq-login-brand">

/*
         * مقصد بعد از <div class="mq-login-symbol"></div>

Login موفق
            <div class="mq-login-word">*
         * فعلاً چون Dashboard ساخته   Medi<span>Q</span>نشده،
         * کاربر به </div>

همین صفحه MediQ برمی‌گردد.
     </div>


    *
    <div class="mq-login-brand-caption">
    * بعداً فقط Page ID داشبورد را اینجا مدیریتعوض تجهیزاتمی‌کنیم.
 پزشکی
        <*/div>


        <div class="mq-login-heading">
destination:
            "/pages/viewpage.action?pageId=174855144",



  به پلتفرم مدیکیو خوش آمدید
  /*
      </div>


   * Login واقعی Confluence
  <div class="mq-login-caption">
      */

      برای ادامه، واردloginAction:
 حساب کاربری خود شوید.
        </div>"/dologin.action"



    };



    <!-- /* ======================================================
           ==
  FORM
     ELEMENTS
        ======================================================== -->*/

    var form =
     <form   document.getElementById(
            id="mqLoginForm"
        );


    var username class="mq-login-form"
            method="post"document.getElementById(
            action="/dologin.action"mqUsername"
        >);


    var password =
      <!-- USERNAME -->
 document.getElementById(
            <div class="mq-input-wrapper">"mqPassword"
        );


    var passwordToggle =
        document.getElementById(
   <input
         "mqPasswordToggle"
        );


    var eyeIcon id="mqUsername"
         document.getElementById(
              class="mq-input"mqEyeIcon"
        );


    var submit       type="text"
        document.getElementById(
            name="os_usernamemqSubmit"
        );


    var destination =
       placeholder="نام کاربری" document.getElementById(
            "mqDestination"
        autocomplete="username");


    var error =
        document.getElementById(
       required
     "mqError"
        );



   >

 /* ========================================================
       APPLY CONFIG
      <span class="mq-input-icon"> ======================================================== */

    if (form) {

        form.action =
     ♙
       CFG.loginAction;

         </span>

form.method =
            </div>"post";



        form.setAttribute(
    <!-- PASSWORD -->

      "autocomplete",
      <div class="mq-input-wrapper">

        "on"
        <input);

     }


    if (destination) {

        destination.value id="mqPassword"
            CFG.destination;

    }



    class="mq-input"/* ========================================================
       ERROR MESSAGE
       ======================================================== */

    function  type="password"showError(message) {

        if (!error) {
          name="os_password"
  return;
        }


        error.innerHTML  placeholder="رمز عبور"
            message;


        error.style.display autocomplete="current-password"
            "block";

        required}


    function hideError() {

        if (!error) >{

                <buttonreturn;
        }


            type="button"error.innerHTML =
                    id="mqPasswordToggle";


                    class="mq-password-toggle"
 error.style.display =
            "none";

    }



   title="نمایش رمز عبور" /* ========================================================
       SHOW / HIDE PASSWORD
      >
   ======================================================== */

    if (
             ◉password &&
        passwordToggle
    ) {

   </button>

     passwordToggle.addEventListener(
           <span class="mq-input-icon">"click",
            function () {

      🔒
          var showPassword =
    </span>

            </div>



    password.type ===
       <!-- REMEMBER -->

            <div class="mq-form-options">"password";


                <labelpassword.type class="mq-remember">

                    <inputshowPassword
                        type=? "checkboxtext"
                        : name="os_cookiepassword";


                if (showPassword) {

        value="true"
            passwordToggle.title =
       >

                 "مخفی کردن رمز <span>عبور";


                    passwordToggle.setAttribute(
      مرا به خاطر بسپار
               "aria-label",
     </span>

                </label>

   "مخفی کردن رمز عبور"
      </div>



            <!-- DESTINATION --> );


            <input
        if (eyeIcon) {

      type="hidden"
                name="os_destination"
  eyeIcon.innerHTML =
             id="mqDestination"
               '<path valued="/"
            >



M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"></path>' +
                <!-- LOGIN -->

          '<circle  <button
  cx="12" cy="12" r="3"></circle>' +
              id="mqLoginButton"
              '<path  classd="mq-login-button"
M4 4l16 16"></path>';

                type="submit"
    }

        >

        }
        <span class="mq-button-text">
       else {

            ورود به مدیکیو
      passwordToggle.title =
               ←
          "نمایش رمز عبور";


    </span>

                <span class="mq-loader"></span>
passwordToggle.setAttribute(
            </button>



            <!-- ERROR -->

"aria-label",
            <div
            "نمایش    id="mqLoginErrorرمز عبور"
                class="mq-login-error"
            ></div>);


             </form>



       if <div class="mq-support-divider"></div>


(eyeIcon) {

           <div class="mq-support">

            <spaneyeIcon.innerHTML class="mq-support-icon">
                ♧
            </span>

            <span>'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"></path>' +
                در صورت مشکل در ورود،
        '<circle cx="12" cy="12" r="3"></circle>';

      با واحد فناوری اطلاعات تماس بگیرید.
         }

   </span>

        </div>


     </section>

</div>



<script>
(function () {

}

      "use strict";


    /* ======================================================== }
       MEDIQ CONFIG);

    }



    /* ======================================================== */

    const CFG = {

        /*
         * آدرس صفحه‌ای که بعد از Login
       REMOVE ERROR *WHEN کاربر باید وارد آن شود.USER TYPES
         *
         * بعداً pageId صفحه اصلی MediQ را اینجا قرار بده.======================================================== */

    if     */(username) {

        destination:username.addEventListener(
            "/pages/viewpage.action?pageId=174855060input",

        /*
    function () {

   * مسیر Login خود Confluence.
         *
     hideError();

    * اگر Confluence روی Context Path نصب شده مثلاً:}
         *);

    }


    if * /confluence(password) {

         *password.addEventListener(
         * مقدار باید شود: "input",
         *
   function () {

      * /confluence/dologin.action
         */hideError();

        loginAction:
    }
        "/dologin.action");

    };



    /* ========================================================
       ELEMENTSLOGIN VALIDATION
       ======================================================== */

    const form=============== */

    if (form) {

        form.addEventListener(
            "submit",
            function (event) {

                var userValue =
        document.getElementById(
            "mqLoginForm"username
          );

     const username =
       ? documentusername.value.getElementByIdtrim()
                        : "mqUsername";


            );

    constvar passwordpasswordValue =
        document.getElementById(
            "mqPassword"password
          );

     const passwordToggle =
       ? documentpassword.getElementById(
value
                "mqPasswordToggle"
        : )"";

   
 const loginButton =
        document.getElementById(
     /* --------------------------------------------
      "mqLoginButton"
        );

    const destinationUSERNAME =EMPTY
        document.getElementById(
            "mqDestination"-------------------------------------------- */

        );

    const errorBox =
  if (!userValue) {

    document.getElementById(
            "mqLoginError"
        event.preventDefault();


    /* ========================================================
         CONFIGURE FORM
       ======================================================== */

showError(
      if (form) {

        form.action =
       "لطفاً نام کاربری را وارد CFGکنید.loginAction;"

     }


    if (destination) {

        destination.value = );


            CFG.destination;

     }


   if /* ========================================================(username) {

       PASSWORD   VISIBILITY
       ======================================================== */

      if username.focus();

        passwordToggle &&
        password
    ) {}


         passwordToggle.addEventListener(
            "click",return false;

            function   () {}



                if (/* --------------------------------------------
                    password.type ===PASSWORD EMPTY
                    "password"-------------------------------------------- */

                if (!passwordValue) {

                    password.type =event.preventDefault();


                    showError(
    "text";

                    this.innerHTML =
    "لطفاً رمز عبور را وارد کنید."
                    "⊘");


                    this.title =
if (password) {

                         "مخفی کردن رمز عبور";

password.focus();

                    }


                else {

   return false;

                password.type =}



                /* --------------------------------------------
       "password";

            VALID
          this.innerHTML =
        -------------------------------------------- */

               "◉"; hideError();


                /*
    this.title =
            * Username / Password را خود Confluence
      "نمایش رمز عبور";

         * از طریق POST دریافت می‌کند.
  }

            }
   *
     );

    }


    /* ========================================================    * Password در LocalStorage،
       VALIDATION
         ======================================================== */

 * SessionStorage یا Cookie سفارشی
         if (form) {

      * ذخیره formنمی‌شود.addEventListener(
            "submit",
     */


             function   if (eventsubmit) {

                const   userValue = submit.classList.add(
                    username
    "loading"
                    ? username.value.trim()
);


                    submit.disabled =
     : "";

                const passValue =true;


                    passwordsubmit.setAttribute(
                        ? password.value"aria-busy",
                        : "true";


                   if ();

                }


    !userValue ||
           /*
         !passValue
        * اینجا preventDefault نداریم.
     ) {

           *
         event.preventDefault();

        * بنابراین فرم به:
         if (errorBox) {

      *
                 * errorBox.style.display =/dologin.action
                 *
           "block";

      * ارسال می‌شود.
                errorBox.innerHTML =
 */

                return true;

            "لطفاً}
 نام کاربری و رمز عبور را وارد کنید.");

    }



    /* ========================================================
       RESTORE BUTTON
   }

    اگر Browser با Back به صفحه برگشت
       ======================================================== */

    return;

window.addEventListener(
        "pageshow",
        function () }
{

                if (errorBoxsubmit) {

                    errorBox.style.display =
 submit.classList.remove(
                       "noneloading";

                });


                if (loginButton) {

submit.disabled =
                    loginButton.classList.add(false;


                        "loading"submit.removeAttribute(
                    );

"aria-busy"
                });

            }

        );
}
    });



    /* ========================================================
       AUTOINITIAL FOCUS
       ======================================================== */

    window.setTimeout(
        function () {

            if (
                username &&
                !username.value
            ) {

                username.focus();

            }

        },
        350300
    );


})();
</script>

</div>