diff --git a/frontend_layout/checkin.html b/frontend_layout/checkin.html new file mode 100644 index 0000000..0fc530d --- /dev/null +++ b/frontend_layout/checkin.html @@ -0,0 +1,139 @@ + + + + + + Keter + + + + +
+ +
+ +
+
+
Welcome! +
+ + + + + + + Go! +
+ +
+ + + + \ No newline at end of file diff --git a/frontend_layout/css/base.css b/frontend_layout/css/base.css new file mode 100644 index 0000000..b682502 --- /dev/null +++ b/frontend_layout/css/base.css @@ -0,0 +1,331 @@ +body { + font-family: 'Lato', Verdana; + font-size: 100%; + //background: white; + //-webkit-align-items: center; + // -ms-flex-align: center; + //align-items: center; + //display: -webkit-flex; + //display: flex; + //flex-flow: column; +} + +.img-responsive +{ + max-width: 100%; + height: auto; + float: left; +} + +.wrap +{ + width: 100%; /* indentation relative to the browser window */ + background: #3538e5; + height: 45px; +} + +.wrap2 +{ + background: #3538e5; + height: 230px; + margin-left: 30%; + margin-right: 30%; +} +margin-left: 200 px; /* left indent */ + /* margin-right: 50 px; */ +} + +.nav { + //float: center; /* logo wrapping */ + //margin-top: 0.82em; +} +.nav > ul > li { + display:inline-block; /* overriding in line-block */ +} +.nav > ul > li.active a{ + background: d7d0c9; + color: #ff0000; + height: 27px; +} +.nav > ul > li > a { + display: block; + font-family: 'Lato', sans-serif; + font-size: 1.1em; + text-transform: uppercase; + padding: 0.5em 1em; + color: d7d0c9; + -webkit-transition: 0.9s; /* smooth transition */ + -moz-transition: 0.9s; + -o-transition: 0.9s; + transition: 0.9s; + height: 27px; +} +.nav > ul > li > a:hover { + color: blue; + background: violet; +} +.nav2{ + float: right; +} +form { + margin:0; +} +.btn_under_tbl{ + display: flex; + justify-content: center; +} +.cool_table { +border-spacing: 0 10px; +font-family: 'Open Sans', sans-serif; +font-weight: bold; +display: flex; +justify-content: center; +} +.cool_table th { +padding: 10px 20px; +background: #3538e5; +color: white; +border-right: 2px solid; +font-size: 0.9em; +} +.cool_table th:first-child { +text-align: left; +} +.cool_table th:last-child { +border-right: none; +} +.cool_table td { +vertical-align: middle; +padding: 10px; +font-size: 14px; +text-align: center; +border-top: 2px solid #56433D; +border-bottom: 2px solid #56433D; +border-right: 2px solid #56433D; +} +.cool_table td:first-child { +border-left: 2px solid #56433D; + +} +.cool_table td:nth-child(2){ +text-align: left; +} + +/* incredible button */ +a.obl{ + position: relative; + display:block; + color: blue; + text-decoration: none; + margin: 20px auto; + text-align:center; + width:125px; + font-family: verdana; + font-size: 22px; + letter-spacing: 2px; + border-bottom: 2px solid transparent; +} + +a.obl:hover,a.obl:focus{ + outline: none; + border-dth:125px; + font-family: verdana; + font-size: 22px; + letter-spacing: 2px; + bobottom: 2px solid #eee; +} + +a.obl::before, a.obl:after{ + position: absolute; + top: 50%; + left: 50%; + width: 70px; + height: 70px; + border: 12px double rgba(0,0,0,0.1); + border-radius: 50%; + content: ''; + opacity: 0; + -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); + -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); + transform: translateX(-50%) translateY(-50%) scale(0.2); +} + +a.obl:after{ + width: 60px; + height: 60px; + border-width: 6px; + -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); + -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); + transform: translateX(-50%) translateY(-50%) scale(0.8); +} + +a.obl:hover:before, a.obl:hover:after{ + -webkit-animation: pulsate 1.2s infinite; + -moz-animation: pulsate 1.2s infinite; + -ms-animation: pulsate 1.2s infinite; + animation: pulsate 1.2s infinite; +} + + +/* incredible button for red */ +a.obl2{ + position: relative; + display:block; + color: red; + text-decoration: none; + margin: 20px auto; + text-align:center; + width:125px; + font-family: verdana; + font-size: 22px; + letter-spacing: 2px; + border: 2px solid transparent; + background: white; + border-color: white; + border-style: solid; + border-radius: 50px 50px 50px 50px; +} + +a.obl2:hover,a.obl:focus{ + outline: none; + border-dth:125px; + font-family: verdana; + font-size: 22px; + letter-spacing: 2px; + bobottom: 2px solid #eee; +} + +a.obl2::before, a.obl:after{ + position: absolute; + top: 50%; + left: 50%; + width: 70px; + height: 70px; + border: 12px double rgba(0,0,0,0.1); + border-radius: 50%; + content: ''; + opacity: 0; + -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); + -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); + transform: translateX(-50%) translateY(-50%) scale(0.2); +} + +a.obl2:after{ + width: 60px; + height: 60px; + border-width: 6px; + -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); + -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); + transform: translateX(-50%) translateY(-50%) scale(0.8); +} + +a.obl2:hover:before, a.obl:hover:after{ + -webkit-animation: pulsate 1.2s infinite; + -moz-animation: pulsate 1.2s infinite; + -ms-animation: pulsate 1.2s infinite; + animation: pulsate 1.2s infinite; +} + + +@-webkit-keyframes pulsate{ + + 30%{ + opacity: 1; + -webkit-transform: translateX(-50%) translateY(-50%) scale(1); + } + + 100%{ + opacity: 0.3; + -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5); + } + +} + +@-moz-keyframes pulsate{ + + 30%{ + opacity: 1; + -moz-transform: translateX(-50%) translateY(-50%) scale(1); + } + + 100%{ + opacity: 0.3; + -moz-transform: translateX(-50%) translateY(-50%) scale(0.5); + } + +} + +@-ms-keyframes pulsate{ + + 30%{ + opacity: 1; + -ms-transform: translateX(-50%) translateY(-50%) scale(1); + } + + 100%{ + opacity: 0.3; + -ms-transform: translateX(-50%) translateY(-50%) scale(0.5); + } + +} + +@-keyframes pulsate{ + + 30%{ + opacity: 1; + transform: translateX(-50%) translateY(-50%) scale(1); + } + + 100%{ + opacity: 0.3; + transform: translateX(-50%) translateY(-50%) scale(0.5); + } +} + +/*incredible tree*/ +/* Remove default bullets */ +ul, #myUL { + list-style-type: none; +} + +/* Remove margins and padding from the parent ul */ +#myUL { + margin: 0; + padding: 0; + height: 130px; + margin-left:10%; + position: absolute; + top: 20%; +} + +/* Style the caret/arrow */ +.caret { + cursor: pointer; + user-select: none; /* Prevent text selection */ +} + +/* Create the caret/arrow with a unicode, and style it */ +.caret::before { + content: "\25B6"; + color: black; + display: inline-block; + margin-right: 6px; +} + +/* Rotate the caret/arrow icon when clicked on (using JavaScript) */ +.caret-down::before { + transform: rotate(90deg); +} + +/* Hide the nested list */ +.nested { + /*display: none;*/ + display: block; +} + +/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */ +.active { + /*display: block;*/ + display: none; +} + diff --git a/frontend_layout/data/test/data.json b/frontend_layout/data/test/data.json new file mode 100644 index 0000000..034e4df --- /dev/null +++ b/frontend_layout/data/test/data.json @@ -0,0 +1 @@ +[{"uuidShedule":"10dff115d-61a1-43e4-8ab1-822d6db73260","graphName":"Graph 2", "state":"Started", "author":"молодцы","start":"-", "end":"-","tags":"ML"},{"uuidShedule":"9dff115d-61a1-43e4-8zb1-822d6db73260","graphName":"Graph 1", "state":"Planing", "author":"Alex","start":"-", "end":"-","tags":"NLP ML"},{"uuidShedule":"9dff115d-61a1-43e4-8ab1-822d6db73260","graphName":"Graph0","state":"planning","author":"0","start":"2018-11-17T11:25:03.189+0000","end":"2067-10-03T22:50:06.378+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"5f9fca0f-a632-4741-8652-cf0af817794f","graphName":"Graph1","state":"planning","author":"1","start":"2018-11-17T11:25:03.189+0000","end":"2043-04-26T17:07:34.783+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"b283ab7c-e39f-455f-9584-b69a2f775e80","graphName":"Graph2","state":"started","author":"2","start":"2018-11-17T11:25:03.189+0000","end":"2035-03-04T07:13:24.252+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"d80bc49b-0369-4b16-a40f-4e32bfa3574f","graphName":"Graph3","state":"started","author":"3","start":"2018-11-17T11:25:03.189+0000","end":"2031-02-05T14:16:18.986+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"1fae0fab-b94a-43c5-82da-f43b6d01ee60","graphName":"Graph4","state":"failed","author":"4","start":"2018-11-17T11:25:03.189+0000","end":"2028-08-26T23:18:03.826+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"b8d84b5d-e442-4123-b81c-07a39e8a7b0a","graphName":"Graph5","state":"failed","author":"5","start":"2018-11-17T11:25:03.190+0000","end":"2027-01-09T21:19:13.721+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"2e4c3b3c-ab20-41cf-b67f-d249041f318f","graphName":"Graph6","state":"succeed","author":"6","start":"2018-11-17T11:25:03.190+0000","end":"2025-11-10T19:54:20.788+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"c278e63a-32e0-4e8b-bf6c-64f6bebb4f31","graphName":"Graph7","state":"succeed","author":"7","start":"2018-11-17T11:25:03.190+0000","end":"2024-12-27T00:50:41.088+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"bd3c2098-1e37-4137-a9be-b3e270a06b6b","graphName":"Graph8","state":"canceled","author":"8","start":"2018-11-17T11:25:03.190+0000","end":"2024-04-23T02:01:10.211+0000","tags":["0","1","2","3","4","5","6","7","8","9"]},{"uuidShedule":"fbb7385a-c450-4f01-898b-add8ac78e499","graphName":"Graph9","state":"canceled","author":"9","start":"2018-11-17T11:25:03.190+0000","end":"2023-10-07T17:21:33.509+0000","tags":["0","1","2","3","4","5","6","7","8","9"]}] \ No newline at end of file diff --git a/frontend_layout/graphspalette.html b/frontend_layout/graphspalette.html new file mode 100644 index 0000000..9169c25 --- /dev/null +++ b/frontend_layout/graphspalette.html @@ -0,0 +1,101 @@ + + + + + + Keter + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git "a/frontend_layout/images/header - \320\272\320\276\320\277\320\270\321\217.png" "b/frontend_layout/images/header - \320\272\320\276\320\277\320\270\321\217.png" new file mode 100644 index 0000000..67feea2 Binary files /dev/null and "b/frontend_layout/images/header - \320\272\320\276\320\277\320\270\321\217.png" differ diff --git a/frontend_layout/images/header.png b/frontend_layout/images/header.png new file mode 100644 index 0000000..d841d58 Binary files /dev/null and b/frontend_layout/images/header.png differ diff --git a/frontend_layout/login.html b/frontend_layout/login.html new file mode 100644 index 0000000..bf5978c --- /dev/null +++ b/frontend_layout/login.html @@ -0,0 +1,41 @@ + + + + + + Log in Keter + + + +
+ +
+
+
+ +
Welcome! + +
+ + + Go! +
+ +
+ + + + \ No newline at end of file diff --git a/frontend_layout/schedule.html b/frontend_layout/schedule.html new file mode 100644 index 0000000..7eaee86 --- /dev/null +++ b/frontend_layout/schedule.html @@ -0,0 +1,63 @@ + + + + + + Keter + + + +
+ +
+ + + + + + + +
Last Message: +
+ +
+ 		+ Ok +
+ +
+ +
+
+ + + + + + + + + + +
№Graph NameStateAuthorStart TsEnd TsTags
+
+
+ + +
+ + + \ No newline at end of file diff --git a/frontend_layout/scripts/CollapsibleLists.js b/frontend_layout/scripts/CollapsibleLists.js new file mode 100644 index 0000000..43dac1e --- /dev/null +++ b/frontend_layout/scripts/CollapsibleLists.js @@ -0,0 +1,2 @@ +//code.iamkate.com +var CollapsibleLists=function(){function e(b,c){[].forEach.call(b.getElementsByTagName("li"),function(a){c&&b!==a.parentNode||(a.style.userSelect="none",a.style.MozUserSelect="none",a.style.msUserSelect="none",a.style.WebkitUserSelect="none",a.addEventListener("click",g.bind(null,a)),f(a))})}function g(b,c){for(var a=c.target;"LI"!==a.nodeName;)a=a.parentNode;a===b&&f(b)}function f(b){var c=b.classList.contains("collapsibleListClosed"),a=b.getElementsByTagName("ul");[].forEach.call(a,function(a){for(var d=a;"LI"!==d.nodeName;)d=d.parentNode;d===b&&(a.style.display=c?"block":"none")});b.classList.remove("collapsibleListOpen");b.classList.remove("collapsibleListClosed");0 { + console.log(response); + return response.json(); + + }).then((jsonData) => { + let ourTable = document.getElementById('cool_table_id').getElementsByTagName('tbody'); + let apples = jsonData; //apples = JSON.parse(apple).sort((a,b)=> a.n > b.n), + let i = 1; + + for (let apple of apples) { + let ourTr = document.createElement('tr'); + + let ourTd = document.createElement('td'); + ourTd.innerText = i; + ourTr.appendChild(ourTd); + ourTd = document.createElement('td'); + ourTd.innerText = apple.graphName; + ourTr.appendChild(ourTd); + ourTd = document.createElement('td'); + ourTd.innerText = apple.state; + ourTr.appendChild(ourTd); + ourTd = document.createElement('td'); + ourTd.innerText = apple.author; + ourTr.appendChild(ourTd); + ourTd = document.createElement('td'); + ourTd.innerText = apple.start; + ourTr.appendChild(ourTd); + ourTd = document.createElement('td'); + ourTd.innerText = apple.end; + ourTr.appendChild(ourTd); + ourTd = document.createElement('td'); + ourTd.innerText = apple.tags; + ourTr.appendChild(ourTd); + + ourTable[0].appendChild(ourTr); + i++; + } + }).catch (e => console.error(e));