<div id="mediq-login" dir="rtl">
<style>
/* =========================================================
MEDIQ LOGIN
Confluence Server / Data Center 8.7.1
Page ID: 174855060
========================================================= */
#mediq-login,
#mediq-login * {
box-sizing: border-box;
}
#mediq-login {
--primary: #08b5ad;
--primary2: #0bc4b9;
--navy: #092e4e;
--text: #173d5c;
--muted: #71899e;
position: relative;
width: 100%;
min-height: 720px;
overflow: hidden;
direction: rtl;
font-family: Tahoma, Arial, sans-serif;
color: var(--text);
background-image:
url("/download/attachments/174855060/Modern%20Hospital%20Room%20with%20Medical%20Bed.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* =========================================================
BACKGROUND LIGHT
========================================================= */
#mediq-login::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(255,255,255,.97) 0%,
rgba(255,255,255,.92) 23%,
rgba(255,255,255,.42) 42%,
rgba(255,255,255,.03) 66%,
rgba(0,60,75,.03) 100%
);
}
/* =========================================================
LAYOUT
========================================================= */
.mq-layout {
position: relative;
z-index: 5;
width: 100%;
min-height: 720px;
padding: 50px 7%;
display: grid;
grid-template-columns:
minmax(470px, 590px)
1fr
minmax(390px, 445px);
gap: 30px;
align-items: center;
direction: ltr;
}
/* =========================================================
LEFT
========================================================= */
.mq-intro {
grid-column: 1;
direction: rtl;
text-align: right;
width: 100%;
max-width: 570px;
}
/* =========================================================
LOGO COMMON
========================================================= */
.mq-brand {
display: flex;
align-items: center;
justify-content: flex-start;
direction: ltr;
gap: 15px;
margin-bottom: 36px;
}
.mq-logo-svg {
width: 82px;
height: 82px;
flex: 0 0 82px;
}
.mq-brand-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mq-wordmark {
font-family: Arial, sans-serif;
font-size: 48px;
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
color: #082d4d;
}
.mq-wordmark .q {
color: #08b5ad;
}
.mq-brand-caption {
direction: rtl;
width: 100%;
text-align: right;
margin-top: 7px;
font-size: 13px;
font-weight: 700;
color: #173d5c;
}
/* =========================================================
TITLE
========================================================= */
.mq-line {
width: 58px;
height: 4px;
margin-bottom: 30px;
border-radius: 20px;
background: var(--primary);
}
.mq-title {
margin: 0;
text-align: right;
color: var(--navy);
font-size: clamp(36px, 3vw, 53px);
font-weight: 900;
line-height: 1.55;
letter-spacing: -1px;
}
.mq-description {
margin-top: 13px;
text-align: right;
color: #607b91;
font-size: 16px;
line-height: 2.05;
}
/* =========================================================
FEATURES
========================================================= */
.mq-features {
width: 100%;
margin-top: 34px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 11px;
}
.mq-feature {
min-height: 120px;
padding: 15px 8px;
border: 1px solid rgba(210,229,238,.85);
border-radius: 16px;
background: rgba(255,255,255,.66);
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow:
0 8px 28px
rgba(33,86,108,.045);
}
.mq-feature-icon {
width: 43px;
height: 43px;
margin-bottom: 10px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
background: #e1faf8;
color: #08afa7;
font-size: 21px;
font-weight: bold;
}
.mq-feature:nth-child(2) .mq-feature-icon {
background: #edf5ff;
color: #4b8fd7;
}
.mq-feature:nth-child(3) .mq-feature-icon {
background: #e5faf5;
color: #00a98b;
}
.mq-feature:nth-child(4) .mq-feature-icon {
background: #edf3fa;
color: #718cac;
}
.mq-feature-text {
width: 100%;
text-align: center;
color: #173d5c;
font-size: 11px;
font-weight: 800;
line-height: 1.8;
}
/* =========================================================
LOGIN CARD
========================================================= */
.mq-login-card {
grid-column: 3;
direction: rtl;
width: 100%;
min-height: 565px;
padding: 42px 38px 30px;
border: 1px solid rgba(255,255,255,.86);
border-radius: 28px;
background: linear-gradient(
145deg,
rgba(255,255,255,.90),
rgba(238,249,251,.79)
);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
box-shadow:
0 30px 80px
rgba(16,65,87,.17);
}
/* =========================================================
CARD LOGO
========================================================= */
.mq-card-brand {
display: flex;
align-items: center;
justify-content: center;
direction: ltr;
gap: 9px;
}
.mq-card-brand .mq-logo-svg {
width: 61px;
height: 61px;
flex: 0 0 61px;
}
.mq-card-wordmark {
font-family: Arial, sans-serif;
font-size: 38px;
font-weight: 800;
line-height: 1;
letter-spacing: -1.5px;
color: #082d4d;
}
.mq-card-wordmark .q {
color: var(--primary);
}
.mq-card-caption {
margin-top: 4px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: #173b59;
}
/* =========================================================
WELCOME
========================================================= */
.mq-welcome {
margin-top: 36px;
text-align: right;
color: #0c304f;
font-size: 20px;
font-weight: 900;
}
.mq-welcome-desc {
margin-top: 9px;
text-align: right;
color: #718a9f;
font-size: 11px;
line-height: 1.9;
}
/* =========================================================
FORM
========================================================= */
.mq-form {
margin-top: 28px;
}
.mq-field {
position: relative;
width: 100%;
margin-bottom: 14px;
}
/* =========================================================
INPUT
========================================================= */
.mq-input {
display: block;
width: 100%;
height: 57px;
border: 1px solid rgba(181,204,217,.75);
border-radius: 13px;
outline: none;
background: rgba(255,255,255,.82);
color: #173d5c;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
direction: rtl;
text-align: right;
/*
فضای سمت راست برای آیکن
فضای سمت چپ برای چشم
*/
padding:
0
48px
0
52px;
transition: .18s ease;
}
.mq-input::placeholder {
color: #7890a4;
text-align: right;
}
.mq-input:focus {
border-color: var(--primary);
background: #fff;
box-shadow:
0 0 0 3px
rgba(8,181,173,.10);
}
/* =========================================================
RIGHT ICON
========================================================= */
.mq-field-icon {
position: absolute;
right: 17px;
left: auto;
top: 50%;
transform: translateY(-50%);
width: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #69839a;
pointer-events: none;
}
/* =========================================================
ICON SVG
========================================================= */
.mq-field-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
PASSWORD EYE
سمت چپ مستقل
========================================================= */
.mq-eye {
position: absolute;
left: 14px;
right: auto;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
padding: 0;
border: none;
outline: none;
border-radius: 8px;
background: transparent;
color: #6f879b;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mq-eye:hover {
background: #eef7f8;
color: var(--primary);
}
.mq-eye svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
OPTIONS
========================================================= */
.mq-options {
margin: 13px 2px 18px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.mq-remember {
display: flex;
align-items: center;
gap: 8px;
color: #577086;
font-size: 11px;
cursor: pointer;
}
.mq-remember input {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--primary);
}
/* =========================================================
LOGIN BUTTON
========================================================= */
.mq-submit {
width: 100%;
height: 59px;
border: 0;
outline: none;
border-radius: 13px;
background: linear-gradient(
90deg,
#07aaa5,
#0cc4b9
);
color: #fff;
font-family: Tahoma, Arial, sans-serif;
font-size: 15px;
font-weight: 800;
cursor: pointer;
box-shadow:
0 12px 27px
rgba(4,169,163,.21);
transition: .18s ease;
}
.mq-submit:hover {
transform: translateY(-2px);
box-shadow:
0 17px 35px
rgba(4,169,163,.28);
}
.mq-submit:active {
transform: translateY(0);
}
/* =========================================================
ERROR
========================================================= */
.mq-error {
display: none;
margin-top: 12px;
padding: 10px 12px;
border: 1px solid #fecdd3;
border-radius: 9px;
background: #fff1f2;
color: #be123c;
text-align: right;
font-size: 10px;
line-height: 1.8;
}
/* =========================================================
SUPPORT
========================================================= */
.mq-divider {
height: 1px;
margin: 29px 0 21px;
background: linear-gradient(
90deg,
transparent,
rgba(136,165,183,.42),
transparent
);
}
.mq-support {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #71899d;
font-size: 10px;
line-height: 1.8;
text-align: right;
}
.mq-support svg {
flex: 0 0 auto;
width: 18px;
height: 18px;
fill: none;
stroke: #173d5c;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* =========================================================
LOADER
========================================================= */
.mq-loader {
display: none;
width: 20px;
height: 20px;
margin: auto;
border: 3px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: mq-spin .7s linear infinite;
}
.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:1150px) {
.mq-layout {
grid-template-columns:
minmax(390px,1fr)
40px
390px;
padding: 40px 35px;
}
.mq-title {
font-size: 39px;
}
.mq-features {
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width:850px) {
#mediq-login {
overflow: visible;
background-position: 65% center;
}
.mq-layout {
display: flex;
flex-direction: column;
min-height: auto;
padding: 30px 20px;
gap: 35px;
}
.mq-login-card {
width: min(100%,460px);
order: 1;
}
.mq-intro {
width: min(100%,560px);
order: 2;
}
}
@media (max-width:520px) {
.mq-login-card {
padding: 34px 22px 27px;
border-radius: 22px;
}
.mq-title {
font-size: 30px;
}
.mq-description {
font-size: 13px;
}
.mq-features {
grid-template-columns: repeat(2,1fr);
}
}
</style>
<div class="mq-layout">
<!-- =====================================================
LEFT
===================================================== -->
<section class="mq-intro">
<!-- BRAND -->
<div class="mq-brand">
<!-- MEDIQ LOGO -->
<svg
class="mq-logo-svg"
viewBox="0 0 100 100"
aria-hidden="true"
>
<defs>
<linearGradient
id="mqGradientA"
x1="0"
y1="0"
x2="1"
y2="1"
>
<stop
offset="0%"
stop-color="#58d8d5"
/>
<stop
offset="100%"
stop-color="#11bcb6"
/>
</linearGradient>
<linearGradient
id="mqGradientB"
x1="1"
y1="0"
x2="0"
y2="1"
>
<stop
offset="0%"
stop-color="#00a7a3"
/>
<stop
offset="100%"
stop-color="#00c3b6"
/>
</linearGradient>
</defs>
<!-- LEFT HALF -->
<path
d="
M50 82
C43 72 24 58 20 39
C17 24 26 13 39 13
C47 13 53 18 57 25
C48 27 41 34 39 44
C36 55 41 67 50 82
Z
"
fill="url(#mqGradientA)"
/>
<!-- RIGHT HALF -->
<path
d="
M50 82
C58 71 77 58 81 39
C84 24 75 13 62 13
C53 13 47 19 43 27
C53 28 60 35 62 45
C64 56 59 68 50 82
Z
"
fill="url(#mqGradientB)"
/>
<!-- CENTER WHITE CUT -->
<path
d="
M50 68
C43 57 42 48 45 40
C47 34 51 30 56 28
C50 38 51 50 56 58
C55 62 53 65 50 68
Z
"
fill="#ffffff"
opacity=".94"
/>
</svg>
<div class="mq-brand-text">
<div class="mq-wordmark">
Medi<span class="q">Q</span>
</div>
<div class="mq-brand-caption">
مدیریت تجهیزات پزشکی
</div>
</div>
</div>
<div class="mq-line"></div>
<h1 class="mq-title">
مدیریت هوشمند
<br>
تجهیزات پزشکی
</h1>
<div class="mq-description">
ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی
<br>
در یک پلتفرم یکپارچه
</div>
<!-- FEATURES -->
<div class="mq-features">
<div class="mq-feature">
<div class="mq-feature-icon">
✓
</div>
<div class="mq-feature-text">
اطلاعات دقیق
<br>
و بهروز
</div>
</div>
<div class="mq-feature">
<div class="mq-feature-icon">
⚙
</div>
<div class="mq-feature-text">
نگهداری و تعمیرات
<br>
کارآمد
</div>
</div>
<div class="mq-feature">
<div class="mq-feature-icon">
▥
</div>
<div class="mq-feature-text">
گزارشهای
<br>
تحلیلی
</div>
</div>
<div class="mq-feature">
<div class="mq-feature-icon">
◈
</div>
<div class="mq-feature-text">
مدیریت کامل
<br>
داراییها
</div>
</div>
</div>
</section>
<!-- =====================================================
LOGIN CARD
===================================================== -->
<section class="mq-login-card">
<!-- CARD BRAND -->
<div class="mq-card-brand">
<svg
class="mq-logo-svg"
viewBox="0 0 100 100"
aria-hidden="true"
>
<defs>
<linearGradient
id="mqGradientCardA"
x1="0"
y1="0"
x2="1"
y2="1"
>
<stop
offset="0%"
stop-color="#58d8d5"
/>
<stop
offset="100%"
stop-color="#11bcb6"
/>
</linearGradient>
<linearGradient
id="mqGradientCardB"
x1="1"
y1="0"
x2="0"
y2="1"
>
<stop
offset="0%"
stop-color="#00a7a3"
/>
<stop
offset="100%"
stop-color="#00c3b6"
/>
</linearGradient>
</defs>
<path
d="
M50 82
C43 72 24 58 20 39
C17 24 26 13 39 13
C47 13 53 18 57 25
C48 27 41 34 39 44
C36 55 41 67 50 82
Z
"
fill="url(#mqGradientCardA)"
/>
<path
d="
M50 82
C58 71 77 58 81 39
C84 24 75 13 62 13
C53 13 47 19 43 27
C53 28 60 35 62 45
C64 56 59 68 50 82
Z
"
fill="url(#mqGradientCardB)"
/>
<path
d="
M50 68
C43 57 42 48 45 40
C47 34 51 30 56 28
C50 38 51 50 56 58
C55 62 53 65 50 68
Z
"
fill="#ffffff"
opacity=".94"
/>
</svg>
<div class="mq-card-wordmark">
Medi<span class="q">Q</span>
</div>
</div>
<div class="mq-card-caption">
مدیریت تجهیزات پزشکی
</div>
<div class="mq-welcome">
به پلتفرم مدیکیو خوش آمدید
</div>
<div class="mq-welcome-desc">
برای ادامه، وارد حساب کاربری خود شوید.
</div>
<!-- =================================================
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 RIGHT -->
<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 10
V7
a4 4 0 0 1 8 0
v3
"
></path>
</svg>
</span>
<!-- EYE LEFT -->
<button
id="mqEye"
class="mq-eye"
type="button"
title="نمایش رمز عبور"
aria-label="نمایش رمز عبور"
>
<svg
id="mqEyeIcon"
viewBox="0 0 24 24"
>
<path
d="
M2 12
s4-7 10-7
10 7 10 7
-4 7-10 7
S2 12 2 12
"
></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="/"
>
<!-- SUBMIT -->
<button
id="mqSubmit"
class="mq-submit"
type="submit"
>
<span class="mq-submit-text">
ورود
</span>
<span class="mq-loader"></span>
</button>
<div
id="mqError"
class="mq-error"
></div>
</form>
<div class="mq-divider"></div>
<div class="mq-support">
<svg viewBox="0 0 24 24">
<path
d="
M4 13v-2
a8 8 0 0 1 16 0
v2
"
></path>
<path
d="
M4 13
H3
a2 2 0 0 0-2 2
v2
a2 2 0 0 0 2 2
h2
v-6
z
"
></path>
<path
d="
M20 13
h1
a2 2 0 0 1 2 2
v2
a2 2 0 0 1-2 2
h-2
v-6
z
"
></path>
</svg>
<span>
در صورت مشکل در ورود، با واحد فناوری اطلاعات تماس بگیرید.
</span>
</div>
</section>
</div>
<script>
(function () {
"use strict";
/* ========================================================
CONFIG
======================================================== */
var CFG = {
destination: "/",
loginAction: "/dologin.action"
};
/* ========================================================
ELEMENTS
======================================================== */
var form =
document.getElementById("mqLoginForm");
var username =
document.getElementById("mqUsername");
var password =
document.getElementById("mqPassword");
var eye =
document.getElementById("mqEye");
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;
}
/* ========================================================
PASSWORD EYE
======================================================== */
if (password && eye) {
eye.addEventListener(
"click",
function () {
var isHidden =
password.type === "password";
password.type =
isHidden
? "text"
: "password";
eye.title =
isHidden
? "مخفی کردن رمز عبور"
: "نمایش رمز عبور";
eye.setAttribute(
"aria-label",
eye.title
);
if (eyeIcon) {
if (isHidden) {
eyeIcon.innerHTML =
'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12"></path>' +
'<circle cx="12" cy="12" r="3"></circle>' +
'<path d="M4 4l16 16"></path>';
}
else {
eyeIcon.innerHTML =
'<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12"></path>' +
'<circle cx="12" cy="12" r="3"></circle>';
}
}
}
);
}
/* ========================================================
VALIDATION
======================================================== */
if (form) {
form.addEventListener(
"submit",
function (event) {
var userValue =
username
? username.value.trim()
: "";
var passValue =
password
? password.value
: "";
if (!userValue || !passValue) {
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> |