denicaturkusumaw
/
TIF_E41201756
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix modal

This commit is contained in:
zainidineafi 2024-03-02 13:25:17 +07:00
parent 2d4839513e
commit c2bdcc9cf0
3 changed files with 298 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
static/assets/home/css/custom.css Normal file
View File

@ -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) */
}

24
static/assets/home/js/custom.js
View File

@ -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();
};

197
templates/classification.html
View File

@ -6,8 +6,8 @@
<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/apple-icon.png">
<link rel="icon" type="image/png" href="./static/assets/home/img/favicon.png">
<link rel="apple-touch-icon" sizes="76x76" href="../static/assets/home/img/apple-icon.png">
<link rel="icon" type="image/png" href="../static/assets/home/img/favicon.png">
<title>
@ -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">&times;</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>
<div class="modal-header">
<h5 class="modal-title">Tutorial</h5>
<button type="button" class="close" aria-label="Close" onclick="closeModal()">
<span aria-hidden="true">&times;</span>
</button>
<!-- 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>
</div>
<div class="modal-footer">
<!-- Tombol tutup modal -->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</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>
</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">