Skip to content

Commit 5d8cb4f

Browse files
bacon-delightbacon-delight
committed
Added fireworks video
1 parent 5b6b865 commit 5d8cb4f

File tree

8 files changed

+109
-25
lines changed

8 files changed

+109
-25
lines changed

‎src/assets/drone.png

119 KB
Loading

‎src/assets/favicon.ico

1.12 KB
Binary file not shown.

‎src/assets/fireworks3.mp4

15.3 MB
Binary file not shown.

‎src/assets/landing.jpg

211 KB
Loading

‎src/assets/logo.png

-4.23 KB
Loading

‎src/views/Home.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<template>
22
<div class="container">
3-
home
3+
4+
5+
46
</div>
57
</template>
68

@@ -12,6 +14,8 @@
1214

1315
<style lang="scss" scoped>
1416
.container {
15-
17+
width: 100vw;
18+
height: 100vh;
19+
position: relative;
1620
}
1721
</style>

‎src/views/Stage.vue

Lines changed: 95 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
11
<template>
22
<div class="container">
3-
<div class="centered">
3+
4+
<div v-if="!activated" class="curtain">
5+
<div class="curtain__notification">Awaiting Activation</div>
6+
</div>
7+
8+
<div v-else class="background">
49

5-
<h2 class="centered__notification">
6-
{{ show }}
7-
</h2>
10+
<div class="bg-video">
11+
<video class="bg-video__content" autoplay loop>
12+
<source src="../assets/fireworks3.mp4" type="video/mp4">
13+
Browser doesn't support video!
14+
</video>
15+
</div>
16+
17+
<div class="logo">
18+
<h2 class="logo__text">Enterprise Integrated Solutions</h2>
19+
<img class="logo__image" src="../assets/logo.png" alt="Philips">
20+
</div>
21+
22+
<div class="greeting">
23+
<div class="greeting__text">EIS Innovation Open</div>
24+
</div>
825

926
</div>
27+
1028
</div>
1129
</template>
1230

@@ -18,36 +36,101 @@
1836
name: 'stage',
1937
data() {
2038
return {
21-
show: 'Awaiting Activation'
39+
activated: false
2240
}
2341
},
2442
created() {
2543
socket.on("startShow", _ => {
26-
this.show = 'Event Activated Successfully';
44+
this.activated = true;
2745
})
2846
}
2947
}
3048
</script>
3149

3250
<style lang="scss" scoped>
51+
52+
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
53+
3354
.container {
3455
height: 100vh;
3556
width: 100vw;
57+
}
58+
59+
.curtain {
60+
position: relative;
61+
background: #000;
62+
height: 100vh;
63+
width: 100vw;
64+
transition: all 1s;
65+
66+
&__notification {
67+
position: absolute;
68+
top: 50%;
69+
left: 50%;
70+
transform: translate(-50%, -50%);
71+
color: #fff;
72+
font-weight: 400;
73+
font-size: 1.5rem;
74+
letter-spacing: .2rem;
75+
}
76+
}
77+
78+
.background {
3679
position: relative;
37-
background-image: linear-gradient(to right bottom, rgba(#000046, 0.8), rgba(#1CB5E0, 0.8));
80+
height: 100vh;
81+
width: 100vw;
82+
}
83+
84+
.bg-video {
85+
position: absolute;
86+
top: 0;
87+
left: 0;
88+
height: 100%;
89+
width: 100%;
90+
z-index: -1;
91+
overflow: hidden;
92+
93+
&__content {
94+
height: 100%;
95+
width: 100%;
96+
object-fit: cover;
97+
}
3898
}
3999
40-
.centered {
100+
.greeting {
41101
position: absolute;
42-
top: 50%;
102+
top: 80%;
43103
left: 50%;
44104
transform: translate(-50%, -50%);
105+
106+
&__text {
107+
font-family: 'Open Sans', sans-serif;
108+
color: #fff;
109+
font-weight: 500;
110+
font-size: 2.5rem;
111+
letter-spacing: .25rem;
112+
}
113+
}
45114
46-
&__notification {
115+
.logo {
116+
position: absolute;
117+
top: 0;
118+
right: 0;
119+
padding: 1rem 2rem;
120+
121+
&__image {
122+
max-height: 4rem;
123+
display: inline-block;
124+
transform: translateY(1.5rem);
125+
}
126+
127+
&__text {
128+
display: inline-block;
47129
color: #fff;
48130
font-weight: 400;
49-
font-size: 1.5rem;
50-
letter-spacing: .2rem;
131+
margin-right: 1rem;
132+
padding-bottom: 1.5rem;
133+
letter-spacing: .1rem;
51134
}
52135
}
53136
</style>

‎src/views/Trigger.vue

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
<div class="centered">
55

6-
<a v-if="!isActivated" class="centered__button" @click="activateConnection">Activate</a>
6+
<a v-if="!isActivated" class="centered__button" @click="activateConnection">Open</a>
77

8-
<h2 v-else class="centered__notification">Event has been triggered!</h2>
8+
<h2 v-else class="centered__notification">Event Started</h2>
99

1010
</div>
1111

@@ -37,7 +37,7 @@
3737
height: 100vh;
3838
width: 100vw;
3939
position: relative;
40-
background-image: linear-gradient(to right bottom, rgba(#000046, 0.8), rgba(#1CB5E0, 0.8));
40+
background-image: linear-gradient(to right bottom, rgba(#000046, 0.8), rgba(#000000, 0.8));
4141
}
4242
4343
.centered {
@@ -49,27 +49,24 @@
4949
&__button {
5050
text-decoration: none;
5151
color: #fff;
52+
background: tomato;
5253
font-size: 1.8rem;
5354
letter-spacing: .25rem;
5455
text-transform: uppercase;
5556
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
5657
background-size: 250%;
5758
padding: .5rem 1rem;
58-
transition: all .8s;
5959
cursor: pointer;
60-
61-
&:hover {
62-
background-position: 100%;
63-
color: #000046;
64-
letter-spacing: .35rem;
65-
}
60+
border-radius: 10px;
6661
}
6762
6863
&__notification {
6964
color: #fff;
70-
font-weight: 400;
65+
font-weight: 500;
7166
font-size: 1.5rem;
7267
letter-spacing: .2rem;
68+
text-align: center;
69+
text-transform: uppercase;
7370
}
7471
}
7572
</style>

0 commit comments

Comments
 (0)