-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
193 lines (173 loc) · 9.37 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Korupsi</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
:root {
--bg-primary: #1D1E20;
--bg-secondary: #2E2E33;
--accent: #E89E00;
--text: #FFFFFFD6;
}
/* Override default datepicker colors */
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
opacity: 0.8;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 8px;
text-align: center;
}
</style>
</head>
<body style="background-color: var(--bg-primary); color: var(--text)">
<!-- Modal -->
<div id="warningModal" class="modal">
<div class="modal-content p-6 rounded-lg" style="background-color: var(--bg-secondary)">
<p class="text-xl mb-4">Maaf Anda terlalu kejam! 😢</p>
<button onclick="closeModal()" class="px-4 py-2 rounded" style="background-color: var(--accent); color: var(--bg-primary)">Tutup</button>
</div>
</div>
<div class="container mx-auto px-4 py-8">
<!-- Previous content remains the same until form script -->
<div class="max-w-4xl mx-auto p-4 mb-6 rounded" style="background-color:var(--bg-secondary);border-left: 4px solid var(--accent)">
<div class="flex items-center">
<i class="fas fa-info-circle text-blue-500 text-xl mr-2"></i>
<p class="font-medium">Disclaimer: Kalkulator Korupsi ini dibuat sebagai bentuk protes terhadap kasus Harvey Moeis. Dalam kasus tersebut, terdakwa telah merugikan negara sebesar 300 triliun rupiah namun hanya divonis 6,5 tahun penjara dan denda 1 miliar rupiah. Perhitungan dalam kalkulator ini menggunakan kasus tersebut sebagai acuan.</p>
</div>
</div>
<div class="max-w-4xl mx-auto rounded-lg p-6">
<h1 class="text-2xl font-bold text-center mb-6" style="color: var(--accent)">Kalkulator Korupsi</h1>
<form id="corruptionForm" class="space-y-4">
<div>
<label for="amount" class="block text-lg font-medium">Nominal Korupsi (dalam Triliun):</label>
<input type="number" id="amount" name="amount" placeholder="Masukkan nominal" value="300" class="w-full px-4 py-2 rounded-lg focus:outline-none focus:ring-2" style="background-color: var(--bg-primary); color: var(--text); border: 1px solid var(--accent)" required>
</div>
<div>
<label for="corruptionDate" class="block text-lg font-medium">Tanggal Korupsi:</label>
<input type="date" id="corruptionDate" name="corruptionDate" class="w-full px-4 py-2 rounded-lg focus:outline-none focus:ring-2" style="background-color: var(--bg-primary); color: var(--text); border: 1px solid var(--accent)" value="${new Date().toISOString().split('T')[0]}" required>
</div>
<button type="submit" class="w-full py-2 rounded-lg font-medium transition duration-300" style="background-color: var(--accent); color: var(--bg-primary)">Hitung</button>
</form>
<div id="result" class="mt-6 p-4 rounded-lg hidden">
<!-- Rest of the content remains the same -->
<h2 class="text-xl font-semibold mb-4 text-center" style="color: var(--accent)">Hasil Perhitungan</h2>
<div class="flex flex-col gap-4">
<div class="flex flex-col items-center p-4 rounded-lg shadow" style="background-color: var(--bg-secondary)">
<i class="fas fa-money-bill-wave text-green-500 text-4xl mb-2"></i>
<p class="font-medium">Nominal Korupsi</p>
<p id="totalProfit" class="text-lg font-semibold text-center break-words"></p>
</div>
<div class="flex flex-col items-center p-4 rounded-lg shadow" style="background-color: var(--bg-secondary)">
<i class="fas fa-gavel text-purple-500 text-4xl mb-2"></i>
<p class="font-medium">Vonis Penjara</p>
<p id="yearsInPrison" class="text-lg font-semibold"></p>
</div>
<div class="flex flex-col items-center p-4 rounded-lg shadow" style="background-color: var(--bg-secondary)">
<i class="fas fa-balance-scale text-red-500 text-4xl mb-2"></i>
<p class="font-medium">Denda</p>
<p id="fine" class="text-lg font-semibold"></p>
</div>
<div class="flex flex-col items-center p-4 rounded-lg shadow" style="background-color: var(--bg-secondary)">
<i class="fas fa-sack-dollar text-emerald-500 text-4xl mb-2"></i>
<p class="font-medium">Keuntungan</p>
<p id="profit" class="text-lg font-semibold"></p>
</div>
</div>
<div class="mt-6 p-4 rounded-lg shadow" style="background-color: var(--bg-secondary)">
<h3 class="text-lg font-medium" style="color: var(--accent)">Kesimpulan:</h3>
<p id="conclusion"></p>
</div>
</div>
</div>
</div>
<script>
const form = document.getElementById('corruptionForm');
const resultDiv = document.getElementById('result');
const totalProfitSpan = document.getElementById('totalProfit');
const yearsInPrisonSpan = document.getElementById('yearsInPrison');
const fineSpan = document.getElementById('fine');
const profitSpan = document.getElementById('profit');
const conclusionP = document.getElementById('conclusion');
const modal = document.getElementById('warningModal');
function showModal() {
modal.style.display = 'block';
}
function closeModal() {
modal.style.display = 'none';
}
// Close modal when clicking outside
window.onclick = function(event) {
if (event.target == modal) {
closeModal();
}
}
function formatNominal(nominal) {
const formatted = nominal.toLocaleString('id-ID', { style: 'currency', currency: 'IDR' });
if (nominal >= 1e12) {
const value = nominal / 1e12;
return `${formatted} (${Math.floor(value)} Triliun)`;
} else if (nominal >= 1e9) {
const value = nominal / 1e9;
return `${formatted} (${Math.floor(value)} Miliar)`;
} else {
const value = nominal / 1e6;
return `${formatted} (${Math.floor(value)} Juta)`;
}
}
form.addEventListener('submit', (e) => {
e.preventDefault();
const amount = parseFloat(document.getElementById('amount').value);
const corruptionDate = new Date(document.getElementById('corruptionDate').value);
if (isNaN(amount) || amount <= 0) {
alert('Masukkan nominal yang valid!');
return;
}
// Check if amount is greater than 1000 trillion
if (amount > 1000) {
showModal();
return;
}
const referenceAmount = 300; // 300 triliun
const referenceFine = 1e9; // Denda 1 miliar
const referenceYears = 6.5; // 6.5 tahun
const totalProfit = amount * 1e12;
const fine = referenceFine * (amount / referenceAmount);
const yearsInPrison = referenceYears * (amount / referenceAmount);
const totalDays = Math.floor(yearsInPrison * 365);
const years = Math.floor(totalDays / 365);
const months = Math.floor((totalDays % 365) / 30);
const days = totalDays % 30;
const releaseDate = new Date(corruptionDate);
releaseDate.setDate(releaseDate.getDate() + totalDays);
totalProfitSpan.textContent = formatNominal(totalProfit);
yearsInPrisonSpan.textContent = `${years} tahun, ${months} bulan, ${days} hari`;
fineSpan.textContent = formatNominal(fine);
const netProfit = totalProfit - fine;
profitSpan.textContent = formatNominal(netProfit);
conclusionP.innerHTML = `Jika anda korupsi sebesar <b>${formatNominal(totalProfit)}</b>, pada tanggal <b>${corruptionDate.toLocaleDateString('id-ID')}</b>, maka anda akan divonis selama <b>${years} tahun, ${months} bulan, ${days} hari</b>, denda <b>${formatNominal(fine)}</b> dan akan bebas kembali pada tanggal <b>${releaseDate.toLocaleDateString('id-ID')}</b>.<br><br>Jadi anda masih memiliki uang sebesar <b>${formatNominal(netProfit)}</b> setelah Anda bebas.`;
resultDiv.classList.remove('hidden');
});
</script>
</body>
</html>