step 1 : kartu kontrol v1 html
This commit is contained in:
sindhu
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 56 KiB |
351
assets/mcu/kartukontrolv1.html
Normal file
351
assets/mcu/kartukontrolv1.html
Normal file
@@ -0,0 +1,351 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
|
||||
Author: KeenThemes
|
||||
Website: http://www.keenthemes.com/
|
||||
Contact: support@keenthemes.com
|
||||
Follow: www.twitter.com/keenthemes
|
||||
Dribbble: www.dribbble.com/keenthemes
|
||||
Like: www.facebook.com/keenthemes
|
||||
Purchase: https://1.envato.market/EA4JP
|
||||
Renew Support: https://1.envato.market/EA4JP
|
||||
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<base href="../" />
|
||||
<meta charset="utf-8" />
|
||||
<title>Metronic | Dashboard</title>
|
||||
<meta name="description" content="Updates and statistics" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
|
||||
<!--begin::Fonts-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
|
||||
/>
|
||||
<!--end::Fonts-->
|
||||
|
||||
<!--begin::Page Vendors Styles(used by this page)-->
|
||||
<link
|
||||
href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<!--end::Page Vendors Styles-->
|
||||
|
||||
<!--begin::Global Theme Styles(used by all pages)-->
|
||||
<link
|
||||
href="assets/plugins/global/plugins.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/plugins/custom/prismjs/prismjs.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<!--end::Global Theme Styles-->
|
||||
|
||||
<!--begin::Layout Themes(used by all pages)-->
|
||||
|
||||
<link
|
||||
href="assets/css/themes/layout/header/base/light.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/header/menu/light.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/brand/dark.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/aside/dark.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<!--end::Layout Themes-->
|
||||
|
||||
<link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
|
||||
<link rel="stylesheet" href="asset-corporate-portal/css/sas.bundle.css" />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
|
||||
<!--begin::Body-->
|
||||
<body
|
||||
id="kt_body"
|
||||
class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
|
||||
>
|
||||
<style>
|
||||
.card-control {
|
||||
width: 390px;
|
||||
height: 1212px;
|
||||
background-image: url("asset-corporate-portal/media/kartukontrol/bg-kartuKontrol.svg");
|
||||
background-size: 390px 1212px;
|
||||
background-repeat: no-repeat;
|
||||
margin: auto;
|
||||
}
|
||||
.foto {
|
||||
width: 70px;
|
||||
height: 79px;
|
||||
background-image: url("assets/media/svg/avatars/001-boy.svg");
|
||||
background-size: 70px 79px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.top-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.smallf {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.complete-label {
|
||||
background-color: #e8fff3; /*figma*/
|
||||
color: #50cd89; /*figma*/
|
||||
padding: 0.15rem 0.75rem;
|
||||
border-radius: 0.42rem;
|
||||
}
|
||||
|
||||
.pending-label {
|
||||
background-color: #fff8dd; /*figma*/
|
||||
color: #f1bc00; /*figma*/
|
||||
padding: 0.15rem 0.75rem;
|
||||
border-radius: 0.42rem;
|
||||
}
|
||||
</style>
|
||||
<!--begin::Container-->
|
||||
<div class="content-fluid bg-white">
|
||||
<div class="card-control py-19 px-9">
|
||||
<!-- begin::Data Pasien -->
|
||||
<div class="left pt-6 pl-7" style="position: relative">
|
||||
<div class="foto top-right mt-7 mr-6"></div>
|
||||
<div class="card-label">
|
||||
<h4>Data Pasien</h4>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h5 class="text-primary">No Registrasi</h5>
|
||||
<h5>00234</h5>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h5 class="text-primary">Nomor Lab</h5>
|
||||
<h5>LA90002</h5>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h5 class="text-primary">Nama Pasien</h5>
|
||||
<h5>Hendra Setiawan</h5>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h5 class="text-primary">Tanggal Lahir / Umur</h5>
|
||||
<h5>1 Jan 2000 / 24 tahun</h5>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h5 class="text-primary">Jenis Kelamin</h5>
|
||||
<h5>Laki - laki</h5>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h5 class="text-primary">Divisi</h5>
|
||||
<h5>Development</h5>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<h5 class="text-primary">Company</h5>
|
||||
<h5>PT.Sadhana Abiyasa Sampoerna</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- end::Data Pasien -->
|
||||
<!-- begin::Daftar Pemeriksaan -->
|
||||
<div class="card shadow-sm py-2 mt-29">
|
||||
<div class="card-body px-3 py-2">
|
||||
<h5 class="card-title">Daftar Pemeriksaan</h5>
|
||||
<ul class="list-group text-grey ml-7 mt-1">
|
||||
<li><h6>Hematologi Lengkap</h6></li>
|
||||
<li><h6>Urine Lengkap</h6></li>
|
||||
<li><h6>ACG</h6></li>
|
||||
<li><h6>Treadmill</h6></li>
|
||||
<li><h6>Pemeriksaan Fisik</h6></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end::Daftar Pemeriksaan -->
|
||||
<div class="card py-2 mt-6">
|
||||
<div class="card-body px-3 py-2">
|
||||
<!-- begin::Pemeriksaan/Pengambilan Sample -->
|
||||
<h5 class="card-title">Pemeriksaan / Pengambilan Sample</h5>
|
||||
<div class="text-grey mb-3">
|
||||
<h5>Laboratorium</h5>
|
||||
<ul class="list-group ml-7 mt-1">
|
||||
<li class="justify-content-center align-items-center mb-3">
|
||||
<div class="row">
|
||||
<div class="col-9 d-flex">
|
||||
<h6>Darah</h6>
|
||||
<span class="smallf pl-5 vertical">15-05-2024 10:00</span>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<span
|
||||
class="label label-inline font-weight-bold complete-label mr-2 shadow-sm"
|
||||
>Sudah</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="row">
|
||||
<div class="col-9 d-flex">
|
||||
<h6>Urine</h6>
|
||||
<span class="pl-5 smallf">15-05-2024 10:00</span>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<span
|
||||
class="label label-inline font-weight-bold complete-label mr-2 shadow-sm"
|
||||
>Sudah</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-grey mb-3">
|
||||
<h5>Rontgen</h5>
|
||||
<ul class="list-group ml-7 mt-1">
|
||||
<li class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-9 d-flex">
|
||||
<h6>Thorax AP (PCR)</h6>
|
||||
<label class="smallf pl-5">15-05-2024 10:50</label>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<span
|
||||
class="label label-inline font-weight-bold complete-label mr-2 shadow-sm"
|
||||
>Sudah</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="text-grey mb-3">
|
||||
<h5>Elektromedis</h5>
|
||||
<ul class="list-group ml-7 mt-1">
|
||||
<li class="mb-3">
|
||||
<div class="row">
|
||||
<div class="col-9"><h6>ECG</h6></div>
|
||||
<div class="col-3">
|
||||
<span
|
||||
class="label label-inline font-weight-bold pending-label mr-2 shadow-sm"
|
||||
>Belum</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end::Pemeriksaan/Pengambilan Sample -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
|
||||
<script>
|
||||
var HOST_URL =
|
||||
"https://preview.keenthemes.com/metronic/theme/html/tools/preview";
|
||||
</script>
|
||||
<!--begin::Global Config(global config for global JS scripts)-->
|
||||
<script>
|
||||
var KTAppSettings = {
|
||||
breakpoints: {
|
||||
sm: 576,
|
||||
md: 768,
|
||||
lg: 992,
|
||||
xl: 1200,
|
||||
xxl: 1400,
|
||||
},
|
||||
colors: {
|
||||
theme: {
|
||||
base: {
|
||||
white: "#ffffff",
|
||||
primary: "#3699FF",
|
||||
secondary: "#E5EAEE",
|
||||
success: "#1BC5BD",
|
||||
info: "#8950FC",
|
||||
warning: "#FFA800",
|
||||
danger: "#F64E60",
|
||||
light: "#E4E6EF",
|
||||
dark: "#181C32",
|
||||
},
|
||||
light: {
|
||||
white: "#ffffff",
|
||||
primary: "#E1F0FF",
|
||||
secondary: "#EBEDF3",
|
||||
success: "#C9F7F5",
|
||||
info: "#EEE5FF",
|
||||
warning: "#FFF4DE",
|
||||
danger: "#FFE2E5",
|
||||
light: "#F3F6F9",
|
||||
dark: "#D6D6E0",
|
||||
},
|
||||
inverse: {
|
||||
white: "#ffffff",
|
||||
primary: "#ffffff",
|
||||
secondary: "#3F4254",
|
||||
success: "#ffffff",
|
||||
info: "#ffffff",
|
||||
warning: "#ffffff",
|
||||
danger: "#ffffff",
|
||||
light: "#464E5F",
|
||||
dark: "#ffffff",
|
||||
},
|
||||
},
|
||||
gray: {
|
||||
"gray-100": "#F3F6F9",
|
||||
"gray-200": "#EBEDF3",
|
||||
"gray-300": "#E4E6EF",
|
||||
"gray-400": "#D1D3E0",
|
||||
"gray-500": "#B5B5C3",
|
||||
"gray-600": "#7E8299",
|
||||
"gray-700": "#5E6278",
|
||||
"gray-800": "#3F4254",
|
||||
"gray-900": "#181C32",
|
||||
},
|
||||
},
|
||||
"font-family": "Poppins",
|
||||
};
|
||||
</script>
|
||||
<!--end::Global Config-->
|
||||
|
||||
<!--begin::Global Theme Bundle(used by all pages)-->
|
||||
<script src="assets/plugins/global/plugins.bundle.js"></script>
|
||||
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
|
||||
<script src="assets/js/scripts.bundle.js"></script>
|
||||
<!--end::Global Theme Bundle-->
|
||||
|
||||
<!--begin::Page Vendors(used by this page)-->
|
||||
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
|
||||
<!--end::Page Vendors-->
|
||||
|
||||
<!--begin::Page Scripts(used by this page)-->
|
||||
<script src="assets/js/pages/widgets.js"></script>
|
||||
<!--end::Page Scripts-->
|
||||
<script src="assets/js/iconify/iconify.min.js"></script>
|
||||
</body>
|
||||
<!--end::Body-->
|
||||
</html>
|
||||
Reference in New Issue
Block a user