T260 implemented mock framepage into project

target/classes/static/css/framepage/common.css

@@ -0,0 +1,8 @@
+@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+@import url('/css/framepage/css/fontello.css');
+@import url('/css/framepage/css/r11addons.css');
+@import url('/css/framepage/css/r11tables.css');
+@import url('/css/framepage/css/r11tool.css');
+@import url('/css/framepage/css/r11tooltip.css');
+@import url('/css/framepage/css/r11modal.css');
+

target/classes/static/css/framepage/css/font/fontello.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe801;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="cancel" unicode="&#xe802;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
+</font>
+</defs>
+</svg>

target/classes/static/css/framepage/css/fontello.css

@@ -0,0 +1,59 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('font/fontello.eot?49304387');
+    src: url('font/fontello.eot?49304387#iefix') format('embedded-opentype'),
+         url('font/fontello.woff2?49304387') format('woff2'),
+         url('font/fontello.woff?49304387') format('woff'),
+         url('font/fontello.ttf?49304387') format('truetype'),
+         url('font/fontello.svg?49304387#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'fontello';
+      src: url('../font/fontello.svg?49304387#fontello') format('svg');
+    }
+  }
+  */
+   
+   [class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: never;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+   
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    margin-left: .2em;
+   
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+   
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  }
+   
+  .icon-plus:before { content: '\e801'; } /* '' */
+  .icon-cancel:before { content: '\e802'; } /* '' */

target/classes/static/css/framepage/css/r11addons.css

@@ -0,0 +1,59 @@
+.modification-button.btn-tile:hover {
+    color: #ca1111;
+}
+
+.modification-button.btn-tile {
+    width: 10%;
+    margin: 20% 0 0 0;
+    font-size: 14px;
+    color: #00000020
+}
+
+.modification-button.btn-addtile {
+    font-size: 38px;
+    color: #00000030;
+}
+
+.modification-button.btn-addtile:hover {
+    color: #58ac43;
+}
+
+.tile {
+    width: 100%;
+    padding-top: 40%;
+    border: 1px solid gray;
+    border-radius: 3px;
+    position: relative;
+    background: #f0f0f095;
+    margin-bottom: 10px;
+    cursor: default;
+}
+
+.tile:hover {
+    filter: brightness(110%);
+}
+
+.tile.active {
+    background: #00000070;
+    color: white;
+    filter: none;
+}
+
+.tile.active .btn-tile {
+    opacity: 0;
+}
+
+.tile .content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0 2% 0 7%;
+    display: flex;
+}
+
+.content p {
+    margin: 0;
+    padding: 0;
+}

target/classes/static/css/framepage/css/r11modal.css

