Page History

HTML
<div id="mediq-login-page" dir="rtl">

<style>
/* ============================================================
   MEDIQ LOGIN PAGE
   Confluence Server / Data Center 8.7.1
   Page ID: 174855060

   BACKGROUND:
   Modern Hospital Room with Medical Bed.png

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

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

#mediq-login-page {
    --primarymq-navy: #082b4b;
    --mq-text: #08b5ad#173b59;
    --primary2mq-muted: #0bc4b9#7089a0;
    --mq-navyprimary: #092e4e#08b8b0;
    --mq-primary-textdark: #173d5c#05a49e;
    --muted: #71899emq-border: rgba(175, 202, 218, .60);

    position: relative;

    width: 100%;
    min-height: 720px760px;

    overflow: hidden;

    direction: rtl;

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

    color: var(--mq-text);

    background-image:
        url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png");

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


/* ============================================================
   BACKGROUNDLEFT 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,.9798) 0%,
            rgba(255,255,255,.9294) 23%17%,
            rgba(255,255,255,.4270) 42%31%,
            rgba(255,255,255,.0322) 66%44%,
            rgba(0255,60255,75255,.030) 100%58%
        );
}


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

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

    width: 100%;
    min-height: 720px760px;

    padding: 50px 7%;

    display: grid;

    grid-template-columns:54px
        minmax(470px, 590pxclamp(50px, 7vw, 120px);

    display: grid;

    grid-template-columns:
        minmax(480px, 600px)
        minmax(80px, 1fr)
        minmax(390px410px, 445px465px);

    gapalign-items: 30pxcenter;

    align-itemsgap: center20px;

    direction: ltr;
}


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

.mq-intro {
    grid-column: 1;

    directionwidth: rtl100%;
    textmax-alignwidth: right580px;

    direction: rtl;
    widthtext-align: 100%right;

    maxalign-widthself: 570pxcenter;
}


/* ============================================================
   MAIN LOGO COMMON
   ============================================================ */

.mq-brandmain-logo-wrap {
    displaywidth: flex100%;

    align-itemsdisplay: centerflex;

    justify-content: flex-start;

    directionalign-items: ltrcenter;

    gapdirection: 15pxltr;

    margin-bottom: 36px29px;
}

.mq-main-logo-svg {
    widthdisplay: 82pxblock;

    heightwidth: 82px335px;
    flexmax-width: 0 0 82px;
}74%;

.mq-brand-text {
    displayheight: flexauto;

    flexobject-directionfit: columncontain;

    alignobject-itemsposition: flex-startleft center;
}

