330 lines
10 KiB
HTML
330 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>IPKMatcher</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: "Helvetica Neue", sans-serif;
|
|
background-color: #f7ecda;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container {
|
|
text-align: center;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
padding: 20px;
|
|
background-color: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 32px;
|
|
color: #4c2e2e;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 16px;
|
|
color: #9c9c9c;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: left;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
color: #3e3e3e;
|
|
}
|
|
|
|
input, select {
|
|
padding: 12px;
|
|
margin-bottom: 20px;
|
|
border: none;
|
|
border-radius: 20px;
|
|
background-color: #c2bcb3;
|
|
color: #333;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: #888;
|
|
}
|
|
|
|
select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
|
|
background-repeat: no-repeat;
|
|
background-position-x: 95%;
|
|
background-position-y: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button {
|
|
padding: 12px;
|
|
border: none;
|
|
border-radius: 20px;
|
|
background-color: #4c2e2e;
|
|
color: white;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #3b2222;
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background-color: #ffe6e6;
|
|
border-radius: 10px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.debug-info {
|
|
background-color: #f0f8ff;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1><strong>IPKMatcher</strong></h1>
|
|
<p class="subtitle">Mulai tentukan karier Anda.</p>
|
|
|
|
<form id="recommendForm" action="/recommend" method="POST">
|
|
<label for="nama">Nama:</label>
|
|
<input type="text" id="nama" name="nama" placeholder="Masukkan Nama Anda" required value="">
|
|
|
|
<label for="ipk">IPK:</label>
|
|
<input type="number" id="ipk" name="ipk" step="0.01" min="0" max="4" placeholder="Masukkan IPK Anda" required>
|
|
|
|
<label for="jurusan">Jurusan:</label>
|
|
<select id="jurusan" name="jurusan" required>
|
|
<option value="" disabled selected>Pilih Jurusan</option>
|
|
<option value="teknik informatika">Teknik Informatika</option>
|
|
<option value="sistem informasi">Sistem Informasi</option>
|
|
<option value="matematika">Matematika</option>
|
|
<option value="teknik komputer">Teknik Komputer</option>
|
|
<option value="desain komunikasi visual">Desain Komunikasi Visual</option>
|
|
<option value="statistik">Statistik</option>
|
|
<option value="ilmu komputer">Ilmu Komputer</option>
|
|
</select>
|
|
|
|
<label for="keterampilan">Keterampilan:</label>
|
|
<select id="keterampilan" name="keterampilan" required>
|
|
<option value="" disabled selected>Pilih Keterampilan</option>
|
|
</select>
|
|
|
|
<label for="minat">Minat:</label>
|
|
<select id="minat" name="minat" required>
|
|
<option value="" disabled selected>Pilih Minat</option>
|
|
</select>
|
|
|
|
<button type="submit">Cari Rekomendasi</button>
|
|
</form>
|
|
|
|
{% if error %}
|
|
<div class="error">{{ error }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
const jurusanData = {
|
|
"teknik informatika": {
|
|
keterampilan: [
|
|
"Spreadsheet", "Python", "Analisis Data", "Visualisasi Data",
|
|
"Pengujian Perangkat Lunak", "Dokumentasi Kasus Uji", "Manajemen Waktu",
|
|
"HTML", "CSS", "Javascript", "Java", "Node.js", "SQL", "DevOps", "AWS", "Azure",
|
|
"React", "Angular", "Statistik", "Machine Learning", "Cloud Operation", "Ruby",
|
|
"Database", "Desain", "Pemrograman", "Keamanan Digital", "Troubleshooting",
|
|
"Kotlin", "Swift", "Objective-C", "R", "Preprocessing Data", "Penyebaran Model",
|
|
"Manajemen Proyek", "Pemahaman Operasi Bisnis", "Unity", "Unreal Engine", "C#", "C++"
|
|
],
|
|
minat: [
|
|
"Investigative (Analitis)", "Conventional (Terstruktur)", "Artistic (Kreatif)",
|
|
"Realistic (Praktis, Teknis)", "Enterprising (Memimpin)", "Social (Sosial)"
|
|
]
|
|
},
|
|
"sistem informasi": {
|
|
keterampilan: [
|
|
"Spreadsheet", "Python", "Analisis Data", "Visualisasi Data",
|
|
"Database", "SQL", "Manajemen Proyek", "Pemahaman Operasi Bisnis",
|
|
"Administrasi Jaringan", "Troubleshooting", "Dukungan Teknis Perangkat Keras dan Perangkat Lunak"
|
|
],
|
|
minat: ["Investigative (Analitis)", "Conventional (Terstruktur)", "Realistic (Praktis, Teknis)", "Social (Sosial)"]
|
|
},
|
|
"matematika": {
|
|
keterampilan: ["Spreadsheet", "Python", "Analisis Data", "Visualisasi Data", "Statistik", "Machine Learning", "R"],
|
|
minat: ["Investigative (Analitis)"]
|
|
},
|
|
"teknik komputer": {
|
|
keterampilan: [
|
|
"HTML", "CSS", "Javascript", "Python", "Java", "Node.js", "SQL", "DevOps", "AWS", "Azure",
|
|
"Cloud Operation", "Ruby", "Pemrograman", "Keamanan Digital", "Troubleshooting",
|
|
"Kotlin", "Swift", "Objective-C", "Administrasi Jaringan"
|
|
],
|
|
minat: ["Conventional (Terstruktur)", "Artistic (Kreatif)", "Realistic (Praktis, Teknis)", "Enterprising (Memimpin)"]
|
|
},
|
|
"desain komunikasi visual": {
|
|
keterampilan: ["HTML", "CSS", "Javascript", "React", "Angular", "Desain"],
|
|
minat: ["Artistic (Kreatif)"]
|
|
},
|
|
"statistik": {
|
|
keterampilan: ["Statistik", "Machine Learning", "Python", "R"],
|
|
minat: ["Investigative (Analitis)"]
|
|
},
|
|
"ilmu komputer": {
|
|
keterampilan: ["Database", "SQL"],
|
|
minat: ["Investigative (Analitis)"]
|
|
}
|
|
};
|
|
|
|
function updateDropdowns() {
|
|
const jurusanSelect = document.getElementById('jurusan');
|
|
const keterampilanSelect = document.getElementById('keterampilan');
|
|
const minatSelect = document.getElementById('minat');
|
|
const selectedJurusan = jurusanSelect.value;
|
|
|
|
// Reset dropdowns
|
|
keterampilanSelect.innerHTML = '';
|
|
minatSelect.innerHTML = '';
|
|
|
|
// Add default options
|
|
const defaultKeterampilanOption = document.createElement('option');
|
|
defaultKeterampilanOption.value = '';
|
|
defaultKeterampilanOption.text = 'Pilih Keterampilan';
|
|
defaultKeterampilanOption.disabled = true;
|
|
defaultKeterampilanOption.selected = true;
|
|
keterampilanSelect.appendChild(defaultKeterampilanOption);
|
|
|
|
const defaultMinatOption = document.createElement('option');
|
|
defaultMinatOption.value = '';
|
|
defaultMinatOption.text = 'Pilih Minat';
|
|
defaultMinatOption.disabled = true;
|
|
defaultMinatOption.selected = true;
|
|
minatSelect.appendChild(defaultMinatOption);
|
|
|
|
if (selectedJurusan && jurusanData[selectedJurusan]) {
|
|
const { keterampilan, minat } = jurusanData[selectedJurusan];
|
|
|
|
// Populate keterampilan
|
|
keterampilan.forEach(skill => {
|
|
const option = document.createElement('option');
|
|
option.value = skill.toLowerCase();
|
|
option.text = skill;
|
|
keterampilanSelect.appendChild(option);
|
|
});
|
|
|
|
// Populate minat
|
|
minat.forEach(interest => {
|
|
const option = document.createElement('option');
|
|
option.value = interest.toLowerCase();
|
|
option.text = interest;
|
|
minatSelect.appendChild(option);
|
|
});
|
|
}
|
|
}
|
|
|
|
// Form validation
|
|
document.getElementById('recommendForm').addEventListener('submit', function(event) {
|
|
const namaInput = document.getElementById('nama').value.trim();
|
|
const ipkInput = document.getElementById('ipk').value.trim();
|
|
const jurusanSelect = document.getElementById('jurusan').value;
|
|
const keterampilanSelect = document.getElementById('keterampilan').value;
|
|
const minatSelect = document.getElementById('minat').value;
|
|
|
|
console.log('Form submission data:', {
|
|
nama: namaInput,
|
|
ipk: ipkInput,
|
|
jurusan: jurusanSelect,
|
|
keterampilan: keterampilanSelect,
|
|
minat: minatSelect
|
|
});
|
|
|
|
// Check if all fields are filled
|
|
if (!namaInput) {
|
|
event.preventDefault();
|
|
alert('Nama harus diisi!');
|
|
return;
|
|
}
|
|
|
|
if (!ipkInput) {
|
|
event.preventDefault();
|
|
alert('IPK harus diisi!');
|
|
return;
|
|
}
|
|
|
|
// Validate IPK format
|
|
const ipkValue = ipkInput.replace(',', '.');
|
|
const ipk = parseFloat(ipkValue);
|
|
|
|
if (isNaN(ipk)) {
|
|
event.preventDefault();
|
|
alert('IPK harus berupa angka yang valid!');
|
|
return;
|
|
}
|
|
|
|
if (ipk < 0 || ipk > 4) {
|
|
event.preventDefault();
|
|
alert('IPK harus antara 0.0 dan 4.0!');
|
|
return;
|
|
}
|
|
|
|
if (!jurusanSelect) {
|
|
event.preventDefault();
|
|
alert('Harap pilih jurusan!');
|
|
return;
|
|
}
|
|
|
|
if (!keterampilanSelect) {
|
|
event.preventDefault();
|
|
alert('Harap pilih keterampilan!');
|
|
return;
|
|
}
|
|
|
|
if (!minatSelect) {
|
|
event.preventDefault();
|
|
alert('Harap pilih minat!');
|
|
return;
|
|
}
|
|
|
|
console.log('Form validation passed, submitting...');
|
|
});
|
|
|
|
// Initialize dropdowns on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateDropdowns();
|
|
});
|
|
|
|
// Update dropdowns when jurusan changes
|
|
document.getElementById('jurusan').addEventListener('change', updateDropdowns);
|
|
</script>
|
|
</body>
|
|
</html> |