diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0fc100b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="id">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Penilaian Tugas Akhir</title>
+  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="css/bootstrap.min.css">
+  <style>
+    .input-nilai {
+      min-width: 71px;
+    }
+  </style>
+</head>
+
+<body>
+  <nav>
+    <div class="nav nav-tabs" id="nav-tab" role="tablist">
+      <a class="nav-item nav-link active" id="nav-dosen-tab" data-toggle="tab" href="#nav-dosen" role="tab"
+        aria-controls="nav-dosen" aria-selected="true">Dosen Penguji</a>
+      <a class="nav-item nav-link" id="nav-rekap-tab" data-toggle="tab" href="#nav-rekap" role="tab"
+        aria-controls="nav-rekap" aria-selected="false">Rekapitulasi</a>
+    </div>
+  </nav>
+  <div class="tab-content" id="nav-tabContent">
+    <div class="tab-pane fade show active" id="nav-dosen" role="tabpanel" aria-labelledby="nav-dosen-tab">
+      <div class="table-responsive">
+        <table class="table mt-1" id="form-dosen">
+          <thead>
+            <tr>
+              <th class="align-middle">Aspek</th>
+              <th class="align-middle">Nilai</th>
+              <th class="align-middle">Persentase</th>
+              <th class="align-middle">Tertimbang</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="align-middle">Presentasi dan Penampilan</td>
+              <td class="align-middle text-center">
+                <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                  max="100">
+              </td>
+              <td class="align-middle text-center">
+                <span>10</span>%
+              </td>
+              <td class="align-middle text-center output-hasil">0</td>
+            </tr>
+            <tr>
+              <td class="align-middle">Sistematika dan Format Laporan</td>
+              <td class="align-middle text-center">
+                <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                  max="100">
+              </td>
+              <td class="align-middle text-center">
+                <span>15</span>%
+              </td>
+              <td class="align-middle text-center output-hasil">0</td>
+            </tr>
+            <tr>
+              <td class="align-middle">Kualitas Hasil Penelitian</td>
+              <td class="align-middle text-center">
+                <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                  max="100">
+              </td>
+              <td class="align-middle text-center">
+                <span>35</span>%
+              </td>
+              <td class="align-middle text-center output-hasil">0</td>
+            </tr>
+            <tr>
+              <td class="align-middle">Kemampuan dan Penguasaan Materi</td>
+              <td class="align-middle text-center">
+                <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                  max="100" pattern="^\d*(\.\d{0,2})?$" step=".005">
+              </td>
+              <td class="align-middle text-center">
+                <span>40</span>%
+              </td>
+              <td class="align-middle text-center output-hasil">0</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td class="align-middle">
+                <button type="button" class="btn btn-primary btn-reload">Reset</button>
+              </td>
+              <td class="align-middle text-right">Total Nilai:</td>
+              <td class="align-middle text-center">100%</td>
+              <td class="align-middle text-center output-total">0</td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="nav-rekap" role="tabpanel" aria-labelledby="nav-rekap-tab">
+      <nav class="m-2">
+        <div class="nav nav-pills" id="pills-tab" role="tablist">
+          <a class="nav-item nav-link active" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab"
+            aria-controls="pills-two" aria-selected="true">3 Dosen</a>
+          <a class="nav-item nav-link" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab"
+            aria-controls="pills-three" aria-selected="false">4 Dosen</a>
+        </div>
+      </nav>
+      <div class="tab-content" id="pills-tabContent">
+        <div class="tab-pane fade show active" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
+          <div class="table-responsive">
+            <table class="table" id="form-rekap1">
+              <thead>
+                <tr>
+                  <th class="align-middle">Dosen</th>
+                  <th class="align-middle">Nilai</th>
+                  <th class="align-middle">Persentase</th>
+                  <th class="align-middle">Tertimbang</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="align-middle">Pembimbing</td>
+                  <td class="align-middle text-center">
+                    <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                      max="100">
+                  </td>
+                  <td class="align-middle text-center">
+                    <span>40</span>%
+                  </td>
+                  <td class="align-middle text-center output-hasil">0</td>
+                </tr>
+                <tr>
+                  <td class="align-middle">Penguji</td>
+                  <td class="align-middle text-center">
+                    <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                      max="100">
+                  </td>
+                  <td class="align-middle text-center">
+                    <span>30</span>%
+                  </td>
+                  <td class="align-middle text-center output-hasil">0</td>
+                </tr>
+                <tr>
+                  <td class="align-middle">Penguji</td>
+                  <td class="align-middle text-center">
+                    <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                      max="100">
+                  </td>
+                  <td class="align-middle text-center">
+                    <span>30</span>%
+                  </td>
+                  <td class="align-middle text-center output-hasil">0</td>
+                </tr>
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td class="align-middle">
+                    <button type="button" class="btn btn-primary btn-reload">Reset</button>
+                  </td>
+                  <td class="align-middle text-right">Total Nilai:</td>
+                  <td class="align-middle text-center">100%</td>
+                  <td class="align-middle text-center output-total">0</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+        <div class="tab-pane fade" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
+          <div class="table-responsive">
+            <table class="table" id="form-rekap2">
+              <thead>
+                <tr>
+                  <th class="align-middle">Dosen</th>
+                  <th class="align-middle">Nilai</th>
+                  <th class="align-middle">Persentase</th>
+                  <th class="align-middle">Tertimbang</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="align-middle">
+                    Pembimbing
+                  </td>
+                  <td class="align-middle text-center">
+                    <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                      max="100">
+                  </td>
+                  <td class="align-middle text-center">
+                    <span>40</span>%
+                  </td>
+                  <td class="align-middle text-center output-hasil">0</td>
+                </tr>
+                <tr>
+                  <td class="align-middle">Penguji</td>
+                  <td class="align-middle text-center">
+                    <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                      max="100">
+                  </td>
+                  <td class="align-middle text-center">
+                    <span>20</span>%
+                  </td>
+                  <td class="align-middle text-center output-hasil">0</td>
+                </tr>
+                <tr>
+                  <td class="align-middle">Penguji</td>
+                  <td class="align-middle text-center">
+                    <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                      max="100">
+                  </td>
+                  <td class="align-middle text-center">
+                    <span>20</span>%
+                  </td>
+                  <td class="align-middle text-center output-hasil">0</td>
+                </tr>
+                <tr>
+                  <td class="align-middle">Penguji</td>
+                  <td class="align-middle text-center">
+                    <input type="number" class="form-control form-control-lg text-center input-nilai" value="0" min="0"
+                      max="100">
+                  </td>
+                  <td class="align-middle text-center">
+                    <span>20</span>%
+                  </td>
+                  <td class="align-middle text-center output-hasil">0</td>
+                </tr>
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td class="align-middle">
+                    <button type="button" class="btn btn-primary btn-reload">Reset</button>
+                  </td>
+                  <td class="align-middle text-right">Total Nilai:</td>
+                  <td class="align-middle text-center">100%</td>
+                  <td class="align-middle text-center output-total">0</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="js/jquery.min.js"></script>
+  <script src="js/bootstrap.bundle.min.js"></script>
+  <script>
+    var scale = {};
+    $(function () {
+      $('.input-nilai').on('input', function () {
+        var input = $(this),
+            nilai = input.val(),
+            td = input.parent().next(),
+            persen = td.find('span').text(),
+            output = td.next(),
+            hasil = nilai * (persen / 100);
+        output.text(Math.round(hasil * 1000) / 1000);
+        nilaiTotal();
+      });
+      $('.btn-reload').click(function(){
+        location.reload();
+      });
+    });
+
+    function nilaiTotal() {
+      var totalNilaiDosen = 0,
+          totalRekap1 = 0,
+          totalRekap2 = 0;
+      $('#form-dosen .output-hasil').each(function () {
+        totalNilaiDosen += parseFloat($(this).text());
+      })
+      $('#form-rekap1 .output-hasil').each(function () {
+        totalRekap1 += parseFloat($(this).text());
+      })
+      $('#form-rekap2 .output-hasil').each(function () {
+        totalRekap2 += parseFloat($(this).text());
+      })
+      $('#form-dosen .output-total').text(bulatkan(totalNilaiDosen, 3));
+      $('#form-rekap1 .output-total').text(bulatkan(totalRekap1, 3));
+      $('#form-rekap2 .output-total').text(bulatkan(totalRekap2, 3));
+    }
+
+    function bulatkan(nilai, desimal) {
+      var faktor = Math.pow(10, desimal);
+      return Math.round(nilai * faktor) / faktor;
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
