diff --git a/static/assets/home/css/custom.css b/static/assets/home/css/custom.css
new file mode 100644
index 0000000..67f8731
--- /dev/null
+++ b/static/assets/home/css/custom.css
@@ -0,0 +1,171 @@
+
+
+
+
+#result {
+ text-align: center;
+}
+
+.sample-image {
+ max-width: 100%;
+ max-height: 100%;
+ display: block;
+ margin: 0 auto;
+}
+
+#image {
+ display: block;
+ margin: 0 auto;
+}
+
+
+.image_area {
+ position: relative;
+ }
+
+img {
+ display: block;
+ max-width: 100%;
+ max-height:100%;
+}
+
+.preview {
+ overflow: hidden;
+ width: 260px;
+ height: 260px;
+ margin: 10px;
+ border: 1px solid red;
+}
+
+.modal-lg{
+ max-width: 1000px !important;
+}
+
+.overlay {
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ right: 0;
+ background-color: rgba(255, 255, 255, 0.5);
+ overflow: hidden;
+ height: 0;
+ transition: .5s ease;
+ width: 100%;
+}
+
+.image_area:hover .overlay {
+ height: 50%;
+ cursor: pointer;
+}
+
+.text {
+ color: #333;
+ font-size: 20px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ text-align: center;
+}
+
+#penjelasanContainer {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 9999;
+ display: none;
+}
+
+.pop-card {
+ background-color: #ffffff !important; /* Ganti warna latar belakang menjadi hitam */
+ border: 1px solid #75a05d;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ position: relative;
+ z-index: 9998;
+}
+
+.pop-card .card-header {
+ background-color: #75a05d; /* Warna latar belakang header */
+ color: white; /* Warna teks header */
+ border-bottom: 1px solid #75a05d; /* Garis bawah header */
+ border-radius: 10px 10px 0 0; /* Sudut bulat di bagian atas */
+ text-align: center; /* Meletakkan teks di tengah */
+ position: relative;
+}
+
+.pop-card .card-body {
+ padding: 20px; /* Ruang dalam tubuh kartu */
+}
+
+.close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ font-size: 30px;
+ font-weight: bold;
+ color: #000; /* Adjust the color as needed */
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+
+.card canvas {
+width: auto; /* Lebar canvas */
+height: auto; /* Tinggi canvas menyesuaikan */
+display: block; /* Memastikan elemen canvas menjadi block element */
+}
+
+.card canvas {
+width: 200px; /* Lebar pie chart */
+height: 200px; /* Tinggi pie chart */
+}
+
+
+.title_cs {
+text-align: center;
+margin-top: 80px; /* Jarak dari bagian atas */
+margin-bottom: 80px; /* Jarak ke elemen di bawahnya */
+}
+
+.title_cs h1 {
+color: #037AFB;
+font-size: 32px;
+}
+
+
+
+.image-container {
+display: flex;
+justify-content: center;
+align-items: center;
+/* Untuk posisi tengah di halaman, bisa gunakan height: 100vh; pada container jika perlu */
+}
+
+.centered-image {
+max-width: auto;
+height: auto;
+/* Atur properti lainnya sesuai kebutuhan */
+}
+
+/* CSS untuk mengubah warna ikon panah menjadi hijau muda */
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+color: #037AFB;/* Ubah warna sesuai dengan hijau muda yang diinginkan */
+/* Jika ikon panah berupa SVG atau gambar, kamu perlu menyesuaikan properti ini */
+filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%);
+}
+
+/* Jika butuh mengubah warna latar belakang dari panah, bisa ditambahkan properti berikut */
+.carousel-control-prev,
+.carousel-control-next {
+background-color: transparent; /* Untuk membuat latar belakang menjadi transparan */
+color: #037AFB; /* Untuk mengubah warna panah (jika menggunakan teks) */
+}
+
+
+
diff --git a/static/assets/home/js/custom.js b/static/assets/home/js/custom.js
index 99f5e94..e888b89 100644
--- a/static/assets/home/js/custom.js
+++ b/static/assets/home/js/custom.js
@@ -266,11 +266,33 @@ function clearChartData() {
}
+$(document).ready(function(){
+ $('#tutorialCarousel').carousel();
+});
+
function showTutorial() {
$('#tutorialModal').modal('show'); // Tampilkan modal
}
+ // Fungsi untuk menutup modal
+ function closeModal() {
+ $('#tutorialModal').modal('hide');
+ }
+ // Fungsi untuk slide ke slide sebelumnya
+ function prevSlide() {
+ $('#tutorialCarousel').carousel('prev');
+ }
+
+ // Fungsi untuk slide ke slide berikutnya
+ function nextSlide() {
+ $('#tutorialCarousel').carousel('next');
+ }
+
+ function closeModal() {
+ var modal = document.getElementById('tutorialModal');
+ $('#tutorialModal').modal('hide');
+ }
window.onload = function() {
- showTutorial();
+ showTutorial();
};
\ No newline at end of file
diff --git a/templates/classification.html b/templates/classification.html
index 6796e4c..afbc142 100644
--- a/templates/classification.html
+++ b/templates/classification.html
@@ -6,8 +6,8 @@
-
-
+
+
@@ -20,19 +20,26 @@
<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" />
-
+<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" />
+<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">
@@ -82,96 +89,94 @@ class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3">
<!-- Modal untuk menampilkan tutorial -->
<div class="modal" id="tutorialModal" tabindex="-1" role="dialog">
- <div class="modal-dialog modal-lg" role="document">
+ <div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
- <div class="modal-header">
- <h5 class="modal-title">Tutorial</h5>
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- <div class="modal-body">
- <div id="tutorialCarousel" class="carousel slide" data-ride="carousel">
- <!-- Indicators -->
- <ul class="carousel-indicators">
- <li data-target="#tutorialCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#tutorialCarousel" data-slide-to="1"></li>
- <li data-target="#tutorialCarousel" data-slide-to="2"></li>
- <li data-target="#tutorialCarousel" data-slide-to="3"></li>
- </ul>
-
- <!-- Wrapper for slides -->
- <div class="carousel-inner">
- <!-- Langkah 1 -->
- <div class="carousel-item active">
- <div class="text-center">
- <h3>Langkah 1</h3>
- <div class="image-container">
- <img src="../../static/assets/home/img/anastasia.jpg" alt="Langkah 1" class="centered-image">
- </div>
- <br>
- <h5>Tekan tombol "Choose File"</h5>
- </div>
- </div>
-
- <div class="carousel-item">
- <div class="text-center">
- <h3>Langkah 2</h3>
- <div class="image-container">
- <img src="../../static/assets/home/img/anastasia.jpg" alt="Langkah 2" class="centered-image">
- </div>
- <br>
- <h5>Memilih gambar yang akan di identifikasi</h5>
- </div>
- </div>
-
- <div class="carousel-item">
- <div class="text-center">
- <h3>Langkah 3</h3>
- <div class="image-container">
- <img src="../../static/assets/home/img/anastasia.jpg" alt="Langkah 3" class="centered-image">
- </div>
- <br>
- <h5>Memposisikan tempat posisi penyakit pada daun kopi</h5>
- </div>
- </div>
-
- <div class="carousel-item">
- <div class="text-center">
- <h3>Langkah 4</h3>
- <div class="image-container">
- <img src="../../static/assets/home/img/anastasia.jpg" alt="Langkah 4" class="centered-image">
- </div>
- <br>
- <h5>Membaca hasil penanganan dan chart probabilitas</h5>
- </div>
- </div>
-
- <!-- Tambahkan langkah-langkah selanjutnya dengan struktur yang sama -->
- </div>
-
- <br>
- <!-- Left and right controls -->
- <a class="carousel-control-prev" href="#tutorialCarousel" role="button" data-slide="prev">
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
- <span class="sr-only">Previous</span>
- </a>
- <a class="carousel-control-next" href="#tutorialCarousel" role="button" data-slide="next">
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
- <span class="sr-only">Next</span>
- </a>
+ <div class="modal-header">
+ <h5 class="modal-title">Tutorial</h5>
+ <button type="button" class="close" aria-label="Close" onclick="closeModal()">
+ <span aria-hidden="true">×</span>
+ </button>
+
+ </div>
+ <div class="modal-body">
+ <div id="tutorialCarousel" class="carousel slide" data-ride="carousel">
+ <!-- Indicators -->
+ <ul class="carousel-indicators">
+ <li data-target="#tutorialCarousel" data-slide-to="0" class="active"></li>
+ <li data-target="#tutorialCarousel" data-slide-to="1"></li>
+ <li data-target="#tutorialCarousel" data-slide-to="2"></li>
+ <li data-target="#tutorialCarousel" data-slide-to="3"></li>
+ </ul>
+
+ <!-- Wrapper for slides -->
+ <div class="carousel-inner">
+ <!-- Langkah 1 -->
+ <div class="carousel-item active">
+ <div class="text-center">
+ <h3>Langkah 1</h3>
+ <div class="image-container">
+ <img src="../static/assets/home/img/anastasia.jpg" alt="Langkah 1" class="centered-image">
+ </div>
+ <br>
+ <h5>Tekan tombol "Choose File"</h5>
+ </div>
+ </div>
+ <div class="carousel-item ">
+ <div class="text-center">
+ <h3>Langkah 2</h3>
+ <div class="image-container">
+ <img src="../static/assets/home/img/anastasia.jpg" alt="Langkah 2" class="centered-image">
+ </div>
+ <br>
+ <h5>Tekan tombol "Choose File"</h5>
+ </div>
+ </div>
+ <div class="carousel-item ">
+ <div class="text-center">
+ <h3>Langkah 3</h3>
+ <div class="image-container">
+ <img src="../static/assets/home/img/anastasia.jpg" alt="Langkah 3" class="centered-image">
+ </div>
+ <br>
+ <h5>Tekan tombol "Choose File"</h5>
+ </div>
+ </div>
+ <div class="carousel-item ">
+ <div class="text-center">
+ <h3>Langkah 4</h3>
+ <div class="image-container">
+ <img src="../static/assets/home/img/anastasia.jpg" alt="Langkah 4" class="centered-image">
+ </div>
+ <br>
+ <h5>Tekan tombol "Choose File"</h5>
+ </div>
+ </div>
+
+ <!-- Tambahkan langkah-langkah selanjutnya dengan struktur yang sama -->
+ </div>
+
+ <!-- Left and right controls -->
+ <a class="carousel-control-prev" href="#tutorialCarousel" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#tutorialCarousel" role="button" data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <!-- Tombol tutup modal -->
+ <button type="button" class="btn btn-secondary" onclick="closeModal()">Tutup</button>
</div>
- </div>
- <div class="modal-footer">
- <!-- Tombol tutup modal -->
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
- </div>
</div>
- </div>
+ </div>
</div>
<!-- End Modal -->
+
<!-- -------- START Features Detection -------- -->
<div class="container">
<div class="content mt-3">
@@ -468,12 +473,16 @@ class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3">
<!-- 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="./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 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">