gitweb.ps.run Git - lolstats/blob - html/index.html

   1 <!DOCTYPE html5>
   2 <html>
   3         <head>
   4                 <meta charset="utf-8" />
   5                 <title>lol stats</title>
   6                 <style>
   7 body {
   8         font-family: 'Noto Sans SC', sans-serif;
   9         font-weight: bold;
  10         background-color: black;
  11         user-select: none;
  12         overflow: hidden;
  13         width: 100%;
  14         height: 100%;
  15         padding: 0px;
  16         margin: 0px;
  17         background-color: rgb(200, 50, 50);
  18         box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
  19 }
  20 input, select, button {
  21         font-size:inherit;
  22         border: none;
  23 }
  24 @keyframes startup {
  25         0% {
  26                 top: 50%;
  27                 transform: translate(-50%, -50%);
  28                 width: 65%;
  29         }
  30         100% {
  31                 top: 0%;
  32                 transform: translate(-50%, 0%);
  33                 width: calc(100% - 20px);
  34         }
  35 }
  36 #start.slideup {
  37         animation: startup 0.3s forwards linear;
  38 }
  39 #start.up {
  40         top: 0%;
  41         transform: translate(-50%, 0%);
  42         width: calc(100% - 20px);
  43 }
  44 #start.down {
  45         top: 50%;
  46         transform: translate(-50%, -50%);
  47         width: 65%;
  48 }
  49 #start {
  50         position: absolute;
  51         width: 65%;
  52         left: 50%;
  53         top: 50%;
  54         transform: translate(-50%, -50%);
  55         padding: 10px;
  56         text-align: center;
  57         background-color: transparent;
  58         font-size: 5rem;
  59 }
  60 #title {
  61         width: 100%;
  62         color: white;
  63         text-shadow: 1px 1px 40px black;
  64 }
  65 #inputpanel {
  66         border-radius: 5px;
  67         width: calc(100% - 20px);
  68         height: 50px;
  69         background-color: white;
  70         padding: 10px;
  71         box-shadow: 1px 1px 40px black;
  72         font-size: 2rem;
  73         position: relative;
  74 }
  75 #regionselect {
  76         width: 110px;
  77         height: 50px;
  78         position: relative;
  79         top: 0px;
  80         padding: 0px 0px 0px 10px;
  81         margin: 5px;
  82         text-align: center;
  83         background-color: rgb(200, 50, 50);
  84         color: white;
  85         border-radius: 5px;
  86         border: none;
  87         outline: none;
  88         text-transform: uppercase;
  89         position: absolute;
  90         left: 5px;
  91         top: 5px;
  92         z-index: 1;
  93 }
  94 #nameinput {
  95         text-align: center;
  96         border-bottom: 1px solid lightgray;
  97         outline: none;
  98         margin: 5px;
  99         width: calc(100% - 220px - 10px);
 100         height: 50px;
 101         position: absolute;
 102         left: 110px;
 103         top: 5px;
 104 }
 105 #gobutton {
 106         position: relative;
 107         vertical-align: baseline;
 108         margin: 5px;
 109         width: 110px;
 110         height: 50px;
 111         background-color: rgb(200, 50, 50);
 112         color: white;
 113         border-radius: 5px;
 114         outline: none;
 115         position: absolute;
 116         top: 5px;
 117         right: 5px;
 118         z-index: 1;
 119 }
 120 @keyframes slideup {
 121         0% {
 122                 top: 100%;
 123         }
 124         100% {
 125                 top: 90px;
 126         }
 127 }
 128 @keyframes slideleft {
 129         0% {
 130                 left: 50%;
 131         }
 132         100% {
 133                 left: -50%;
 134         }
 135 }
 136 @keyframes slideright {
 137         0% {
 138                 left: -50%;
 139         }
 140         100% {
 141                 left: 50%;
 142         }
 143 }
 144 #slide.slideup {
 145         animation: slideup 0.3s forwards linear;
 146 }
 147 #slide.slideleft {
 148         animation: slideleft 0.3s forwards linear;
 149 }
 150 #slide.slideright {
 151         animation: slideright 0.3s forwards linear;
 152 }
 153 #slide.left {
 154         left: -50%;
 155 }
 156 #slide {
 157         position: absolute;
 158         left: 50%;
 159         top: 90px;
 160         transform: translate(-50%, 0%);
 161         width: calc(100% - 20px);
 162 }
 163 #matchhistory {
 164         position: absolute;
 165         width: 100%;
 166         background-color: white;
 167         border-radius: 5px;
 168         text-align: center;
 169 }
 170 #stats {
 171         position: absolute;
 172         width: 100%;
 173         left: calc(100% + 20px);
 174         background-color: white;
 175         border-radius: 5px;
 176         text-align: center;
 177 }
 178 .bottom-right {
 179         position: absolute;
 180         right: 0px;
 181         bottom: 0px;
 182 }
 183                 </style>
 184                 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:700" rel="stylesheet">
 185                 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 186                 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 187                 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
 188                 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 189         </head>
 190         <body style="">
 191                 <div id="app">
 192
 193                         <!-- Start Screen -->
 194                         <div id="start">
 195                                 <!-- Main panel -->
 196                                 <!--
 197                         <span id="title">Enter Your Summoner Name</span>
 198                                 -->
 199                                 <div id="inputpanel">
 200                                         <select id="regionselect" v-model="region">
 201                                                 <option v-for="r in regions" :value="r">{{ r }}</option>
 202                                         </select>
 203                                         <input v-on:keyup.enter="startToHistory" id="nameinput" v-model="summoner" type="text">
 204                                         <button v-on:click="startToHistory" id="gobutton"><span class="fas fa-arrow-right"></span></button>
 205                                 </div>
 206
 207                         </div>
 208                         <div id="slide">
 209                                 <div id="matchhistory" style="display: none">
 210                                         <button v-on:click="historyToStats">Stats pls..</button>
 211                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 212                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 213                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 214                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 215                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 216                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 217                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 218                                 </div>
 219                                 <div id="stats" style="display: none">
 220                                         <button v-on:click="statsToHistory">History pls..</button>
 221                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 222                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 223                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 224                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 225                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 226                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 227                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 228                                 </div>
 229                         </div>
 230
 231                 </div>
 232
 233                 <!-- Vue.js Script -->
 234                 <script src="script.js"></script>
 235         </body>
 236 </html>