.mq-wordmark {
    font-family: Arial, sans-serif;
/* ============================================================
    font-size: 48px;SHORT LINE
    line-height: 1;============================================================ */

.mq-accent-line {
    font-weightwidth: 80062px;
    letter-spacingheight: -2px4px;

    colormargin: #082d4d;
}

.mq-wordmark .q {

       color: #08b5ad;
}

.mq-brand-caption {
0
       direction: rtl;0
    width: 100%;    31px
    text-align: right    0;

    marginborder-topradius: 7px10px;

    font-size: 13px;
background:
        linear-gradient(
            90deg,
           font-weight: 700;

 #0ccbc0,
            #049f9c
       color: #173d5c);
}


/* ============================================================
   TITLE
   ============================================================ */

.mq-linetitle {
    width: 58px;
    height: 4px;

    margin-bottom: 30px0;

    border-radiuswidth: 20px100%;

    backgroundcolor: var(--primarymq-navy);
}

.mq-title {
    margindirection: 0rtl;

    text-align: right;

    color: var(--navy);

    font-size: clamp(36px40px, 3vw3.2vw, 53px56px);

    fontline-weightheight: 9001.48;

    linefont-heightweight: 1.55800;

    letter-spacing: -1px1.3px;
}

.mq-descriptiontitle-line {
    margin-top: 13px;

    text-align: right;

    color: #607b91;

    font-size: 16px;
    line-height: 2.05;
display: block;
}


/* ============================================================
   FEATURESDESCRIPTION
   ============================================================ */

.mq-featuresdescription {
    width: 100%;

    margin-top: 34px14px;

    displaycolor: grid#617d96;

    grid-template-columnsdirection: repeat(4, 1fr)rtl;

    gaptext-align: 11pxright;
}

.mq-feature {
    minfont-heightsize: 120px16px;

    paddingfont-weight: 15px 8px400;

    border: 1px solid rgba(210,229,238,.85);
    border-radius: 16px;

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

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

    display: flex;
    flex-direction: columnline-height: 2.05;
}


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

.mq-features {
    width: 100%;

    alignmargin-itemstop: center36px;

    justify-contentdisplay: centergrid;

    boxgrid-template-shadowcolumns:
        repeat(4, minmax(0 8px 28px
, 1fr));

    gap: 12px;

    rgba(33,86,108,.045)direction: rtl;
}

.mq-feature-icon {
    widthmin-height: 43px128px;

    heightpadding: 43px;

    margin-bottom: 10px;

    border-radius: 13px;

15px
       display: flex;8px
       align-items: center13px;

    justify-contentborder: center;


        background:1px #e1faf8;solid
    color: #08afa7;

    rgba(202,  font-size: 21px224, 235, .78);

    fontborder-weightradius: bold15px;
}

.mq-feature:nth-child(2) .mq-feature-icon {
    background:
   #edf5ff;
    color: #4b8fd7 rgba(255,255,255,.70);
}

.mq-feature:nth-child(3) .mq-feature-icon {
    box-shadow:
    background: #e5faf5;
    color: #00a98b;
}

.mq-feature:nth-child(4) .mq-feature-icon {0 9px 30px
        rgba(26, 82, 105, .045);

    backdrop-filter:
        blur(12px);

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

    backgrounddisplay: #edf3faflex;

    colorflex-direction: #718caccolumn;
}

.mq-feature-text {
    align-items: center;

    widthjustify-content: 100%center;

    text-align: center;
}

.mq-feature-icon {
   color width: #173d5c45px;

    font-sizeheight: 11px45px;

    fontmargin-weightbottom: 80010px;

    lineborder-heightradius: 1.8;
}
13px;

/* =========================================================
   LOGINdisplay: CARD
   ========================================================= */

.mq-login-card {flex;

    gridalign-columnitems: 3center;

    directionjustify-content: rtlcenter;
}

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

    fill: 100%none;

    min-heightstroke: 565pxcurrentColor;

    padding: 42px 38px 30pxstroke-width: 2;

    stroke-linecap: round;

    borderstroke-linejoin: 1px solid rgba(255,255,255,.86);round;
}


/* CARD 1 */

.mq-feature:nth-child(1)
.mq-feature-icon {
    border-radiuscolor: 28px#0ab3aa;

    background:
        linear-gradient(
            145deg,
        rgba(255,255,255,.90),    #e0fbf8,
        rgba(238,249,251,.79)
    #c8f4f0
        );
}


/* CARD   backdrop-filter: blur(25px);2 */

.mq-feature:nth-child(2)
.mq-feature-icon {
    -webkit-backdrop-filtercolor: blur(25px)#3d92e5;

    box-shadow:background:
        linear-gradient(
        0   30px 80px145deg,
        rgba(16,65,87,.17    #eaf5ff,
            #dcecff
        );
}


/* =========================================================
   CARD LOGO
   ========================================================= */

.mq-card-brandCARD 3 */

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

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

    direction: ltr;

linear-gradient(
    gap: 9px;
}

.mq-card-brand .mq-logo-svg {
    width: 61px;145deg,
    height: 61px;
    flex: 0 0 61px;
}

.mq-card-wordmark {
#e2faf5,
     font-family: Arial, sans-serif;

    font-size: 38px; #d1f6ee
    font-weight: 800;

    line-height: 1;);
}


/* CARD   letter-spacing: -1.5px;

4 */

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

.mq-card-wordmark .q {
    background:
    color: var(--primary    linear-gradient(
            145deg,
            #edf3fa,
            #e2ebf7
        );
}


.mq-cardfeature-captiontitle {
    margin-topcolor: 4px#133956;

    text-aligndirection: centerrtl;

    font-size: 11px;

    font-weight: 700;

    color: #173b59 line-height: 1.9;

    text-align: center;
}


/* ============================================================
   WELCOMELOGIN CARD
   ============================================================ */

.mq-welcomelogin-card {
    margingrid-topcolumn: 36px3;

    text-alignwidth: right100%;

    colormin-height: #0c304f610px;

    font-sizepadding:
 20px;
      font-weight: 900;
}

.mq-welcome-desc {
 42px
        38px
       margin-top: 9px30px;

    text-aligndirection: rightrtl;

    color: #718a9f;

border:
        1px solid
       font-size: 11px;
 rgba(255,255,255,.88);

    lineborder-heightradius: 1.928px;
}


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

.mq-form {
    margin-top: 28px;
}

.mq-field {
    position: relative;

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

    marginbox-bottomshadow: 14px;

        0 30px 85px
        rgba(17, 68, 90, .18);

    backdrop-filter:
        blur(25px);

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


/* ============================================================
   INPUTLOGIN LOGO
   ============================================================ */

.mq-login-inputlogo-wrap {
    displaywidth: block100%;

    widthdisplay: 100%flex;

    heightalign-items: 57pxcenter;

    border: 1px solid rgba(181,204,217,.75);
    border-radius: 13px;

    outline: nonejustify-content: center;
}

.mq-login-logo {
    display: block;

    backgroundwidth: rgba(255,255,255,.82)245px;

    colormax-width: #173d5c78%;

    font-familyheight: Tahoma, Arial, sans-serifauto;

    fontobject-sizefit: 12pxcontain;

    direction: rtl;
    text-align: right;

    /*
       فضای سمت راست برای آیکن
       فضای سمت چپ برای چشم
    */
    padding:
        0
        48px
        0
        52px}


/* ============================================================
   WELCOME
   ============================================================ */

.mq-welcome {
    margin-top: 32px;

    color: var(--mq-navy);

    direction: rtl;
    text-align: right;

    font-size: 20px;

    font-weight: 700;

    transitionline-height: .18s ease;1.8;
}

.mq-input::placeholder-welcome-description {
    colormargin-top: #7890a45px;

    text-aligncolor: right#718aa0;
}

.mq-input:focus {
    direction: rtl;
    bordertext-coloralign: var(--primary)right;

    backgroundfont-size: #fff11px;

    boxfont-shadowweight:
        0 0 0 3px 400;

        rgba(8,181,173,.10)line-height: 1.9;
}


/* ============================================================
   RIGHT ICONFORM
   ============================================================ */

.mq-field-iconform {
    positionwidth: absolute100%;

    rightmargin-top: 17px27px;
    left: auto;

    topdirection: 50%rtl;

    transform: translateY(-50%);}


    width: 20px;

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

    color: #69839a;

    pointer-events: none;
}


/* /* ============================================================
   ICON SVGFIELD
   ============================================================ */

.mq-field-icon svg {
    widthposition: 19pxrelative;

    heightwidth: 19px100%;

    fillmargin-bottom: none14px;
}

.mq-input {
    strokedisplay: currentColorblock;

    stroke-width: 1.8100%;

    stroke-linecapheight: round58px;

    stroke-linejoin: round;
}


/* =========================================================
   PASSWORD EYE
   سمت چپ مستقل
   ========================================================= */

.mq-eye {
    position: absolutepadding:
        0
        49px
        0
        52px;

    leftborder:
 14px;
    right: auto;

   1px solid
     top: 50%;

  rgba(171, 198, transform: translateY(-50%215, .67);

    widthborder-radius: 34px13px;

    heightoutline: 34pxnone;

    paddingbackground: 0
        rgba(255,255,255,.76);

    bordercolor: none#173b59;

    outlinedirection: nonertl;

    bordertext-radiusalign: 8pxright;

    backgroundfont-family: transparent;


       color: #6f879b;

Tahoma,
       cursor: pointer;

Arial,
       display: flexsans-serif;

    alignfont-itemssize: center12px;

    justifyfont-contentweight: center400;
}

.mq-eye:hover {
   transition:
 background: #eef7f8;
    color: var(--primary) border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.mq-eye svg input::placeholder {
    widthcolor: 19px#70889f;

    heightopacity: 19px1;

    filldirection: nonertl;

    stroketext-align: currentColorright;

    strokefont-widthweight: 1.8400;
}

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

    strokeborder-linejoincolor: round
        var(--mq-primary);
}


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


/* ============================================================
   OPTIONSRIGHT FIELD ICON
   ============================================================ */

.mq-field-optionsicon {
    marginposition: 13px 2px 18pxabsolute;

    displayright: flex17px;

    align-itemstop: center50%;

    justify-contenttransform: flex-start
        translateY(-50%);
}

.mq-remember {
    width: 21px;
    height: 21px;

    display: flex;

    align-items: center;

    gapjustify-content: 8pxcenter;

    color: #577086#66829c;

    fontpointer-sizeevents: 11pxnone;

    cursor: pointer;
}

.mq-rememberfield-icon inputsvg {
    width: 16px20px;
    height: 16px 20px;

    fill: none;

    marginstroke: 0currentColor;

    accentstroke-color: var(--primary)width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   LOGINPASSWORD BUTTONEYE
   ============================================================ */

.mq-submitpassword-toggle {
    widthposition: 100%absolute;

    heightleft: 59px12px;

    bordertop: 050%;

    outlinetransform: none;


        border-radius: 13pxtranslateY(-50%);

    backgroundwidth: linear-gradient(36px;
    height: 36px;

   90deg,
 padding: 0;

      #07aaa5,border: 0;

    border-radius: 9px;

   #0cc4b9
 outline:   )none;

    colorbackground: #ffftransparent;

    font-familycolor: Tahoma, Arial, sans-serif#66829c;

    font-sizecursor: 15pxpointer;

    font-weightdisplay: 800flex;

    cursoralign-items: pointercenter;

    boxjustify-shadowcontent: center;

    transition:
    0 12px 27px
  background .15s ease,
    rgba(4,169,163,.21);

    transition:color .18s15s ease;
}

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

background:
    box-shadow:
    rgba(8,184,176,.08);

    0 17px 35pxcolor:
        rgba(4,169,163,.28var(--mq-primary-dark);
}

.mq-submit:active-password-toggle svg {
    transformwidth: translateY(0)20px;
}


/*     height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   ERRORREMEMBER
   ============================================================ */

.mq-erroroptions {
    displaywidth: none100%;

    margin-top:
 12px;

     padding: 10px 12px;13px

     border: 1px solid #fecdd3;0
       border-radius: 9px19px;

    backgrounddisplay: #fff1f2flex;

    coloralign-items: #be123ccenter;

    textjustify-aligncontent: rightflex-start;

    font-sizedirection: 10px;
 rtl;
}

.mq-remember {
    display: inline-flex;

   line-height: 1.8;
}


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

.mq-divider {
    height: 1px align-items: center;

    gap: 8px;

    color: #59748b;

    direction: rtl;

    font-size: 11px;

    font-weight: 400;

    cursor: pointer;

    marginuser-select: 29px 0 21pxnone;
}

.mq-remember    background: linear-gradient(input {
        90deg,width: 17px;
        transparent,height: 17px;

        rgba(136,165,183,.42),margin: 0;

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

.mq-support {
    display: flex;

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

    gap: 8px
/* ============================================================
   SUBMIT
   ============================================================ */

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

    colorborder: #71899d0;

    fontborder-sizeradius: 10px13px;

    line-heightoutline: 1.8none;

    text-align: right;
}

.mq-support svg {
background:
        linear-gradient(
            90deg,
            #05aaa5,
            #0bc2b8
     flex: 0 0 auto);

    widthcolor: 18px#fff;

    height: 18px;

font-family:
        Tahoma,
       fill: none;

Arial,
       stroke: #173d5csans-serif;

    strokefont-widthsize: 1.715px;

    strokefont-linecapweight: round700;

    stroke-linejoincursor: roundpointer;
}


/* =========================================================
   LOADERbox-shadow:
   ========================================================= */

.mq-loader {
   0 display: none;
13px 28px
    width: 20px;
    height: 20pxrgba(3, 166, 160, .20);

    margintransition: auto;


       border: 3pxtransform solid rgba(255,255,255,.35);.17s ease,
    border-top-color: #fff;

    border-radius: 50%;

box-shadow .17s ease,
       animation: mq-spinfilter .7s17s linear infiniteease;
}

.mq-submit.loading .mq-submit-text :hover {
    displaytransform: none;
}

.mq-submit.loading .mq-loader {

       display: block;
}

@keyframes mq-spin { translateY(-2px);

    box-shadow:
    to {
   0 18px 35px
   transform: rotate(360deg);
    }
rgba(3,166,160,.27);

    filter:
        brightness(1.015);
}

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


/* ============================================================
   RESPONSIVEERROR
   ============================================================ */

@media (max-width:1150px).mq-error {

    .mq-layout {display: none;

    width: 100%;

    gridmargin-template-columns:
top: 12px;

    padding:
        minmax(390px,1fr)10px
        12px;

    40pxborder:
        1px    390px;solid

        padding: 40px 35px#fecdd3;

    }

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

border-radius: 9px;

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

    }
}


@media (max-width:850px) {

color:
    #mediq-login {
        overflow: visible#be123c;

        background-positiondirection: 65% centerrtl;
    }

    .mq-layout {
        display: flextext-align: right;

        flex-directionfont-size: column10px;

        minline-height: auto1.8;
}
        padding: 30px 20px;

        gap: 35px;
    }

    .mq-login-card {
        width: min(100%,460px);

        order: 1;
    }

    .mq-intro {
        width: min(100%,560px);

        order: 2;
    }
}


@media (max-width:520px) {

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

        border-radius: 22px;
    }

    .mq-title {

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

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

    margin:
        font-size: 30px;29px
    }

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

    }

background:
        .mq-features {
linear-gradient(
           grid-template-columns: repeat(2,1fr); 90deg,
    }
}

</style>


<div class="mq-layout">


        <!-- =====================================================transparent,
            rgba(131,160,179,.35),
         LEFT   transparent
        );
}


