| HTML |
|---|
<div id="mediq-login" dir="rtl">
<style>
/* =========================================================
MEDIQ LOGIN
Confluence Server / Data Center 8.7.1
PAGE ID:
174855060
فعلاً هیچ المان Confluence مخفی نمیشود.
========================================================= */
#mediq-login,
#mediq-login * {
box-sizing: border-box;
}
#mediq-login {
--mq-primary: #08b5ad;
--mq-primary-dark: #069c96;
--mq-primary-light: #43d4cd;
--mq-navy: #092d4d;
--mq-text: #173d5c;
--mq-muted: #71899e;
width: 100%;
min-height: 720px;
position: relative;
overflow: hidden;
direction: rtl;
font-family:
Tahoma,
Arial,
sans-serif;
color: var(--mq-text);
border-radius: 0;
background-image:
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: no-repeat;
}
/* =========================================================
SOFT OVERLAY
========================================================= */
#mediq-login::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.88) 20%,
rgba(255,255,255,.35) 42%,
rgba(255,255,255,.05) 64%,
rgba(0,72,88,.04) 100%
);
z-index: 1;
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.mq-login-layout {
position: relative;
z-index: 5;
width: 100%;
min-height: 720px;
padding:
55px
7%;
display: grid;
/*
تصویر اصلی:
اطلاعات سمت چپ
Login سمت راست
*/
grid-template-columns:
minmax(470px, 600px)
1fr
minmax(380px, 445px);
align-items: center;
direction: ltr;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.mq-intro {
grid-column: 1;
direction: rtl;
align-self: center;
position: relative;
z-index: 10;
max-width: 570px;
text-align: right;
}
/* =========================================================
MAIN BRAND
========================================================= */
.mq-main-brand {
direction: ltr;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 17px;
margin-bottom: 39px;
}
/* =========================================================
MEDIQ LOGO
CSS VERSION
========================================================= */
.mq-logo {
width: 82px;
height: 73px;
position: relative;
flex:
0 0
82px;
}
/* LEFT CURVE */
.mq-logo::before {
content: "";
position: absolute;
width: 38px;
height: 55px;
left: 12px;
top: 3px;
border:
8px solid
#55d5d4;
border-right-color:
transparent;
border-bottom-color:
#55d5d4;
border-radius:
50%
50%
55%
50%;
transform:
rotate(-31deg);
}
/* RIGHT CURVE */
.mq-logo::after {
content: "";
position: absolute;
width: 38px;
height: 55px;
right: 12px;
top: 3px;
border:
8px solid
#00aaa5;
border-left-color:
transparent;
border-bottom-color:
#00aaa5;
border-radius:
50%
50%
50%
55%;
transform:
rotate(31deg);
}
/* =========================================================
WORDMARK
========================================================= */
.mq-wordmark {
font-family:
Arial,
sans-serif;
font-size: 48px;
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
color:
var(--mq-navy);
}
.mq-wordmark span {
color:
var(--mq-primary);
}
.mq-brand-subtitle {
direction: rtl;
text-align: right;
margin-top: 8px;
font-size: 14px;
font-weight: 700;
color:
#173d5c;
}
/* =========================================================
DECORATIVE LINE
========================================================= */
.mq-title-line {
width: 58px;
height: 4px;
margin-bottom: 30px;
border-radius: 20px;
background:
var(--mq-primary);
}
/* =========================================================
MAIN TITLE
========================================================= */
.mq-main-title {
margin: 0;
color:
#092e4e;
font-size:
clamp(
35px,
3.1vw,
55px
);
font-weight: 900;
line-height: 1.55;
letter-spacing: -1px;
}
.mq-description {
margin-top: 12px;
color:
#607b91;
font-size: 16px;
font-weight: 500;
line-height: 2.05;
}
/* =========================================================
FEATURE CARDS
========================================================= */
.mq-features {
width: 100%;
margin-top: 34px;
display: grid;
grid-template-columns:
repeat(
4,
minmax(105px,1fr)
);
gap: 11px;
}
.mq-feature {
min-height: 116px;
padding:
14px
8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border:
1px solid
rgba(
210,
229,
238,
.8
);
border-radius: 16px;
background:
rgba(
255,
255,
255,
.64
);
box-shadow:
0 8px 28px
rgba(
33,
86,
108,
.045
);
backdrop-filter:
blur(10px);
-webkit-backdrop-filter:
blur(10px);
}
.mq-feature-icon {
width: 42px;
height: 42px;
margin-bottom: 9px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 800;
background:
#e1faf8;
color:
#08afa7;
}
.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 {
color:
#173d5c;
font-size: 11px;
font-weight: 800;
line-height: 1.7;
}
/* =========================================================
LOGIN CARD
========================================================= */
.mq-card {
grid-column: 3;
direction: rtl;
width: 100%;
min-height: 560px;
align-self: center;
padding:
43px
38px
30px;
border-radius: 27px;
border:
1px solid
rgba(
255,
255,
255,
.82
);
background:
linear-gradient(
145deg,
rgba(
255,
255,
255,
.89
),
rgba(
239,
249,
251,
.78
)
);
box-shadow:
0
30px
80px
rgba(
16,
65,
87,
.18
);
backdrop-filter:
blur(25px);
-webkit-backdrop-filter:
blur(25px);
}
/* =========================================================
CARD LOGO
========================================================= */
.mq-card-brand {
display: flex;
direction: ltr;
justify-content: center;
align-items: center;
gap: 10px;
}
.mq-card-logo {
width: 54px;
height: 49px;
position: relative;
}
.mq-card-logo::before {
content: "";
position: absolute;
width: 25px;
height: 36px;
left: 7px;
top: 3px;
border:
6px solid
#52d4d2;
border-right-color:
transparent;
border-radius:
50%;
transform:
rotate(-30deg);
}
.mq-card-logo::after {
content: "";
position: absolute;
width: 25px;
height: 36px;
right: 7px;
top: 3px;
border:
6px solid
#00aaa5;
border-left-color:
transparent;
border-radius:
50%;
transform:
rotate(30deg);
}
.mq-card-wordmark {
font-family:
Arial,
sans-serif;
font-size: 37px;
font-weight: 800;
letter-spacing: -1px;
color:
#082d4d;
}
.mq-card-wordmark span {
color:
var(--mq-primary);
}
.mq-card-brand-caption {
margin-top: 3px;
text-align: center;
color:
#173b59;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
WELCOME
========================================================= */
.mq-welcome {
margin-top: 38px;
text-align: center;
color:
#0c304f;
font-size: 20px;
font-weight: 900;
}
.mq-welcome-subtitle {
margin-top: 9px;
text-align: center;
color:
#718a9f;
font-size: 11px;
}
/* =========================================================
FORM
========================================================= */
.mq-form {
margin-top: 29px;
}
.mq-field {
position: relative;
margin-bottom: 13px;
}
.mq-input {
width: 100%;
height: 55px;
padding:
0
17px
0
48px;
outline: none;
border:
1px solid
rgba(
181,
204,
217,
.70
);
border-radius: 12px;
background:
rgba(
255,
255,
255,
.82
);
color:
#163d5c;
font-family: inherit;
font-size: 12px;
text-align: right;
transition:
border-color
.18s ease,
box-shadow
.18s ease;
}
.mq-input::placeholder {
color:
#7990a4;
}
.mq-input:focus {
background:
#fff;
border-color:
var(--mq-primary);
box-shadow:
0 0 0 3px
rgba(
8,
181,
173,
.10
);
}
/* =========================================================
FIELD ICON
========================================================= */
.mq-field-icon {
position: absolute;
left: 17px;
top: 50%;
transform:
translateY(-50%);
color:
#668198;
font-size: 18px;
pointer-events: none;
}
/* =========================================================
PASSWORD SHOW BUTTON
========================================================= */
.mq-password-show {
position: absolute;
left: 44px;
top: 50%;
transform:
translateY(-50%);
width: 29px;
height: 29px;
border: 0;
outline: none;
background:
transparent;
color:
#748ba0;
font-size: 16px;
cursor: pointer;
}
/* =========================================================
REMEMBER
========================================================= */
.mq-options {
margin:
13px
1px
18px;
display: flex;
align-items: center;
justify-content:
flex-start;
}
.mq-remember {
display: flex;
align-items: center;
gap: 7px;
color:
#577086;
font-size: 11px;
cursor: pointer;
}
.mq-remember input {
width: 16px;
height: 16px;
accent-color:
var(--mq-primary);
}
/* =========================================================
LOGIN BUTTON
========================================================= */
.mq-submit {
width: 100%;
height: 58px;
border: 0;
outline: none;
border-radius: 12px;
background:
linear-gradient(
90deg,
#07aaa5,
#0cc4b9
);
color:
#fff;
font-family: inherit;
font-size: 14px;
font-weight: 800;
cursor: pointer;
box-shadow:
0
12px
26px
rgba(
4,
169,
163,
.20
);
transition:
.18s ease;
}
.mq-submit:hover {
transform:
translateY(-2px);
box-shadow:
0
17px
34px
rgba(
4,
169,
163,
.27
);
}
.mq-submit:active {
transform:
translateY(0);
}
/* =========================================================
ERROR
========================================================= */
.mq-error {
display: none;
margin-top: 12px;
padding:
10px
12px;
border-radius: 9px;
background:
#fff1f2;
border:
1px solid
#fecdd3;
color:
#be123c;
font-size: 10px;
line-height: 1.8;
}
/* =========================================================
SUPPORT
========================================================= */
.mq-divider {
height: 1px;
margin:
27px
0
21px;
background:
linear-gradient(
90deg,
transparent,
rgba(
136,
165,
183,
.42
),
transparent
);
}
.mq-support {
text-align: center;
color:
#71899d;
font-size: 10px;
line-height: 1.8;
}
/* =========================================================
LOADER
========================================================= */
.mq-loader {
display: none;
width: 20px;
height: 20px;
margin:
0 auto;
border:
3px solid
rgba(
255,
255,
255,
.35
);
border-top-color:
#fff;
border-radius:
50%;
animation:
mqSpin
.7s
linear
infinite;
}
.mq-submit.loading
.mq-submit-text {
display: none;
}
.mq-submit.loading
.mq-loader {
display: block;
}
@keyframes mqSpin {
to {
transform:
rotate(360deg);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media
(max-width: 1150px) {
.mq-login-layout {
grid-template-columns:
minmax(400px,1fr)
60px
390px;
padding:
45px
35px;
}
.mq-main-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-login-layout {
display:
flex;
flex-direction:
column;
gap:
35px;
padding:
35px
20px;
}
.mq-card {
width:
min(
100%,
460px
);
order: 1;
}
.mq-intro {
width:
min(
100%,
560px
);
order: 2;
}
}
@media
(max-width: 520px) {
.mq-card {
padding:
35px
22px
27px;
border-radius:
22px;
}
.mq-main-title {
font-size:
30px;
}
.mq-description {
font-size:
13px;
}
.mq-features {
grid-template-columns:
repeat(
2,
1fr
);
}
}
</style>
<!-- =========================================================
CONTENT
========================================================= -->
<div class="mq-login-layout">
<!-- =====================================================
INTRO
===================================================== -->
<section class="mq-intro">
<div class="mq-main-brand">
<div class="mq-logo"></div>
<div>
<div class="mq-wordmark">
Medi<span>Q</span>
</div>
<div class="mq-brand-subtitle">
مدیریت تجهیزات پزشکی
</div>
</div>
</div>
<div class="mq-title-line"></div>
<h1 class="mq-main-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
===================================================== -->
<section class="mq-card">
<div class="mq-card-brand">
<div class="mq-card-logo"></div>
<div class="mq-card-wordmark">
Medi<span>Q</span>
</div>
</div>
<div class="mq-card-brand-caption">
مدیریت تجهیزات پزشکی
</div>
<div class="mq-welcome">
به پلتفرم مدیکیو خوش آمدید
</div>
<div class="mq-welcome-subtitle">
برای ادامه، وارد حساب کاربری خود شوید.
</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">
♙
</span>
</div>
<!-- PASSWORD -->
<div class="mq-field">
<input
id="mqPassword"
class="mq-input"
type="password"
name="os_password"
placeholder="رمز عبور"
autocomplete="current-password"
required
>
<button
id="mqPasswordShow"
class="mq-password-show"
type="button"
title="نمایش رمز عبور"
>
◉
</button>
<span class="mq-field-icon">
🔒
</span>
</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>
<div
id="mqError"
class="mq-error"
></div>
</form>
<div class="mq-divider"></div>
<div class="mq-support">
🎧
در صورت مشکل در ورود،
با واحد فناوری اطلاعات تماس بگیرید.
</div>
</section>
</div>
<script>
(function () {
"use strict";
/* ========================================================
MEDIQ CONFIG
======================================================== */
var CFG = {
/*
* صفحهای که کاربر بعد از Login
* باید وارد آن شود.
*
* فعلاً / گذاشته شده.
*
* وقتی صفحه اصلی MediQ ساخته شد
* Page ID آن را اینجا قرار میدهیم.
*/
destination:
"/",
/*
* Confluence Login Endpoint
*
* برای نصب فعلی شما که Confluence
* روی Root Context است:
*/
loginAction:
"/dologin.action"
};
/* ========================================================
ELEMENTS
======================================================== */
var form =
document.getElementById(
"mqLoginForm"
);
var username =
document.getElementById(
"mqUsername"
);
var password =
document.getElementById(
"mqPassword"
);
var passwordShow =
document.getElementById(
"mqPasswordShow"
);
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 &&
passwordShow
) {
passwordShow.addEventListener(
"click",
function () {
if (
password.type ===
"password"
) {
password.type =
"text";
passwordShow.innerHTML =
"⊘";
passwordShow.title =
"مخفی کردن رمز عبور";
}
else {
password.type =
"password";
passwordShow.innerHTML =
"◉";
passwordShow.title =
"نمایش رمز عبور";
}
}
);
}
/* ========================================================
FORM VALIDATION
======================================================== */
if (form) {
form.addEventListener(
"submit",
function (event) {
var user =
username
? username.value.trim()
: "";
var pass =
password
? password.value
: "";
if (
!user ||
!pass
) {
event.preventDefault();
if (error) {
error.style.display =
"block";
error.innerHTML =
"لطفاً نام کاربری و رمز عبور را وارد کنید.";
}
return false;
}
if (error) {
error.style.display =
"none";
}
if (submit) {
submit.classList.add(
"loading"
);
}
}
);
}
/* ========================================================
INITIAL FOCUS
======================================================== */
window.setTimeout(
function () {
if (username) {
username.focus();
}
},
300
);
})();
</script>
</div> |
Page History
Overview
Content Tools
Apps