--- /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>
--- /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;
+ background-color: black;
+ user-select: none;
+ overflow: hidden;
+ 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: 50%;
+ }
+ 100% {
+ left: -50%;
+ }
+}
+@keyframes slideright {
+ 0% {
+ left: -50%;
+ }
+ 100% {
+ left: 50%;
+ }
+}
+#slide.slideup {
+ animation: slideup 0.3s forwards linear;
+}
+#slide.slideleft {
+ animation: slideleft 0.3s forwards linear;
+}
+#slide.slideright {
+ animation: slideright 0.3s forwards linear;
+}
+#slide.left {
+ left: -50%;
+}
+#slide {
+ position: absolute;
+ left: 50%;
+ top: 90px;
+ transform: translate(-50%, 0%);
+ width: calc(100% - 20px);
+}
+#matchhistory {
+ position: absolute;
+ width: 100%;
+ background-color: white;
+ border-radius: 5px;
+ text-align: center;
+}
+#stats {
+ position: absolute;
+ width: 100%;
+ left: calc(100% + 20px);
+ background-color: white;
+ border-radius: 5px;
+ text-align: center;
+}
+.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>
--- /dev/null
+// Start Screen
+// ------------
+function getRegions() {
+ return [ "euw", "na", "kr", "br" ];
+}
+
+function toggleStart(up) {
+ $("#start").removeClass(up ? "down" : "up");
+ $("#start").addClass(up ? "up" : "down");
+}
+function slideStart() {
+ $("#start").addClass("slideup");
+}
+function slideSlideUp() {
+ $("#slide").addClass("slideup");
+}
+function slideSlideLeft() {
+ $("#slide").removeClass("slideright");
+ $("#slide").addClass("slideleft");
+}
+function slideSlideRight() {
+ $("#slide").removeClass("slideleft");
+ $("#slide").addClass("slideright");
+}
+function toggleSlideLeft() {
+ $("#slide").addClass("left");
+}
+
+var app = new Vue({
+ el: '#app',
+ data: {
+ regions: getRegions(),
+ region: "euw",
+ summoner: "",
+ },
+ methods: {
+ startToHistory: function() {
+ window.history.pushState("object or string", "Title",
+ "/?summoner=" +
+ $("#nameinput").val() +
+ "®ion=" +
+ $("#regionselect").val() +
+ "&view=history");
+
+ slideStart();
+ $("#matchhistory").show();
+ slideSlideUp();
+ app.startToHistory = ()=>{};
+ },
+ historyToStats: function() {
+ window.history.pushState("object or string", "Title",
+ "/?summoner=" +
+ $("#nameinput").val() +
+ "®ion=" +
+ $("#regionselect").val() +
+ "&view=stats");
+
+ $("#stats").show();
+ slideSlideLeft();
+ setTimeout(() => {
+ $("#matchhistory").hide();
+ }, 300);
+ },
+ statsToHistory: function() {
+ window.history.pushState("object or string", "Title",
+ "/?summoner=" +
+ $("#nameinput").val() +
+ "®ion=" +
+ $("#regionselect").val() +
+ "&view=history");
+
+ $("#matchhistory").show();
+ slideSlideRight();
+ setTimeout(() => {
+ $("#stats").hide();
+ }, 300);
+ },
+ },
+});
+
+// Check for URL parameters
+let url = new URL(window.location.href);
+if (url.searchParams.has("summoner"))
+ app.summoner = url.searchParams.get("summoner");
+if (url.searchParams.has("region"))
+ app.region = url.searchParams.get("region");
+if (url.searchParams.has("view")) {
+ let view = url.searchParams.get("view");
+ if (view == "history") {
+ toggleStart(true);
+ $("#matchhistory").show();
+ app.startToHistory = ()=>{};
+ }
+ else if (view == "stats") {
+ toggleStart(true);
+ $("#stats").show();
+ toggleSlideLeft();
+ app.startToHistory = ()=>{};
+ }
+}
+// ------------
projects / lolstats / commitdiff