--- /dev/null
+<!DOCTYPE html5>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <title>lol stats</title>
+ <style>
+body {
+ font-family: 'Noto Sans SC', sans-serif;
+ font-weight: bold;
+ overflow: hidden;
+ background-color: black;
+ user-select: none;
+ width: 100%;
+ height: 100%;
+ padding: 0px;
+ margin: 0px;
+ background-color: rgb(200, 50, 50);
+ box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
+}
+input, select, button {
+ font-size:inherit;
+ border: none;
+}
+@keyframes startup {
+ 0% {
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 65%;
+ }
+ 100% {
+ top: 0%;
+ transform: translate(-50%, 0%);
+ width: calc(100% - 20px);
+ }
+}
+#start.slideup {
+ animation: startup 0.3s forwards linear;
+}
+#start.up {
+ top: 0%;
+ transform: translate(-50%, 0%);
+ width: calc(100% - 20px);
+}
+#start.down {
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 65%;
+}
+#start {
+ position: absolute;
+ width: 65%;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ padding: 10px;
+ text-align: center;
+ background-color: transparent;
+ font-size: 5rem;
+}
+#title {
+ width: 100%;
+ color: white;
+ text-shadow: 1px 1px 40px black;
+}
+#inputpanel {
+ border-radius: 5px;
+ width: calc(100% - 20px);
+ height: 50px;
+ background-color: white;
+ padding: 10px;
+ box-shadow: 1px 1px 40px black;
+ font-size: 2rem;
+ position: relative;
+}
+#regionselect {
+ width: 110px;
+ height: 50px;
+ position: relative;
+ top: 0px;
+ padding: 0px 0px 0px 10px;
+ margin: 5px;
+ text-align: center;
+ background-color: rgb(200, 50, 50);
+ color: white;
+ border-radius: 5px;
+ border: none;
+ outline: none;
+ text-transform: uppercase;
+ position: absolute;
+ left: 5px;
+ top: 5px;
+ z-index: 1;
+}
+#nameinput {
+ text-align: center;
+ border-bottom: 1px solid lightgray;
+ outline: none;
+ margin: 5px;
+ width: calc(100% - 220px - 10px);
+ height: 50px;
+ position: absolute;
+ left: 110px;
+ top: 5px;
+}
+#gobutton {
+ position: relative;
+ vertical-align: baseline;
+ margin: 5px;
+ width: 110px;
+ height: 50px;
+ background-color: rgb(200, 50, 50);
+ color: white;
+ border-radius: 5px;
+ outline: none;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ z-index: 1;
+}
+@keyframes slideup {
+ 0% {
+ top: 100%;
+ }
+ 100% {
+ top: 90px;
+ }
+}
+@keyframes slideleft {
+ 0% {
+ left: 0%;
+ }
+ 100% {
+ left: -50%;
+ }
+}
+#slide.up {
+ animation: slideup 0.3s forwards linear;
+}
+#slide.left {
+ animation: slideleft 0.3s forwards linear;
+}
+#slide {
+ background-color: white;
+ border-radius: 5px;
+ position: absolute;
+ left: 50%;
+ top: 90px;
+ transform: translate(-50%, 0%);
+ width: calc(100% - 20px);
+ text-align: center;
+}
+#stats {
+ position: relative;
+ left: calc(100% + 20px);
+}
+.bottom-right {
+ position: absolute;
+ right: 0px;
+ bottom: 0px;
+}
+ </style>
+ <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:700" rel="stylesheet">
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+ <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
+ <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
+ </head>
+ <body style="">
+ <div id="app">
+
+ <!-- Start Screen -->
+ <div id="start">
+ <!-- Main panel -->
+ <!--
+ <span id="title">Enter Your Summoner Name</span>
+ -->
+ <div id="inputpanel">
+ <select id="regionselect" v-model="region">
+ <option v-for="r in regions" :value="r">{{ r }}</option>
+ </select>
+ <input v-on:keyup.enter="startToHistory" id="nameinput" v-model="summoner" type="text">
+ <button v-on:click="startToHistory" id="gobutton"><span class="fas fa-arrow-right"></span></button>
+ </div>
+
+ </div>
+ <div id="slide">
+ <div id="matchhistory" style="display: none">
+ <button v-on:click="historyToStats">Stats pls..</button>
+ <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+ </div>
+ <div id="stats" style="display: none">
+ <button v-on:click="statsToHistory">History pls..</button>
+ <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+ <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- Vue.js Script -->
+ <script src="script.js"></script>
+ </body>
+</html>
projects / lolstats / blobdiff