خانه

You are not logged in. Any changes you make will be marked as anonymous. You may want to Log In if you already have an account.

<table class="wysiwyg-macro" data-macro-name="html" data-macro-id="506cb6dc-efef-463a-821f-4a337292053d" aria-label="html macro" data-macro-schema-version="1" style="background-image: url(https://kb.h-soft.ir/plugins/servlet/confluence/placeholder/macro-heading?definition=e2h0bWx9&amp;locale=en_GB&amp;version=2); background-repeat: no-repeat;" data-macro-body-type="PLAIN_TEXT"><tr><td class="wysiwyg-macro-body"><pre>&lt;div id="mediq-login-page" dir="rtl">

&lt;style>
/* ============================================================
   MEDIQ LOGIN PAGE
   Confluence Server / Data Center
   Page ID: 174855060

BACKGROUND:
   Modern Hospital Room with Medical Bed.png

LOGO:
   MediQ Heart Medical Logo1.png
   ============================================================ */

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

#mediq-login-page {
    --mq-navy: #082b4b;
    --mq-text: #173b59;
    --mq-muted: #7089a0;
    --mq-primary: #08b8b0;
    --mq-primary-dark: #05a49e;
    --mq-border: rgba(175, 202, 218, .60);

position: relative;

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

overflow: hidden;

direction: rtl;

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

color: var(--mq-text);

background:
        url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png")
        center center / cover
        no-repeat;
}

/* ============================================================
   LEFT LIGHT 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,.94) 17%,
            rgba(255,255,255,.70) 31%,
            rgba(255,255,255,.22) 44%,
            rgba(255,255,255,0) 58%
        );
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.mq-layout {
    position: relative;
    z-index: 5;

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

padding:
        54px
        clamp(50px, 7vw, 120px);

display: grid;

grid-template-columns:
        minmax(520px, 620px)
        minmax(80px, 1fr)
        minmax(410px, 465px);

align-items: center;

gap: 20px;

direction: ltr;
}

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

.mq-intro {
    grid-column: 1;

width: 100%;
    max-width: 620px;

direction: rtl;
    text-align: right;

align-self: center;
}

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

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

display: flex;

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

margin-bottom: 30px;
}

.mq-main-logo {
    display: block;

width: 330px;
    max-width: 76%;

height: auto;

object-fit: contain;
    object-position: center center;
}

/* ============================================================
   SHORT LINE
   ============================================================ */

.mq-accent-line {
    width: 62px;
    height: 4px;

margin:
        0
        0
        31px
        auto;

border-radius: 10px;

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

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

.mq-title {
    margin: 0;

width: 100%;

color: var(--mq-navy);

direction: rtl;
    text-align: right;

font-size: 38px;
    line-height: 1.55;

font-weight: 900;

letter-spacing: -1px;

white-space: nowrap;
}

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

.mq-description {
    width: 100%;

margin-top: 15px;

color: #58758f;

direction: rtl;
    text-align: right;

font-size: 16px;

font-weight: 700;

line-height: 2;

white-space: nowrap;
}

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

.mq-features {
    width: 100%;

margin-top: 36px;

display: grid;

grid-template-columns:
        repeat(4, minmax(0, 1fr));

gap: 12px;

direction: rtl;
}

.mq-feature {
    min-height: 128px;

padding:
        15px
        8px
        13px;

border:
        1px solid
        rgba(202, 224, 235, .78);

border-radius: 15px;

background:
        rgba(255,255,255,.72);

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

backdrop-filter:
        blur(12px);

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

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;
}

.mq-feature-icon {
    width: 45px;
    height: 45px;

margin-bottom: 10px;

border-radius: 13px;

display: flex;

align-items: center;

justify-content: center;
}

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

fill: none;

stroke: currentColor;

stroke-width: 2;

stroke-linecap: round;

stroke-linejoin: round;
}

/* CARD 1 */

.mq-feature:nth-child(1)
.mq-feature-icon {
    color: #0ab3aa;

background:
        linear-gradient(
            145deg,
            #e0fbf8,
            #c8f4f0
        );
}

/* CARD 2 */

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

background:
        linear-gradient(
            145deg,
            #eaf5ff,
            #dcecff
        );
}

/* CARD 3 */

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

background:
        linear-gradient(
            145deg,
            #e2faf5,
            #d1f6ee
        );
}

/* CARD 4 */

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

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

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

direction: rtl;

font-size: 13px;

font-weight: 800;

line-height: 1.8;

text-align: center;
}

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

