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

   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         overflow: hidden;
  11         background-color: black;
  12         user-select: none;
  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: 0%;
 131         }
 132         100% {
 133                 left: -50%;
 134         }
 135 }
 136 #slide.up {
 137         animation: slideup 0.3s forwards linear;
 138 }
 139 #slide.left {
 140         animation: slideleft 0.3s forwards linear;
 141 }
 142 #slide {
 143         background-color: white;
 144         border-radius: 5px;
 145         position: absolute;
 146         left: 50%;
 147         top: 90px;
 148         transform: translate(-50%, 0%);
 149         width: calc(100% - 20px);
 150         text-align: center;
 151 }
 152 #stats {
 153         position: relative;
 154         left: calc(100% + 20px);
 155 }
 156 .bottom-right {
 157         position: absolute;
 158         right: 0px;
 159         bottom: 0px;
 160 }
 161                 </style>
 162                 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:700" rel="stylesheet">
 163                 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
 164                 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 165                 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
 166                 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 167         </head>
 168         <body style="">
 169                 <div id="app">
 170
 171                         <!-- Start Screen -->
 172                         <div id="start">
 173                                 <!-- Main panel -->
 174                                 <!--
 175                         <span id="title">Enter Your Summoner Name</span>
 176                                 -->
 177                                 <div id="inputpanel">
 178                                         <select id="regionselect" v-model="region">
 179                                                 <option v-for="r in regions" :value="r">{{ r }}</option>
 180                                         </select>
 181                                         <input v-on:keyup.enter="startToHistory" id="nameinput" v-model="summoner" type="text">
 182                                         <button v-on:click="startToHistory" id="gobutton"><span class="fas fa-arrow-right"></span></button>
 183                                 </div>
 184
 185                         </div>
 186                         <div id="slide">
 187                                 <div id="matchhistory" style="display: none">
 188                                         <button v-on:click="historyToStats">Stats pls..</button>
 189                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 190                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 191                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 192                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 193                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 194                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 195                                         <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
 196                                 </div>
 197                                 <div id="stats" style="display: none">
 198                                         <button v-on:click="statsToHistory">History pls..</button>
 199                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 200                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 201                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 202                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 203                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 204                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 205                                         <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
 206                                 </div>
 207                         </div>
 208
 209                 </div>
 210
 211                 <!-- Vue.js Script -->
 212                 <script src="script.js"></script>
 213         </body>
 214 </html>