| HTML |
|---|
<div id="mediq-login-page" dir="rtl"> <style> /* ============================================================ MEDIQ LOGIN PAGE Confluence Server / Data Center 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 { --mq-navy: #082b4b; --mq-text: #173b59; --mq-muted: #7089a0; --mq-primary: #08b8b0; --mq-primary-dark: #05a49e; --mq-border: rgba(175, 202, 218, .60); position: relative; width: 100%; min-height: 760px; overflow: hidden; direction: rtl; font-family: Tahoma, Arial, sans-serif; color: var(--mq-text); background: url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png") center center / cover no-repeat; } /* ============================================================ LEFT LIGHT OVERLAY ============================================================ */ #mediq-login-page::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 17%, rgba(255,255,255,.70) 31%, rgba(255,255,255,.22) 44%, rgba(255,255,255,0) 58% ); } /* ============================================================ MAIN LAYOUT ============================================================ */ .mq-layout { position: relative; z-index: 5; width: 100%; min-height: 760px; padding: 54px clamp(50px, 7vw, 120px); display: grid; grid-template-columns: minmax(480px, 600px) minmax(80px, 1fr) minmax(410px, 465px); align-items: center; gap: 20px; direction: ltr; } /* ============================================================ LEFT CONTENT ============================================================ */ .mq-intro { grid-column: 1; width: 100%; max-width: 580px; direction: rtl; text-align: right; align-self: center; } /* ============================================================ MAIN LOGO ============================================================ */ .mq-main-logo-wrap { width: 100%; display: flex; justify-content: flex-start; align-items: center; direction: ltr; margin-bottom: 29px; } .mq-main-logo { display: block; width: 335px; max-width: 74%; height: auto; object-fit: contain; object-position: left center; } /* ============================================================ SHORT LINE ============================================================ */ .mq-accent-line { width: 62px; height: 4px; margin: 0 0 31px 0; border-radius: 10px; background: linear-gradient( 90deg, #0ccbc0, #049f9c ); } /* ============================================================ TITLE ============================================================ */ .mq-title { margin: 0; width: 100%; color: var(--mq-navy); direction: rtl; text-align: right; font-size: clamp(40px34px, 32.2vw55vw, 56px44px); line-height: 1.4855; font-weight: 800; letter-spacing: -1.3px1px; } .mq-title-line { displaywhite-space: blocknowrap; } /* ============================================================ DESCRIPTION ============================================================ */ .mq-description { width: 100%; margin-top: 14px15px; color: #617d96; direction: rtl; text-align: right; font-size: 16px18px; font-weight: 400; line-height: 2.05; white-space: nowrap; } /* ============================================================ FEATURE CARDS ============================================================ */ .mq-features { width: 100%; margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; direction: rtl; } .mq-feature { min-height: 128px; padding: 15px 8px 13px; border: 1px solid rgba(202, 224, 235, .78); border-radius: 15px; background: rgba(255,255,255,.70); box-shadow: 0 9px 30px rgba(26, 82, 105, .045); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .mq-feature-icon { width: 45px; height: 45px; margin-bottom: 10px; border-radius: 13px; display: flex; align-items: center; justify-content: center; } .mq-feature-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* CARD 1 */ .mq-feature:nth-child(1) .mq-feature-icon { color: #0ab3aa; background: linear-gradient( 145deg, #e0fbf8, #c8f4f0 ); } /* CARD 2 */ .mq-feature:nth-child(2) .mq-feature-icon { color: #3d92e5; background: linear-gradient( 145deg, #eaf5ff, #dcecff ); } /* CARD 3 */ .mq-feature:nth-child(3) .mq-feature-icon { color: #05ad94; background: linear-gradient( 145deg, #e2faf5, #d1f6ee ); } /* CARD 4 */ .mq-feature:nth-child(4) .mq-feature-icon { color: #6689b6; background: linear-gradient( 145deg, #edf3fa, #e2ebf7 ); } .mq-feature-title { color: #133956; direction: rtl; font-size: 11px13px; font-weight: 700; line-height: 1.98; text-align: center; } /* ============================================================ LOGIN CARD ============================================================ */ .mq-login-card { grid-column: 3; width: 100%; min-height: 610px; padding: 42px 38px 30px; direction: rtl; border: 1px solid rgba(255,255,255,.88); border-radius: 28px; background: linear-gradient( 145deg, rgba(255,255,255,.88), rgba(238,249,252,.79) ); box-shadow: 0 30px 85px rgba(17, 68, 90, .18); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); } /* ============================================================ LOGIN LOGO ============================================================ */ .mq-login-logo-wrap { width: 100%; display: flex; align-items: center; justify-content: center; } .mq-login-logo { display: block; width: 245px; max-width: 78%; height: auto; object-fit: contain; } /* ============================================================ WELCOME ============================================================ */ .mq-welcome { width: 100%; margin-top: 32px; color: var(--mq-navy); direction: rtl; text-align: rightcenter; font-size: 20px24px; font-weight: 700; line-height: 1.8; } .mq-welcome-description { width: 100%; margin-top: 5px6px; color: #718aa0; direction: rtl; text-align: rightcenter; font-size: 11px13px; font-weight: 400; line-height: 1.9; } /* ============================================================ FORM ============================================================ */ .mq-form { width: 100%; margin-top: 27px; direction: rtl; } /* ============================================================ FIELD ============================================================ */ .mq-field { position: relative; width: 100%; margin-bottom: 14px; } .mq-input { display: block; width: 100%; height: 58px; padding: 0 49px 0 52px; border: 1px solid rgba(171, 198, 215, .67); border-radius: 13px; outline: none; background: rgba(255,255,255,.76); color: #173b59; direction: rtl; text-align: right; font-family: Tahoma, Arial, sans-serif; font-size: 12px14px; font-weight: 400; 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: 400; } .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: 11px13px; font-weight: 400; 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: 15px17px; font-weight: 700; 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: 10px12px; 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: rightcenter; font-size: 10px12px; font-weight: 400; 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(400px, 1fr) 30px 400px; padding: 45px 35px; } .mq-title { font-size: 40px34px; } .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%, 580px); } } @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: 28px; 31pxwhite-space: normal; } .mq-description { font-size: 14px; 13pxwhite-space: normal; } .mq-features { grid-template-columns: repeat(2, 1fr); } } </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%20Logo.png" alt="MediQ" > </div> <div class="mq-accent-line"></div> <!-- TITLE --> <h1 class="mq-title"> <span class="mq-title-line"> مدیریت هوشمند </span> <span class="mq-title-line"> تجهیزات پزشکی </span> </h1> <!-- DESCRIPTION --> <div class="mq-description"> ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی <br> در یک پلتفرم یکپارچه </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%20Logo.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> </svg> </span> </div> <!-- PASSWORD --> <div class="mq-field"> <input id="mqPassword" class="mq-input" type="password" name="os_password" placeholder="رمز عبور" autocomplete="current-password" required > <!-- LOCK --> <span class="mq-field-icon"> <svg viewBox="0 0 24 24"> <rect x="5" y="10" width="14" height="10" rx="2" ></rect> <path d="M8 10V7a4 4 0 0 1 8 0v3" ></path> <path d="M12 14v2" ></path> </svg> </span> <!-- EYE --> <button id="mqPasswordToggle" class="mq-password-toggle" type="button" title="نمایش رمز عبور" aria-label="نمایش رمز عبور" > <svg id="mqEyeIcon" viewBox="0 0 24 24" > <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> </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="/" > <!-- LOGIN --> <button id="mqSubmit" class="mq-submit" type="submit" > <span class="mq-submit-text"> ورود </span> <span class="mq-loader"></span> </button> <!-- ERROR --> <div id="mqError" class="mq-error" ></div> </form> <!-- DIVIDER --> <div class="mq-divider"></div> <!-- SUPPORT --> <div class="mq-support"> <span> در صورت مشکل در ورود، با واحد فناوری اطلاعات تماس بگیرید. </span> <span class="mq-support-icon"> <svg viewBox="0 0 24 24"> <path d="M4 13v-2a8 8 0 0 1 16 0v2" ></path> <path 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" ></path> <path d="M19 19c0 2-2 2-4 2" ></path> </svg> </span> </div> </section> </div> <script> (function () { "use strict"; /* ======================================================== MEDIQ CONFIG ======================================================== */ var CFG = { /* * بعداً Page ID داشبورد اصلی MediQ * را اینجا میگذاریم. */ destination: "/", /* * Confluence login endpoint */ loginAction: "/dologin.action" }; /* ======================================================== ELEMENTS ======================================================== */ var form = document.getElementById( "mqLoginForm" ); var username = document.getElementById( "mqUsername" ); var password = document.getElementById( "mqPassword" ); var passwordToggle = document.getElementById( "mqPasswordToggle" ); var eyeIcon = document.getElementById( "mqEyeIcon" ); var submit = document.getElementById( "mqSubmit" ); var destination = document.getElementById( "mqDestination" ); var error = document.getElementById( "mqError" ); /* ======================================================== APPLY CONFIG ======================================================== */ if (form) { form.action = CFG.loginAction; } if (destination) { destination.value = CFG.destination; } /* ======================================================== SHOW / HIDE PASSWORD ======================================================== */ if ( password && passwordToggle ) { passwordToggle.addEventListener( "click", function () { var showPassword = password.type === "password"; password.type = showPassword ? "text" : "password"; if (showPassword) { passwordToggle.title = "مخفی کردن رمز عبور"; passwordToggle.setAttribute( "aria-label", "مخفی کردن رمز عبور" ); if (eyeIcon) { eyeIcon.innerHTML = '<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>' + '<path d="M4 4l16 16"></path>'; } } else { passwordToggle.title = "نمایش رمز عبور"; passwordToggle.setAttribute( "aria-label", "نمایش رمز عبور" ); if (eyeIcon) { eyeIcon.innerHTML = '<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>'; } } } ); } /* ======================================================== VALIDATION ======================================================== */ if (form) { form.addEventListener( "submit", function (event) { var userValue = username ? username.value.trim() : ""; var passwordValue = password ? password.value : ""; if ( !userValue || !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 History
Overview
Content Tools
Apps