.mq-login-card {
    grid-column: 3;

width: 100%;
    min-height: 610px;

padding:
        42px
        38px
        30px;

direction: rtl;

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

border-radius: 28px;

background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.88),
            rgba(238,249,252,.79)
        );

box-shadow:
        0 30px 85px
        rgba(17, 68, 90, .18);

backdrop-filter:
        blur(25px);

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

/* ============================================================
   LOGIN LOGO
   ============================================================ */

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

display: flex;

align-items: center;

justify-content: center;
}

.mq-login-logo {
    display: block;

width: 245px;

max-width: 78%;

height: auto;

object-fit: contain;
}

/* ============================================================
   WELCOME
   وسط چین + Bold
   ============================================================ */

.mq-welcome {
    width: 100%;

margin-top: 32px;

color: var(--mq-navy);

direction: rtl;

text-align: center;

font-size: 23px;

font-weight: 900;

line-height: 1.8;
}

.mq-welcome-description {
    width: 100%;

margin-top: 5px;

color: #718aa0;

direction: rtl;

text-align: center;

font-size: 13px;

font-weight: 600;

line-height: 1.9;
}

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

.mq-form {
    width: 100%;

margin-top: 27px;

direction: rtl;
}

/* ============================================================
   FIELD
   ============================================================ */

.mq-field {
    position: relative;

width: 100%;

margin-bottom: 14px;
}

.mq-input {
    display: block;

width: 100%;
    height: 58px;

padding:
        0
        49px
        0
        52px;

border:
        1px solid
        rgba(171, 198, 215, .67);

border-radius: 13px;

outline: none;

background:
        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;
    }

}

&lt;/style>

&lt;div class="mq-layout">

&lt;!-- ======================================================
         LEFT CONTENT
         ====================================================== -->

&lt;section class="mq-intro">

&lt;!-- REAL MEDIQ LOGO -->

&lt;div class="mq-main-logo-wrap">

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

&lt;/div>

&lt;div class="mq-accent-line">&lt;/div>

&lt;!-- TITLE -->

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

&lt;!-- DESCRIPTION -->

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

&lt;!-- ==================================================
             FEATURES
             ================================================== -->

&lt;div class="mq-features">

&lt;!-- ACCURATE INFORMATION -->

&lt;div class="mq-feature">

&lt;div class="mq-feature-icon">

&lt;svg viewBox="0 0 24 24">

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

&lt;path
                            d="M9 12l2 2 4-5"
                        >&lt;/path>

&lt;/svg>

&lt;/div>

&lt;div class="mq-feature-title">

اطلاعات دقیق

&lt;br>

و به‌روز

&lt;/div>

&lt;!-- MAINTENANCE -->

&lt;div class="mq-feature">

&lt;div class="mq-feature-icon">

&lt;svg viewBox="0 0 24 24">

&lt;circle
                            cx="12"
                            cy="12"
                            r="3"
                        >&lt;/circle>

&lt;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
                            "
                        >&lt;/path>

&lt;/svg>

&lt;/div>

&lt;div class="mq-feature-title">

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

&lt;br>

کارآمد

&lt;/div>

&lt;!-- REPORT -->

&lt;div class="mq-feature">

&lt;div class="mq-feature-icon">

&lt;svg viewBox="0 0 24 24">

&lt;path
                            d="M5 20V11"
                        >&lt;/path>

&lt;path
                            d="M10 20V6"
                        >&lt;/path>

&lt;path
                            d="M15 20V9"
                        >&lt;/path>

&lt;path
                            d="M20 20V3"
                        >&lt;/path>

&lt;/svg>

&lt;/div>

&lt;div class="mq-feature-title">

گزارش‌های

&lt;br>

تحلیلی

&lt;/div>

&lt;!-- ASSETS -->

&lt;div class="mq-feature">

&lt;div class="mq-feature-icon">

&lt;svg viewBox="0 0 24 24">

&lt;path
                            d="M12 3l7 4-7 4-7-4 7-4z"
                        >&lt;/path>

&lt;path
                            d="M5 7v9l7 4 7-4V7"
                        >&lt;/path>

&lt;path
                            d="M12 11v9"
                        >&lt;/path>

&lt;/svg>

&lt;/div>

&lt;div class="mq-feature-title">

مدیریت کامل

&lt;br>

دارایی‌ها

&lt;/div>

&lt;/section>

&lt;!-- ======================================================
         LOGIN CARD
         ====================================================== -->

&lt;section class="mq-login-card">

&lt;!-- REAL LOGO -->

&lt;div class="mq-login-logo-wrap">