@@ -0,0 +1,104 @@
+#overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  background: rgba(0, 0 , 0, 0.5);
+  pointer-events: none;
+}
+
+#overlay.active {
+	pointer-events: all;
+	opacity: 1;
+}
+
+.modal {
+	display: none;
+	width: 390px;
+	min-height: 71px;
+	max-height: 700px;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background: white;
+	padding: 5px;
+	border: 1px solid #f0f0f0;
+}
+
+.modal.active {
+	display: block;
+}
+
+.modal div.header {
+	width: 384px;
+	height: 24px;
+	background: #2e3133;
+	color: white;
+	font-size: 24px;
+	font-weight: 700;
+	padding: 3px;
+	margin-bottom: 5px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.modal div.header button {
+	font-size: 100%;
+	font-family: inherit;
+	border: 0;
+	padding: 0;
+	background: 0;
+	color: inherit;
+	cursor: pointer;
+}
+
+.modal div.header button:hover {
+	color: white;
+	font-weight: 700;
+}
+
+.modal div.body {
+	width: 370px;
+	padding: 10px;
+	background: #f0f0f0;
+	color: #2e3133;
+	min-height: 16px;
+	text-align: justify;
+	font-size: 16px;
+}
+
+.modal div.function {
+	width: 385px;
+	min-height: 30px;
+	padding-top: 5px;
+	display: flex;
+	justify-content: space-evenly;
+	background: inherit;
+}
+
+.modal div.function button {
+	min-height: 22px;
+	min-width: 34px;
+	max-width: 74px;
+	padding: 3px 20px;
+	outline: none;
+	border: 1px solid #f0f0f0;
+	background: rgba(205,205,205,1);
+	font-size: 16px;
+	text-align: center;
+	cursor: pointer;
+}
+
+.modal div.function button:hover {
+	filter: brightness(110%);
+}
+
+.r-exclamation:before {
+	content: '!';
+	color: #3bc4f1;
+	font-style: normal;
+}

target/classes/static/css/framepage/css/r11tables.css

@@ -0,0 +1,71 @@
+.table-map {
+    width: 60%;
+}
+
+.table-map input{
+    font-size: 16px;
+    padding: 7px;
+    border: 1px solid rgba(145, 146, 146, 0.849);
+    border-radius: 5px;
+}
+
+.table-map input.key {
+    background: #f0f0f0;
+}
+
+.modification-button.btn-add {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-add:hover {
+    color:#58ac43;
+}
+
+.modification-button.btn-hashmap {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-hashmap:hover {
+    color: #ca1111;
+}
+
+.table-default {
+    width: 80%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table-default tr {
+    background: #f0f0f02d;
+}
+
+.table-default tr.bottom-border {
+    border-bottom: 1px solid black;
+}
+
+.table-default th {
+    background: #ffffff;
+}
+
+.table-default tr.even {
+    background: #f0f0f0;
+}
+
+.table-doc td, .table-doc th{
+    border-spacing: 0px;
+    padding: 0px 10px;
+}
+
+.table-doc td {
+    background-color: rgba(155, 165, 160, 0.342);
+}
+
+.table-doc th {
+    background-color: #3bc4f1;
+    text-align: left;
+    color: white;
+}

target/classes/static/css/framepage/css/r11tool.css

@@ -0,0 +1,287 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
+.hyperlink, .hyperlink:visited, .hyperlink:active {
+    color: rgb(47, 125, 146);
+    cursor: pointer;
+}
+
+.hyperlink:hover {
+    filter: brightness(120%);
+}
+
+.bordered-field {
+    border: 2px solid rgba(93, 99, 96, 0.705);
+    border-radius: 5px;
+    padding: 8px;
+    
+}
+
+.bordered-field:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(81, 203, 238);
+    border: 2px solid #00000070;
+}
+
+.bordered-field:disabled {
+    background: #eeeeeed2;
+}
+
+.vertically-resizeable {
+    resize: vertical;
+}
+
+body {
+    font-family: 'Nunito', sans-serif;
+}
+
+.container {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.tool {
+    width: 55%;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.tool.extended {
+    width: 65%;
+}
+
+.tool .tool-context {
+    width: 90%;
+}
+
+.tool.extended .tool-context {
+    width: 75%;
+}
+
+.tool.extended .tool-extention {
+    width: 20%;
+    padding-top: 2%;
+    display: block;
+}
+
+.tool .tool-extention {
+    display: none;
+}
+
+.tool-extention {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tool-extention.active {
+    opacity: 100%;
+    pointer-events: all;
+}
+
+.clickable-text {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+    cursor: pointer;
+}
+
+.clickable-text.highlight:hover {
+    color: #3bc4f1;
+}
+
+.modification-button {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+}
+
+.text-aligned-to-right {
+    text-align: right;
+}
+
+.centered-vertically {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.display-space-between {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.display-space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.float-left {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.version-span {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(85,85,85,0.555);
+}
+
+.block-display {
+    display: block;
+}
+
+.block-label {
+    display: block;
+    margin: 0 0 0 5px;
+}
+
+.tabmenu {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    border-bottom: 1px solid rgba(185, 185, 185, 0.5);
+}
+
+.tabitem {
+    flex-grow: 1;
+    cursor: pointer;
+    padding: 5px 0;
+}
+
+.tabitem:hover {
+    font-weight: 700;
+}
+
+.tabitem.active {
+    background: rgba(33, 34, 34, 0.705);
+    color: white;
+    font-weight: 700;
+    cursor:default;
+    flex-grow: 1;
+}
+
+.big-font {
+    font-size: 20px;
+}
+
+.action-button.active {
+    background: #3bc4f1;
+    border: 1px solid #7ed0eb;
+    cursor: pointer;
+}
+
+.action-button.active:hover {
+    filter: brightness(110%);
+}
+
+.action-button {
+    background: rgba(155, 165, 160, 0.507);
+    border:1px solid rgba(186, 197, 191, 0.507);
+    color: white;
+    padding: 10px 20px;
+    font-weight: 700;
+    margin: 3px 0;
+}
+
+.quater-width {
+    width: 25%;
+}
+
+.half-width {
+    width: 50%;
+}
+
+.tree-fourth-width {
+    width: 75%;
+}
+
+.half-width.with-padding {
+    width: 45%;
+}
+
+.max-width {
+    width: 100%;
+}
+
+.max-width.with-padding {
+    width: 94%;
+}
+
+.max-height {
+    height: 100%;
+}
+
+.height-300 {
+    height: 300px;
+}
+
+.max-height.with-padding {
+    height: 90%;
+}
+
+.small-margins {
+    margin: 3%;
+}
+
+.small-vertical-margin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.medium-vertical-margin {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.large-vertical-margin {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.textarea-300 {
+    height: 300px;
+}
+
+.centered-content {
+    display: flex;
+    justify-content: center;
+}
+
+
+.tabcontent {
+    display: none;
+}
+
+.tabcontent.active {
+    display: flex;
+    justify-content: center;
+}
+
+.hiddable {
+    display: none;
+}
+
+.hiddable.active {
+    display: inherit;
+}
+
+/* In case of collision with classes that use 'active' */
+.hidden {
+    display: none;
+}
+
+/* TODO: Add proper class */
+/* textarea {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+} */
+
+/* TODO: Add proper class */
+/* code{
+    line-height: 150%;
+} */

target/classes/static/css/framepage/css/r11tooltip.css

@@ -0,0 +1,77 @@
+.tooltip-window {
+    position: fixed;
+    right: 0;
+    filter: drop-shadow(-2px 0px 2px darkgray);
+    background: #e8f3f7;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.tip {
+    display: none;
+}
+
+.tip.active {
+    display: block;
+}
+
+/* TODO: Remove !important. It's bad practice and it can cause errors in future */
+.section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #b4b4b4c5;
+    cursor: pointer;
+    border-bottom: darkgray 2px solid !important;
+}
+
+.section-button:hover {
+    backdrop-filter: brightness(110%); 
+}
+
+.section-button .active {
+    background: #00000030;
+}
+
+.List .collapsibleContent {
+    border-left: #bdc5c9 2px solid;
+    overflow: hidden;
+    background: #ffffff50;
+}
+
+/* TODO: .section class is to generic. It should be renamed */
+.section{
+    padding: 10px 0px 20px 0px ;
+}
+
+/* TODO: content subclass already in use. Creating content class overrides the subclass.
+Make .content a subclass of .content */
+/* .content {
+    padding: 0px 15px 0px 15px ;
+    text-align: justify;
+    overflow: hidden;
+    transition: max-height .2s ease-out;
+    max-height: 0px;
+    border-left: #c0c2c3 2px solid;
+    
+} */
+
+.collapsibleMini::before{
+    content: "►";
+}
+
+.collapsibleMini.active::before{
+    content: "▼";
+}
+
+/* TODO: Add proper class */
+/* button:hover{
+    filter: brightness(110%);
+} */

target/classes/static/css/framepage/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="styles.css">
+    <!-- <link rel="stylesheet" href="common.css"> -->
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">  
+</head>
+
+<body>
+    <div id="header">
+        <h1 id="logo"><a href="http://release11.com/"><img src="./logo.png" alt="Release11"></a></h1>
+    </div>
+
+    <div id="content">
+        <div id="toolList">
+            <ul id="toolList">
+                <li id="toolListRow"><a href="http://gordon.zipper.release11.com:8097/" target="iframe">REST Mock</a></li>
+                <li id="toolListRow"><a href="./Frontend/xpath.html" target="iframe">XPath</a></li>
+                <li id="toolListRow"><a href="./Frontend/xslt.html" target="iframe">XSLT</a></li>
+                <li id="toolListRow"><a href="http://gordon.zipper.release11.com:8071/jpk-converter/" target="iframe">JPK</a></li>
+                <li id="toolListRow"><a href="./tool1.html" target="iframe">Tool 5</a></li>
+                <li id="toolListRow"><a href="./tool1.html" target="iframe">Tool 6</a></li>
+                <li id="toolListRow"><a href="./tool1.html" target="iframe">Tool 7</a></li>
+                <li id="toolListRow"><a href="./tool1.html" target="iframe">Tool 8</a></li>
+            </ul>
+            <div id="copyright">Copyright © 2021<br><a href="http://release11.com/">release11 Sp. z o. o.</a></div>
+        </div>
+        <iframe id="frame" name="iframe" src="http://gordon.zipper.release11.com:8097/" frameborder="0"></iframe>
+    </div>
+
+</body>
+
+</html>

target/classes/static/css/framepage/styles.css

@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
+
+body {
+    font-family: 'Nunito', sans-serif;
+    color: #2e3133;
+    font-weight: normal;
+    margin: 0px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    height: 100%;
+    min-height: 100%;
+}
+
+div#header {
+    background-color: rgb(85, 85, 85);
+    width: 100%;
+    height: 80px;
+}
+
+#logo {
+    padding: 20px 20px 20px;
+}
+
+iframe#frame {
+    flex-grow: 1;
+}
+
+div#content {
+    width: 100%;
+    height: calc(100% - 80px);
+    display: flex;
+}
+
+div#toolList {
+    float: left;
+    width: 200px;
+    background-color: rgb(85, 85, 85);
+    height: 100%;
+}
+
+li{
+    font-size: 20px;
+    font-weight: bold;
+}
+
+div#copyright{
+    color:rgb(192, 192, 192);
+    position: fixed;
+    bottom: 10px;
+    width: 200px;
+    text-align: center;
+}
+
+div#copyright a, a:visited,  a:active {
+    color: rgb(192, 192, 192);
+}
+
+ul#toolList {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    display: block;
+    float: left;
+    background-color: rgb(85, 85, 85);
+    width: 100%;
+}
+
+#toolListRow a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 20px 50px 25px;
+    text-decoration: none;
+}
+
+#toolListRow a:hover {
+    background-color: #111111;
+    transition-duration: .3s;
+}