| HTML |
|---|
<div id="mediq-login-page" dir="rtl">
<style>
/* ============================================================
MEDIQ - MEDICAL EQUIPMENT MANAGEMENT
LOGIN PAGE
Confluence Server / Data Center
============================================================ */
#mediq-login-page,
#mediq-login-page * {
box-sizing: border-box;
}
#mediq-login-page {
--mq-primary: #09b6ad;
--mq-primary-dark: #079c98;
--mq-primary-light: #53d6d2;
--mq-navy: #082947;
--mq-text: #143b5c;
--mq-muted: #71879b;
--mq-border: rgba(180, 204, 218, .55);
position: fixed;
inset: 0;
z-index: 99999;
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: Tahoma, Arial, sans-serif;
color: var(--mq-text);
background:
linear-gradient(
90deg,
rgba(247, 253, 255, .98) 0%,
rgba(247, 253, 255, .92) 26%,
rgba(236, 249, 251, .40) 55%,
rgba(8, 83, 100, .10) 100%
),
url("/download/attachments/PAGE_ID/mediq-login-bg.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* ============================================================
BACKGROUND OVERLAY
============================================================ */
#mediq-login-page::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.93) 28%,
rgba(255,255,255,.28) 55%,
rgba(0,87,105,.08) 100%
);
z-index: 0;
}
/* ============================================================
DECORATIVE BOTTOM WAVES
============================================================ */
.mq-wave-one {
position: absolute;
left: -8%;
bottom: -25%;
width: 120%;
height: 47%;
background:
linear-gradient(
90deg,
rgba(75, 217, 220, .32),
rgba(0, 175, 180, .60)
);
border-radius: 50% 55% 0 0;
transform: rotate(-3deg);
z-index: 1;
pointer-events: none;
}
.mq-wave-two {
position: absolute;
left: -12%;
bottom: -31%;
width: 130%;
height: 45%;
background:
linear-gradient(
90deg,
rgba(191, 247, 247, .65),
rgba(0, 157, 165, .34)
);
border-radius: 50% 60% 0 0;
transform: rotate(3deg);
z-index: 1;
pointer-events: none;
}
/* ============================================================
PAGE LAYOUT
============================================================ */
.mq-login-layout {
position: relative;
z-index: 5;
width: 100%;
max-width: 1500px;
height: 100%;
margin: 0 auto;
padding: 4vh 6vw;
display: grid;
grid-template-columns:
minmax(500px, 1fr)
minmax(400px, 480px);
align-items: center;
gap: 7vw;
direction: ltr;
}
/* ============================================================
INTRO / LEFT SIDE
============================================================ */
.mq-intro {
direction: rtl;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
max-width: 630px;
justify-self: start;
}
/* ============================================================
BRAND
============================================================ */
.mq-brand {
width: 100%;
display: flex;
direction: ltr;
align-items: center;
justify-content: flex-start;
gap: 17px;
margin-bottom: 42px;
}
.mq-logo-symbol {
position: relative;
width: 86px;
height: 78px;
flex: 0 0 86px;
}
.mq-heart-left,
.mq-heart-right {
position: absolute;
width: 43px;
height: 65px;
border: 8px solid var(--mq-primary);
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom: 0;
}
.mq-heart-left {
left: 12px;
transform:
rotate(-42deg)
skewY(-7deg);
border-color: #56d5d5;
}
.mq-heart-right {
right: 11px;
transform:
rotate(42deg)
skewY(7deg);
border-color: #00a9a5;
}
.mq-logo-word {
font-family: Arial, sans-serif;
font-size: 50px;
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
color: #082a49;
}
.mq-logo-word span {
color: var(--mq-primary);
}
.mq-logo-description {
direction: rtl;
text-align: right;
margin-top: 8px;
font-size: 14px;
font-weight: 700;
color: #163c5c;
}
/* ============================================================
INTRO TEXT
============================================================ */
.mq-small-line {
width: 58px;
height: 4px;
border-radius: 10px;
background: var(--mq-primary);
margin-bottom: 34px;
}
.mq-title {
margin: 0;
color: #092c4b;
font-size: clamp(36px, 3.3vw, 58px);
line-height: 1.55;
font-weight: 900;
letter-spacing: -1px;
}
.mq-subtitle {
margin-top: 13px;
max-width: 580px;
color: #647e94;
font-size: 17px;
line-height: 2;
font-weight: 500;
}
/* ============================================================
FEATURE CARDS
============================================================ */
.mq-features {
width: 100%;
margin-top: 39px;
display: grid;
grid-template-columns:
repeat(4, minmax(110px, 1fr));
gap: 13px;
}
.mq-feature {
min-height: 128px;
padding: 17px 10px;
border: 1px solid rgba(216, 233, 240, .8);
border-radius: 17px;
background:
rgba(255, 255, 255, .61);
backdrop-filter:
blur(14px);
-webkit-backdrop-filter:
blur(14px);
box-shadow:
0 10px 35px
rgba(44, 103, 121, .045);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.mq-feature-icon {
width: 43px;
height: 43px;
margin-bottom: 11px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
145deg,
#e4fbfa,
#c9f4f2
);
color: #05aaa4;
font-size: 23px;
font-weight: bold;
}
.mq-feature:nth-child(2)
.mq-feature-icon {
background: #eef6ff;
color: #4b8fdc;
}
.mq-feature:nth-child(3)
.mq-feature-icon {
background: #e5faf7;
color: #00a98e;
}
.mq-feature:nth-child(4)
.mq-feature-icon {
background: #eff4fc;
color: #6f8eb5;
}
.mq-feature-title {
color: #153d5d;
font-size: 12px;
font-weight: 800;
line-height: 1.8;
}
/* ============================================================
LOGIN PANEL
============================================================ */
.mq-login-card {
direction: rtl;
width: 100%;
min-height: 610px;
padding: 50px 43px 37px;
border-radius: 30px;
border:
1px solid
rgba(255, 255, 255, .75);
background:
linear-gradient(
145deg,
rgba(255,255,255,.88),
rgba(241,250,252,.76)
);
backdrop-filter:
blur(25px);
-webkit-backdrop-filter:
blur(25px);
box-shadow:
0 30px 90px
rgba(17, 70, 91, .15);
justify-self: end;
}
/* ============================================================
LOGIN BRAND
============================================================ */
.mq-login-brand {
display: flex;
direction: ltr;
align-items: center;
justify-content: center;
gap: 10px;
}
.mq-login-symbol {
position: relative;
width: 55px;
height: 50px;
}
.mq-login-symbol::before,
.mq-login-symbol::after {
content: "";
position: absolute;
top: 4px;
width: 28px;
height: 40px;
border: 6px solid var(--mq-primary);
border-bottom: 0;
border-radius: 30px 30px 0 0;
}
.mq-login-symbol::before {
left: 5px;
transform: rotate(-40deg);
border-color: #4dd2d1;
}
.mq-login-symbol::after {
right: 5px;
transform: rotate(40deg);
border-color: #00aaa6;
}
.mq-login-word {
color: #082c4b;
font-family: Arial, sans-serif;
font-size: 37px;
font-weight: 800;
letter-spacing: -1px;
}
.mq-login-word span {
color: var(--mq-primary);
}
.mq-login-brand-caption {
text-align: center;
color: #173b59;
font-size: 11px;
font-weight: 700;
margin-top: 3px;
}
/* ============================================================
WELCOME
============================================================ */
.mq-login-heading {
margin-top: 43px;
text-align: center;
color: #0b2e4b;
font-size: 21px;
font-weight: 900;
}
.mq-login-caption {
margin-top: 10px;
text-align: center;
color: #7990a3;
font-size: 12px;
}
/* ============================================================
FORM
============================================================ */
.mq-login-form {
margin-top: 32px;
}
.mq-input-wrapper {
position: relative;
margin-bottom: 14px;
}
.mq-input {
width: 100%;
height: 58px;
padding:
0 48px
0 48px;
border:
1px solid
rgba(190, 210, 222, .72);
border-radius: 13px;
outline: none;
background:
rgba(255,255,255,.80);
color: #173c59;
font-family: inherit;
font-size: 13px;
text-align: right;
transition: .2s ease;
}
.mq-input::placeholder {
color: #7890a4;
}
.mq-input:focus {
border-color: var(--mq-primary);
background: #fff;
box-shadow:
0 0 0 3px
rgba(9,182,173,.10);
}
.mq-input-icon {
position: absolute;
left: 17px;
top: 50%;
transform:
translateY(-50%);
color: #68839a;
font-size: 20px;
pointer-events: none;
}
.mq-password-toggle {
position: absolute;
left: 48px;
top: 50%;
transform:
translateY(-50%);
border: 0;
background: transparent;
color: #6f879a;
font-size: 17px;
cursor: pointer;
padding: 5px;
}
/* ============================================================
REMEMBER ME
============================================================ */
.mq-form-options {
margin:
14px 2px
19px;
display: flex;
align-items: center;
justify-content: flex-start;
}
.mq-remember {
display: flex;
align-items: center;
gap: 8px;
color: #557086;
font-size: 11px;
cursor: pointer;
}
.mq-remember input {
accent-color:
var(--mq-primary);
width: 17px;
height: 17px;
}
/* ============================================================
LOGIN BUTTON
============================================================ */
.mq-login-button {
width: 100%;
height: 60px;
border: 0;
border-radius: 13px;
background:
linear-gradient(
90deg,
#08aaa7,
#0bc4b9
);
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 800;
cursor: pointer;
box-shadow:
0 12px 28px
rgba(4, 169, 163, .20);
transition:
transform .18s ease,
box-shadow .18s ease;
}
.mq-login-button:hover {
transform:
translateY(-2px);
box-shadow:
0 17px 34px
rgba(4,169,163,.28);
}
.mq-login-button:active {
transform:
translateY(0);
}
/* ============================================================
ERROR
============================================================ */
.mq-login-error {
display: none;
margin-top: 13px;
padding: 11px 13px;
border-radius: 10px;
background: #fff1f2;
border: 1px solid #fecdd3;
color: #be123c;
font-size: 11px;
line-height: 1.8;
}
/* ============================================================
SUPPORT
============================================================ */
.mq-support-divider {
height: 1px;
margin:
30px 0
23px;
background:
linear-gradient(
90deg,
transparent,
rgba(144,171,188,.40),
transparent
);
}
.mq-support {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #71889b;
font-size: 10px;
text-align: center;
line-height: 1.8;
}
.mq-support-icon {
color: #17415f;
font-size: 17px;
}
/* ============================================================
LOADING
============================================================ */
.mq-login-button.loading {
pointer-events: none;
opacity: .85;
}
.mq-login-button.loading
.mq-button-text {
display: none;
}
.mq-loader {
display: none;
width: 21px;
height: 21px;
margin: auto;
border:
3px solid
rgba(255,255,255,.4);
border-top-color:
#fff;
border-radius: 50%;
animation:
mq-spin .7s
linear infinite;
}
.mq-login-button.loading
.mq-loader {
display: block;
}
@keyframes mq-spin {
to {
transform:
rotate(360deg);
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media
(max-width: 1100px) {
.mq-login-layout {
grid-template-columns:
1fr 420px;
gap: 35px;
padding:
30px 35px;
}
.mq-title {
font-size: 38px;
}
.mq-features {
grid-template-columns:
repeat(2,1fr);
}
}
@media
(max-width: 850px) {
#mediq-login-page {
overflow-y: auto;
background-position:
65% center;
}
.mq-login-layout {
display: flex;
flex-direction: column;
height: auto;
min-height: 100vh;
padding:
30px 20px;
gap: 30px;
}
.mq-intro {
width: 100%;
max-width: 550px;
align-items: center;
text-align: center;
order: 2;
}
.mq-brand {
justify-content: center;
}
.mq-small-line {
margin-left: auto;
margin-right: auto;
}
.mq-subtitle {
text-align: center;
}
.mq-login-card {
max-width: 480px;
min-height: auto;
order: 1;
}
}
@media
(max-width: 520px) {
.mq-login-layout {
padding:
18px 12px
40px;
}
.mq-login-card {
padding:
37px 23px
28px;
border-radius: 23px;
}
.mq-title {
font-size: 31px;
}
.mq-subtitle {
font-size: 14px;
}
.mq-features {
grid-template-columns:
repeat(2,1fr);
}
.mq-logo-word {
font-size: 39px;
}
}
</style>
<!-- =========================================================
BACKGROUND WAVES
========================================================= -->
<div class="mq-wave-one"></div>
<div class="mq-wave-two"></div>
<div class="mq-login-layout">
<!-- =====================================================
LEFT / INTRO
===================================================== -->
<section class="mq-intro">
<!-- LOGO -->
<div class="mq-brand">
<div class="mq-logo-symbol">
<span class="mq-heart-left"></span>
<span class="mq-heart-right"></span>
</div>
<div>
<div class="mq-logo-word">
Medi<span>Q</span>
</div>
<div class="mq-logo-description">
مدیریت تجهیزات پزشکی
</div>
</div>
</div>
<div class="mq-small-line"></div>
<h1 class="mq-title">
مدیریت هوشمند
<br>
تجهیزات پزشکی
</h1>
<div class="mq-subtitle">
ثبت، پیگیری و مدیریت کامل چرخه عمر تجهیزات پزشکی
<br>
در یک پلتفرم یکپارچه
</div>
<!-- FEATURES -->
<div class="mq-features">
<div class="mq-feature">
<div class="mq-feature-icon">
✓
</div>
<div class="mq-feature-title">
اطلاعات دقیق
<br>
و بهروز
</div>
</div>
<div class="mq-feature">
<div class="mq-feature-icon">
⚙
</div>
<div class="mq-feature-title">
نگهداری و تعمیرات
<br>
کارآمد
</div>
</div>
<div class="mq-feature">
<div class="mq-feature-icon">
▥
</div>
<div class="mq-feature-title">
گزارشهای
<br>
تحلیلی
</div>
</div>
<div class="mq-feature">
<div class="mq-feature-icon">
◈
</div>
<div class="mq-feature-title">
مدیریت کامل
<br>
داراییها
</div>
</div>
</div>
</section>
<!-- =====================================================
LOGIN CARD
===================================================== -->
<section class="mq-login-card">
<div class="mq-login-brand">
<div class="mq-login-symbol"></div>
<div class="mq-login-word">
Medi<span>Q</span>
</div>
</div>
<div class="mq-login-brand-caption">
مدیریت تجهیزات پزشکی
</div>
<div class="mq-login-heading">
به پلتفرم مدیکیو خوش آمدید
</div>
<div class="mq-login-caption">
برای ادامه، وارد حساب کاربری خود شوید.
</div>
<!-- =================================================
FORM
================================================= -->
<form
id="mqLoginForm"
class="mq-login-form"
method="post"
action="/dologin.action"
>
<!-- USERNAME -->
<div class="mq-input-wrapper">
<input
id="mqUsername"
class="mq-input"
type="text"
name="os_username"
placeholder="نام کاربری"
autocomplete="username"
required
>
<span class="mq-input-icon">
♙
</span>
</div>
<!-- PASSWORD -->
<div class="mq-input-wrapper">
<input
id="mqPassword"
class="mq-input"
type="password"
name="os_password"
placeholder="رمز عبور"
autocomplete="current-password"
required
>
<button
type="button"
id="mqPasswordToggle"
class="mq-password-toggle"
title="نمایش رمز عبور"
>
◉
</button>
<span class="mq-input-icon">
🔒
</span>
</div>
<!-- REMEMBER -->
<div class="mq-form-options">
<label class="mq-remember">
<input
type="checkbox"
name="os_cookie"
value="true"
>
<span>
مرا به خاطر بسپار
</span>
</label>
</div>
<!-- DESTINATION -->
<input
type="hidden"
name="os_destination"
id="mqDestination"
value="/"
>
<!-- LOGIN -->
<button
id="mqLoginButton"
class="mq-login-button"
type="submit"
>
<span class="mq-button-text">
ورود به مدیکیو
←
</span>
<span class="mq-loader"></span>
</button>
<!-- ERROR -->
<div
id="mqLoginError"
class="mq-login-error"
></div>
</form>
<div class="mq-support-divider"></div>
<div class="mq-support">
<span class="mq-support-icon">
♧
</span>
<span>
در صورت مشکل در ورود،
با واحد فناوری اطلاعات تماس بگیرید.
</span>
</div>
</section>
</div>
<script>
(function () {
"use strict";
/* ========================================================
MEDIQ CONFIG
======================================================== */
const CFG = {
/*
* آدرس صفحهای که بعد از Login
* کاربر باید وارد آن شود.
*
* بعداً pageId صفحه اصلی MediQ را اینجا قرار بده.
*/
destination:
"/pages/viewpage.action?pageId=174855060",
/*
* مسیر Login خود Confluence.
*
* اگر Confluence روی Context Path نصب شده مثلاً:
*
* /confluence
*
* مقدار باید شود:
*
* /confluence/dologin.action
*/
loginAction:
"/dologin.action"
};
/* ========================================================
ELEMENTS
======================================================== */
const form =
document.getElementById(
"mqLoginForm"
);
const username =
document.getElementById(
"mqUsername"
);
const password =
document.getElementById(
"mqPassword"
);
const passwordToggle =
document.getElementById(
"mqPasswordToggle"
);
const loginButton =
document.getElementById(
"mqLoginButton"
);
const destination =
document.getElementById(
"mqDestination"
);
const errorBox =
document.getElementById(
"mqLoginError"
);
/* ========================================================
CONFIGURE FORM
======================================================== */
if (form) {
form.action =
CFG.loginAction;
}
if (destination) {
destination.value =
CFG.destination;
}
/* ========================================================
PASSWORD VISIBILITY
======================================================== */
if (
passwordToggle &&
password
) {
passwordToggle.addEventListener(
"click",
function () {
if (
password.type ===
"password"
) {
password.type =
"text";
this.innerHTML =
"⊘";
this.title =
"مخفی کردن رمز عبور";
}
else {
password.type =
"password";
this.innerHTML =
"◉";
this.title =
"نمایش رمز عبور";
}
}
);
}
/* ========================================================
VALIDATION
======================================================== */
if (form) {
form.addEventListener(
"submit",
function (event) {
const userValue =
username
? username.value.trim()
: "";
const passValue =
password
? password.value
: "";
if (
!userValue ||
!passValue
) {
event.preventDefault();
if (errorBox) {
errorBox.style.display =
"block";
errorBox.innerHTML =
"لطفاً نام کاربری و رمز عبور را وارد کنید.";
}
return;
}
if (errorBox) {
errorBox.style.display =
"none";
}
if (loginButton) {
loginButton.classList.add(
"loading"
);
}
}
);
}
/* ========================================================
AUTO FOCUS
======================================================== */
window.setTimeout(
function () {
if (username) {
username.focus();
}
},
350
);
})();
</script>
</div> |
Page History
Overview
Content Tools
Apps