From c5b24cde5f4b9758f84c28b2122d317ca8dbe417 Mon Sep 17 00:00:00 2001
From: Robert <robert.trololo@gmail.com>
Date: Sun, 3 Jan 2021 01:46:34 +0100
Subject: [PATCH] added template

---
 templates/index.html | 62 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 templates/index.html
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 00000000..4cefe1ea
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        object {
+            position: absolute;
+        }
+
+        .on {
+            stroke: green;
+            cursor: pointer;
+        }
+
+        span {
+            display: inline-block;
+            width: 50vh;
+            height: 50vh;
+            background-size: cover;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+</head>
+<body>
+    <form action="{{ url_for('submit_kanji') }}" method="get">
+        <input type="text" name="kanji">
+        <input type="submit">
+    </form>
+    <span>
+        {{svg|safe}}
+    </span>
+
+    <script>
+        var allParts = $("svg > g > g > *");
+
+        allParts.on({
+            mouseenter: function () {
+                allParts.removeClass("on");
+                $(this).addClass("on");
+
+            },
+            mouseleave: function () {
+                $(this).removeClass("on");
+            },
+        });
+
+        allParts.click(function() {
+            window.location = "{{ url_for('submit_kanji') }}" + "?kanji=" + ((typeof $(this).attr("kvg:original") !== typeof undefined) ? $(this).attr("kvg:original") : $(this).attr("kvg:element"));
+        });
+
+    </script>
+</body>
+</html>
\ No newline at end of file
