Untitled
unknown
plain_text
2 months ago
5.8 kB
3
Indexable
<?php // Inisialisasi variabel $bmi = isset($_GET['bmi']) ? $_GET['bmi'] : null; $category = isset($_GET['category']) ? $_GET['category'] : null; $error = isset($_GET['error']) ? $_GET['error'] : null; ?> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kalkulator BMI</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { min-height: 100vh; background: linear-gradient(135deg, #00416A, #E4E5E6); display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background: rgba(255, 255, 255, 0.95); padding: 35px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); width: 100%; max-width: 450px; position: relative; overflow: hidden; } .container::before { content: ''; position: absolute; top: 0; left: -50%; width: 100%; height: 5px; background: linear-gradient(90deg, #00416A, #E4E5E6); } h1 { text-align: center; color: #00416A; margin-bottom: 30px; font-size: 2.2em; font-weight: 600; position: relative; } .form-group { margin-bottom: 25px; position: relative; } label { display: block; margin-bottom: 10px; color: #2d3748; font-weight: 500; font-size: 1.1em; } input { width: 100%; padding: 15px; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 16px; transition: all 0.3s ease; background: #f8fafc; } input:focus { outline: none; border-color: #00416A; box-shadow: 0 0 10px rgba(0, 65, 106, 0.1); background: #fff; } button { width: 100%; padding: 15px; background: linear-gradient(135deg, #00416A, #0073b8); color: white; border: none; border-radius: 10px; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; } button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 65, 106, 0.3); } .result { margin-top: 30px; padding: 20px; border-radius: 10px; text-align: center; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .result h2 { color: #2d3748; margin-bottom: 15px; font-size: 1.5em; } .result p { color: #4a5568; font-size: 1.2em; margin: 10px 0; } .category-text { font-weight: 600; font-size: 1.3em; margin-top: 15px; } .result.kurus { background: #ebf8ff; border: 2px solid #4299e1; } .result.normal { background: #f0fff4; border: 2px solid #48bb78; } .result.kelebihan { background: #fffaf0; border: 2px solid #ed8936; } .result.obesitas { background: #fff5f5; border: 2px solid #f56565; } .error { background: #fff5f5; color: #c53030; padding: 15px; border-radius: 10px; text-align: center; margin-top: 20px; border: 2px solid #fc8181; } @media (max-width: 480px) { .container { padding: 20px; } h1 { font-size: 1.8em; } input { padding: 12px; } } </style> </head> <body> <div class="container"> <h1>Kalkulator BMI</h1> <form action="proses.php" method="POST"> <div class="form-group"> <label for="berat">Berat Badan (kg)</label> <input type="number" id="berat" name="berat" required step="0.1" placeholder="Masukkan berat badan"> </div> <div class="form-group"> <label for="tinggi">Tinggi Badan (m)</label> <input type="number" id="tinggi" name="tinggi" required step="0.01" placeholder="Masukkan tinggi badan"> </div> <button type="submit">Hitung BMI</button> </form> <?php if ($error): ?> <div class="error"> <p><?php echo htmlspecialchars($error); ?></p> </div> <?php endif; ?> <?php if ($bmi !== null && $category !== null): ?> <div class="result <?php echo strtolower(str_replace(' ', '-', $category)); ?>"> <h2>Hasil Perhitungan</h2> <p>BMI Anda: <strong><?php echo number_format($bmi, 2); ?></strong></p> <p class="category-text">Kategori: <strong><?php echo htmlspecialchars($category); ?></strong></p> </div> <?php endif; ?> </div> </body> </html>
Editor is loading...
Leave a Comment