Add report tools for report stage at SI pipeline
diff --git a/report-tools/html/css/styles.css b/report-tools/html/css/styles.css
new file mode 100644
index 0000000..58924cb
--- /dev/null
+++ b/report-tools/html/css/styles.css
@@ -0,0 +1,236 @@
+/*##############################################################################
+
+# Copyright (c) 2021, ARM Limited and Contributors. All rights reserved.
+
+#
+
+# SPDX-License-Identifier: BSD-3-Clause
+
+##############################################################################*/
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ line-height: 1.7em;
+ color: #7f8c8d;
+ font-size: 13px;
+ font-family: SegoeUI-SemiBold-final,Segoe UI Semibold,SegoeUI-Regular-final,Segoe UI,"Segoe UI Web (West European)",Segoe,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Tahoma,Helvetica,Arial,sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+label {
+ color: #34495e;
+ margin: 5px;
+}
+
+.home-menu {
+ padding: 10px;
+ text-align: center;
+ box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
+}
+.home-menu {
+ background: #0091bd;
+ font-weight: 600;
+ font-family: SegoeUI-SemiBold-final,Segoe UI Semibold,SegoeUI-Regular-final,Segoe UI,"Segoe UI Web (West European)",Segoe,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Tahoma,Helvetica,Arial,sans-serif;
+ font-size: 16px;
+ color: white;
+}
+
+.home-menu a {
+ color: #6FBEF3;
+}
+.home-menu li a:hover,
+.home-menu li a:focus {
+ background: none;
+ border: none;
+ color: #AECFE5;
+}
+
+
+.block-report {
+ font-size: 18px;
+ font-weight: bold;
+ color: #129fea;
+ border: 1px solid #b9560f;
+ padding: 5px;
+ font-weight: 100;
+ border-radius: 5px;
+ line-height: 1em;
+ margin: 10px;
+}
+.block-report div {
+ font-size: 14px;
+ font-weight: bold;
+ padding-bottom: 5px;
+}
+
+.content-wrapper {
+ /* These styles are required for the "scroll-over" effect */
+ position: absolute;
+ top: 10%;
+ width: 100%;
+ min-height: 12%;
+ z-index: 2;
+ background: white;
+
+}
+
+.content {
+ padding: 1em 1em 3em;
+}
+
+.home-menu {
+ text-align: left;
+}
+.home-menu ul {
+ float: right;
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 30px;
+ height: 17px;
+}
+
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 13px;
+ width: 13px;
+ left: 2px;
+ bottom: 2px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #2196F3;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(13px);
+ -ms-transform: translateX(13px);
+ transform: translateX(13px);
+}
+
+.slider.round {
+ border-radius: 17px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
+.table-wrap {
+ height: 200px;
+ overflow-y: auto;
+ width: 800px;
+ overflow-x: auto;
+}
+
+.styled-table {
+ border-collapse: collapse;
+ margin: 25px 0;
+ font-size: 0.9em;
+ font-family: sans-serif;
+ min-width: 400px;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+}
+
+.styled-table thead tr {
+ background-color: #009879;
+ color: #ffffff;
+ text-align: left;
+}
+
+.styled-table th,
+.styled-table td {
+ padding: 12px 15px;
+}
+
+.styled-table tbody tr {
+ border-bottom: 1px solid #dddddd;
+}
+
+.styled-table tbody tr:nth-of-type(even) {
+ background-color: #f3f3f3;
+}
+
+.styled-table tbody tr:last-of-type {
+ border-bottom: 2px solid #009879;
+}
+
+.styled-table tbody tr.active-row {
+ font-weight: bold;
+ color: #009879;
+}
+
+.styled-table tr:hover td{
+ background-color: #ffff99;
+}
+
+span.link {
+ cursor:pointer;
+ color:blue;
+}
+
+span.item {
+ background: white;
+}
+
+div.item {
+ display: inline-block;
+ letter-spacing: normal;
+ word-spacing: normal;
+ vertical-align: top;
+ text-rendering: auto;
+ padding-right: 10px;
+}
+
+div-item-parent {
+ letter-spacing: -.31em;
+ text-rendering: optimizespeed;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row wrap;
+ flex-flow: row wrap;
+ -ms-flex-line-pack: start;
+ align-content: flex-start;
+ word-spacing: -0.43em;
+}
+