Resolved merged conflict bc stupid linter.
This commit is contained in:
@@ -1,15 +0,0 @@
|
|||||||
{
|
|
||||||
"author": "Kasper Rynning-Tønnesen og Kevin Midbøe",
|
|
||||||
"name": "Vinlotteri Knowit",
|
|
||||||
"short_name": "Vinlottis",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "/android-chrome-144x144.png",
|
|
||||||
"sizes": "144x144",
|
|
||||||
"type": "image/png"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"theme_color": "#daeedd",
|
|
||||||
"background_color": "#daeedd",
|
|
||||||
"display": "standalone"
|
|
||||||
}
|
|
||||||
16
public/assets/manifest.json
Normal file
16
public/assets/manifest.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"author": "Kasper Rynning-Tønnesen og Kevin Midbøe",
|
||||||
|
"name": "Vinlotteri Knowit",
|
||||||
|
"short_name": "Vinlottis",
|
||||||
|
"start_url": "/#/",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/public/assets/images/android-chrome-144x144.png",
|
||||||
|
"sizes": "144x144",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"theme_color": "#daeedd",
|
||||||
|
"background_color": "#daeedd",
|
||||||
|
"display": "standalone"
|
||||||
|
}
|
||||||
@@ -2,14 +2,16 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<banner />
|
<banner />
|
||||||
<router-view />
|
<router-view />
|
||||||
|
<Countdown />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import banner from "@/ui/Banner";
|
import banner from "@/ui/Banner";
|
||||||
|
import Countdown from "@/ui/Countdown";
|
||||||
export default {
|
export default {
|
||||||
name: "vinlottis",
|
name: "vinlottis",
|
||||||
components: { banner },
|
components: { banner, Countdown },
|
||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
|
|||||||
@@ -3,13 +3,31 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Vinlottis</title>
|
<title>Vinlottis</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="apple-touch-icon" sizes="152x152" href="/public/assets/images/apple-touch-icon.png">
|
<link
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/public/assets/images/favicon-32x32.png">
|
rel="apple-touch-icon"
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/public/assets/images/favicon-16x16.png">
|
sizes="152x152"
|
||||||
<link rel="manifest" href="/public/assets/images/site.webmanifest">
|
href="/public/assets/images/apple-touch-icon.png"
|
||||||
<link rel="mask-icon" href="/public/assets/images/safari-pinned-tab.svg" color="#23101f">
|
/>
|
||||||
<meta name="msapplication-TileColor" content="#da532c">
|
<link
|
||||||
<meta name="theme-color" content="#ffffff">
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="/public/assets/images/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="/public/assets/images/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link rel="manifest" href="/public/assets/manifest.json" />
|
||||||
|
<link
|
||||||
|
rel="mask-icon"
|
||||||
|
href="/public/assets/images/safari-pinned-tab.svg"
|
||||||
|
color="#23101f"
|
||||||
|
/>
|
||||||
|
<meta name="msapplication-TileColor" content="#da532c" />
|
||||||
|
<meta name="theme-color" content="#dbeede" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
131
src/ui/Countdown.vue
Normal file
131
src/ui/Countdown.vue
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="clock" v-if="enabled">
|
||||||
|
<h2 cv-if="distance > 0">
|
||||||
|
<span v-if="days > 0">{{ days }} dager, </span>
|
||||||
|
<span>{{ pad(hours) }}</span
|
||||||
|
>: <span>{{ pad(minutes) }}</span
|
||||||
|
>:
|
||||||
|
<span>{{ pad(seconds) }}</span>
|
||||||
|
</h2>
|
||||||
|
<div class="cross" @click="stopClock">X</div>
|
||||||
|
<h2 v-if="(distance = 0)">Lotteriet har begynt!</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nextLottery: null,
|
||||||
|
days: 0,
|
||||||
|
hours: 0,
|
||||||
|
minutes: 0,
|
||||||
|
seconds: 0,
|
||||||
|
distance: 0,
|
||||||
|
enabled: false,
|
||||||
|
code: "38384040373937396665",
|
||||||
|
codeDone: "",
|
||||||
|
interval: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("keydown", this.listenerFunction);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
pad: function(num) {
|
||||||
|
if (num < 10) {
|
||||||
|
return `0${num}`;
|
||||||
|
}
|
||||||
|
return num;
|
||||||
|
},
|
||||||
|
listenerFunction: function(event) {
|
||||||
|
this.codeDone += event.keyCode;
|
||||||
|
if (this.code.substring(0, this.codeDone.length) == this.codeDone) {
|
||||||
|
if (this.code == this.codeDone && !this.enabled) {
|
||||||
|
this.enabled = true;
|
||||||
|
this.initialize();
|
||||||
|
this.countdown();
|
||||||
|
this.codeDone = "";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.codeDone = "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initialize: function() {
|
||||||
|
let d = new Date();
|
||||||
|
let dayOfLottery = 5;
|
||||||
|
let nextDayOfLottery = new Date(
|
||||||
|
d.setDate(d.getDate() + ((5 + 7 - d.getDay()) % 7))
|
||||||
|
);
|
||||||
|
nextDayOfLottery = new Date(nextDayOfLottery.setHours(15));
|
||||||
|
nextDayOfLottery = new Date(nextDayOfLottery.setMinutes(0));
|
||||||
|
nextDayOfLottery = new Date(nextDayOfLottery.setSeconds(0));
|
||||||
|
this.nextLottery = nextDayOfLottery;
|
||||||
|
window.scrollTo(0, 0);
|
||||||
|
document.querySelector("body").style.overflow = "hidden";
|
||||||
|
document.querySelector("body").style.height = "100vh";
|
||||||
|
let now = new Date().getTime();
|
||||||
|
this.distance = new Date(this.nextLottery).getTime() - now;
|
||||||
|
},
|
||||||
|
stopClock: function() {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
this.enabled = false;
|
||||||
|
document.querySelector("body").style.overflow = "auto";
|
||||||
|
document.querySelector("body").style.height = "initial";
|
||||||
|
},
|
||||||
|
countdown: function() {
|
||||||
|
// Get today's date and time
|
||||||
|
let now = new Date().getTime();
|
||||||
|
|
||||||
|
// Find the distance between now and the count down date
|
||||||
|
this.distance = new Date(this.nextLottery).getTime() - now;
|
||||||
|
|
||||||
|
// Time calculations for days, hours, minutes and seconds
|
||||||
|
this.days = Math.floor(this.distance / (1000 * 60 * 60 * 24));
|
||||||
|
this.hours = Math.floor(
|
||||||
|
(this.distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||||
|
);
|
||||||
|
this.minutes = Math.floor(
|
||||||
|
(this.distance % (1000 * 60 * 60)) / (1000 * 60)
|
||||||
|
);
|
||||||
|
this.seconds = Math.floor((this.distance % (1000 * 60)) / 1000);
|
||||||
|
|
||||||
|
if (this.distance < 0) {
|
||||||
|
clearTimeout(this.interval);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.interval = setTimeout(this.countdown, 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.clock {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: absolute;
|
||||||
|
background: white;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.cross {
|
||||||
|
top: 15px;
|
||||||
|
right: 23px;
|
||||||
|
font-size: 2rem;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: auto;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user