<!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" />

 <!-- Styles -->
 <link href="../static/assets/home/css/custom.css" rel="stylesheet">
 <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet"/> 

 <script src="https://unpkg.com/cropperjs"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 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="/">
    <div class="logo-container">
        <img src="../static/assets/home/img/ET.png" alt="Logo" style="height: 40px; width: auto; margin-right: 5px;">
        <span class="brand-text">Essenthrona</span>
    </div>
 </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="/classification">
          Detection 
        </a>
      </li>
      
      <li class="nav-item dropdown dropdown-hover mx-2">
        <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer dropdown-toggle align-items-center" href="javascript:;" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
          Classification
        </a>
        <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item border-radius-md" href="/giant">Giant Trombosit</a></li>
            <li><a class="dropdown-item border-radius-md" href="/leukosit">Leukosit</a></li>
            <li><a class="dropdown-item border-radius-md" href="/normal">Normal Trombosit</a></li>
        </ul>
        
      </li>
    </ul>
  </div>
</div>
</nav>
<!-- End Navbar -->
</div></div></div>

<!-- konten -->
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-7 mx-auto text-center mb-4 pt-3">
        <h2>Normal Class</h2>
        <p class="mb-2" style="text-align: justify;">
          The detection system classifies the largest probability of the detection result belonging to the <strong> Normal Class</strong> or Normal Platelet.
        </p>
      </div>

      <div class="col-lg-7 mx-auto text-center">
        <div class="card card-blog card-plain">
          <div class="position-relative col-lg-9 mx-auto">
            <a class="d-block blur-shadow-image">
              <img src="../static/assets/home/img/normalclass.png" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
            </a>
          </div>
          <div class="card-body px-0 pt-2">
            <p class="text-gradient text-primary font-weight-bold text-sm mb-4">Gambar mikroskopis dominan trombosit normal (Fitri dkk., 2017).</p>
            <a href="javascript:;"></a>
            <p class="mb-4" style="text-align: justify;">
              Platelets are cytoplasmic fragmentation of megakaryocytes, which are giant cells that form platelets. Based on macrothrombocytes, platelets are categorized as large if their diameter is more than 4 μm.
              The size of young platelets tends to be larger than old platelets. 
              The number of platelets in normal conditions on blood smears is 8-20 per visual field using 1000x magnification with the condition of platelets scattered or grouped (Noviana, 2021).
              Changes and activity of platelet count have an important effect on the possibility of various types of diseases (Ayu & Fathunnisa, t.t.). 
            </p>
            <p class="mb-4" style="text-align: justify;">
              Changes in platelet counts and variations in size can be detected by microscopic examination using peripheral blood smears, if the platelet count is abnormal it is referred to as a platelet abnormality.
              Platelet morphological abnormalities such as small platelets in Wiskott-Aldrich syndrome, giant platelets in some chronic myeloproliferative diseases, Benard Soulier syndrome and macrothrombocytopenia in gray platelet syndrome (Fitri et al., 2017).
            </p>
            
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
<!-- End -->


  
<!-- 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 src="../static/assets/home/js/soft-design-system.min.js"></script>
<script src="../static/assets/home/js/soft-design-system.min.js.map"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

<script src="../static/assets/home/js/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="../static/assets/home/js/plugins/cropper-master/cropper.min.js"></script>
<script src="../static/assets/home/js/custom.js"></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>