<div id="mediq-dashboard" dir="rtl">
<style>
/* ============================================================
MEDIQ DASHBOARD
============================================================ */
#mediq-dashboard,
#mediq-dashboard * {
box-sizing: border-box;
}
#mediq-dashboard {
--navy: #082f4f;
--text: #173b59;
--muted: #70889c;
--primary: #0bb9b1;
--border: #dbe8ee;
--background: #f5fafc;
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 9999;
direction: rtl;
font-family:
Tahoma,
Arial,
sans-serif;
color: var(--text);
background:
#f5fafc;
}
/* ============================================================
CONFLUENCE
============================================================ */
html,
body,
#page,
#full-height-container,
#main,
#content,
#main-content,
.aui-page-panel,
.aui-page-panel-inner,
.aui-page-panel-content,
.content-body {
width: 100% !important;
height: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
html,
body {
overflow: hidden !important;
}
#footer,
footer,
.aui-footer,
#header,
#main-header,
.breadcrumbs,
#breadcrumbs,
.page-metadata {
display: none !important;
}
/* ============================================================
APP
============================================================ */
.mq-app {
width: 100%;
height: 100%;
display: grid;
grid-template-columns:
minmax(0, 1fr)
235px;
direction: ltr;
}
/* ============================================================
SIDEBAR
============================================================ */
.mq-sidebar {
grid-column: 2;
height: 100vh;
background:
linear-gradient(
180deg,
#073553,
#082e4b
);
padding:
25px
17px;
direction: rtl;
display: flex;
flex-direction: column;
color: #fff;
}
.mq-logo {
width: 100%;
text-align: center;
padding-bottom: 24px;
border-bottom:
1px solid
rgba(255,255,255,.10);
}
.mq-logo img {
width: 165px;
max-width: 90%;
height: auto;
}
/* ============================================================
USER
============================================================ */
.mq-user {
margin-top: 18px;
padding: 14px;
border-radius: 13px;
background:
rgba(255,255,255,.07);
border:
1px solid
rgba(255,255,255,.08);
}
.mq-user-name {
font-size: 13px;
font-weight: 800;
}
.mq-user-role {
margin-top: 5px;
font-size: 10px;
color:
rgba(255,255,255,.60);
}
/* ============================================================
LIFE CYCLE MENU
============================================================ */
.mq-life {
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 7px;
}
.mq-life-item {
min-height: 44px;
padding:
0
14px;
display: flex;
align-items: center;
border-radius: 10px;
color:
rgba(255,255,255,.75);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: .15s;
}
.mq-life-item:hover {
color: #fff;
background:
rgba(255,255,255,.08);
}
.mq-life-item.active {
color: #fff;
background:
linear-gradient(
90deg,
#0bb9b1,
#08a69f
);
}
/* ============================================================
LOGOUT
============================================================ */
.mq-sidebar-bottom {
margin-top: auto;
}
.mq-logout {
min-height: 44px;
display: flex;
align-items: center;
padding:
0
14px;
border-radius: 10px;
color:
rgba(255,255,255,.70);
font-size: 11px;
cursor: pointer;
}
.mq-logout:hover {
background:
rgba(255,255,255,.07);
color: #fff;
}
/* ============================================================
MAIN
============================================================ */
.mq-main {
grid-column: 1;
height: 100vh;
overflow-y: auto;
direction: rtl;
padding:
28px
clamp(25px, 4vw, 55px)
45px;
}
/* ============================================================
HEADER
============================================================ */
.mq-header {
min-height: 65px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom:
1px solid
var(--border);
margin-bottom: 25px;
}
.mq-header-title {
color:
var(--navy);
font-size: 20px;
font-weight: 900;
}
/* ============================================================
GRID
============================================================ */
.mq-content-grid {
width: 100%;
display: grid;
grid-template-columns:
minmax(250px, .72fr)
minmax(250px, .72fr)
minmax(400px, 1.6fr)
minmax(400px, 1.6fr);
gap: 18px;
align-items: stretch;
}
/* ============================================================
CARD
============================================================ */
.mq-card {
min-height: 415px;
padding: 20px;
border:
1px solid
var(--border);
border-radius: 18px;
background:
#fff;
box-shadow:
0 12px 32px
rgba(27,72,98,.05);
}
.mq-card-header {
padding-bottom: 14px;
margin-bottom: 11px;
border-bottom:
1px solid
#edf3f6;
}
.mq-card-title {
color:
var(--navy);
font-size: 15px;
font-weight: 900;
}
/* ============================================================
ACTION
============================================================ */
.mq-actions {
display: flex;
flex-direction: column;
gap: 5px;
}
.mq-action {
min-height: 42px;
padding:
0
12px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: space-between;
color:
#49677e;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: .15s;
}
.mq-action:hover {
color:
#079f99;
background:
#effafa;
}
.mq-arrow {
color:
#a2b6c4;
font-size: 16px;
}
/* ============================================================
FORM CARDS
============================================================ */
.mq-form-card {
min-height: 415px;
padding:
25px
17px;
border:
1px solid
var(--border);
border-radius: 18px;
background:
#fff;
box-shadow:
0 12px 32px
rgba(27,72,98,.04);
}
.mq-form-title {
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color:
var(--navy);
font-size: 13px;
font-weight: 900;
border-bottom:
1px solid
#edf3f6;
margin-bottom: 16px;
}
.mq-form-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.mq-form-action {
min-height: 38px;
padding:
0
6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color:
#49677e;
text-align: center;
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.mq-form-action:hover {
color:
#079f99;
background:
#effafa;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media(max-width:1400px) {
.mq-content-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media(max-width:900px) {
.mq-app {
grid-template-columns:
1fr;
}
.mq-sidebar {
display: none;
}
.mq-main {
grid-column: 1;
}
.mq-content-grid {
grid-template-columns:
1fr;
}
}
</style>
<div class="mq-app">
<!-- =====================================================
MAIN
===================================================== -->
<main class="mq-main">
<header class="mq-header">
<div class="mq-header-title">
مدیریت تجهیزات
</div>
</header>
<div class="mq-content-grid">
<!-- =================================================
EDIT EXISTING ASSET
================================================= -->
<section class="mq-form-card">
<div class="mq-form-title">
ثبت ویرایش دارایی موجود
</div>
<div class="mq-form-actions">
<div class="mq-form-action">
ثبت داراییهای خریداری شده
</div>
<div class="mq-form-action">
شناسنامه فنی
</div>
<div class="mq-form-action">
شناسنامه مالی
</div>
<div class="mq-form-action">
شناسنامه نگهداری و تعمیر
</div>
<div class="mq-form-action">
شناسنامه بازرگانی
</div>
</div>
</section>
<!-- =================================================
NEW ASSET
================================================= -->
<section class="mq-form-card">
<div class="mq-form-title">
ثبت ورود دارایی جدید
</div>
<div class="mq-form-actions">
<div class="mq-form-action">
ثبت داراییهای خریداری شده
</div>
<div class="mq-form-action">
شناسنامه فنی
</div>
<div class="mq-form-action">
شناسنامه مالی
</div>
<div class="mq-form-action">
شناسنامه نگهداری و تعمیر
</div>
<div class="mq-form-action">
شناسنامه بازرگانی
</div>
</div>
</section>
<!-- =================================================
MANAGEMENT CARD 2
================================================= -->
<section class="mq-card">
<div class="mq-card-header">
<div class="mq-card-title">
مدیریت تجهیزات
</div>
</div>
<div class="mq-actions">
<div class="mq-action">
<span>
مدیریت تأمین و لجستیک
</span>
<span class="mq-arrow">‹</span>
</div>
<div class="mq-action">
<span>
خرید دارایی
</span>
<span class="mq-arrow">‹</span>
</div>
<div class="mq-action">
<span>
ورود دارایی جدید
</span>
<span class="mq-arrow">‹</span>
</div>
<div class="mq-action">
<span>
ویرایش دارایی
</span>
<span class="mq-arrow">‹</span>
</div>
<div class="mq-action">
<span>
کالاهای مصرفی
</span>
<span class="mq-arrow">‹</span>
</div>
</div>
</section>
<!-- =================================================
MANAGEMENT CARD 1
================================================= -->
<section class="mq-card">
<div class="mq-card-header">
<div class="mq-card-title">
مدیریت تجهیزات
</div>
</div>
<div class="mq-actions">
<div class="mq-action">
<span>
مدیریت اموال
</span>
<span class="mq-arrow">‹</span>
</div>
<div class="mq-action">
<span>
مدیریت نگهداری و تعمیر
</span>
<span class="mq-arrow">‹</span>
</div>
<div class="mq-action">
<span>
مدیریت مالی و بهرهوری
</span>
<span class="mq-arrow">‹</span>
</div>
<div class="mq-action">
<span>
مدیریت تأمین و لجستیک
</span>
<span class="mq-arrow">‹</span>
</div>
</div>
</section>
</div>
</main>
<!-- =====================================================
SIDEBAR
===================================================== -->
<aside class="mq-sidebar">
<div class="mq-logo">
<img
src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"
alt="MediQ"
>
</div>
<div class="mq-user">
<div class="mq-user-name">
سیما صیاف
</div>
<div class="mq-user-role">
مدیریت تجهیزات
</div>
</div>
<div class="mq-life">
<div class="mq-life-item active">
تأمین
</div>
<div class="mq-life-item">
بهرهبرداری
</div>
<div class="mq-life-item">
جایگزینی
</div>
<div class="mq-life-item">
نگهداری
</div>
</div>
<div class="mq-sidebar-bottom">
<div
id="mqLogout"
class="mq-logout"
>
خروج از حساب کاربری
</div>
</div>
</aside>
</div>
<script>
(function () {
"use strict";
var logout =
document.getElementById(
"mqLogout"
);
if (logout) {
logout.addEventListener(
"click",
function () {
window.location.href =
"/logout.action";
}
);
}
})();
</script>
</div> |