Initial (reset)

static/contact.js

@@ -0,0 +1,48 @@
+function submitContactForm(){
+
+    /* check input fields */
+    mailField = document.getElementById("email")
+    messageField = document.getElementById("message")
+
+    if(mailField.value == ""){
+        alert("Bitte geben Sie einen Kontakt an unter dem wir Sie erreichen können!")
+        return
+    }
+
+    if(messageField.value == ""){
+        alert("Nachricht ist leer!")
+        return
+    }
+
+    /* show the waiting dialog */
+    dialog = document.getElementById("waiting-dialog")
+    dialog.style.disply = "block"
+    setMainBackgroundOpacity(0.5)
+
+    /* submit the form */
+    xhr = new XMLHttpRequest();
+    xhr.open("POST", "/contact-api"); 
+    xhr.onload = formSubmitFinished
+    formData = new FormData(document.getElementById("contact-form")); 
+    xhr.send(formData);
+
+}
+
+function formSubmitFinished(event){ 
+    if(event.target.status < 200 || event.target.status >= 300){
+        showErrorMessage(event.target); // blocking
+        setMainBackgroundOpacity(1)
+    }else{
+        window.location.href = "/thanks"
+    }
+}
+
+function setMainBackgroundOpacity(opacity){
+    mainContainer = document.getElementById("main-container")
+    mainContainer.style.opacity = opacity
+}
+
+function showErrorMessage(target){
+    console.log(target)
+    alert("Error: " + target.statusText)
+}

static/login.css

@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css?family=Numans');
+
+html,body{
+/*background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');*/
+	background-color: green !important;
+	background-size: cover;
+	background-repeat: no-repeat;
+	height: 100%;
+	font-family: 'Numans', sans-serif;
+}
+
+.container{
+	height: 100%;
+	align-content: center;
+}
+
+.card{
+	height: 370px;
+	margin-top: auto;
+	margin-bottom: auto;
+	width: 400px;
+	background-color: rgba(0,0,0,0.5) !important;
+}
+
+.card-header h3{
+	color: white;
+}
+
+.social_icon{
+	position: absolute;
+	right: 20px;
+	top: -45px;
+}
+
+.input-group-prepend span{
+	width: 50px;
+	background-color: #FFC312;
+	color: black;
+	border:0 !important;
+}
+
+input:focus{
+	outline: 0 0 0 0  !important;
+	box-shadow: 0 0 0 0 !important;
+}
+
+.login_btn{
+	color: black;
+	background-color: rgb(255, 195, 18) !important;
+	width: 100px;
+}
+
+.login_btn:hover{
+	color: black;
+	background-color: white;
+}
+
+.links{
+	color: white;
+}
+
+.links a{
+	margin-left: 4px;
+}

static/site.css

