Mercurial > titip
diff index.html @ 0:3c9ac4a429a5
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 × 1.07 × nilai_tukar</code>, dibulatkan ke seribuan terdekat.</li> + <li>PayPal: <code>jumlah × 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>