diff --git a/README.md b/README.md
index 4b3496d..a2ea75b 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,163 @@
-# beban_untuk_keledai
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+<title>Penghitung Beban Keledai</title>
+<style>
+  /* Reset and base */
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  body {
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #a8dadc, #457b9d);
+    color: #1d3557;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 600px;
+    max-width: 350px;
+    margin: auto;
+    padding: 1rem;
+  }
+  .container {
+    background-color: #f1faee;
+    border-radius: 1rem;
+    padding: 2rem;
+    width: 100%;
+    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  h1 {
+    margin-bottom: 0.25rem;
+    font-weight: 700;
+    font-size: 1.8rem;
+    color: #1d3557;
+  }
+  p.subtitle {
+    margin-top: 0;
+    color: #457b9d;
+    font-weight: 500;
+    font-size: 1rem;
+    margin-bottom: 2rem;
+  }
+  label {
+    font-weight: 600;
+    font-size: 1rem;
+    align-self: flex-start;
+    margin-bottom: 0.25rem;
+  }
+  input[type="number"] {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: 1.1rem;
+    border: 2px solid #a8dadc;
+    border-radius: 0.5rem;
+    transition: border-color 0.3s ease;
+  }
+  input[type="number"]:focus {
+    outline: none;
+    border-color: #1d3557;
+  }
+  button {
+    margin-top: 1.5rem;
+    background-color: #1d3557;
+    color: #f1faee;
+    border: none;
+    padding: 0.75rem 1.25rem;
+    font-size: 1.1rem;
+    font-weight: 700;
+    border-radius: 0.7rem;
+    cursor: pointer;
+    width: 100%;
+    transition: background-color 0.3s ease;
+  }
+  button:hover,
+  button:focus {
+    background-color: #457b9d;
+  }
+  .result {
+    margin-top: 2rem;
+    font-weight: 700;
+    font-size: 1.25rem;
+    text-align: center;
+    min-height: 2rem;
+  }
+  .safe {
+    color: #2a9d8f;
+  }
+  .warning {
+    color: #e63946;
+  }
+  @media (max-width: 400px) {
+    .container {
+      padding: 1rem;
+    }
+  }
+</style>
+</head>
+<body>
+  <div class="container" role="main" aria-live="polite">
+    <h1>Beban Maksimal Keledai</h1>
+    <p class="subtitle">Hitung apakah beban yang akan dibawa aman untuk keledai Anda.</p>
+    <form id="load-form" onsubmit="return false;">
+      <label for="weightInput">Masukkan berat beban (kg):</label>
+      <input
+        type="number"
+        id="weightInput"
+        name="weightInput"
+        min="1"
+        max="200"
+        placeholder="Contoh: 50"
+        required
+        aria-describedby="weightHelp"
+        inputmode="numeric"
+      />
+      <small id="weightHelp" style="color:#555; font-size:0.85rem;">Beban aman maksimal sekitar 50kg - 70kg (tergantung ukuran keledai)</small>
+      <button type="submit" id="calculateBtn">Hitung</button>
+    </form>
+    <div id="result" class="result" aria-live="assertive"></div>
+  </div>
+
+  <script>
+    (function(){
+      const form = document.getElementById('load-form');
+      const input = document.getElementById('weightInput');
+      const resultDiv = document.getElementById('result');
+
+      // Typical safe weight range for donkeys varies, often around 50kg-70kg
+      const safeWeightMin = 50;
+      const safeWeightMax = 70;
+
+      form.addEventListener('submit', () => {
+        const weight = parseFloat(input.value);
+        if (isNaN(weight) || weight < 1) {
+          resultDiv.textContent = "Tolong masukkan angka berat beban yang valid.";
+          resultDiv.className = "result warning";
+          return;
+        }
+        if (weight <= safeWeightMax) {
+          resultDiv.textContent = `Aman! Beban ${weight} kg sesuai untuk keledai Anda.`;
+          resultDiv.className = "result safe";
+        } else {
+          resultDiv.textContent = `PERINGATAN! Beban ${weight} kg terlalu berat untuk keledai Anda. Kurangi beban!`;
+          resultDiv.className = "result warning";
+        }
+      });
+
+      // Accessibility: Clear result on input change
+      input.addEventListener('input', () => {
+        resultDiv.textContent = '';
+        resultDiv.className = 'result';
+      });
+    })();
+  </script>
+</body>
+</html>
+
+
 