&lt;img
                class="mq-login-logo"
                src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo1.png"
                alt="MediQ"
            >

&lt;/div>

&lt;!-- WELCOME -->

&lt;div class="mq-welcome">
            به پلتفرم مدیکیو خوش آمدید
        &lt;/div>

&lt;div class="mq-welcome-description">
            برای ادامه، وارد حساب کاربری خود شوید.
        &lt;/div>

&lt;!-- ==================================================
             LOGIN FORM
             ================================================== -->

&lt;form
            id="mqLoginForm"
            class="mq-form"
            method="post"
            action="/dologin.action"
        >

&lt;!-- USERNAME -->

&lt;div class="mq-field">

&lt;input
                    id="mqUsername"
                    class="mq-input"
                    type="text"
                    name="os_username"
                    placeholder="نام کاربری"
                    autocomplete="username"
                    required
                >

&lt;span class="mq-field-icon">

&lt;svg viewBox="0 0 24 24">

&lt;circle
                            cx="12"
                            cy="8"
                            r="4"
                        >&lt;/circle>

&lt;path
                            d="M5 20c0-4 3-7 7-7s7 3 7 7"
                        >&lt;/path>

&lt;/svg>

&lt;/span>

&lt;/div>

&lt;!-- PASSWORD -->

&lt;div class="mq-field">

&lt;input
                    id="mqPassword"
                    class="mq-input"
                    type="password"
                    name="os_password"
                    placeholder="رمز عبور"
                    autocomplete="current-password"
                    required
                >

&lt;!-- LOCK -->

&lt;span class="mq-field-icon">

&lt;svg viewBox="0 0 24 24">

&lt;rect
                            x="5"
                            y="10"
                            width="14"
                            height="10"
                            rx="2"
                        >&lt;/rect>

&lt;path
                            d="M8 10V7a4 4 0 0 1 8 0v3"
                        >&lt;/path>

&lt;path
                            d="M12 14v2"
                        >&lt;/path>

&lt;/svg>

&lt;/span>

&lt;!-- EYE -->

&lt;button
                    id="mqPasswordToggle"
                    class="mq-password-toggle"
                    type="button"
                    title="نمایش رمز عبور"
                    aria-label="نمایش رمز عبور"
                >

&lt;svg
                        id="mqEyeIcon"
                        viewBox="0 0 24 24"
                    >

&lt;path
                            d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"
                        >&lt;/path>

&lt;circle
                            cx="12"
                            cy="12"
                            r="3"
                        >&lt;/circle>

&lt;/svg>

&lt;/button>

&lt;/div>

&lt;!-- REMEMBER -->

&lt;div class="mq-options">

&lt;label class="mq-remember">

&lt;input
                        type="checkbox"
                        name="os_cookie"
                        value="true"
                    >

&lt;span>
                        مرا به خاطر بسپار
                    &lt;/span>

&lt;/label&gt;

&lt;/div>

&lt;!-- DESTINATION -->

&lt;input
                id="mqDestination"
                type="hidden"
                name="os_destination"
                value="/"
            >

&lt;!-- LOGIN -->

&lt;button
                id="mqSubmit"
                class="mq-submit"
                type="submit"
            >

&lt;span class="mq-submit-text">
                    ورود به سامانه
                &lt;/span>

&lt;span class="mq-loader">&lt;/span>

&lt;/button>

&lt;!-- ERROR -->

&lt;div
                id="mqError"
                class="mq-error"
            >&lt;/div>

&lt;/form>

&lt;!-- DIVIDER -->

&lt;div class="mq-divider">&lt;/div>

&lt;!-- SUPPORT -->

&lt;div class="mq-support">

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

&lt;span class="mq-support-icon">

&lt;svg viewBox="0 0 24 24">

&lt;path
                        d="M4 13v-2a8 8 0 0 1 16 0v2"
                    >&lt;/path>

&lt;path
                        d="M4 13H3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v-6z"
                    >&lt;/path>

&lt;path
                        d="M20 13h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v-6z"
                    >&lt;/path>

&lt;path
                        d="M19 19c0 2-2 2-4 2"
                    >&lt;/path>

&lt;/svg>

&lt;/span>

&lt;/div>

&lt;/section>

&lt;/div>