@@ -0,0 +1,105 @@
+.eyecatcher {
+  height: 100vh;
+  min-height: 500px;
+  /* background-image: url('/static/pictures/test.png'); */
+  background: cyan;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* pricing */
+section.pricing {
+  background: #007bff;
+  background: linear-gradient(to right, #0062E6, #33AEFF);
+}
+
+.pricing .card {
+  border: none;
+  border-radius: 1rem;
+  transition: all 0.2s;
+  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
+}
+
+.pricing hr {
+  margin: 1.5rem 0;
+}
+
+.pricing .card-title {
+  margin: 0.5rem 0;
+  font-size: 0.9rem;
+  letter-spacing: .1rem;
+  font-weight: bold;
+}
+
+.pricing .card-price {
+  font-size: 3rem;
+  margin: 0;
+}
+
+.pricing .card-price .period {
+  font-size: 0.8rem;
+}
+
+.pricing ul li {
+  margin-bottom: 1rem;
+}
+
+.pricing .text-muted {
+  opacity: 0.7;
+}
+
+.pricing .btn {
+  font-size: 80%;
+  border-radius: 5rem;
+  letter-spacing: .1rem;
+  font-weight: bold;
+  padding: 1rem;
+  opacity: 0.7;
+  transition: all 0.2s;
+}
+
+.bg-special{
+  background-color: #eae9e9;
+}
+
+.hover-to-75:hover *{
+  opacity: 0.75;
+  display: unset;
+}
+
+.footer-el{
+  float: left;
+  color: rgba(255,255,255,.5);
+}
+
+/* Hover Effects on Card */
+
+@media (min-width: 992px) {
+  .pricing .card:hover {
+    margin-top: -.25rem;
+    margin-bottom: .25rem;
+    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
+  }
+  .pricing .card:hover .btn {
+    opacity: 1;
+  }
+}
+
+.special-header{
+  font-weight: 900 !important;
+  color: rgba(255,255,255,.9);
+  font-size: 6vw;
+}
+
+.special-sub-header{
+  font-weight: bold;
+  color: rgba(255,255,255,.5);
+  font-size: 4rem;
+  display: none;
+}
+
+.pic-disabled{
+    opacity: 0.6;
+    background-color: black;
+}

static/table.css

@@ -0,0 +1,47 @@
+body{
+	background: #161618;
+}
+table{
+    width: 100%;
+    border-collapse: collapse;
+}
+td{
+    border-style: groove;
+    border-width: 2px;
+    border-color: antiquewhite;
+	background-color: #f5f7f6;
+}
+.header{
+    background: lightcyan !important;
+    font-weight: bold;
+}
+
+.hidden{
+    display: none;
+}
+.information{
+    margin-top: 8px;
+    font-style: italic;
+	color: #f5f7f6;
+}
+button{
+    height: 40px;
+    width:  30%;
+    margin: 20px;
+	border: transparent;
+	border-radius: 20px;
+	background: aqua;
+	font-weight: bold;
+	transition-duration: 0.3s;
+	
+}
+button:hover {
+  	background-color: #4CAF50;
+  	color: white;
+}
+.color-cell{
+    transition-duration: 0.3s;
+}
+.color-cell:hover{
+    opacity: 0.75;
+}

static/table.js

@@ -0,0 +1,152 @@
+var currentCellSelected = null
+
+
+var colors = ["rgb(245, 247, 246)", "indianred", "coral", "orange", "yellow", "cyan", "lightgreen", "rgb(75, 140, 72)", "rgb(35, 110, 31)"]
+var words  = ["", "Awefull", "Worse", "Bad", "Normal", "Praticed", "Decent", "Good", "Perfect"]
+
+
+function cellOnClickListener(element){
+    updateSelectedCell(element)
+}
+
+function colorCellOnClickListener(element){
+    if(currentCellSelected){
+        currentCellSelected.style.background = element.style.background
+    }
+}
+
+function updateSelectedCell(cell){
+    if(currentCellSelected && currentCellSelected.id != cell.id){
+        currentCellSelected.style.borderColor = ""
+        currentCellSelected.blur()
+    }
+    currentCellSelected = cell
+    if(cell){
+        cell.style.borderColor = "blue"
+    }
+}
+
+function updateBackgroundForCell(cell, indexMod){
+    if(!cell.style.background){
+        cell.style.background = colors[0];
+    }
+
+    /* firefox hack */
+    var bcolor = cell.style.background
+    if(bcolor.indexOf(") ")>0){
+        bcolor = bcolor.split(") ")[0] + ")"
+    }else if(bcolor.indexOf(" ") && bcolor.indexOf("rgb") == -1){
+        bcolor = bcolor.split(" ")[0]
+    }
+
+    console.log(bcolor)
+    newColor = colors.indexOf(bcolor) + indexMod + colors.length
+    cell.style.background = colors[newColor % colors.length]
+}
+
+function addWindowListeners(){
+    var colorContent = ""
+    var i
+    for(i = 1; i < colors.length; i++){
+        var colorCell = '<td class="cell color-cell" onclick="colorCellOnClickListener(this)" '
+                    + 'style="border-style: none; background: ' 
+                    + colors[i] + '">' + words[i] + '</td>\n'
+        colorContent += colorCell 
+    }
+    document.getElementById("colorExplanation").innerHTML = colorContent
+
+    document.body.addEventListener('keyup', (e) => {
+        if(!currentCellSelected){
+            updateSelectedCell(document.getElementById("0"))
+        }
+
+        var cols = document.getElementById('table').rows[0].cells.length
+        var rows  = document.getElementById('table').rows.length
+        var id = parseInt(currentCellSelected.id)
+
+        if(e.code === "ArrowUp" && document.activeElement == document.body){
+            var targetId = Math.max(id-cols, 0)
+            updateSelectedCell(document.getElementById(targetId))
+            e.preventDefault()
+        }else if(e.code === "ArrowDown" && document.activeElement == document.body){
+            var targetId = Math.min(id+cols, cols*rows)
+            updateSelectedCell(document.getElementById(targetId))
+            e.preventDefault()
+        }else if(e.code === "ArrowLeft" && document.activeElement == document.body){
+            var targetId = Math.max(id-1, 0)
+            updateSelectedCell(document.getElementById(targetId))
+            e.preventDefault()
+        }else if(e.code === "ArrowRight" && document.activeElement == document.body){
+            var targetId = Math.min(id+1, cols*rows)
+            updateSelectedCell(document.getElementById(targetId))
+            e.preventDefault()
+        }else if(e.code === "Escape"){
+            updateSelectedCell(null)
+            e.preventDefault()
+        }else if(e.code === "ShiftLeft"){
+            updateBackgroundForCell(currentCellSelected, +1)
+            e.preventDefault()
+        }else if(e.code === "ControlLeft"){
+            updateBackgroundForCell(currentCellSelected, -1)
+            e.preventDefault()
+        }else if(e.code === "Enter"){
+            if(document.activeElement != document.body){
+                // document.activeElement.blur()
+            }else{
+                if(currentCellSelected){
+                    currentCellSelected.focus()
+                }
+            }
+            e.preventDefault()
+        }else if(e.code === "Tab"){
+            if(document.activeElement != document.body){
+                document.activeElement.blur()
+            }
+
+            if(currentCellSelected){
+                var targetId = Math.min(id+1, cols*rows)
+                updateSelectedCell(document.getElementById(targetId))
+            }
+            e.preventDefault()
+        }
+    });
+}
+
+function saveToServer(){
+    var contents = []
+    var colors   = []
+
+    for(let el of document.getElementsByClassName("cell")){
+        if(!el.id){
+            /* filter color cells */
+            continue
+        }
+        contents = contents.concat(el.innerText)
+        colors = colors.concat(el.style.background)
+    }
+
+    var cols = document.getElementById('table').rows[0].cells.length
+    var rows = document.getElementById('table').rows.length
+    var hasHeaderColumn = document.getElementById("hasHeaderColumn").innerText
+    var hasHeaderRow    = document.getElementById("hasHeaderRow").innerText
+    var dict = { contents:contents, colors:colors, rows:rows, cols:cols,
+                 hasHeaderRow:hasHeaderRow, hasHeaderColumn:hasHeaderColumn };
+    var json = JSON.stringify(dict);
+
+    var tableId = document.getElementById("tableId").innerText
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onload = function() {
+        if (xhttp.status != 204) {
+            alert("Transmission failed!?!")
+        }else{
+            window.location.href = "/table?id=" + tableId
+        }
+    }
+
+    xhttp.open("POST", "/save?id=" + tableId, true);
+    xhttp.setRequestHeader('Content-Type', 'application/json');
+    xhttp.send(json)
+}
+
+window.onload = addWindowListeners

static/team_champselect.js

@@ -0,0 +1,49 @@
+function saveToServer(){
+    var xhttp = new XMLHttpRequest();
+	
+	champ = "Atrox"
+	position = "Top"
+	affinity = "5"
+	
+	req = "/save?type=teamChampSelect" 	+ "&champ=" + cahmp
+										+ "&position=" + position
+										+ "&affinity=" + affinity
+	xhttp.open("POST", req, true);
+    //xhttp.setRequestHeader('Content-Type', 'application/json');
+    xhttp.send(json)
+}
+
+	
+function addChamp(selectorId, role){
+	champ = document.getElementById(selectorId).value
+	url   = window.location.href + "?" + "role="   + role  +
+								   "&" + "champ="  + champ +
+								   "&" + "action=" + "add"
+	fetch(url, {
+		method: 'POST',
+		mode: 'cors',
+		credentials: 'same-origin',
+		headers: {
+			'Content-Type': 'application/x-www-form-urlencoded',
+		},
+		referrerPolicy: 'strict-origin'
+		}
+	).then(window.location.reload());
+}
+
+
+function removeChamp(champ, role){		
+	url   = window.location.href + "?" + "role="  + role   +
+								   "&" + "champ=" + champ  +
+								   "&" + "action=" + "remove"
+	fetch(url, {
+		method: 'POST',
+		mode: 'cors',
+		credentials: 'same-origin',
+		headers: {
+			'Content-Type': 'application/x-www-form-urlencoded',
+		},
+		referrerPolicy: 'strict-origin'
+		}
+	).then(window.location.reload());
+}