From 0c89936c4e4d361d56a4ad99980ff8fb3bf4ba10 Mon Sep 17 00:00:00 2001
From: Lalu Ahmad Ardiansyah <40919002+laluardian@users.noreply.github.com>
Date: Fri, 2 Oct 2020 00:15:47 +0800
Subject: [PATCH] Create index-ID.html

---
 index-ID.html | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 index-ID.html
diff --git a/index-ID.html b/index-ID.html
new file mode 100644
index 0000000..6501b3c
--- /dev/null
+++ b/index-ID.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-54918754-3"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-54918754-3');
+  </script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simulator Buta Warna</title>
+  <link rel="stylesheet" href="css/destyle.css">
+  <link rel="stylesheet" href="css/style.css">
+  <link href="https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" rel="stylesheet">
+</head>
+
+<body>
+  <!-- Filter definitions -->
+  <svg id="colorblind-filters" style="display:none;">
+    <defs>
+      <filter id="protanomaly">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix" 
+          values="0.817 0.183 0 0 0
+                  0.333 0.667 0 0 0
+                  0 0.125 0.875 0 0
+                  0 0 0 1 0" />
+      </filter>
+      <filter id="protanopia">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix"
+          values="0.567 0.433 0 0 0
+                  0.558 0.442 0 0 0
+                  0 0.242 0.758 0 0 
+                  0 0 0 1 0"  />
+      </filter>
+      <filter id="deuteranomaly">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix"
+          values="0.8 0.2 0 0 0
+                  0.258 0.742 0 0 0
+                  0 0.142 0.858 0 0
+                  0 0 0 1 0"  />
+      </filter>
+      <filter id="deuteranopia">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix"
+          values="0.625 0.375 0 0 0
+                  0.7 0.3 0 0 0 
+                  0 0.3 0.7 0 0
+                  0 0 0 1 0" />
+      </filter>
+      <filter id="tritanomaly">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix"
+          values="0.967 0.033 0 0 0
+                  0 0.733 0.267 0 0
+                  0 0.183 0.817 0 0
+                  0 0 0 1 0"  />
+      </filter>
+      <filter id="tritanopia">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix"
+          values="0.95 0.05 0 0 0
+                  0 0.433 0.567 0 0
+                  0 0.475 0.525 0 0
+                  0 0 0 1 0"  />
+      </filter>
+      <filter id="achromatomaly">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix"
+          values="0.618 0.320 0.062 0 0
+                  0.163 0.775 0.062 0 0
+                  0.163 0.320 0.516 0 0
+                  0 0 0 1 0"  />
+      </filter>
+      <filter id="achromatopsia">
+        <feColorMatrix in="SourceGraphic"
+          type="matrix"
+          values="0.299 0.587 0.114 0 0
+                  0.299 0.587 0.114 0 0
+                  0.299 0.587 0.114 0 0
+                  0 0 0 1 0"  />
+      </filter>
+    </defs>
+  </svg>
+  <header>
+    <h1>Simulator Buta Warna</h1>
+  </header>
+  <main>
+    <section id="explanation">
+      <p>Apakah anda butuh cara cepat untuk memastikan desain/diagram/gambar anda ramah untuk para penderita buta warna?</p>
+      <p>Gunakan simulator ini untuk mengathui apakah warna pilihan anda dapat mempertahankan efek yang sama untuk berbagai jenis penglihatan.</p>
+      <p>Hasil simulasi dapat anda unduh untuk dijadikan sebagai pedoman di masa depan.</p>
+    </section>
+    <div id="file-input">
+      <h2><span class="emphasized">Step 1.</span> Pilih gambar</h2>
+      <input type="file" id="img-picker" accept="image/*">
+      <p>Gambar yang anda pilih akan menggantikan gambar-gambar di bawah ini.</p>
+    </div>
+    <div id="download-button">
+      <h2><span class="emphasized">Step 2.</span> Klik tombol di bawah ini untuk mengunduh hasil simulasi.</h2>
+      <button onclick="downloadGallery()">Unduh Simulasi</button>
+    </div>
+    <a href="" id="blank" style="display: none"></a>
+    <div id="gallery">
+      <figure>
+        <figcaption>Normal</figcaption>
+        <img id="normalImg" src="./img/conical-gradient.png" alt="Uploaded normal image" style="width: 300px; height: auto;">
+      </figure>
+      <figure>
+        <figcaption>protanomali</figcaption><img src="./img/conical-gradient.png" class="img--protanomaly" style="width: 300px; height: auto;"></figure>
+      <figure>
+        <figcaption>protanopia</figcaption><img src="./img/conical-gradient.png" class="img--protanopia" style="width: 300px; height: auto;"></figure>
+      <figure>
+        <figcaption>deuteranomali</figcaption><img src="./img/conical-gradient.png" class="img--deuteranomaly" style="width: 300px; height: auto;"></figure>
+      <figure>
+        <figcaption>deuteranopia</figcaption><img src="./img/conical-gradient.png" class="img--deuteranopia" style="width: 300px; height: auto;"></figure>
+      <figure>
+        <figcaption>tritanomali</figcaption><img src="./img/conical-gradient.png" class="img--tritanomaly" style="width: 300px; height: auto;"></figure>
+      <figure>
+        <figcaption>tritanopia</figcaption><img src="./img/conical-gradient.png" class="img--tritanopia" style="width: 300px; height: auto;"></figure>
+      <figure>
+        <figcaption>achromatomali</figcaption><img src="./img/conical-gradient.png" class="img--achromatomaly" style="width: 300px; height: auto;"></figure>
+      <figure>
+        <figcaption>achromatopsia</figcaption><img src="./img/conical-gradient.png" class="img--achromatopsia" style="width: 300px; height: auto;"></figure>
+    </div>
+  </main>
+  <footer>
+    <p>Dibuat dengan 🤍 oleh <a href="https://laura.rochaprado.com" target="_blank" rel="noopener noreferrer">LRP</a> &middot 2020</p>
+    <!-- <a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/arbolitoloco"><img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span style="margin:5px;font-size:19px !important;">Buy me a coffee</span></a> -->
+  </footer>
+
+</body>
+<script src="js/html2canvas.min.js"></script>
+<script src="js/filters.js"></script>
+
+</html>
