Added files with common css styles

src/main/resources/static/css/commons/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>

src/main/resources/static/css/commons/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'; } /* '' */

src/main/resources/static/css/commons/main.css

@@ -0,0 +1,3 @@
+.container {
+    
+}

src/main/resources/static/css/commons/r11form.css

@@ -0,0 +1,344 @@
+@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;
+    background: #8ab8c938;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.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;
+}
+
+.deletion-button {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+}
+
+.deletion-button.btn-tile:hover {
+    color: #ca1111;
+}
+
+.deletion-button.btn-hashmap {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.deletion-button.btn-hashmap:hover {
+    color: #ca1111;
+}
+
+.deletion-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;
+}
+
+.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;
+}
+
+
+.headline {
+    display: flex;
+    justify-content: left;
+}
+
+.version-span {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(85,85,85,0.555);
+}
+
+.tool-window {
+    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.3);
+}
+
+.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;
+}
+
+.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;
+}
+
+.medium-input {
+    width: 50%;
+}
+
+.small-input {
+    width: 30%;
+}
+
+.large-input {
+    width: 100%;
+}
+
+.large-button {
+    width: 100%;
+}
+
+.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{
+    width: 100%;
+    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;
+}
+
+.collapsible .section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #00000012;
+    cursor: pointer;
+}
+
+.collapsible .section-button:hover {
+    filter: brightness(110%); 
+}
+
+.collapsible.active .section-button {
+    background: #00000030;
+}
+
+.collapsible.active .section {
+    display: block;
+}
+
+.collapsible .section {
+    display: none;
+    background: #ffffff50;
+}
+
+.section .content {
+    padding: 15px 15px 30px 15px ;
+    text-align: justify;
+}

src/main/resources/static/css/form.css

@@ -0,0 +1,7 @@
+.r11-form {
+    display: block;
+}
+
+.r11-form input, textarea {
+    border: 
+}

src/main/resources/static/js/datatransfer.js

@@ -104,7 +104,7 @@ function refreshData(){
 }
 
 function setCookie(){
-    document.cookie = C_UUID + '=' +clientUUID+';'
+    document.cookie = C_UUID + '=' +clientUUID;
     document.cookie = C_ID + '=' + lastId;
     document.cookie = C_ADV + '=' + advancedVisibility;
 }

target/classes/static/css/form.css

@@ -0,0 +1,7 @@
+.r11-form {
+    display: block;
+}
+
+.r11-form input, textarea {
+    border: 
+}

target/classes/static/js/datatransfer.js

@@ -104,7 +104,7 @@ function refreshData(){
 }
 
 function setCookie(){
-    document.cookie = C_UUID + '=' +clientUUID+';'
+    document.cookie = C_UUID + '=' +clientUUID;
     document.cookie = C_ID + '=' + lastId;
     document.cookie = C_ADV + '=' + advancedVisibility;
 }