<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(40px, 3.2vw, 56px);
line-height: 1.48;
font-weight: 800;
letter-spacing: -1.3px;
}
.mq-title-line {
display: block;
}
/* ============================================================
DESCRIPTION
============================================================ */
.mq-description {
width: 100%;
margin-top: 14px;
color: #617d96;
direction: rtl;
text-align: right;
font-size: 16px;
font-weight: 400;
line-height: 2.05;
}
/* ============================================================
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: 11px;
font-weight: 700;
line-height: 1.9;
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 {
margin-top: 32px;
color: var(--mq-navy);
direction: rtl;
text-align: right;
font-size: 20px;
font-weight: 700;
line-height: 1.8;
}
.mq-welcome-description {
margin-top: 5px;
color: #718aa0;
direction: rtl;
text-align: right;
font-size: 11px;
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: 12px;
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-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: 11px;
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: 15px;
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: 10px;
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: right;
font-size: 10px;
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: 40px;
}
.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:
31px;
}
.mq-description {
font-size:
13px;
}
.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> |