&lt;script>
(function () {

"use strict";

/* ========================================================
       MEDIQ CONFIG
       ======================================================== */

var CFG = {

/*
         * مقصد بعد از Login موفق
         *
         * فعلاً چون Dashboard ساخته نشده،
         * کاربر به همین صفحه MediQ برمی‌گردد.
         *
         * بعداً فقط Page ID داشبورد را اینجا عوض می‌کنیم.
         */

destination:
            "/pages/viewpage.action?pageId=174855144",

/*
         * Login واقعی Confluence
         */

loginAction:
            "/dologin.action"

};

/* ========================================================
       ELEMENTS
       ======================================================== */

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

var username =
        document.getElementById(
            "mqUsername"
        );

var password =
        document.getElementById(
            "mqPassword"
        );

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

var eyeIcon =
        document.getElementById(
            "mqEyeIcon"
        );

var submit =
        document.getElementById(
            "mqSubmit"
        );

var destination =
        document.getElementById(
            "mqDestination"
        );

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

/* ========================================================
       APPLY CONFIG
       ======================================================== */

if (form) {

form.action =
            CFG.loginAction;

form.method =
            "post";

form.setAttribute(
            "autocomplete",
            "on"
        );

}

if (destination) {

destination.value =
            CFG.destination;

}

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

function showError(message) {

if (!error) {
            return;
        }

error.innerHTML =
            message;

error.style.display =
            "block";

}

function hideError() {

if (!error) {
            return;
        }

error.innerHTML =
            "";

error.style.display =
            "none";

}

/* ========================================================
       SHOW / HIDE PASSWORD
       ======================================================== */

if (
        password &amp;&amp;
        passwordToggle
    ) {

passwordToggle.addEventListener(
            "click",
            function () {

var showPassword =
                    password.type ===
                    "password";

password.type =
                    showPassword
                        ? "text"
                        : "password";

if (showPassword) {

passwordToggle.title =
                        "مخفی کردن رمز عبور";

passwordToggle.setAttribute(
                        "aria-label",
                        "مخفی کردن رمز عبور"
                    );

if (eyeIcon) {

eyeIcon.innerHTML =
                            '&lt;path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z">&lt;/path>' +
                            '&lt;circle cx="12" cy="12" r="3">&lt;/circle>' +
                            '&lt;path d="M4 4l16 16">&lt;/path>';

}

}
                else {

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

passwordToggle.setAttribute(
                        "aria-label",
                        "نمایش رمز عبور"
                    );

if (eyeIcon) {

eyeIcon.innerHTML =
                            '&lt;path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z">&lt;/path>' +
                            '&lt;circle cx="12" cy="12" r="3">&lt;/circle>';

}

}
        );

}

/* ========================================================
       REMOVE ERROR WHEN USER TYPES
       ======================================================== */

if (username) {

username.addEventListener(
            "input",
            function () {

hideError();

}
        );

}

if (password) {

password.addEventListener(
            "input",
            function () {

hideError();

}
        );

}

/* ========================================================
       LOGIN VALIDATION
       ======================================================== */

if (form) {

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

var userValue =
                    username
                        ? username.value.trim()
                        : "";

var passwordValue =
                    password
                        ? password.value
                        : "";

/* --------------------------------------------
                   USERNAME EMPTY
                   -------------------------------------------- */

if (!userValue) {

event.preventDefault();

showError(
                        "لطفاً نام کاربری را وارد کنید."
                    );

if (username) {

username.focus();

}

return false;

}

/* --------------------------------------------
                   PASSWORD EMPTY
                   -------------------------------------------- */

if (!passwordValue) {

event.preventDefault();

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

if (password) {

password.focus();

}

return false;

}

/* --------------------------------------------
                   VALID
                   -------------------------------------------- */

hideError();

/*
                 * Username / Password را خود Confluence
                 * از طریق POST دریافت می‌کند.
                 *
                 * Password در LocalStorage،
                 * SessionStorage یا Cookie سفارشی
                 * ذخیره نمی‌شود.
                 */

if (submit) {

submit.classList.add(
                        "loading"
                    );

submit.disabled =
                        true;

submit.setAttribute(
                        "aria-busy",
                        "true"
                    );

}

/*
                 * اینجا preventDefault نداریم.
                 *
                 * بنابراین فرم به:
                 *
                 * /dologin.action
                 *
                 * ارسال می‌شود.
                 */

return true;

}
        );

}

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

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

if (submit) {

submit.classList.remove(
                    "loading"
                );

submit.disabled =
                    false;

submit.removeAttribute(
                    "aria-busy"
                );

}

}
    );

/* ========================================================
       INITIAL FOCUS
       ======================================================== */

window.setTimeout(
        function () {

if (
                username &amp;&amp;
                !username.value
            ) {

username.focus();

}

},
        300
    );

})();
&lt;/script>
&lt;/div>

</pre></td></tr></table>