<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%',
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 -->
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: {
projects / lolstats / commitdiff