diff --git a/static/assets/home/css/custom.css b/static/assets/home/css/custom.css index bf43cb0..3ed758d 100644 --- a/static/assets/home/css/custom.css +++ b/static/assets/home/css/custom.css @@ -1,3 +1,42 @@ +.custom-card { + margin-top: 25px; /* Menambahkan jarak atas antara card */ + margin-bottom: 25px; /* Menambahkan jarak bawah antara card */ + border: 1px solid rgba(123, 1, 217, 0.1); /* Menambahkan border dengan warna ungu muda */ + box-shadow: 0px 2px 4px rgba(123, 1, 217, 0.1); /* Menambahkan efek shadow */ + background-color: rgba(123, 1, 217, 0.1); /* Warna background ungu muda */ +} + +.custom-card .card-header { + background-color: #cb0c9f; /* Warna latar belakang header */ + color: white; /* Warna teks header */ + border-bottom: 1px solid #cb0c9f; /* Garis bawah header */ + border-radius: 10px 10px 0 0; /* Sudut bulat di bagian atas */ + text-align: center; /* Meletakkan teks di tengah */ + height: 60px; /* Atur tinggi header */ + display: flex; /* Menggunakan flexbox */ + align-items: center; /* Meletakkan item di tengah vertikal */ + justify-content: center; /* Meletakkan item di tengah horizontal */ +} + +.btn.custom-clear { + background-color: #cb0c9f; /* Warna latar belakang tombol */ + color: white; /* Warna teks tombol */ + border: none; /* Menghapus border */ + padding: 12px 24px; /* Padding untuk memberikan ruang di dalam tombol */ + border-radius: 5px; /* Sudut bulat */ + cursor: pointer; /* Menampilkan kursor tangan saat dihover */ + transition: background-color 0.3s ease; /* Transisi warna latar belakang */ + width: 20%; /* Lebar tombol agar mepet dengan card */ + margin-top: 10px; /* Jarak dari card body di atas tombol */ + margin-bottom: 10px; /* Jarak dari card body di bawah tombol */ + margin-left: auto; /* Menggeser tombol ke kanan */ +} + +.btn.custom-clear:hover { + background-color: #a00a86; /* Warna latar belakang saat hover */ +} + + diff --git a/static/assets/home/js/custom.js b/static/assets/home/js/custom.js index 104b03c..745ab3a 100644 --- a/static/assets/home/js/custom.js +++ b/static/assets/home/js/custom.js @@ -9,9 +9,6 @@ function clearImage() { $("#hasilDeteksi").hide(); $("#pie").hide(); // clearChartData(); - - - // Tambahkan pemanggilan AJAX untuk menghapus gambar $.ajax({ @@ -106,32 +103,21 @@ $(document).ready(function () { $("#hasilDeteksi").show(); $("#result").empty(); - var buttonClass = - label === "GIANT" ? "btn-sm" : "bg-gradient-dark" ; - - var penangananButtonLabel = - label === "GIANT" - ? "Tidak ada penanganan" - : "Terdeteksi " + label; - $("#result").append(`
- - -
-
Hasil:
-

Probabilitas Terbesar: ${highest_probability.toFixed(2)}%

-
- ${ - label === "GIANT" - ? `` - : `` - } -
-
- -
+ +
+
Hasil: ${label}
+

Probabilitas Terbesar: ${highest_probability.toFixed(2)}%

+ + +
+

Sistem mengidentifikasi bahwa objek yang dipilih termasuk kedalam kelas ${label}. Untuk penjelasan selengkapnya, dapat klik button berikut

+ + +
+ `); @@ -217,51 +203,6 @@ $(document).ready(function () { }); }); -//menampilkan keterangan penjelasan mengenai penyakit yang terdeteksi -function showPenjelasan(penyakit) { - var penjelasanContainer = document.getElementById("penjelasanContainer"); - - $.ajax({ - url: `/handing?clasify=${penyakit}`, - type: "GET", - success: function (response) { - let clasify = response.class; - let guides = response.data; - - console.log(penyakit) - var cardBody = penjelasanContainer.querySelector(".card-body"); - - let penjelasan = - `

${clasify} terdeteksi. Berikut adalah langkah-langkah penanganan yang dapat Anda lakukan:

`; - - guides.map((data, i) => { - penjelasan += "
  • " + data.text; - - if (data.image != null) { - penjelasan += - ""; - } - penjelasan += "
    • "; - }); - - penjelasan += "
    "; - cardBody.innerHTML = penjelasan; - penjelasanContainer.style.display = "block"; - }, - error: function (error) { - console.error(error); - }, - }); -} - - - -function closePenjelasan() { - var penjelasanContainer = document.getElementById("penjelasanContainer"); - penjelasanContainer.style.display = "none"; -} function clearChartData() { labels.length = 0; @@ -291,11 +232,15 @@ function showTutorial() { function nextSlide() { $('#tutorialCarousel').carousel('next'); } - //menutup modal tutorial - function closeModal() { - var modal = document.getElementById('tutorialModal'); - $('#tutorialModal').modal('hide'); - } + + // menutup modal crop +function closeCrop() { +document.getElementById("upload_image").value = ""; + $('#modal').modal('hide'); +} + + window.onload = function() { - showTutorial(); + showTutorial(); + document.getElementById("upload_image").value = ""; }; \ No newline at end of file diff --git a/templates/classification.html b/templates/classification.html index 02c9e48..b97dc6a 100644 --- a/templates/classification.html +++ b/templates/classification.html @@ -180,18 +180,18 @@
    -
    +
    Upload Gambar
    -
    - -
    - - -
    +
    + +
    + +
    +
    @@ -202,9 +202,7 @@
    Perhatian : Agar hasil deteksi lebih akurat, atur posisi pemangkasan (crop) dengan baik dan disarankan pada ukuran paling kecil crop
    - +
    @@ -221,7 +219,7 @@
    - +
    @@ -231,39 +229,20 @@
    -
    - - - - -