<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>
|