From c2bdcc9cf0b2d49a741516979a4f1e6a8618634e Mon Sep 17 00:00:00 2001 From: zainidineafi Date: Sat, 2 Mar 2024 13:25:17 +0700 Subject: [PATCH] fix modal --- static/assets/home/css/custom.css | 171 +++++++++++++++++++++++++ static/assets/home/js/custom.js | 24 +++- templates/classification.html | 199 ++++++++++++++++-------------- 3 files changed, 298 insertions(+), 96 deletions(-) create mode 100644 static/assets/home/css/custom.css 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">