added info page

5 files changed, 237 insertions, 2 deletions

diff --git a/main.py b/main.py
index 4cdb43e..18811b9 100644
--- a/main.py
+++ b/main.py
@@ -40,6 +40,13 @@ def create_app(test_config=None):
     api = Api(app)
     CORS(app, resources={r"/api/*": {"origins": utils.get_allow_origin_header_value()}})
 
+    @app.route('/info')
+    def info():
+        get_supported_extensions()
+        return render_template(
+            'info.html', extensions=get_supported_extensions()
+        )
+
     @app.route('/download/<string:key>/<string:filename>')
     def download_file(key: str, filename: str):
         if filename != secure_filename(filename):
diff --git a/static/style.css b/static/style.css
index 2cd09ea..46d10de 100644
--- a/static/style.css
+++ b/static/style.css
@@ -77,4 +77,165 @@ details[open] > summary:before {
     margin-bottom: 1rem;
     border-radius: 3px;
         width: 50vw;
+        position:relative;
+}
+
+.info-link {
+        position:absolute;
+    right: 10px;
+    bottom: 10px;
+        border-radius: 45%;
+        border: none;
+        padding: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #A6C8F1;
+        max-height: 10px;
+        max-width: 10px;
+        font-size: 10px;
+        color: #FFFFFF;
+}
+
+
+.uk-badge {
+        background-color: #99C1F1;
+        padding: 15px;
+        margin: 5px;
+}
+
+
+div pre[class*="language-"] {
+  display: inline-block;
+  padding-right: 10em;
+  padding-top: 3rem;
+  border-radius: 6px;
+  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14"><g fill="none" fillRule="evenodd" transform="translate(1 1)"><circle cx="6" cy="6" r="6" fill="%23FF5F56" stroke="%23E0443E" strokeWidth=".5" /><circle cx="26" cy="6" r="6" fill="%23FFBD2E" stroke="%23DEA123" strokeWidth=".5" /><circle cx="46" cy="6" r="6" fill="%2327C93F" stroke="%231AAB29" strokeWidth=".5" /></g></svg>');
+  background-repeat: no-repeat;
+  background-position: 16px 16px;
+  box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.75);
+}
+
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+        border: black;
+        color: #f8f8f2;
+        background: none;
+        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        word-wrap: normal;
+        line-height: 1.5;
+
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+        padding: 1em;
+        margin: .5em 0;
+        overflow: auto;
+        border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+        background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+        padding: .1em;
+        border-radius: .3em;
+        white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+        color: slategray;
+}
+
+.token.punctuation {
+        color: #f8f8f2;
+}
+
+.namespace {
+        opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+        color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+        color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+        color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+        color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+        color: #e6db74;
+}
+
+.token.keyword {
+        color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+        color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+        font-weight: bold;
+}
+.token.italic {
+        font-style: italic;
+}
+
+.token.entity {
+        cursor: help;
 }
\ No newline at end of file
diff --git a/templates/download.html b/templates/download.html
index 83dd9c4..7ece063 100644
--- a/templates/download.html
+++ b/templates/download.html
@@ -40,7 +40,7 @@
                     {% endfor %}
                 </dl>
             {% endif %}
-    </p>
+        </p>
 
     {% if meta %}
         <h3>
diff --git a/templates/index.html b/templates/index.html
index b361394..ed583d2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,10 +10,16 @@
                 <form method=post enctype=multipart/form-data>
                     <div class="uk-margin">
                         <input type="file" name=file id="upload_file" accept="{{ mimetypes |  join(', ') }}">
-                        <button class="uk-button uk-button-default" type="submit" value="Upload">Upload</button>
+                        <button class="uk-button uk-button-primary" type="submit" value="Upload">Upload</button>
                     </div>
                 </form>
             </div>
         </div>
+        <a href="/info" role="link" class="">
+            <span class="info-link">
+                ?
+            </span>
+        </a>
+
     </div>
 {% endblock %}
diff --git a/templates/info.html b/templates/info.html
new file mode 100644
index 0000000..889a08f
--- /dev/null
+++ b/templates/info.html
@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+{% block content %}
+    <div>
+        <h1>
+            What are metadata?
+        </h1>
+        <p>
+            Metadata consists of information that characterizes your file. They answer background questions about who, how, when, and what. This gives your file multi-faceted documentation.
+            <a href="https://0xacab.org/jvoisin/mat2/blob/master/README.md">
+                https://0xacab.org/jvoisin/mat2/blob/master/README.md (09.2019)
+            </a>
+        </p>
+
+        <p>
+            The metadata of your file leak a lot of information about you. For example, cameras store file information about the time of a shot and which camera was used for it. Documents, such as PDF or Words, automatically add author or company information to the document. You don't want to publish all this information at all?
+        </p>
+
+        <p>
+            This is precisely the job of MAT2: getting rid, as much as possible, of metadata.
+        </p>
+
+        <h1>
+            MAT2 locally
+        </h1>
+        <p>
+            Please note that while we do not keep a copy of your file, there is no way that you could be certain about this: Act accordingly. Due to this warning, please consider running MAT2 locally on your device.
+        </p>
+
+        <h2>
+            MAT2 is available in pip
+        </h2>
+        <p>
+            <pre class="  language-javascript"><code class="  language-javascript">pip3 install mat2</code></pre>
+        </p>
+        <h2>
+            MAT2 on Debian
+        </h2>
+        <p>
+            MAT2 is available on Debian.
+        </p>
+        <p>
+            <pre class="  language-javascript"><code class="  language-javascript">sudo apt install mat2</code></pre>
+        </p>
+        <p>
+            More info: <a href="https://packages.debian.org/sid/mat2">https://packages.debian.org/sid/mat2</a>
+        </p>
+
+        <h1>
+            Supported file formats
+        </h1>
+        <p>
+            {% for extension in extensions %}
+                <span class="uk-badge">
+                    {{ extension }}
+                </span>
+            {% endfor %}
+        </p>
+
+    </div>
+
+{% endblock %}