/* ======================================================== -->

    <section class="mq-intro">


        <!-- BRAND -->

        <div class="mq-brand">


            <!-- MEDIQ LOGO -->
====
   SUPPORT
         <svg
                class="mq-logo-svg"============================================================ */

.mq-support {
    width: 100%;

           viewBox="0 0 100 100"
                aria-hidden="true"
  display: flex;

    align-items: center;

     >justify-content: center;

    gap: 8px;

    direction: rtl;

    color:  <defs>#6f879c;

    text-align: right;

    font-size: 10px;

    font-weight: 400;

     <linearGradient
 line-height: 1.9;
}

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

    width: 19px;
    height: 19px;

      id="mqGradientA"
  color: #163d5d;
}

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

    fill: none;

       x1="0"stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   LOADING
     y1="0"
 ============================================================ */

.mq-loader {
    display: none;

    width: 21px;
    height: 21px;

        x2="1"margin: auto;

    border:
        3px solid
           y2="1"rgba(255,255,255,.38);

    border-top-color:
        #fff;

        >border-radius: 50%;

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

.mq-submit.loading {
           offset="0%"
          pointer-events: none;

    opacity: .88;
}

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

.mq-submit.loading
.mq-loader {
    display:  stop-color="#58d8d5"block;
}

@keyframes mq-spin {
    to {
        transform:
           />

 rotate(360deg);
                        <stop}
}


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

@media (max-width: 1200px) {

    .mq-layout {
        grid-template-columns:
               offset="100%"minmax(400px, 1fr)
            30px
                stop-color="#11bcb6"400px;

        padding:
            45px
    />
        35px;
    }

        </linearGradient>

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

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

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


@media (max-width: 900px) {

    x1="1"#mediq-login-page {
        overflow: visible;

        background-position:
         y1="0"
   65%
            center;
    }

     x2="0".mq-layout {
        display: flex;

        flex-direction: column;

      y2="1"
  min-height: auto;

        padding:
         >
   35px
            20px;

        gap: <stop35px;
    }

    .mq-login-card {
        order: 1;

        width:
  offset="0%"
          min(100%, 470px);

        min-height: auto;
    }

    stop-color="#00a7a3".mq-intro {
        order: 2;

        width:
       />

     min(100%, 580px);
    }
}


@media (max-width: 520px) {

    .mq-layout {
      <stop
  padding:
            22px
            12px
  offset="100%"
          40px;
    }

    .mq-login-card {
         stop-color="#00c3b6"padding:
            32px
            />22px
            27px;

        </linearGradient>
border-radius:
            22px;
    </defs>}


    .mq-login-logo {
         width:
  <!-- LEFT HALF -->

       210px;
    }

     <path.mq-main-logo {
        width:
            d="265px;
    }

    .mq-title {
        font-size:
   M50 82
        31px;
    }

    .mq-description {
   C43 72 24 58 20 39font-size:
            13px;
    }

    C17 24 26 13 39 13.mq-features {
        grid-template-columns:
            C47 13 53 18 57 25repeat(2, 1fr);
    }
}

</style>


<div class="mq-layout">


    <!-- ======================================================
         LEFT C48CONTENT
  27 41 34 39 44
   ====================================================== -->

    <section class="mq-intro">


        <!-- REAL MEDIQ C36 55 41 67 50 82
LOGO -->

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

               Z<img
                    class="mq-main-logo"
                    fill="url(#mqGradientA)src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"
                />


    alt="MediQ"
            <!-- RIGHT HALF -->

                <path</div>


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


        <!-- TITLE -->

          M50 82<h1 class="mq-title">

              <span class="mq-title-line">
      C58 71 77 58 81 39
     مدیریت هوشمند
            </span>

  C84 24 75 13 62 13
     <span class="mq-title-line">
              C53 13 47 19 43 27تجهیزات پزشکی
            </span>

        C53 28 60 35 62 45</h1>


        <!-- DESCRIPTION -->

        <div  C64 56 59 68 50 82
class="mq-description">

            ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات  پزشکی

     Z
       <br>

             "
در یک پلتفرم یکپارچه

        </div>



         fill="url(#mqGradientB)"<!-- ==================================================
             FEATURES
   />


          ================================================== -->

     <!-- CENTER WHITE CUT<div -->class="mq-features">


             <!-- ACCURATE INFORMATION <path-->

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

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

                    C43 57 42 48 45 40<svg viewBox="0 0 24 24">

                    C47 34 51 30 56 28<path
                    C50 38 51 50 56 58
   d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3z"
            C55 62 53 65 50 68
       ></path>

             Z
           <path
         "
                    filld="#ffffff"
M9 12l2 2 4-5"
                 opacity=".94"
        ></path>

        />

            </svg>


               <div class="mq-brand-text"> </div>

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

                    Medi<span class="q">Q</span>
اطلاعات دقیق

                    </div><br>

                <div class="mq-brand-caption">    و به‌روز

                </div>

    مدیریت   تجهیزات پزشکی
    </div>



            </div>!-- MAINTENANCE -->

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


        </div>


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


feature-icon">

                    <h1<svg classviewBox="mq-title0 0 24 24">

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


        <div classcx="mq-description12">


                    ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی

cy="12"
             <br>

            در یک پلتفرم یکپارچه

r="3"
              </div>



        <!-- FEATURES --> ></circle>

        <div class="mq-features">


               <div class="mq-feature">
 <path
                <div class="mq-feature-icon">
           d="
         ✓
                </div>

   M19.4 15
            <div class="mq-feature-text">
               a1.7 1.7 0 0 0 اطلاعات دقیق.3 1.9
                    <br>
        l.1.1
            و به‌روز
                </div>
-2.1 2.1
            </div>


            <div class="mq-feature">

   -.1-.1
             <div class="mq-feature-icon">
              a1.7 1.7 0    ⚙0 0-1.9-.3
                </div>

            1.7 1.7 0 0 <div class="mq-feature-text">0-1 1.5
                    نگهداری و تعمیرات
      V20
              <br>
              h-3
      کارآمد
                </div>

         v-.2
   </div>


            <div class="mq-feature">

            a1.7 1.7 0  <div class="mq-feature-icon">0 0-1-1.5
                    ▥
        1.7 1.7 0 0 0-1.9.3
       </div>

                <div class="mq-feature-text">
    l-.1.1
                گزارش‌های
            -2.1-2.1
        <br>
                    تحلیلی.1-.1
                </div>

            </div>


      A1.7 1.7 0 0 0 7 14.6
      <div class="mq-feature">

                <div class="mq-feature-icon">
     a1.7 1.7 0 0 0-1.5-1
            ◈
                </div>H5

                <div class="mq-feature-text">
           v-3
         مدیریت کامل
                  h.5
  <br>
                    دارایی‌ها
      A1.7 1.7 0 0 0 7 9.6
    </div>

            </div>


        </div>


    </section>



    <!-- =====================================================
a1.7 1.7 0 0 0-.3-1.9
                 LOGIN CARD
         ===================================================== -->

 l-.1-.1
       <section class="mq-login-card">


        <!-- CARD BRAND -->

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


 2.1-2.1
            <svg
                class="mq-logo-svg".1.1
                viewBox="0 0 100 100"
           a1.7 1.7 0 0  aria-hidden="true"0 1.9.3
            >

                <defs>

     1.7 1.7 0 0 0 1-1.5
               <linearGradient
             V4
           id="mqGradientCardA"
                 h3
       x1="0"
                     v.4
   y1="0"
                        x2="1"
        a1.7 1.7 0 0 0 1 1.5
                 y2="1"
           1.7 1.7 0 0 0 1.9-.3
    >
                        <stopl.1-.1
                            offset="0%"2.1 2.1
                            stop-color="#58d8d5"
    -.1.1
                    />

        a1.7 1.7 0 0 0-.3 1.9
           <stop
                 1.7 1.7 0 0 0 1.5  1
    offset="100%"
                        h.5
    stop-color="#11bcb6"
                        />v3
                    </linearGradient>


        h-.5
            <linearGradient
                a1.7 1.7 0 0 0-1.5 1z
   id="mqGradientCardB"
                         x1="1"
                        y1="0"></path>

                        x2="0"</svg>

                        y2="1"</div>

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

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

                    <br>

        offset="0%"
            کارآمد

                stop-color="#00a7a3"</div>

            </div>



            <!-- REPORT /-->

            <div class="mq-feature">

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

                    <svg  offsetviewBox="100%"
0 0 24 24">

                         stop-color="#00c3b6"<path
                        />
    d="M5 20V11"
               </linearGradient>

                </defs>></path>


                <path
        <path
            d="
                d="M10 20V6"
   M50 82
                    C43 72 24 58 20 39
></path>

                       C17 24<path
 26 13 39 13
                    C47 13 53 18 57 25d="M15 20V9"
                    C48 27 41 34 39 44
  ></path>

                   C36 55 41 67 50 82<path
                    Z
        d="M20 20V3"
           "
             ></path>

       fill="url(#mqGradientCardA)"
                </>svg>


                <path</div>

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

     d="
               گزارش‌های

     M50 82
              <br>

      C58 71 77 58 81 39
         تحلیلی

           C84 24 75 13 62 13</div>

            </div>



        C53  13 47 19 43 27<!-- ASSETS -->

            <div class="mq-feature">

       C53 28 60 35 62 45
    <div class="mq-feature-icon">

               C64 56 59 68 50 82
    <svg viewBox="0 0 24 24">

                Z
        <path
            "
                d="M12 3l7 4-7  fill="url(#mqGradientCardB)"4-7-4 7-4z"
                />


        ></path>

        <path
                <path
    d="
                    M50 68
   d="M5 7v9l7 4 7-4V7"
              C43 57 42 48 45 40
     ></path>

               C47 34 51 30 56 28
    <path
                C50 38 51 50 56 58
       d="M12 11v9"
            C55 62 53 65 50 68
       ></path>

             Z
       </svg>

             "
   </div>

                <div fillclass="#ffffffmq-feature-title">

                    opacity=".94"مدیریت کامل

                />

    <br>

        </svg>


            <div class="mq-card-wordmark">دارایی‌ها

                Medi<span class="q">Q</span></div>

            </div>


        </div>


    </section>



    <div class="mq-card-caption"><!-- ======================================================
         LOGIN CARD
  مدیریت تجهیزات پزشکی
        </div>
====================================================== -->

    <section    <div class="mq-login-welcomecard">


        <!-- REAL LOGO -->

 به پلتفرم مدیکیو خوش آمدید
   <div class="mq-login-logo-wrap">

    </div>


        <div class="mq-welcome-desc"><img
            برای ادامه، وارد حساب کاربری خود شوید. class="mq-login-logo"
        </div>



        <!-- =================================================src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"
             FORM
   alt="MediQ"
          ================================================= --  >

        <form
     </div>



       id="mqLoginForm"
    <!-- WELCOME -->

        <div class="mq-formwelcome">

            method="post"
    به پلتفرم مدیکیو خوش آمدید

        action="/dologin.action"</div>


        <div class="mq-welcome-description">


            برای ادامه، وارد حساب <!-- USERNAME -->کاربری خود شوید.

        </div>



      <div class="mq-field">

  <!-- ==================================================
             LOGIN   <inputFORM
                    id="mqUsername"
                    class="mq-input"================================================== -->

                    type="text"<form
                    nameid="os_usernamemqLoginForm"
                    placeholder="نام کاربریclass="mq-form"
                    autocompletemethod="usernamepost"
            action="/dologin.action"
        required>


            <!-- USERNAME   -->


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

                <input
    <svg viewBox="0 0 24 24">

            id="mqUsername"
            <circle
        class="mq-input"
                    cxtype="12text"
                    name="os_username"
        cy="8"
            placeholder="نام کاربری"
                    rautocomplete="4username"
                    required
    ></circle>

            >


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

                    <svg   dviewBox="M50 20c0-4 3-7 7-7s7 3 7 7"0 24 24">

                        ></path>
<circle
                    </svg>

           cx="12"
     </span>


            </div>



            <!-- PASSWORD -->

cy="8"
               <div class="mq-field">


            r="4"
    <input
                    id="mqPassword"></circle>

                    class="mq-input"
    <path
                type="password"
            d="M5 20c0-4 3-7 7-7s7 3 7   name="os_password"7"
                    placeholder="رمز عبور"
   ></path>

                 autocomplete="current-password"
   </svg>

                 required
   </span>

             ></div>



                <!-- LOCKPASSWORD RIGHT -->

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

                <input
    <svg viewBox="0 0 24 24">

            id="mqPassword"
            <rect
        class="mq-input"
                    xtype="5password"
                    name="os_password"
        y="10"
            placeholder="رمز عبور"
               width="14"
     autocomplete="current-password"
                       height="10"required
                >


            rx="2"
    <!-- LOCK -->

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

                    <svg viewBox="0 0 24 <path
    24">

                        d="<rect
                            M8 10x="5"
                            V7y="10"
                            a4 4 0 0 1 8 0width="14"
                            v3height="10"
                            rx="2"
                        ></path>rect>

                    </svg>
    <path
                </span>



            d="M8 10V7a4 4 0 <!-- EYE LEFT -->

0 1 8 0v3"
                <button
        ></path>

            id="mqEye"
            <path
        class="mq-eye"
                    typed="buttonM12 14v2"
                    title="نمایش رمز عبور"
  ></path>

                  aria-label="نمایش رمز عبور"
                ></svg>

                </span>



    <svg
            <!-- EYE -->

            id="mqEyeIcon"
    <button
                    viewBoxid="0 0 24 24mqPasswordToggle"
                    >
class="mq-password-toggle"
                    type="button"
    <path
                title="نمایش رمز عبور"
          d="
          aria-label="نمایش رمز عبور"
                M2 12>

                    <svg
        s4-7 10-7
               id="mqEyeIcon"
             10 7 10 7
        viewBox="0 0 24 24"
                  -4 7-10 7>

                        <path
     S2    12 2 12
                 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>

                    </svg>

                </button>


            </div>



            <!-- REMEMBER -->

            <div class="mq-options">

                <label class="mq-remember">

                    <input
                        type="checkbox"
                        name="os_cookie"
                        value="true"
                    >

                    <span>
                        مرا به خاطر بسپار
                    </span>

                </label>

            </div>



            <!-- DESTINATION -->

            <input
                id="mqDestination"
                type="hidden"
                name="os_destination"
                value="/"
            >



            <!-- SUBMITLOGIN -->

            <button
                id="mqSubmit"
                class="mq-submit"
                type="mqSubmit"
"submit"
            >

                <span class="mq-submit-text">

                    ورود

                </span>

                <span class="mq-submitloader"></span>

            </button>



            type="submit"<!-- ERROR -->

            ><div

                <span classid="mq-submit-textmqError">
                class="mq-error"
    ورود
        ></div>


        </span>form>



        <!-- DIVIDER -->

      <span  <div class="mq-loaderdivider"></span>div>



        <!--    </button>SUPPORT -->



            <div<div class="mq-support">


            <span>

    id="mqError"
            در صورت مشکل  class="mq-error"
        در ورود، با واحد فناوری اطلاعات تماس بگیرید.

    ></div>


        </form>
span>


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


        <div<span class="mq-support-icon">


                <svg viewBox="0 0 24 24">

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

              a8 8 0 0 1 16 0<path
                    v2
    d="M4 13H3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v-6z"
    "
                ></path>

                    <path
                        d=="M20 13h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v-6z"
                    M4 13></path>

                    H3<path
                    a2   2 0 0 0d="M19 19c0 2-2 2-4 2"
                    v2></path>

                </svg>

      a2 2 0 0 0 2 2</span>


        </div>


    </section>


</div>



<script>
(function () {

      h2"use strict";


        /* ========================================================
       MEDIQ CONFIG
    v-6
   ======================================================== */

    var CFG = {

         z/*
         * بعداً Page ID داشبورد اصلی MediQ
     "
    * را اینجا می‌گذاریم.
         ><*/path>

                <pathdestination:
            "/",


        d="/*
         * Confluence login endpoint
        M20 13*/

        loginAction:
            h1
          "/dologin.action"

    };



    /*  a2 2 0 0 1 2 2========================================================
       ELEMENTS
       ======================================================== */

    var        v2form =
           document.getElementById(
         a2 2 0 0 1-2 2
"mqLoginForm"
        );


    var username =
        h-2document.getElementById(
            "mqUsername"
        v-6);


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


    var passwordToggle "=
        document.getElementById(
        ></path>

    "mqPasswordToggle"
        </svg>);


    var eyeIcon =
      <span>  document.getElementById(
            "mqEyeIcon"
    در صورت مشکل در ورود،);


 با واحد فناوری اطلاعاتvar تماسsubmit بگیرید.=
            </span>


document.getElementById(
        </div>


    </section>


</div>



<script>
(function () {

    "mqSubmit"
       "use strict");


    /* ========================================================
var destination =
        CONFIG
document.getElementById(
            "mqDestination"
    ======================================================== */    );


    var CFGerror =
 {

       document.getElementById(
  destination: "/",

        loginAction: "/dologin.actionmqError"

        });



    /* ========================================================
       ELEMENTSAPPLY CONFIG
       ======================================================== */

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

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

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

    var eye =
  

    if  document.getElementById("mqEye");(form) {

    var eyeIcon    form.action =
            document.getElementById("mqEyeIcon")CFG.loginAction;

    var submit =}


     if   document.getElementById("mqSubmit");

(destination) {

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

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



    /* ========================================================
       SHOW / APPLYHIDE CONFIGPASSWORD
       ======================================================== */



    if (
        password &&
        passwordToggle
    ) {

       if (form) {
passwordToggle.addEventListener(
          form.action = CFG.loginAction;
 "click",
     }

       iffunction (destination) {

                var destination.valueshowPassword = CFG.destination;

                }


    /* ========================================================
password.type ===
                    "password";


         PASSWORD EYE
       password.type =
        ======================================================== */

        if (password && eye) {

showPassword
             eye.addEventListener(
           ? "clicktext",
            function () {            : "password";


                varif isHidden =(showPassword) {

                    passwordpasswordToggle.typetitle === "password";



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

                    isHiddenpasswordToggle.setAttribute(
                        ? "textaria-label",
                        "مخفی کردن :رمز "passwordعبور";


                   eye.title =
 );


                     isHiddenif (eyeIcon) {

                        ? "مخفی کردن رمز عبور"
eyeIcon.innerHTML =
                            :'<path d="نمایشM2 رمز عبور";


         12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"></path>' +
       eye.setAttribute(
                     '<circle cx="aria-label12",
 cy="12" r="3"></circle>' +
                 eye.title
           '<path d="M4    )4l16 16"></path>';


                  if (eyeIcon) {}

                }
    if (isHidden) {

          else {

             eyeIcon.innerHTML =
      passwordToggle.title =
                     '<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12"></path>' +
 "نمایش رمز عبور";

                    passwordToggle.setAttribute(
                '<circle cx="12" cy="12" r="3"></circle>' +
     "aria-label",
                       '<path d="M4نمایش 4l16رمز 16عبور"></path>';

                    );


 }
                   if else(eyeIcon) {

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

                    }

                }

            }
        );

    }



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

    if (form) {

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

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


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


                if (
                    !userValue ||
         !passValue           !passwordValue
                ) {

                    event.preventDefault();


                    if (error) {

                        error.style.display =
                            "block";

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

                    }


                    return false;

                }


                if (error) {

                    error.style.display =
                        "none";

                }


                if (submit) {

                    submit.classList.add(
                        "loading"
                    );

                }

            }
        );

    }



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

    window.setTimeout(
        function () {

            if (username) {

                username.focus();

            }

        },
        300
    );


})();
</script>

</div>
...
Page tree

Versions Compared

Old Version 4

New Version 5

Key
