Mercurial > titip

diff index.html @ 0:3c9ac4a429a5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Initial import.
author nanaya <me@myconan.net>
date Thu, 11 Jun 2015 16:43:21 +0900
parents
children b48d5c9c2ce8
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/index.html	Thu Jun 11 16:43:21 2015 +0900
@@ -0,0 +1,144 @@
+<!doctype html>
+<head>
+  <title>Kalkulator</title>
+  <meta name="viewport" content="width=device-width">
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+  <style type="text/css">
+    body {
+      font-size: 12px;
+      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+      line-height: 1.5;
+      margin: 0px;
+      background-color: #eee;
+    }
+    #content {
+      width: 100%;
+      min-height: 100vh;
+      padding: 10px;
+      margin: auto;
+      background-color: #fff;
+    }
+    @media (min-width: 600px) {
+      #content {
+        width: 500px;
+      }
+    }
+    * { box-sizing: border-box; }
+    ul { padding-left: 20px; }
+    #n, .js { display: none; }
+    input, button, select, option, .js { font-size: 150%; }
+  </style>
+</head>
+<body>
+  <div id="content">
+    <h1>Konversi buat nitip</h1>
+    <form>
+      <p>
+        <label for="x">Jumlah dalam yen:</label>
+        <br>
+        <input id="x" name="x" type="number" autofocus>
+      </p>
+      <p>
+        <button type="submit">Hitung</button>
+        <button type="reset">Hapus</button>
+      </p>
+    </form>
+    <div class="js" id="loading">
+      <p>Memuat data nilai tukar...</p>
+    </div>
+    <div class="js" id="ok">
+      <p>
+        Biaya:
+      </p>
+      <ul>
+        <li>
+          Bank transfer:
+          <span id="result-bank"></span> IDR
+          (<span id="rate-text"></span> IDR/JPY)
+        </li>
+        <li>
+          PayPal:
+          <span id="result-paypal"></span> JPY
+        </li>
+      </ul>
+    </div>
+    <div class="js" id="error">
+      <p>Koneksi ke server nilai tukar bermasalah.</p>
+    </div>
+
+    <hr>
+    <ul>
+      <li>Ongkir, cukai, dll tidak termasuk.</li>
+      <li>Berhubung sudah punya timbangan, ongkir (estimasi) bisa dihitung sebelum dikirim.</li>
+      <li><a href="http://www.post.japanpost.jp/int/charge/list/ems1_en.html">Tabel ongkir EMS</a>.</li>
+      <li>Perhitungan:
+        <ul>
+          <li>Bank: <code>jumlah &times; 1.07 &times; nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li>
+          <li>PayPal: <code>jumlah &times; 1.05</code>, dibulatkan ke satuan terdekat.</li>
+        </ul>
+      </li>
+      <li>Jangan lupa memastikan jumlah setelah pajak dan ongkir (lokal).</li>
+      <li>Data nilai tukar didapat dari layanan <a href="http://fixer.io/">Fixer.io</a>.</li>
+    </ul>
+
+    <pre id="n"><code>
+location = /calc {
+  root /home/edho/public_html;
+  try_files /calc.html =404;
+}
+location = /calc/get {
+  return 302 http://www.wolframalpha.com/input/?i=ceil%28%28$arg_x+*+1.07+jpy+in+idr%29%2F1000%29*1000;
+}
+    </code></pre>
+  </div>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+  <script>
+    // best javascript ahead. Proceed with care.
+    var
+      displayResult = function(x, rate) {
+        $("#rate-text").text(rate.toLocaleString())
+        $("#result-bank").text((Math.round(x * 1.07 * rate / 1000) * 1000).toLocaleString())
+        $("#result-paypal").text((Math.round(x * 1.05)).toLocaleString())
+        $("#ok").show()
+      },
+      loading = $("#loading"),
+      doButton = $("button[type=submit]"),
+      clearButton = $("button[type=reset]"),
+      unlock = function() {
+        loading.hide()
+        doButton.attr("disabled", false)
+      },
+      lock = function() {
+        loading.show()
+        doButton.attr("disabled", true)
+      },
+      xForm = $("#x"),
+      action = function(e) {
+        e.preventDefault()
+        $(".js").hide()
+        var x = parseFloat(xForm.val())
+        if (x === NaN || x === undefined) { return false; }
+
+        if (window.rate === undefined) {
+          lock()
+          $.getJSON("https://api.fixer.io/latest", { base: "JPY", symbols: "IDR" })
+          .done(function(data) {
+            window.rate = data.rates["IDR"]
+            displayResult(x, window.rate)
+          })
+          .fail(function() {
+            $("#error").show()
+          })
+          .always(function() {
+            unlock()
+          })
+        } else {
+          displayResult(x, window.rate)
+        }
+      }
+    clearButton.click(function(e) { xForm.focus() })
+    doButton.click(action)
+    $("form").submit(action)
+  </script>
+</body>