| HTML |
|---|
<div id="mediq-login-page" dir="rtl"> <style> /* ============================================================ MEDIQ LOGIN PAGE Confluence Server / Data Center 8.7.1 Page ID: 174855060 PAGE IDBACKGROUND: Modern Hospital Room with Medical 174855060Bed.png فعلاًLOGO: هیچ المانMediQ ConfluenceHeart مخفیMedical نمیشودLogo1.png ============================================================ */ #mediq-login-page, #mediq-login-page * { box-sizing: border-box; } #mediq-login-page { --mq-primarynavy: #08b5ad#082b4b; --mq-primary-darktext: #069c96#173b59; --mq-primary-lightmuted: #43d4cd#7089a0; --mq-navyprimary: #092d4d#08b8b0; --mq-textprimary-dark: #173d5c#05a49e; --mq-mutedborder: #71899e rgba(175, 202, 218, .60); widthposition: 100%relative; min-heightwidth: 720px100%; positionmin-height: relative760px; overflow: hidden; direction: rtl; font-family: Tahoma, Arial, sans-serif; color: var(--mq-text); border-radiusbackground: 0; background-image: url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png") linear-gradient( 90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100% ), url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png"); background-size: cover; background-position: center center; background-repeat:center center / cover no-repeat; } /* ============================================================ LEFT SOFTLIGHT OVERLAY ============================================================ */ #mediq-login-page::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(255,255,255,.9698) 0%, rgba(255,255,255,.8894) 20%17%, rgba(255,255,255,.3570) 42%31%, rgba(255,255,255,.0522) 64%44%, rgba(0255,72255,88255,.040) 100%58% ); z-index: 1; } /* ============================================================ MAIN LAYOUT ============================================================ */ .mq-login-layout { position: relative; z-index: 5; width: 100%; min-height: 720px760px; padding: 55px54px 7%clamp(50px, 7vw, 120px); display: grid; /* تصویر اصلی: اطلاعات سمت چپ Login سمت راست */ grid-template-columns: minmax(470px520px, 600px620px) minmax(80px, 1fr) minmax(380px410px, 445px465px); align-items: center; gap: 20px; direction: ltr; } /* ============================================================ LEFT CONTENT ============================================================ */ .mq-intro { grid-column: 1; directionwidth: rtl100%; alignmax-selfwidth: center620px; positiondirection: relativertl; ztext-indexalign: 10right; maxalign-widthself: 570px; text-align: rightcenter; } /* ============================================================ MAIN BRANDLOGO وسط چین ============================================================ */ .mq-main-brandlogo-wrap { directionwidth: ltr100%; display: flex; justify-content: center; align-items: center; justify-content: flex-startmargin-bottom: 30px; } .mq-main-logo { display: block; width: 330px; max-width: 76%; gapheight: 17pxauto; object-fit: contain; margin object-bottomposition: center 39pxcenter; } /* ============================================================ MEDIQSHORT LOGOLINE CSS VERSION ============================================================ */ .mq-logoaccent-line { width: 82px62px; height: 73px4px; positionmargin: relative; flex: 0 0 0 0 82px; } /* LEFT CURVE */ .mq-logo::before { 31px content: ""; position: absoluteauto; widthborder-radius: 38px10px; heightbackground: 55px; left: 12px; top: 3px; linear-gradient( border: 8px solid90deg, #55d5d4; border-right-color:#0ccbc0, transparent; border-bottom-color:#049f9c #55d5d4); border-radius: 50% 50% 55% 50%} /* ============================================================ TITLE یک خط + راست چین + Bold ============================================================ */ .mq-title { margin: 0; transformwidth: 100%; rotate(-31degcolor: var(--mq-navy); } /* RIGHT CURVE */ .mq-logo::after { direction: rtl; contenttext-align: ""right; positionfont-size: absolute38px; widthline-height: 38px1.55; heightfont-weight: 55px900; rightletter-spacing: 12px-1px; topwhite-space: 3pxnowrap; } /* ============================================================ border:DESCRIPTION یک خط + راست چین 8px+ solidBold #00aaa5; border-left-color:============================================================ */ .mq-description { transparentwidth: 100%; bordermargin-bottom-color: top: 15px; #00aaa5color: #58758f; border-radius:direction: rtl; 50%text-align: right; 50%font-size: 16px; 50%font-weight: 700; 55%line-height: 2; transform: rotate(31deg); white-space: nowrap; } /* ============================================================ FEATURE WORDMARKCARDS ============================================================ */ .mq-wordmarkfeatures { width: 100%; fontmargin-familytop: 36px; display: grid; Arial,grid-template-columns: sans-serifrepeat(4, minmax(0, 1fr)); font-sizegap: 48px12px; line-heightdirection: 1rtl; } .mq-feature { fontmin-weightheight: 800128px; letter-spacingpadding: -2px; 15px color:8px var(--mq-navy)13px; } .mq-wordmark span { border: 1px color:solid var(--mq-primaryrgba(202, 224, 235, .78); } .mq-brand-subtitle { border-radius: 15px; directionbackground: rtl rgba(255,255,255,.72); textbox-alignshadow: right 0 9px 30px rgba(26, 82, 105, .045); marginbackdrop-topfilter: 8px blur(12px); font-size: 14px-webkit-backdrop-filter: blur(12px); font-weightdisplay: 700flex; color: flex-direction: column; align-items: center; #173d5c; } justify-content: center; /* ========================================================= DECORATIVE LINE ========================================================= */text-align: center; } .mq-titlefeature-lineicon { width: 58px45px; height: 4px45px; margin-bottom: 30px10px; border-radius: 20px13px; backgrounddisplay: flex; align-items: center; var(--mq-primary); } /* ========================================================= MAIN TITLE ========================================================= */ .mq-main-title { margin: 0; color: #092e4ejustify-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; font-sizebackground: clamplinear-gradient( 35px145deg, 3.1vw#e0fbf8, 55px#c8f4f0 ); } /* CARD font-weight: 900; line-height: 1.55; 2 */ .mq-feature:nth-child(2) .mq-feature-icon { letter-spacingcolor: -1px#3d92e5; } background: .mq-description { linear-gradient( 145deg, #eaf5ff, margin-top: 12px; color:#dcecff #607b91); } /* CARD font-size: 16px; 3 */ .mq-feature:nth-child(3) .mq-feature-icon { font-weightcolor: 500#05ad94; line-height: 2.05; } /* ========================================================= FEATURE CARDS ========================================================= */ .mq-features { width: 100%; margin-top: 34px; display: grid; grid-template-columns:background: linear-gradient( 145deg, #e2faf5, #d1f6ee repeat( ); } /* CARD 4 */ .mq-feature:nth-child(4) .mq-feature-icon { color: #6689b6; 4,background: linear-gradient( minmax(105px,1fr) );145deg, gap: 11px; } .mq-feature { min-height: 116px; #edf3fa, padding: 14px#e2ebf7 8px); } .mq-feature-title { display color: flex#133956; flex-direction: columnrtl; alignfont-itemssize: center13px; justifyfont-contentweight: center800; textline-alignheight: center1.8; border: 1px solid rgba(text-align: center; } /* ============================================================ LOGIN CARD ============================================================ */ .mq-login-card { grid-column: 3; width: 100%; min-height: 610px; 210,padding: 42px 229,38px 30px; 238,direction: rtl; border: 1px .8solid rgba(255,255,255,.88); border-radius: 16px28px; background: rgbalinear-gradient( 255145deg, rgba(255, 255,255,255,.88), .64rgba(238,249,252,.79) ); box-shadow: 0 8px30px 28px85px rgba( 17, 68, 90, .18); 33,backdrop-filter: blur(25px); 86,-webkit-backdrop-filter: 108, .045 )blur(25px); } /* ============================================================ LOGIN LOGO ============================================================ */ .mq-login-logo-wrap { width: 100%; display: flex; backdropalign-filteritems: center; blur(10px); -webkit-backdrop-filter: blur(10px)justify-content: center; } .mq-featurelogin-iconlogo { widthdisplay: 42pxblock; heightwidth: 42px245px; marginmax-bottomwidth: 9px78%; border-radiusheight: 13pxauto; displayobject-fit: flexcontain; } /* align-items: center; justify-content: center; font-size: 20px============================================================ WELCOME وسط چین + Bold ============================================================ */ .mq-welcome { width: 100%; fontmargin-weighttop: 80032px; background: color: var(--mq-navy); direction: rtl; #e1faf8text-align: center; color:font-size: 23px; font-weight: 900; #08afa7line-height: 1.8; } .mq-feature:nth-child(2) .mq-feature-iconwelcome-description { backgroundwidth: 100%; #edf5ffmargin-top: 5px; color: #4b8fd7; } .mq-feature:nth-child(3) .mq-feature-icon { #718aa0; backgrounddirection: #e5faf5 rtl; color: text-align: center; #00a98b; } .mq-feature:nth-child(4) .mq-feature-icon {font-size: 13px; backgroundfont-weight: #edf3fa 600; colorline-height: #718cac 1.9; } .mq-feature-text { color: #173d5c; font-size: 11px/* ============================================================ FORM ============================================================ */ .mq-form { width: 100%; fontmargin-weighttop: 80027px; line-heightdirection: 1.7rtl; } /* ============================================================ LOGIN CARDFIELD ============================================================ */ .mq-cardfield { position: relative; grid-columnwidth: 3100%; directionmargin-bottom: rtl14px; } .mq-input { widthdisplay: 100%block; min-heightwidth: 560px100%; align-selfheight: center58px; padding: 43px0 38px49px 30px; 0 border-radius: 27px52px; border: 1px solid rgba( 171, 198, 215, .67); border-radius: 13px; 255,outline: none; background: rgba(255, 255, 255,255,.76); color: #173b59; .82direction: rtl; )text-align: right; backgroundfont-family: linear-gradient(Tahoma, Arial, 145deg, sans-serif; font-size: 14px; font-weight: 600; rgba( transition: border-color .18s ease, 255, box-shadow .18s ease, background 255, .18s ease; } .mq-input::placeholder { color: #70889f; opacity: 1; 255,direction: rtl; text-align: right; font-size: 14px; font-weight: .89600; } .mq-input:focus { background: ),rgba(255,255,255,.96); border-color: rgba( var(--mq-primary); 239,box-shadow: 0 0 249,0 3px 251, .78 ) ); box-shadow: 0 30px 80pxrgba(8,184,176,.10); } /* ============================================================ RIGHT FIELD ICON ============================================================ */ .mq-field-icon { position: absolute; right: 17px; top: 50%; transform: rgbatranslateY(-50%); width: 21px; 16,height: 21px; display: flex; 65,align-items: center; justify-content: center; 87,color: #66829c; pointer-events: none; } .mq-field-icon svg { width: .1820px; height: 20px; fill: )none; backdrop-filter: stroke: currentColor; blur(25px)stroke-width: 1.8; stroke-webkit-backdrop-filter:linecap: round; blur(25px)stroke-linejoin: round; } /* ============================================================ CARDPASSWORD LOGOEYE ============================================================ */ .mq-cardpassword-brandtoggle { displayposition: flexabsolute; directionleft: ltr12px; justify-contenttop: center50%; align-items: centertransform: translateY(-50%); gapwidth: 10px36px; } .mq-card-logo { widthheight: 54px36px; heightpadding: 49px0; positionborder: relative0; } .mq-card-logo::before { border-radius: 9px; contentoutline: ""none; positionbackground: absolutetransparent; widthcolor: 25px#66829c; heightcursor: 36pxpointer; leftdisplay: 7pxflex; topalign-items: 3pxcenter; border: justify-content: center; transition: 6px solid background #52d4d2; .15s ease, border-right-color: color .15s transparentease; } .mq-password-toggle:hover { border-radiusbackground: 50%rgba(8,184,176,.08); transformcolor: rotatevar(-30deg--mq-primary-dark); } .mq-card-logo::afterpassword-toggle svg { contentwidth: ""20px; positionheight: absolute20px; widthfill: 25pxnone; heightstroke: 36pxcurrentColor; rightstroke-width: 7px1.8; topstroke-linecap: 3pxround; borderstroke-linejoin: 6px solid #00aaa5; border-left-color: transparent; border-radius: 50%; transform: rotate(30deg); } .mq-card-wordmark { font-family round; } /* ============================================================ REMEMBER ============================================================ */ .mq-options { width: 100%; margin: Arial,13px 0 sans-serif19px; font-sizedisplay: 37pxflex; fontalign-weightitems: 800center; letterjustify-spacingcontent: flex-1pxstart; colordirection: #082d4d rtl; } .mq-card-wordmarkremember span { colordisplay: inline-flex; align-items: center; var(--mq-primary); } .mq-card-brand-caption { gap: 8px; color: #59748b; direction: rtl; font-size: 13px; marginfont-topweight: 3px700; text-aligncursor: centerpointer; color: user-select: none; } .mq-remember input { width: #173b5917px; height: 17px; font-sizemargin: 11px0; fontaccent-weightcolor: 700 var(--mq-primary); } /* ============================================================ WELCOMESUBMIT ============================================================ */ .mq-welcomesubmit { margin-topwidth: 38px100%; text-alignheight: center60px; colorborder: 0; #0c304fborder-radius: 13px; font-sizeoutline: 20pxnone; font-weight: 900; } .mq-welcome-subtitle {background: linear-gradient( 90deg, #05aaa5, #0bc2b8 ); margin-topcolor: 9px#fff; textfont-align: center; family: Tahoma, color:Arial, #718a9fsans-serif; font-size: 17px; font-weight: 11px800; } /* ========================================================= FORM ========================================================= */ .mq-form { margin-top: 29px; } .mq-field { position: relative cursor: pointer; box-shadow: 0 13px 28px rgba(3, 166, 160, .20); margin-bottomtransition: 13px; } .mq-input { width: 100%; height: 55px; transform .17s ease, padding: box-shadow .17s ease, 0 filter 17px .17s ease; } .mq-submit:hover { 0transform: 48pxtranslateY(-2px); outline: none; box-shadow: border: 0 18px 1px solid35px rgba(3,166,160,.27); filter: 181, brightness(1.015); } .mq-submit:active { 204,transform: 217, .70 )translateY(0); } /* ============================================================ ERROR ============================================================ */ .mq-error { display: none; width: 100%; bordermargin-radiustop: 12px; backgroundpadding: rgba(10px 12px; 255, border: 1px 255,solid 255,#fecdd3; border-radius: 9px; .82background: )#fff1f2; color: #163d5c#be123c; font-familydirection: inheritrtl; font-size: 12px; text-align: right; transitionfont-size: border-color .18s ease, 11px; box-shadow .18s ease; } .mq-input::placeholder {font-weight: 600; colorline-height: #7990a4 1.8; } .mq-input:focus { /* ============================================================ background: DIVIDER ============================================================ */ .mq-divider { width: 100%; #fff height: 1px; border-colormargin: var(--mq-primary); 29px box-shadow:0 22px; 0 0 0 3pxbackground: rgbalinear-gradient( 890deg, 181transparent, 173rgba(131,160,179,.35), .10transparent ); } /* ============================================================ FIELD ICONSUPPORT ============================================================ */ .mq-field-iconsupport { positionwidth: absolute100%; leftdisplay: 17pxflex; topalign-items: 50%center; transform:justify-content: center; gap: 8px; translateY(-50%)direction: rtl; color: #6f879c; text-align: center; #668198 font-size: 12px; font-sizeweight: 18px600; pointerline-eventsheight: none1.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; } /* ================================================== PASSWORD SHOW BUTTON =========== LOADING ============================================================ */ .mq-password-showloader { display: none; positionwidth: absolute21px; leftheight: 44px21px; topmargin: 50%auto; transformborder: 3px solid translateY(-50% rgba(255,255,255,.38); width: 29px; border-top-color: height: 29px#fff; border-radius: 050%; outlineanimation: none; background:mq-spin transparent; .7s color:linear #748ba0infinite; } .mq-submit.loading { fontpointer-sizeevents: 16pxnone; cursoropacity: pointer.88; } /* .mq-submit.loading .mq-submit-text { display: none; } .mq-submit.loading .mq-loader { display: block; } @keyframes mq-spin { to { transform: rotate(360deg); } } /* ============================================================ REMEMBERRESPONSIVE ============================================================ */ .mq-options@media (max-width: 1200px) { margin: .mq-layout { 13pxgrid-template-columns: 1px minmax(430px, 1fr) 18px; display: flex; 30px align-items: center400px; justify-content: padding: 45px flex-start 35px; } .mq-remembertitle { display: flex; alignfont-itemssize: center32px; gap: 7px;} color: .mq-description { #577086; font-size: 11px14px; cursor: pointer; } .mq-remembermain-logo input { width: 16px290px; height: 16px;} accent-color:.mq-features { var(grid--mq-primary); } /* ========================================================= LOGIN BUTTON ========================================================= */ .mq-submit { width: 100%;template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { height: 58px; #mediq-login-page { border: 0; outlineoverflow: nonevisible; border-radius: 12px; background-position: linear-gradient( 90deg,65% #07aaa5,center; } .mq-layout { #0cc4b9 display: )flex; color: #fffflex-direction: column; font-family: inherit; fontmin-sizeheight: 14pxauto; font-weight: 800; cursorpadding: pointer; box-shadow: 035px 12px 20px; 26px gap: 35px; rgba(} .mq-login-card { 4, order: 1; 169,width: 163, min(100%, 470px); min-height: auto; } .20mq-intro { order: )2; transition width: .18s ease; min(100%, 620px); } .mq-submit:hovertitle { transform: white-space: normal; translateY(-2px);} box-shadow: .mq-description { 0white-space: normal; } } @media (max-width: 520px) 17px{ 34px.mq-layout { rgba(padding: 4,22px 169,12px 163,40px; } .27.mq-login-card { ); } .mq-submit:active { transformpadding: 32px 22px 27px; border-radius: translateY(0) 22px; } /* ========================================================= ERROR ========================================================= */ .mq-error { display: none; .mq-login-logo { width: 210px; } margin-top: 12px; .mq-main-logo { padding: width: 10px 12px265px; border-radius: 9px;} background:.mq-title { #fff1f2; font-size: border: 1px solid 29px; white-space: #fecdd3normal; color:} .mq-description { #be123c; font-size: 10px 13px; linewhite-height: 1.8; } /* space: normal; } .mq-features { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ MEDIQ - FINAL FULL SCREEN SUPPORTFIX Confluence Server / Data Center ============================================================ */ .mq-divider { height: 1px; margin: 27px /* ------------------------------------------------------------ 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" alt="MediQ" > </div> <!-- WELCOME --> <div class="mq-welcome"> به پلتفرم مدیکیو خوش آمدید </div> <div class="mq-welcome-description"> برای ادامه، وارد حساب کاربری خود شوید. </div> <!-- ================================================== LOGIN FORM ================================================== --> <form id="mqLoginForm" class="mq-form" method="post" action="/dologin.action" > <!-- USERNAME --> <div class="mq-field"> <input id="mqUsername" class="mq-input" type="text" name="os_username" placeholder="نام کاربری" autocomplete="username" required > <span class="mq-field-icon"> <svg viewBox="0 0 24 24"> <circle cx="12" cy="8" r="4" ></circle> <path d="M5 20c0-4 3-7 7-7s7 3 7 7" ></path> 0 21px;</svg> background: linear-gradient(</span> 90deg,</div> transparent,<!-- PASSWORD --> rgba(<div class="mq-field"> 136,<input 165, id="mqPassword" 183, class="mq-input" .42 type="password" ), transparentname="os_password" ); } .mq-support { text-align: center; color: placeholder="رمز عبور" #71899d; font-size: 10px; line-height: 1.8; } /* ========================================================= LOADER ========================================================= */ .mq-loader { display: none; width: 20px; autocomplete="current-password" required > height: 20px; margin: <!-- 0 auto;LOCK --> border: 3px solid <span class="mq-field-icon"> rgba( <svg viewBox="0 0 255,24 24"> 255, 255, <rect .35 ); x="5" border-top-color: #fff; border-radius: 50%; animation:y="10" mqSpin .7s linear width="14" infinite; } .mq-submit.loading .mq-submit-text { display: none; } .mq-submit.loading .mq-loader { display: block; } @keyframes mqSpin { to { height="10" transform: rotate(360deg); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1150px) { .mq-login-layout { rx="2" ></rect> grid-template-columns: minmax(400px,1fr)<path 60px 390px; d="M8 10V7a4 4 0 padding: 0 1 8 0v3" 45px 35px; } ></path> .mq-main-title { font-size: 39px; <path } .mq-features { grid-template-columns: repeat(d="M12 14v2" 2, ></path> 1fr );</svg> } } @media (max-width: 850px) { #mediq-login { overflow:</span> visible; <!-- EYE background-position:--> 65% <button center; } .mq-login-layout { display:id="mqPasswordToggle" flex; flex-direction:class="mq-password-toggle" column; gap:type="button" 35px; title="نمایش رمز padding: عبور" 35px aria-label="نمایش رمز عبور" 20px; } .mq-card {> width: min(<svg 100%, id="mqEyeIcon" 460px ); viewBox="0 0 24 24" order: 1; } .mq-intro { width:> min( <path 100%, 560px d="M2 12s4-7 10-7 10 ); 7 10 7-4 7-10 7S2 12 2 12z" order: 2; } } @media (max-width: 520px) { .mq-card { padding:></path> 35px 22px<circle 27px; border-radius: 22px; cx="12" } .mq-main-title { font-size: 30px; cy="12" } .mq-description { font-size: 13px; r="3" } .mq-features { grid-template-columns: ></circle> repeat( 2,</svg> 1fr</button> );</div> } } </style> <!-- =========================================================REMEMBER --> CONTENT ========================================================= --> <div class="mq-login-layoutoptions"> <!-- ===================================================== INTRO <label class="mq-remember"> ===================================================== --> <section class="mq-intro"> <input <div class="mq-main-brand"> <div classtype="mq-logo"></div> checkbox" <div> <div classname="mq-wordmark"> os_cookie" Medi<span>Q</span> value="true" </div> > <div class="mq-brand-subtitle"> <span> مدیریت تجهیزات پزشکی مرا به خاطر </div>بسپار </div> </div>span> <div class="mq-title-line"></div> <h1 class="mq-main-title"></label> مدیریت هوشمند</div> <!-- DESTINATION <br>--> تجهیزات پزشکی <input </h1> <div classid="mq-descriptionmqDestination"> ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی type="hidden" <br> name="os_destination" در یک پلتفرم یکپارچه 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-text"> ورود اطلاعاتبه دقیق سامانه <br></span> و بهروز <span class="mq-loader"></span> </div>button> </div> !-- ERROR --> <div class="mq-feature"> <div classid="mq-feature-iconmqError"> class="mq-error" ⚙ ></div> </div>form> <!-- DIVIDER --> <div class="mq-feature-text">divider"></div> <!-- SUPPORT --> نگهداری و تعمیرات<div class="mq-support"> <br> <span> در صورت مشکل در کارآمد ورود، با واحد فناوری اطلاعات </div> تماس بگیرید. </div> span> <div<span class="mq-featuresupport-icon"> <div<svg classviewBox="mq-feature-icon0 0 24 24"> ▥<path </div> d="M4 13v-2a8 8 0 0 1 <div class="mq-feature-text"> 16 0v2" گزارشهای></path> <br><path تحلیلی d="M4 13H3a2 2 0 0 0-2 2v2a2 2 0 0 0 </div> 2 2h2v-6z" <></div>path> <div class="mq-feature"> <path <div class="mq-feature-icon"> d="M20 13h1a2 2 0 0 1 2 ◈ 2v2a2 2 0 0 1-2 2h-2v-6z" </div> ></path> <div class="mq-feature-text"> <path مدیریت کامل d="M19 19c0 2-2 <br> 2-4 2" داراییها></path> </div>svg> </div>span> </div> </section> </div> <script> (function () { <!-- "use strict"; /* ======================================================== MEDIQ LOGINCONFIG ======================================================== -->*/ <sectionvar CFG class="mq-card">= { <div class="mq-card-brand"> /* <div class="mq-card-logo"></div> * مقصد بعد از Login موفق <div class="mq-card-wordmark"> * * فعلاً چون Dashboard ساخته نشده، Medi<span>Q</span> * کاربر به همین صفحه MediQ </div> برمیگردد. </div> * <div class="mq-card-brand-caption"> * بعداً فقط Page ID داشبورد را اینجا عوض میکنیم. مدیریت تجهیزات پزشکی*/ </div> destination: <div class="mq-welcome"> "/pages/viewpage.action?pageId=174855144", /* به پلتفرم مدیکیو خوش آمدید * Login واقعی Confluence </div> */ <div class="mq-welcome-subtitle"> loginAction: برای ادامه، وارد حساب کاربری خود شوید"/dologin.action" </div>}; <!-- /* ======================================================== LOGIN FORMELEMENTS ========================================================= --> */ var form = document.getElementById( "mqLoginForm" ); var username = document.getElementById( "mqUsername" <form ); var password = id="mqLoginForm"document.getElementById( class="mq-formmqPassword" ); method="post"var passwordToggle = document.getElementById( action="/dologin.action"mqPasswordToggle" >); var eyeIcon = <!-- USERNAME --> document.getElementById( "mqEyeIcon" ); var <divsubmit class="mq-field"> document.getElementById( "mqSubmit" <input); var destination = document.getElementById( id="mqUsername" "mqDestination" ); var error class="mq-input" document.getElementById( type="textmqError" ); name="os_username"/* ======================================================== APPLY CONFIG placeholder="نام کاربری"======================================================== */ if (form) { autocomplete="username"form.action = requiredCFG.loginAction; > form.method = <span class="mq-field-icon">"post"; form.setAttribute( ♙ "autocomplete", </span> "on" ); </div>} if <!-- PASSWORD -->(destination) { <div class="mq-field"> destination.value = <input CFG.destination; } /* ======================================================== ERROR MESSAGE id="mqPassword" ======================================================== */ function showError(message) { if class="mq-input"(!error) { return; type="password"} error.innerHTML = name="os_password" message; error.style.display = placeholder="رمز عبورblock"; } function hideError() { if autocomplete="current-password"(!error) { return; required} error.innerHTML = > ""; error.style.display = <button "none"; } id="mqPasswordShow"/* ======================================================== SHOW / HIDE PASSWORD class="mq-password-show"======================================================== */ if ( type="button"password && title="نمایش رمز عبور"passwordToggle >) { passwordToggle.addEventListener( ◉ "click", function () </button>{ var <spanshowPassword class="mq-field-icon"> 🔒 password.type === </span>"password"; </div> password.type = <!-- REMEMBER --> showPassword <div class="mq-options"> <label? class="mq-remembertext"> <input : "password"; if type="checkbox"(showPassword) { passwordToggle.title = name="os_cookie" "مخفی کردن رمز value="true"عبور"; > passwordToggle.setAttribute( <span> "aria-label", مرا به خاطر بسپار "مخفی کردن رمز عبور" </span> </label>); </div> if <!-- DESTINATION -->(eyeIcon) { <input id="mqDestination"eyeIcon.innerHTML = type="hidden" '<path d="M2 12s4-7 name="os_destination" 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"></path>' + value="/" > '<circle <!-- LOGIN --> cx="12" cy="12" r="3"></circle>' + <button '<path idd="mqSubmit" M4 4l16 16"></path>'; class="mq-submit"} type="submit"} > else { <span passwordToggle.title class="mq-submit-text"> ورود"نمایش به مدیکیورمز عبور"; passwordToggle.setAttribute( ← "aria-label", </span> "نمایش رمز عبور" <span class="mq-loader"></span> </button>); <div if (eyeIcon) { id="mqError" class="mq-error"eyeIcon.innerHTML = ></div> </form> <div'<path classd="mq-divider"></div> M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"></path>' + <div class="mq-support"> 🎧 '<circle cx="12" cy="12" r="3"></circle>'; در صورت مشکل در ورود،} با واحد فناوری اطلاعات تماس بگیرید.} </div> } </section> </div> <script> (function () {; "use strict";} /* ======================================================== REMOVE ERROR WHEN MEDIQUSER CONFIGTYPES ======================================================== */ varif CFG(username) = { /*username.addEventListener( * صفحهای که کاربر"input", بعد از Login *function باید وارد آن شود. *() { * فعلاً / گذاشته شده. * * وقتی صفحه اصلی MediQ ساخته شدhideError(); * Page ID آن را اینجا قرار میدهیم. } */); destination: "/", } if /* (password) { * Confluence Login Endpointpassword.addEventListener( * "input", * برای نصب فعلی شما که Confluence function () { * روی Root Context است: */hideError(); loginAction: } "/dologin.action"); }; /* ======================================================== ELEMENTSLOGIN VALIDATION ======================================================== */ if (form) { form.addEventListener( "submit", function (event) { var userValue = var form = document.getElementById( username "mqLoginForm" ? username.value.trim(); var username = document.getElementById( : "mqUsername"; ); var passwordpasswordValue = document.getElementById( "mqPassword"password ); var passwordShow = ? documentpassword.getElementById(value "mqPasswordShow" ); var submit =: ""; document.getElementById( "mqSubmit"/* -------------------------------------------- ); var destination = USERNAME document.getElementById(EMPTY "mqDestination" ); -------------------------------------------- */ var error = if document.getElementById( (!userValue) { "mqError" event.preventDefault(); /* ======================================================== APPLY CONFIG ======================================================== */ showError( if (form) { form.action = "لطفاً نام کاربری را وارد CFGکنید.loginAction; " }); if (destinationusername) { destination.value = username.focus(); CFG.destination; } /* ======================================================== SHOW / HIDE PASSWORD ======================================================== */return false; if ( password && passwordShow} ) { passwordShow.addEventListener( /* -------------------------------------------- "click", function ()PASSWORD { EMPTY if ( -------------------------------------------- */ password.type ===if (!passwordValue) { "password" event.preventDefault(); ) { showError( password.type = "لطفاً رمز عبور را وارد کنید." "text"); passwordShow.innerHTML =if (password) { "⊘"password.focus(); passwordShow.title =} "مخفی کردن رمز عبور"return false; } else { /* -------------------------------------------- password.type =VALID "password";-------------------------------------------- */ passwordShow.innerHTML =hideError(); /* "◉"; * Username / Password را passwordShow.title =خود Confluence * از طریق POST دریافت میکند. "نمایش رمز عبور"; }* } * Password ); } /* ======================================================== در LocalStorage، FORM VALIDATION ======================================================== */ * SessionStorage یا Cookie سفارشی if (form) { * ذخیره formنمیشود.addEventListener( "submit", */ functionif (eventsubmit) { submit.classList.add( var user = "loading" ); username submit.disabled = ? username.value.trim() : ""true; var pass =submit.setAttribute( password "aria-busy", ? password.value "true" : ""; ); if ( } !user ||/* * اینجا preventDefault !passنداریم. ) { * * بنابراین event.preventDefault(); فرم به: if (error) { * error.style.display =* /dologin.action * "block"; * ارسال میشود. error.innerHTML = */ return true; "لطفاً } نام کاربری و رمز عبور را وارد کنید."); } /* ======================================================== RESTORE BUTTON } اگر Browser با Back به صفحه برگشت ======================================================== */ window.addEventListener( return false; "pageshow", function () } { if (errorsubmit) { error.style.display = submit.classList.remove( "noneloading"; }); if (submit).disabled { = submit.classList.add(false; "loading"submit.removeAttribute( ); "aria-busy" }); } );} }); /* ======================================================== INITIAL FOCUS ======================================================== */ window.setTimeout( function () { if ( username && !username.value ) { username.focus(); } }, 300 ); })(); </script> </div> |
Page History
Overview
Content Tools
Apps