Changed Homepage to Frontend and fixed typo
This commit is contained in:
11
Frontend/Dockerfile
Normal file
11
Frontend/Dockerfile
Normal file
@@ -0,0 +1,11 @@
|
||||
FROM nginx:stable-alpine
|
||||
|
||||
COPY ./tools/ /usr/share/nginx/html/tools/
|
||||
COPY ./assets/ /usr/share/nginx/html/assets/
|
||||
COPY ./index.html /usr/share/nginx/html
|
||||
#COPY ./logo.png /usr/share/nginx/html
|
||||
#COPY ./styles.css /usr/share/nginx/html
|
||||
#COPY ./common.css /usr/share/nginx/html
|
||||
#COPY ./favicon.ico /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
6
Frontend/assets/css/common/common.css
Normal file
6
Frontend/assets/css/common/common.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
|
||||
@import url('r11addons.css');
|
||||
@import url('r11tables.css');
|
||||
@import url('r11tool.css');
|
||||
@import url('r11tooltip.css');
|
||||
@import url('r11modal.css');
|
||||
BIN
Frontend/assets/css/common/font/fontello.eot
Normal file
BIN
Frontend/assets/css/common/font/fontello.eot
Normal file
Binary file not shown.
14
Frontend/assets/css/common/font/fontello.svg
Normal file
14
Frontend/assets/css/common/font/fontello.svg
Normal file
@@ -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="" 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="" 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Frontend/assets/css/common/font/fontello.ttf
Normal file
BIN
Frontend/assets/css/common/font/fontello.ttf
Normal file
Binary file not shown.
BIN
Frontend/assets/css/common/font/fontello.woff
Normal file
BIN
Frontend/assets/css/common/font/fontello.woff
Normal file
Binary file not shown.
BIN
Frontend/assets/css/common/font/fontello.woff2
Normal file
BIN
Frontend/assets/css/common/font/fontello.woff2
Normal file
Binary file not shown.
59
Frontend/assets/css/common/fontello.css
vendored
Normal file
59
Frontend/assets/css/common/fontello.css
vendored
Normal file
@@ -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'; } /* '' */
|
||||
87
Frontend/assets/css/frame.css
Normal file
87
Frontend/assets/css/frame.css
Normal file
@@ -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;
|
||||
}
|
||||
6
Frontend/assets/css/mock-service/common.css
Normal file
6
Frontend/assets/css/mock-service/common.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
|
||||
@import url('r11addons.css');
|
||||
@import url('r11tables.css');
|
||||
@import url('r11tool.css');
|
||||
@import url('r11tooltip.css');
|
||||
@import url('r11modal.css');
|
||||
4
Frontend/assets/css/mock-service/main.css
Normal file
4
Frontend/assets/css/mock-service/main.css
Normal file
@@ -0,0 +1,4 @@
|
||||
.overflowedTableContent {
|
||||
max-height: 750px;
|
||||
overflow: scroll;
|
||||
}
|
||||
59
Frontend/assets/css/mock-service/r11addons.css
Normal file
59
Frontend/assets/css/mock-service/r11addons.css
Normal file
@@ -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;
|
||||
}
|
||||
104
Frontend/assets/css/mock-service/r11modal.css
Normal file
104
Frontend/assets/css/mock-service/r11modal.css
Normal file
@@ -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;
|
||||
}
|
||||
71
Frontend/assets/css/mock-service/r11tables.css
Normal file
71
Frontend/assets/css/mock-service/r11tables.css
Normal file
@@ -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;
|
||||
}
|
||||
300
Frontend/assets/css/mock-service/r11tool.css
Normal file
300
Frontend/assets/css/mock-service/r11tool.css
Normal file
@@ -0,0 +1,300 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.clickable-text.switch {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.clickable-text.switch span.toggleIndicator:before {
|
||||
content: '>';
|
||||
}
|
||||
|
||||
.clickable-text.switch span.toggleIndicator.active:before {
|
||||
content: 'v';
|
||||
}
|
||||
|
||||
.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%;
|
||||
} */
|
||||
77
Frontend/assets/css/mock-service/r11tooltip.css
Normal file
77
Frontend/assets/css/mock-service/r11tooltip.css
Normal file
@@ -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%);
|
||||
} */
|
||||
BIN
Frontend/assets/css/tools/font/fontello.eot
Normal file
BIN
Frontend/assets/css/tools/font/fontello.eot
Normal file
Binary file not shown.
14
Frontend/assets/css/tools/font/fontello.svg
Normal file
14
Frontend/assets/css/tools/font/fontello.svg
Normal file
@@ -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="" 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="" 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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Frontend/assets/css/tools/font/fontello.ttf
Normal file
BIN
Frontend/assets/css/tools/font/fontello.ttf
Normal file
Binary file not shown.
BIN
Frontend/assets/css/tools/font/fontello.woff
Normal file
BIN
Frontend/assets/css/tools/font/fontello.woff
Normal file
Binary file not shown.
BIN
Frontend/assets/css/tools/font/fontello.woff2
Normal file
BIN
Frontend/assets/css/tools/font/fontello.woff2
Normal file
Binary file not shown.
59
Frontend/assets/css/tools/fontello.css
vendored
Normal file
59
Frontend/assets/css/tools/fontello.css
vendored
Normal file
@@ -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'; } /* '' */
|
||||
484
Frontend/assets/css/tools/r11form.css
Normal file
484
Frontend/assets/css/tools/r11form.css
Normal file
@@ -0,0 +1,484 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
|
||||
@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
|
||||
@import url('fontello.css');
|
||||
|
||||
|
||||
.hyperlink, .hyperlink:visited, .hyperlink:active {
|
||||
color: rgb(47, 125, 146);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hyperlink:hover {
|
||||
filter: brightness(120%);
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
/* .hyperlink.collapseTrigger::before{
|
||||
content: "▼";
|
||||
} */
|
||||
|
||||
.tooltip-window .tip {
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
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;
|
||||
}
|
||||
|
||||
.modification-button.btn-add {
|
||||
font-size: 16px;
|
||||
color: #00000030;
|
||||
margin: auto 0 auto 0;
|
||||
}
|
||||
|
||||
.modification-button.btn-add:hover {
|
||||
color:#58ac43;
|
||||
}
|
||||
|
||||
.modification-button.btn-tile:hover {
|
||||
color: #ca1111;
|
||||
}
|
||||
|
||||
.modification-button.btn-hashmap {
|
||||
font-size: 16px;
|
||||
color: #00000030;
|
||||
margin: auto 0 auto 0;
|
||||
}
|
||||
|
||||
.modification-button.btn-hashmap:hover {
|
||||
color: #ca1111;
|
||||
}
|
||||
|
||||
.modification-button.btn-tile {
|
||||
width: 10%;
|
||||
margin: 20% 0 0 0;
|
||||
font-size: 14px;
|
||||
color: #00000020
|
||||
}
|
||||
|
||||
.tile {
|
||||
width: 90%;
|
||||
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 .content {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 0 2% 0 7%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tip.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tabcontent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabcontent.active {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.section-button {
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
font-size: 18px;
|
||||
background: #b4b4b4c5;
|
||||
cursor: pointer;
|
||||
border-bottom: darkgray 2px solid !important;
|
||||
}
|
||||
|
||||
.section-button:hover {
|
||||
/* border-bottom: #3bc4f1 2px solid; */
|
||||
backdrop-filter: brightness(110%);
|
||||
}
|
||||
|
||||
.section-button .active {
|
||||
background: #00000030;
|
||||
}
|
||||
|
||||
.List .collapsibleContent {
|
||||
/* display: none; */
|
||||
border-left: #bdc5c9 2px solid;
|
||||
|
||||
/* max-height: 0px; */
|
||||
/* border-left: #ededed solid 1px; */
|
||||
overflow: hidden;
|
||||
background: #ffffff50;
|
||||
}
|
||||
|
||||
.section{
|
||||
padding: 10px 0px 20px 0px ;
|
||||
}
|
||||
|
||||
.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: "▼";
|
||||
}
|
||||
|
||||
.content.active{
|
||||
|
||||
}
|
||||
|
||||
.hiddable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hiddable.active {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
/* In case of collision with classes that use 'active' */
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
filter: brightness(110%);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
textarea {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
code{
|
||||
line-height: 150%;
|
||||
}
|
||||
BIN
Frontend/assets/images/favicon.ico
Normal file
BIN
Frontend/assets/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
Frontend/assets/images/logo.png
Normal file
BIN
Frontend/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
2
Frontend/assets/scripts/tools/jquery-3.6.0.slim.min.js
vendored
Normal file
2
Frontend/assets/scripts/tools/jquery-3.6.0.slim.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
156
Frontend/assets/scripts/tools/scripts.js
Normal file
156
Frontend/assets/scripts/tools/scripts.js
Normal file
@@ -0,0 +1,156 @@
|
||||
var defaultStrings = [];
|
||||
const color_grey = "#6b6b6b";
|
||||
const color_red = "#ff8f8f";
|
||||
|
||||
//Remove default text and set color to black
|
||||
function clearDefaultContent(element, text) {
|
||||
if (element.value == text) {
|
||||
element.value = "";
|
||||
element.style.color = "#000000";
|
||||
element.style.backgroundColor = "#ffffff";
|
||||
}
|
||||
}
|
||||
|
||||
//Set default text in grey
|
||||
function setDefaultContent(element, text) {
|
||||
if (element.value == "") {
|
||||
var id = element.getAttribute('id');
|
||||
if (!defaultStrings.includes(text)) {
|
||||
defaultStrings.push(text);
|
||||
}
|
||||
if (id == "xmlArea") {
|
||||
element.style.color = color_grey;
|
||||
element.value = text;
|
||||
}
|
||||
if (id == "transformArea") {
|
||||
element.style.color = color_grey;
|
||||
element.value = text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hideList(collList) {
|
||||
for (i = 0; i < collList.length; i++) {
|
||||
if (collList[i].nextElementSibling !== null) {
|
||||
collList[i].nextElementSibling.style.maxHeight = null;
|
||||
collList[i].nextElementSibling.classList.toggle("collapsibleDataExpanded", false);
|
||||
}
|
||||
collList[i].style.display = 'none';
|
||||
collList[i].classList.remove("collapsibleActive");
|
||||
}
|
||||
}
|
||||
|
||||
function checkDefault(text){
|
||||
return defaultStrings.includes(text);
|
||||
}
|
||||
|
||||
function showList(collList) {
|
||||
for (i = 0; i < collList.length; i++) {
|
||||
collList[i].style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function smoothFoldElement(element, toogleState, toggleParrent){
|
||||
if (toogleState) {
|
||||
console.log("DUPA");
|
||||
if(toggleParrent){
|
||||
element.parentElement.style.maxHeight = "0px";
|
||||
}
|
||||
|
||||
element.classList.toggle("active", false);
|
||||
var subLists = collapsibleData.getElementsByClassName("collapsibleData");
|
||||
for (j = 0; j < subLists.length; j++) {
|
||||
subLists[j].style.maxHeight = null;
|
||||
}
|
||||
} else {
|
||||
collapsibleData.parentElement.style.maxHeight = (collapsibleData.parentElement.scrollHeight) + "px";
|
||||
collapsibleData.classList.toggle("active", true);
|
||||
if (collapsibleData.parentElement.classList.contains("collapsibleData") && collapsibleData.parentElement.classList.contains("active")) {
|
||||
collapsibleData.parentElement.style.maxHeight = (collapsibleData.parentElement.scrollHeight + collapsibleData.scrollHeight) + "px";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Set tooltip info, function is called by onClick handlers
|
||||
function refreshTooltip() {
|
||||
var resizeList = document.getElementsByClassName("collapsibleData");
|
||||
console.log("collDataList: " + resizeList.length)
|
||||
document.getElementById("processorTooltipInfo").innerText = procInfo;
|
||||
document.getElementById("xsltelementsheader").innerText = XSLTheader;
|
||||
}
|
||||
|
||||
function performRequest(text, checkXML, checkTransform){
|
||||
var xmlData = document.getElementById("xmlArea").value.trim();
|
||||
var transformData = document.getElementById("transformArea").value.trim();
|
||||
|
||||
var empty = false;
|
||||
if (defaultStrings.includes(xmlData) && checkXML) {
|
||||
document.getElementById("xmlArea").style.backgroundColor = color_red;
|
||||
xmlData = "";
|
||||
empty = true;
|
||||
}
|
||||
if (defaultStrings.includes(transformData) && checkTransform) {
|
||||
document.getElementById("transformArea").style.backgroundColor = color_red;
|
||||
empty = true;
|
||||
}
|
||||
if (!empty) {
|
||||
restRequest(text);
|
||||
}else{
|
||||
document.getElementById("resultArea").value = "No data provided!";
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//Form REST request, send, receive and display in resultArea
|
||||
async function restRequest(text) {
|
||||
const escapeChar = "specialEscapeChar";
|
||||
const addr = "http://localhost:8081/" + text;
|
||||
// const addr = "http://gordon.zipper.release11.com:8081/" + text;
|
||||
|
||||
var xmlData = document.getElementById("xmlArea").value.trim();
|
||||
var transformData = document.getElementById("transformArea").value.trim();
|
||||
|
||||
if(defaultStrings.includes(xmlData)){
|
||||
xmlData = "<empty/>";
|
||||
}
|
||||
|
||||
// var data = xmlData.concat(escapeChar, transformData);
|
||||
|
||||
// const url = addr.concat("?escapechar=", escapeChar, "&processor=", getProcInfo());
|
||||
|
||||
var jsonData = JSON.stringify({
|
||||
"data" : xmlData,
|
||||
"process" : transformData,
|
||||
"processor" : getProcessor(),
|
||||
"version" : getVersion()
|
||||
});
|
||||
// console.log(jsonData);
|
||||
var init = {
|
||||
headers: new Headers({
|
||||
}),
|
||||
body: jsonData,
|
||||
// body: data,
|
||||
method: "POST"
|
||||
};
|
||||
var request = new Request(addr, init);
|
||||
|
||||
|
||||
|
||||
await fetch(request).then(response => {
|
||||
console.log(response.status);
|
||||
response.text().then(function (text) {
|
||||
console.log(text);
|
||||
var result = JSON.parse(text);
|
||||
document.getElementById("resultArea").value = result.result;
|
||||
document.getElementById("procinfo").innerText = ' Computed using '.concat(" ", result.processor);
|
||||
if (response.ok) {
|
||||
document.getElementById("procinfo").innerText = document.getElementById("procinfo").innerText.concat(" in ", result.time, "ms");
|
||||
procinfo.style.color = "#30aa58";
|
||||
} else {
|
||||
procinfo.style.color = "#aa3030";
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
6
Frontend/common.css
Normal file
6
Frontend/common.css
Normal file
@@ -0,0 +1,6 @@
|
||||
@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
|
||||
@import url('Frontend/css/r11addons.css');
|
||||
@import url('Frontend/css/r11tables.css');
|
||||
@import url('Frontend/css/r11tool.css');
|
||||
@import url('Frontend/css/r11tooltip.css');
|
||||
@import url('Frontend/css/r11modal.css');
|
||||
31
Frontend/index.html
Normal file
31
Frontend/index.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="assets/css/frame.css">
|
||||
<!-- <link rel="stylesheet" href="common.css"> -->
|
||||
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="header">
|
||||
<h1 id="logo"><a href="http://release11.com/"><img src="assets/images/logo.png" alt="Release11"></a></h1>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<div id="toolList">
|
||||
<ul id="toolList">
|
||||
<li id="toolListRow"><a href="http://localhost:8097/" target="iframe">REST Mock</a></li>
|
||||
<li id="toolListRow"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
|
||||
<li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
|
||||
<li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
|
||||
</ul>
|
||||
<div id="copyright">Copyright © 2023<br><a href="http://release11.com/">Release11 Sp. z. o. o.</a></div>
|
||||
</div>
|
||||
<iframe id="frame" name="iframe" src="http://localhost:8097/" frameborder="0"></iframe>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3208
Frontend/tools/xpath.html
Normal file
3208
Frontend/tools/xpath.html
Normal file
File diff suppressed because it is too large
Load Diff
171
Frontend/tools/xsd.html
Normal file
171
Frontend/tools/xsd.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<!-- <link rel="stylesheet" href="styles.css"> -->
|
||||
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
|
||||
<script src="../assets/scripts/tools/scripts.js"></script>
|
||||
<meta charset="utf-8" />
|
||||
</head>
|
||||
|
||||
<body onload="init();">
|
||||
<div class="container">
|
||||
<div id="tool" class="tool">
|
||||
<div class="tool-context">
|
||||
<div class="headline">
|
||||
<h1>Online XSD tester <span class="versionInfo"><span class="version-span">v0.4 BETA</span></span>
|
||||
</h1>
|
||||
</div>
|
||||
<label for="processors">Select XSLT processor:</label>
|
||||
<select name="processors" id="processors">
|
||||
<!-- <option value="saxon">Saxon</option> -->
|
||||
<option value="xalan">Xalan</option>
|
||||
</select>
|
||||
<!-- <span id="processorTooltipInfo">procInfo</span><br> -->
|
||||
<br>
|
||||
|
||||
<label for="xmlArea"><b>Insert your XML:</b></label>
|
||||
<textarea id="xmlArea" name="xmlArea" rows="15"
|
||||
class="textarea-300 bordered-field vertically-resizeable max-width"
|
||||
onblur="setDefaultContent(this, 'Insert XML here');"
|
||||
onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
|
||||
<br><br>
|
||||
|
||||
<label for="transformArea"><b>Insert your XSD:</b></label>
|
||||
<textarea id="transformArea" name="transformArea" rows="15"
|
||||
class="textarea-300 bordered-field vertically-resizeable max-width"
|
||||
onblur="setDefaultContent(this, 'Insert XSD here');"
|
||||
onfocus="clearDefaultContent(this, 'Insert XSD here');"></textarea>
|
||||
<br>
|
||||
<button id="requestButton" class="max-width block-label action-button active"
|
||||
onclick="performRequest('xsdpost', true, true)">Verify XSD</button>
|
||||
<br><br>
|
||||
|
||||
<label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
|
||||
<textarea id="resultArea" name="resultArea" rows="2"
|
||||
class="bordered-field vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip-window">
|
||||
<h2>What is XSD?</h2>
|
||||
<p><b>XSD is a W3C recomedation that specifies how to describe the elements in XML document</b></p>
|
||||
<p>XSD specifies data types, order and arity of elements in XML file.<br>
|
||||
Main components of XSD file are:<br>
|
||||
- Element declaration - declares properties of elements (names and namespaces)<br>
|
||||
- Attribute declarations - declares properties of attributes<br>
|
||||
- Simple and complex types:<br>
|
||||
- - XSD provides 19 simple data types<br>
|
||||
- - More complex types are declared using simple types and relationships<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <script>
|
||||
function getVersion() {
|
||||
return document.getElementById("versions").value;
|
||||
}
|
||||
</script> -->
|
||||
<script>
|
||||
function processTooltip() {
|
||||
console.log("processTooltip");
|
||||
|
||||
|
||||
if (getProcInfo() == "xalan") {
|
||||
document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0 functions";
|
||||
document.getElementById("processorTooltipInfo").innerText = "Supports XSLT 1.0";
|
||||
hideList(document.getElementsByName("collapse30"));
|
||||
} else {
|
||||
document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0, 2.0 & 3.0 functions";
|
||||
document.getElementById("processorTooltipInfo").innerText = "Supports XSLT up to 3.0";
|
||||
showList(document.getElementsByName("collapse30"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function getProcessor() {
|
||||
return document.getElementById("processors").value;
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function getVersion() {
|
||||
if (getProcInfo() == "xalan") {
|
||||
return "1.0";
|
||||
} else {
|
||||
return "3.0";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
function getProcInfo() {
|
||||
var processVariables = document.getElementById("processors").value;// + "&version=" + document.getElementById("versions").value;
|
||||
return processVariables;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var triggerList = document.getElementsByClassName("collapseTrigger");
|
||||
for (i = 0; i < triggerList.length; i++) {
|
||||
console.log("trigger connected");
|
||||
triggerList[i].addEventListener("click", function () {
|
||||
console.log("click");
|
||||
var collapsible = this.parentElement;
|
||||
var collapsibleData = this.nextElementSibling;
|
||||
if (collapsibleData.style.maxHeight > "0px") {
|
||||
collapsibleData.style.maxHeight = "0px";
|
||||
|
||||
this.classList.toggle("active", false);
|
||||
if (!this.classList.contains("collapsibleMini")) {
|
||||
collapsible.classList.toggle("active", false);
|
||||
}
|
||||
|
||||
var subLists1 = collapsibleData.getElementsByClassName("content");
|
||||
var subLists2 = collapsibleData.getElementsByClassName("active");
|
||||
for (j = 0; j < subLists1.length; j++) {
|
||||
subLists1[j].style.maxHeight = "0px";
|
||||
}
|
||||
for (j = 0; j < subLists2.length; j++) {
|
||||
subLists2[j].classList.toggle("active", false);
|
||||
}
|
||||
} else {
|
||||
collapsibleData.style.maxHeight = (collapsibleData.scrollHeight) + "px";
|
||||
|
||||
this.classList.toggle("active", true);
|
||||
if (!this.classList.contains("collapsibleMini")) {
|
||||
collapsible.classList.toggle("active", true);
|
||||
} else {
|
||||
var parentContent = this.closest(".content");
|
||||
parentContent.style.maxHeight = (parentContent.scrollHeight + collapsibleData.scrollHeight) + "px";
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function init() {
|
||||
//Handle clicks in whole form and set info in tooltip
|
||||
setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
|
||||
setDefaultContent(document.getElementById("transformArea"), 'Insert XSD here');
|
||||
console.log("init");
|
||||
// refreshTooltip();
|
||||
processTooltip();
|
||||
tool.addEventListener('click', event => {
|
||||
//Check if script was called from textarea or selector
|
||||
var targetID = event.target.getAttribute('id');
|
||||
if (targetID !== "processors" && targetID !== "xmlArea" && targetID !== "transformArea" && targetID !== "versions") {
|
||||
return;
|
||||
}
|
||||
|
||||
processTooltip();
|
||||
// console.log("clock");
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1227
Frontend/tools/xslt.html
Normal file
1227
Frontend/tools/xslt.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user