commit 785793c300bd2903055c2964a2da2f06b6780572
Author: David Friesecký <frieseck@students.zcu.cz>
Date:   Thu Apr 15 01:09:11 2021 +0200

    Re #8568 - Created static GUI of certificate detailed view

diff --git a/static/certificate_detailed_view.html b/static/certificate_detailed_view.html
new file mode 100644
index 0000000..aa99267
--- /dev/null
+++ b/static/certificate_detailed_view.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>X.509 Certificate Management</title>
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+
+    <!-- jQuery library -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+    <!-- Popper JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+
+    <!-- Latest compiled JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <style>
+        ul, #tree-detailed-view {
+          list-style-type: none;
+        }
+
+        #tree-detailed-view {
+          margin: 0;
+          padding: 0;
+        }
+
+        .caret {
+            font-family: sans-serif;
+          cursor: pointer;
+          -webkit-user-select: none; /* Safari 3.1+ */
+          -moz-user-select: none; /* Firefox 2+ */
+          -ms-user-select: none; /* IE 10+ */
+          user-select: none;
+        }
+
+        .caret::before {
+          content: "\25B6";
+          color: black;
+          display: inline-block;
+          margin-right: 6px;
+        }
+
+        .caret-down::before {
+          -ms-transform: rotate(90deg); /* IE 9 */
+          -webkit-transform: rotate(90deg); /* Safari */'
+          transform: rotate(90deg);
+        }
+
+        .nested {
+          display: none;
+        }
+
+        .active {
+          display: block;
+        }
+    </style>
+</head>
+<body class="p-4">
+    <div id="certificate-detailed-view-content" class="container">
+        <h1 class="ml-2 d-inline-block">Certificate Detailed View</h1><br>
+        <h2 class="ml-2 d-inline-block">&ltcommon-name&gt [&ltid&gt]</h2>
+        <div class="row">
+            <div class="col-md-6">
+                <ul id="tree-detailed-view">
+                    <li><span class="caret caret-down font-weight-bold">Data</span>
+                        <ul class="nested active">
+                            <li><span class="caret caret-down font-weight-bold">Basic information</span>
+                                <ul class="nested active">
+                                    <table>
+                                        <tr>
+                                            <td>Version number:</td><td>&ltversion_number&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Serial number:</td><td>&ltserial_number&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Signature algorithm ID:</td><td>&ltsignature_algorithm_id&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Valid not before:</td><td>&ltnot_before&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Valid not after:</td><td>&ltnot_after&gt</td>
+                                        </tr>
+                                    </table>
+                                </ul>
+                            </li>
+                            <li><span class="caret font-weight-bold">Issuer</span>
+                                <ul class="nested">
+                                    <table>
+                                        <tr>
+                                            <td>Country code:</td><td>&ltcountry_code&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Province:</td><td>&ltprovince&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Locality:</td><td>&ltlocality&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Organization:</td><td>&ltorganization&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Organizational unit:</td><td>&ltorganizational_unit&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Common name:</td><td>&ltcommon_name&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Email address:</td><td>&ltemail_address&gt</td>
+                                        </tr>
+                                    </table>
+                                </ul>
+                            </li>
+                            <li><span class="caret font-weight-bold">Subject</span>
+                                <ul class="nested">
+                                    <table>
+                                        <tr>
+                                            <td>Country code:</td><td>&ltcountry_code&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Province:</td><td>&ltprovince&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Locality:</td><td>&ltlocality&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Organization:</td><td>&ltorganization&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Organizational unit:</td><td>&ltorganizational_unit&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Common name:</td><td>&ltcommon_name&gt</td>
+                                        </tr>
+                                        <tr>
+                                            <td>Email address:</td><td>&ltemail_address&gt</td>
+                                        </tr>
+                                    </table>
+                                </ul>
+                            </li>
+                            <li><span class="caret font-weight-bold">Subject public key info</span>
+                                <ul class="nested">
+                                    <li><span class="font-weight-bold">Public key algorithm</span>
+                                        <table>
+                                            <tr>
+                                                <td>Algorithm name:</td><td>&ltalgorithm_name&gt</td>
+                                            </tr>
+                                            <tr>
+                                                <td>Key definition:</td><td>&ltkey_definition&gt</td>
+                                            </tr>
+                                        </table>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li><span class="caret font-weight-bold">X509v3 extensions</span>
+                                <ul class="nested">
+                                    <li>Constraints:
+                                        <ul>
+                                            <table>
+                                                <tr>
+                                                    <td>&ltsome_constraint&gt:</td><td>&ltsome_value&gt</td>
+                                                </tr>
+                                            </table>
+                                        </ul>
+                                    </li>
+                                    <li>Identifiers:
+                                        <ul>
+                                            <table>
+                                                <tr>
+                                                    <td>&ltsome_identifier&gt:</td><td>&ltsome_value&gt</td>
+                                                </tr>
+                                            </table>
+                                        </ul>
+                                    </li>
+                                    <li>Key usage:
+                                        <ul>
+                                            <table>
+                                                <tr>
+                                                    <td>&ltsome_usage&gt:</td><td>&ltsome_value&gt</td>
+                                                </tr>
+                                            </table>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="col-md-6">
+                TODO list
+            </div>
+        </div>
+    </div>
+
+    <script>
+    var toggler = document.getElementsByClassName("caret");
+    var i;
+
+    for (i = 0; i < toggler.length; i++) {
+      toggler[i].addEventListener("click", function() {
+        this.parentElement.querySelector(".nested").classList.toggle("active");
+        this.classList.toggle("caret-down");
+      });
+    }
+    </script>
+</body>
+</html>
\ No newline at end of file
