Add SVG option for icons

2017-10-15 11:31:29 +02:00
parent 0332cabb03
commit 4a7931077e
5 changed files with 138 additions and 13 deletions
@@ -0,0 +1,43 @@
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style-type: none;
+    display: inline-block;
+    width: 10em;
+    height: 10em;
+    padding: 0;
+    margin: 1em 0.3em;
+    overflow: hidden;
+    border: solid 1px black;
+    border-radius: 0.2em;
+}
+li:hover {
+    border-color: #888;
+    background-color: #ddf;
+}
+
+li h1 {
+    text-align: center;
+    font-size: 1em;
+    line-height: 1em;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 6.8em;
+    width: auto;
+    height: 6.8em;
+    margin: 0 auto;
+    
+    /*filter: invert(1) opacity(0.8);*/
+    filter: opacity(0.8);
+}
+
+body >h1,
+form {
+    text-align: center;
+}
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="svg.css">
+
+#macro(form)
+<form action="svg" method="post" enctype="multipart/form-data">
+    <h3>Upload SVG:</h3>
+    <p>
+        <input type="file" name="file" accept="image/svg+xml"><br/>
+        <input type="text" name="name" placeholder="name">
+        <input type="submit">
+    
+        #if($uploaded)
+        <i>Upload was successfull!</i>
+        #end
+    </p>
+</form>
+#end
+
+<a href="../" style="opacity:0.6;">Return to cardlist</a>
+
+#form()
+
+<h1>Available SVGs:</h1>
+
+<ul>
+#foreach($name in $svgs)
+    <li><!--todo: add "copy to clipboard" feature-->
+        <h1>$name</h1>
+        <img src="/svg/${escape_html($name)}.svg">
+    </li>
+#end
+</ul>
+
+#form()
+
+<a href="../" style="opacity:0.6;">Return to cardlist</a>