433 lines
9.1 KiB
CSS
433 lines
9.1 KiB
CSS
/* Reset CSS untuk memastikan layout konsisten di berbagai browser */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Pengaturan background dan font */
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
background-color: #f4f6f9;
|
|
color: #333;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
|
|
/* Header Section */
|
|
header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* Card Layout */
|
|
.card-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
width: 22%;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s, transform 0.3s;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.card:hover {
|
|
background-color: #3498db;
|
|
color: rgb(0, 0, 0);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.card i {
|
|
font-size: 2rem;
|
|
margin-bottom: 15px;
|
|
color: #3498db;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.card p {
|
|
font-size: 1rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 3.5rem;
|
|
color: #3498db; /* Warna biru yang sesuai */
|
|
margin-right: 20px;
|
|
font-family: 'Roboto', sans-serif; /* Font modern */
|
|
font-weight: 600;
|
|
}
|
|
|
|
header img {
|
|
width: 150px; /* Ukuran gambar yang pas */
|
|
height: auto;
|
|
}
|
|
|
|
/* Textarea and select for prediction */
|
|
textarea {
|
|
width: 100%;
|
|
height: 150px;
|
|
padding: 12px;
|
|
font-size: 1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-size: 1rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #ddd;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Form Styling */
|
|
.predict-form {
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
/* Button Styling */
|
|
button {
|
|
width: 100%;
|
|
padding: 15px;
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
|
|
/* Styling untuk kolom hasil prediksi */
|
|
.prediction-result {
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.result-box {
|
|
background-color: #f0f8ff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
border: 1px solid #ddd;
|
|
font-size: 1.2rem;
|
|
color: #3498db;
|
|
animation: fadeIn 1s ease-in-out;
|
|
}
|
|
|
|
/* Animasi untuk hasil prediksi */
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Gambar untuk prediksi */
|
|
.predict-image {
|
|
width: 450px; /* Ukuran gambar lebih besar */
|
|
height: auto;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Responsif Design (Mobile-friendly) */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.card {
|
|
width: 80%; /* Membuat kartu lebih besar pada perangkat kecil */
|
|
}
|
|
|
|
/* Untuk ukuran gambar di perangkat kecil */
|
|
.predict-image {
|
|
width: 60%;
|
|
}
|
|
}
|
|
/* Atur container untuk prediksi agar tidak mengubah tata letak keseluruhan */
|
|
.predict-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Gambar ilustrasi prediksi */
|
|
.predict-image {
|
|
width: 100%;
|
|
max-width: 500px; /* Maksimal ukuran gambar */
|
|
height: auto;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Form prediksi */
|
|
.predict-form {
|
|
width: 800px;
|
|
max-width: auto; /* Batasi lebar form */
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* Container untuk prediksi */
|
|
.predict-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 40px;
|
|
margin-bottom: 50px; /* Memberikan ruang di bawah form */
|
|
margin-right: 250px;
|
|
}
|
|
|
|
/* Styling untuk hasil prediksi */
|
|
.prediction-result {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px; /* Memberikan ruang di atas hasil prediksi */
|
|
}
|
|
|
|
.result-box {
|
|
background-color: #f0f8ff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
border: 1px solid #ddd;
|
|
font-size: 1.2rem;
|
|
color: #3498db;
|
|
width: 80%; /* Membuat kotak hasil prediksi tidak terlalu besar */
|
|
text-align: center; /* Membuat teks di dalamnya berada di tengah */
|
|
}
|
|
|
|
/* Gambar untuk prediksi */
|
|
.predict-image {
|
|
width: 400px; /* Ukuran gambar sesuai */
|
|
height: auto;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Header section */
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2.5rem;
|
|
color: #3498db;
|
|
}
|
|
|
|
/* Card for accuracy results */
|
|
.accuracy-container {
|
|
display: flex;
|
|
justify-content: center; /* Center cards horizontally */
|
|
gap: 30px;
|
|
margin: 0 auto 50px; /* Center the container and add bottom margin */
|
|
width: 850px; /* Fixed width for larger screens */
|
|
flex-wrap: wrap; /* Allow the cards to wrap on smaller screens */
|
|
}
|
|
|
|
/* Card style */
|
|
.accuracy-card {
|
|
background-color: #f4f6f9;
|
|
padding: 15px; /* Reduced padding */
|
|
border-radius: 10px;
|
|
width: 250px; /* Reduced card width */
|
|
text-align: center;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Smaller shadow for a less heavy look */
|
|
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Card hover effect */
|
|
.accuracy-card:hover {
|
|
transform: translateY(-5px); /* Slightly smaller hover effect */
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Slightly smaller shadow on hover */
|
|
}
|
|
|
|
/* Title styling inside cards */
|
|
.accuracy-card h3 {
|
|
font-size: 1.4rem; /* Slightly smaller title */
|
|
color: #3498db;
|
|
margin-bottom: 10px; /* Reduced space between title and content */
|
|
}
|
|
|
|
/* Description styling inside cards */
|
|
.accuracy-card p {
|
|
font-size: 1.1rem; /* Reduced font size for description */
|
|
font-weight: bold;
|
|
color: #2ecc71; /* Green for positive accuracy */
|
|
margin-bottom: 15px; /* Add space after the paragraph */
|
|
}
|
|
|
|
/* Adjusting the layout for smaller screens */
|
|
@media (max-width: 768px) {
|
|
.accuracy-container {
|
|
flex-direction: column; /* Stack cards vertically on smaller screens */
|
|
align-items: center; /* Center align the cards */
|
|
}
|
|
|
|
.accuracy-card {
|
|
width: 90%; /* Take up most of the screen on smaller devices */
|
|
}
|
|
}
|
|
|
|
/* Footer styling */
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
font-size: 0.9rem;
|
|
color: #777;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
background-color: #f2f6fc;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 50px auto;
|
|
padding: 40px;
|
|
background-color: #ffffff;
|
|
border-radius: 20px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2.6rem;
|
|
color: #2c3e50;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.header-container {
|
|
display: flex; /* Use flexbox for alignment */
|
|
flex-direction: column; /* Stack header items vertically */
|
|
margin-bottom: 20px; /* Space below the header */
|
|
}
|
|
|
|
.back-button {
|
|
font-size: 1.5rem; /* Font size */
|
|
color: #3498db; /* Color */
|
|
display: inline-flex; /* Inline flex for icon and text alignment */
|
|
align-items: center; /* Center items vertically */
|
|
text-decoration: none; /* No underline */
|
|
margin: 20px 0; /* Vertical margin */
|
|
margin-top: auto;
|
|
margin-right: 1450px;
|
|
padding: 8px 16px; /* Add padding for button effect */
|
|
border: 1px solid #3498db; /* Border for button */
|
|
border-radius: 5px; /* Rounded corners */
|
|
background-color: rgba(52, 152, 219, 0.1); /* Light background */
|
|
transition: background-color 0.3s ease; /* Smooth transition for hover */
|
|
}
|
|
|
|
/* Hover effect */
|
|
.back-button:hover {
|
|
background-color: rgba(52, 152, 219, 0.2); /* Darker on hover */
|
|
}
|
|
|
|
/* Icon styling */
|
|
.back-button i {
|
|
margin-right: 8px; /* Space between icon and text */
|
|
}
|
|
|
|
|
|
/*Akurasi */
|
|
|
|
.accuracy-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.accuracy-card {
|
|
background: linear-gradient(135deg, #3498db, #8e44ad);
|
|
padding: 25px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
color: #fff;
|
|
width: 48%;
|
|
text-align: center;
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.accuracy-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.accuracy-card h2 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 15px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.accuracy-card p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.accuracy-card .accuracy-value {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
font-size: 1rem;
|
|
color: #777;
|
|
}
|