diff options
| -rw-r--r-- | index.html | 18 | ||||
| -rw-r--r-- | script.js | 13 |
2 files changed, 24 insertions, 7 deletions
@@ -2,19 +2,20 @@ <html> <head> <meta charset="utf-8" /> - <title>hello</title> + <title>lol stats</title> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <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> </head> - <body style="font-family: 'Noto Sans SC', sans-serif; overflow: hidden; background-color: black"> + <body style="font-family: 'Noto Sans SC', sans-serif; overflow: hidden; background-color: black" onresize="onResize()"> <!-- Background image --> <!-- <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" /> --> - <div id="background" :style="{ + <!-- + <div id="background" :style="{ backgroundImage: 'url(' + image + ')', transform: mobile ? 'scale(1.2)' : 'scale(1.05)', width: '100%', @@ -22,8 +23,15 @@ filter: 'blur(10px) contrast(110%) saturate(140%)', backgroundSize: 'cover', backgroundPosition: 'center' - }"> - </div> + }"> + --> + <div id="background" :style="{ + backgroundImage: 'url(' + image + ')', + width: '100%', + height: '100%', + backgroundSize: 'cover', + backgroundPosition: 'center' + }"></div> <!-- Start Screen --> <div id="start" v-if="visible" class="w3-display-middle w3-threequarter"> <!-- Main panel --> @@ -10,19 +10,28 @@ let redSkins = [ function randomElement(array) { return array[Math.floor(Math.random() * array.length)]; } +let champ1 = "http://ddragon.leagueoflegends.com/cdn/img/champion/loading/" + randomElement(redSkins) + ".jpg"; +let champ2 = "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/" + randomElement(redSkins) + ".jpg"; +let ionia1 = "https://am-a.akamaihd.net/image?f=https%3A%2F%2Funiverse-meeps.leagueoflegends.com%2Fv1%2Fassets%2Fimages%2Fmttargon-eternal-winter-of-the-mountaintop.jpg"; +let ionia2 = "https://am-a.akamaihd.net/image?f=https%3A%2F%2Funiverse-meeps.leagueoflegends.com%2Fv1%2Fassets%2Fimages%2Ffactions%2Fmount-targon_splash.jpg"; function getType() { + return window.innerWidth < window.innerHeight; return (typeof window.orientation !== 'undefined'); } var bg = new Vue({ el: '#background', data: { - image: "http://ddragon.leagueoflegends.com/cdn/img/champion/" + (getType() ? "loading/" : "splash/") + randomElement(redSkins) + ".jpg", - mobile: getType(), + image: ionia1, } }); +function onResize() { + if (getType()) bg.image = ionia1; + else bg.image = ionia2; +} + var start = new Vue({ el: '#start', data: { |