TIF_E41201756/templates/index.html

555 lines
22 KiB
HTML

<!--
=========================================================
* Soft UI Design System - v1.0.9
=========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-design-system
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
* Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="./static/assets/home/img/ET.png">
<link rel="icon" type="image/png" href="./static/assets/home/img/ET.png">
<title>
Essenthrona
</title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
<!-- Nucleo Icons -->
<link href="./static/assets/home/css/nucleo-icons.css" rel="stylesheet" />
<link href="./static/assets/home/css/nucleo-svg.css" rel="stylesheet" />
<!-- Font Awesome Icons -->
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
<link href="./static/assets/home/css/nucleo-svg.css" rel="stylesheet" />
<!-- CSS Files -->
<link id="pagestyle" href="./static/assets/home/css/soft-design-system.css?v=1.0.9" rel="stylesheet" />
<!-- Nepcha Analytics (nepcha.com) -->
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
</head>
<body class="index-page">
<!-- Navbar Light -->
<nav
class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3">
<div class="container">
<a class="navbar-brand" href="/" target="_blank" >
<img src="../static/assets/home/img/ET.png" alt="Logo" style="height: 40px; width: auto; margin-right: 5px;"> Essenthrona
</a>
<!-- <a href="https://www.creative-tim.com/product/soft-ui-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block">Start Nowm</a> -->
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button" href="#home">
Home
<!-- <img src="../../static/assets/home/img/down-arrow-dark.svg" alt="down-arrow" class="nav-link"> -->
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button" href="#feature">
Feature
<!-- <img src="../../static/assets/home/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> -->
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button" href="#about">
About
<!-- <img src="../../static/assets/home/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> -->
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button" href="#team">
Team
<!-- <img src="../../static/assets/home/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> -->
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button" href="#contact">
Contact
<!-- <img src="../../static/assets/home/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> -->
</a>
</li>
</ul>
<!-- <ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="/classification" class="btn btn-sm bg-gradient-primary btn-round mb-0 me-1 ftco-animate" role="button">Start Now</a>
</li>
</ul> -->
</div>
</div>
</nav>
<!-- End Navbar -->
</div></div></div>
<!--header-->
<header class="header-2" id="home">
<div class="page-header min-vh-75 relative" style="background-image: url('./static/assets/home/img/bg/blood.jpg')">
<span class="mask bg-gradient-primary"></span>
<div class="container">
<div class="row">
<div class="col-lg-7 text-center mx-auto">
<h1 class="text-white pt-3 mt-n5">Essential Thrombocythemia Detection Disease</h1>
<p class="lead text-white mt-3">Empowering Pathologists with Advanced <br/> Image Based Diagnostics </p>
<div class="row">
<div class="col-lg-7 align-items-center mx-auto">
<a href="/classification" class="btn btn-sm bg-gradient-dark btn-round mb-0 me-1" role="button">Get Started</a>
</div>
</div>
</div>
</div>
</div>
<div class="position-absolute w-100 z-index-1 bottom-0">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 40" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="moving-waves">
<use xlink:href="#gentle-wave" x="48" y="-1" fill="rgba(255,255,255,0.40" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.35)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.25)" />
<use xlink:href="#gentle-wave" x="48" y="8" fill="rgba(255,255,255,0.20)" />
<use xlink:href="#gentle-wave" x="48" y="13" fill="rgba(255,255,255,0.15)" />
<use xlink:href="#gentle-wave" x="48" y="16" fill="rgba(255,255,255,0.95" />
</g>
</svg>
</div>
</div>
</header>
<div></div>
<!-- End header-->
<!-- -------- START Features w/ title and 3 infos -------- -->
<section class="py-6 pt-7" id="feature">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto text-center pb-4">
<!-- <h4 class="text-gradient text-primary">Social Analytics</h4> -->
<h2 class="text-gradient text-primary">Our Feature</h2>
<p class="lead">Provides identification features related to blood cell abnormality through input image detection that generates predictions </p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="p-3 text-center">
<div class="icon icon-shape bg-gradient-primary shadow mx-auto">
<i class="ni ni-single-02"></i>
</div>
<h5 class="mt-4">Image Detection</h5>
<p>Users can do identification using image data (peripheral blood smear image) in jpg/jpeg format.</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="p-3 text-center">
<div class="icon icon-shape bg-gradient-info shadow mx-auto">
<i class="ni ni-email-83"></i>
</div>
<h5 class="mt-4">Result</h5>
<p>The identification result is a class prediction with accuracy, nearest probability, and an explanation of the detection result.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mx-md-auto">
<div class="p-3 text-center">
<div class="icon icon-shape bg-gradient-warning shadow mx-auto">
<i class="ni ni-atom"></i>
</div>
<h5 class="mt-4">Unlimited to Use</h5>
<p>we do not limit the use of this identification system, so it is expected to help more in the identification process.</p>
</div>
</div>
</div>
</div>
</section>
<!-- -------- END Features w/ title and 3 infos -------- -->
<!-- About Us -->
<section class="py-7" id="about">
<div class="container">
<div class="row">
<div class="row justify-content-center text-center my-sm-5">
<h2 class="text-primary text-gradient mb-2">Essenthrona</h2>
<h6 class="text-dark mb-4">Essential Thrombocythemia Detection Disease</h6>
</div>
<div class="col-lg-5 col-md-6 mt-2 order-md-2 order-lg-1">
<div class="position-relative ms-md-2 mb-0 mb-md-7 mb-lg-0 d-none d-md-block d-lg-block d-xl-block h-75">
<img src="/static/assets/home/img/ET.png" class="w-85 border-radius-xl mt-0 ms-6 position-absolute" alt="">
</div>
</div>
<div class="col-lg-5 col-md-12 ms-6 mt-5 order-md-1 order-lg-1">
<div class="p-3 pt-0">
<p class="lead" style="text-align: justify;">We provide a system for identifying blood cell abnormalities in this case Platelets, through images of peripheral blood smear images.
The purpose of this detection system is to determine whether the identified cells belong to Normal Platelets, Giant Platelets or Leukocytes. <br> <br>
If the results show the presence of Giant platelets then there is a high probability of Essential Thrombocythemia disease being identified.</p>
<!-- <a href="javascript:;" class="text-dark icon-move-right">More about us
<i class="fas fa-arrow-right text-sm ms-1"></i>
</a> -->
</div>
</div>
</div>
</div>
</section>
<!-- END About us -->
<!-- Start session of Development Team -->
<section class="py-5" id="team">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto text-center mb-4">
<h3 class="text-gradient text-primary">The Development Team</h3>
<p class="font-weight-normal">Building The Future.</p>
</div>
</div>
<div class="row mt-lg-3 mt-0">
<div class="col-md-6">
<div class="card card-profile card-plain">
<div class="row">
<div class="col-lg-5">
<a href="javascript:;">
<div class="position-relative">
<div class="blur-shadow-image">
<img class="w-80 rounded-3 shadow-lg" src="../../static/assets/home/img/team1.jpg">
</div>
</div>
</a>
</div>
<div class="col-lg-7 ps-0 ">
<div class="card-body text-start">
<div class="p-md-0 pt-0">
<h5 class="font-weight-bolder mb-3">Zilvanhisna Emka Fitri, ST., MT</h5>
<p class="text-sm font-weight-bold mb-4">Dosen D4 Teknik Informatika <br> Politeknik Negeri Jember</p>
</div>
<button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
<i class="fab fa-whatsapp"></i>
</button>
<button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
<i class="fab fa-instagram"></i>
</button>
<button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
<i class="fab fa-github"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-profile card-plain">
<div class="row">
<div class="col-lg-5">
<a href="javascript:;">
<div class="position-relative">
<div class="blur-shadow-image">
<img class="w-80 rounded-3 shadow-lg" src="../../static/assets/home/img/team2.jpeg" alt="profile image">
</div>
</div>
</a>
</div>
<div class="col-lg-7 ps-0 ">
<div class="card-body text-start">
<div class="p-md-0 pt-0">
<h5 class="font-weight-bolder mb-3">Ir. Arizal Mujibtamala Nanda Imron, ST., MT</h5>
<p class="text-sm font-weight-bold mb-4">Dosen D4 Teknologi Rekayasa Elektronika <br> Universitas Negeri Jember</p>
</div>
<button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
<i class="fab fa-whatsapp"></i>
</button>
<button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
<i class="fab fa-instagram"></i>
</button>
<button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
<i class="fab fa-github"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-lg-5 mt-3">
<div class="col-md-6">
<div class="card card-profile card-plain">
<div class="row">
<div class="col-lg-5">
<a href="javascript:;">
<div class="position-relative">
<div class="blur-shadow-image">
<img class="w-80 rounded-3 shadow-lg" src="../../static/assets/home/img/team3.jpeg">
</div>
</div>
</a>
</div>
<div class="col-lg-7 ps-0">
<div class="card-body text-start">
<div class="p-md-0 pt-0">
<h5 class="font-weight-bolder mb-3">dr. Sylvia Viana Varanita, Sp.PK</h5>
<p class="text-sm font-weight-bold mb-4">Dokter Patologi Klinik <br>UOBK RSUD Asembagus Situbondo</p>
</div>
<button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
<i class="fab fa-whatsapp"></i>
</button>
<button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
<i class="fab fa-instagram"></i>
</button>
<button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
<i class="fab fa-github"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card card-profile card-plain">
<div class="row">
<div class="col-lg-5">
<a href="javascript:;">
<div class="position-relative">
<div class="blur-shadow-image">
<img class="w-80 rounded-3 shadow-lg" src="../../static/assets/home/img/team4.jpg">
</div>
</div>
</a>
</div>
<div class="col-lg-7 ps-0 ">
<div class="card-body text-start">
<div class="p-md-0 pt-0">
<h5 class="font-weight-bolder mb-3">Deni Catur Kusumawati</h5>
<p class="text-sm font-weight-bold mb-4">Mahasiswa D4 TI <br> Politeknik Negeri Jember</p>
</div>
<button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
<i class="fab fa-whatsapp"></i>
</button>
<button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
<i class="fab fa-instagram"></i>
</button>
<button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
<i class="fab fa-github"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END Teams -->
<!-- Footer-->
<footer class="footer pt-5 mt-5" id="contact">
<hr class="horizontal dark mb-5">
<div class="container">
<div class=" row">
<div class="col-md-3 mb-4 ms-auto">
<div>
<h6 class="text-gradient text-primary font-weight-bolder"> <a href="/">Essenthrona</a></h6>
</div>
<div>
<h6 class="mt-3 mb-2 opacity-8">Social</h6>
<ul class="d-flex flex-row ms-n3 nav">
<li class="nav-item">
<a class="nav-link pe-1" href="" target="_blank">
<i class="fab fa-whatsapp text-lg opacity-8"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link pe-1" href="" target="_blank">
<i class="fab fa-instagram text-lg opacity-8"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link pe-1" href="" target="_blank">
<i class="fab fa-facebook text-lg opacity-8"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 col-6 mb-4">
<div>
<h6 class="text-gradient text-primary text-sm">Class of Classification</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link" href="/giant" target="_blank">
Giant Trombosit
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/leukosit" target="_blank">
Leukosit
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/normal" target="_blank">
Normal Trombosit
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 col-6 mb-4">
<div>
<h6 class="text-gradient text-primary text-sm">Company</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link" href="#about" target="_blank">
About Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/" target="_blank">
Homepage
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 col-6 mb-4">
<div>
<h6 class="text-gradient text-primary text-sm">Help & Support</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link" href="https://wa.me/6285335764220?text=Halo%20saya%20ingin%20bertanya%20mengenai%20website%20anda" target="_blank">
Contact Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:Essenthrona@gmail.com">
Email
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-6 col-6 mb-4 me-auto">
<div>
<h6 class="text-gradient text-primary text-sm">Feature</h6>
<ul class="flex-column ms-n3 nav">
<li class="nav-item">
<a class="nav-link" href="/classification" target="_blank">
Image Classification
</a>
</li>
</ul>
</div>
</div>
<div class="col-12">
<div class="text-center">
<p class="my-4 text-sm">
All rights reserved. Copyright © 2024 Deni Catur Kusumawati.
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer-->
<!-- Core JS Files -->
<script src="./static/assets/home/js/core/popper.min.js" type="text/javascript"></script>
<script src="./static/assets/home/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="./static/assets/home/js/plugins/perfect-scrollbar.min.js"></script>
<!-- Plugin for TypedJS, full documentation here: https://github.com/inorganik/CountUp.js -->
<script src="./static/assets/home/js/plugins/countup.min.js"></script>
<script src="./static/assets/home/js/plugins/choices.min.js"></script>
<script src="./static/assets/home/js/plugins/prism.min.js"></script>
<script src="./static/assets/home/js/plugins/highlight.min.js"></script>
<!-- Plugin for Parallax, full documentation here: https://github.com/dixonandmoe/rellax -->
<script src="./static/assets/home/js/plugins/rellax.min.js"></script>
<!-- Plugin for TiltJS, full documentation here: https://gijsroge.github.io/tilt.js/ -->
<script src="./static/assets/home/js/plugins/tilt.min.js"></script>
<!-- Plugin for Selectpicker - ChoicesJS, full documentation here: https://github.com/jshjohnson/Choices -->
<script src="./static/assets/home/js/plugins/choices.min.js"></script>
<!-- Plugin for Parallax, full documentation here: https://github.com/wagerfield/parallax -->
<script src="./static/assets/home/js/plugins/parallax.min.js"></script>
<!-- Control Center for Soft UI Kit: parallax effects, scripts for the example pages etc -->
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
<script src="./static/assets/home/js/soft-design-system.min.js?v=1.0.9" type="text/javascript"></script>
<script type="text/javascript">
if (document.getElementById('state1')) {
const countUp = new CountUp('state1', document.getElementById("state1").getAttribute("countTo"));
if (!countUp.error) {
countUp.start();
} else {
console.error(countUp.error);
}
}
if (document.getElementById('state2')) {
const countUp1 = new CountUp('state2', document.getElementById("state2").getAttribute("countTo"));
if (!countUp1.error) {
countUp1.start();
} else {
console.error(countUp1.error);
}
}
if (document.getElementById('state3')) {
const countUp2 = new CountUp('state3', document.getElementById("state3").getAttribute("countTo"));
if (!countUp2.error) {
countUp2.start();
} else {
console.error(countUp2.error);
};
}
</script>
</body>
</html>