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

   1 <!DOCTYPE html5>
   2 <html>
   3   <head>
   4     <meta charset="utf-8" />
   5     <title>lol stats</title>
   6     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
   7     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:700" rel="stylesheet">
   8     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
   9     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
  11   </head>
  12   <body style="font-family: 'Noto Sans SC', sans-serif; overflow: hidden; background-color: black" onresize="onResize()">
  13     <!-- Background image -->
  14     <!--
  15       <img id="background" class="w3-mobile" style="transform: scale(1.1); width: 100%; height: 100%; object-fit: contain; filter: blur(10px) contrast(110%) saturate(140%)" :src="image" />
  16     -->
  17     <!--
  18       <div id="background" :style="{
  19       backgroundImage: 'url(' + image + ')',
  20       transform: mobile ? 'scale(1.2)' : 'scale(1.05)',
  21       width: '100%',
  22       height: '100%',
  23       filter: 'blur(10px) contrast(110%) saturate(140%)',
  24       backgroundSize: 'cover',
  25       backgroundPosition: 'center'
  26       }">
  27     -->
  28     <div id="background" :style="{
  29     backgroundImage: 'url(' + image + ')',
  30     width: '100%',
  31     height: '100%',
  32     backgroundSize: 'cover',
  33     backgroundPosition: 'center'
  34     }"></div>
  35     <!-- Start Screen -->
  36     <div id="start" v-if="visible" class="w3-display-middle w3-threequarter">
  37       <!-- Main panel -->
  38       <div class="w3-jumbo" style="padding: 10px; width: 100%; height: 100%; text-align: center; background-color: transparent">
  39         <span style="width: 100%; color: white; text-shadow: 1px 1px 40px black">Enter Your Summoner Name</span>
  40         <div class="w3-xlarge" style="border-radius: 5px; width: 100%; background-color: white; padding: 10px; box-shadow: 1px 1px 40px black">
  41           <div class="w3-cell-row">
  42             <select class="w3-select w3-cell" style="width: 100px; 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;">
  43               <option value="euw">EUW</option>
  44               <option value="na">NA</option>
  45               <option value="kr">KR</option>
  46             </select>
  47             <input v-on:keyup.enter="showNextPanel()" class="w3-input w3-cell" style="text-align: center; outline: none; margin: 5px; width: calc(100% - 230px);" type="text">
  48             <button v-on:click="showNextPanel()" class="w3-button w3-cell" style="position: relative; bottom:1px; vertical-align: baseline; margin: 5px; width: 100px; height: 50px; background-color: rgb(200, 50, 50); color: white; border-radius: 5px; outline: none;"><span class="fas fa-arrow-right"></span></button>
  49           </div>
  50         </div>
  51       </div>
  52     </div>
  53
  54     <!-- Vue.js Script -->
  55     <script src="script.js"></script>
  56     <!-- Live Reload -->
  57     <script id="reloadscript" src="{{ reload_url }}"></script>
  58   </body>
  59 </html>