✨ Site > Add fireworks git add --all! :boom::star2::rocket:🔥💥

site/src/components/blast/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/blast/script.js

@@ -0,0 +1,42 @@
+export default
+{
+    name: 'blast',
+
+    data()
+    {
+        return {
+            sparks: [],
+            color: 'yellow'
+        }
+    },
+
+    created()
+    {
+        // Create sparks
+        for(let i = 0; i < 25; i++)
+        {
+            this.sparks.push([
+                Math.random() * 360 + 'deg',
+                Math.random(),
+                0.5 + Math.random() * 1.5 + 's'
+            ])
+        }
+
+        // End timeout
+        window.setTimeout(() =>
+        {
+            this.$emit('end', this.index)
+        }, 4000)
+
+        // Color
+        this.color = `hsl(${255 * Math.random()}, 100%, 50%)`
+    },
+
+    mounted()
+    {
+    },
+
+    methods:
+    {
+    }
+}

site/src/components/blast/style.styl

@@ -0,0 +1,43 @@
+.blast
+    position absolute
+    transform translateY(0px)
+    will-change transform
+    animation-name blast
+    animation-duration 3s
+    animation-timing-function ease-in-out
+    animation-fill-mode forwards
+
+    @keyframes blast
+        0%
+            opacity 1
+            transform translateY(0px)
+        50%
+            opacity 1
+        100%
+            opacity 0
+            transform translateY(80px)
+
+
+.spark
+    position absolute
+
+.inner-1
+    position absolute
+    transform translateY(0px)
+    will-change transform
+    animation-name spark-inner-1
+    animation-timing-function cubic-bezier(0, 0, 0, 1)
+    animation-fill-mode forwards
+
+    @keyframes spark-inner-1
+        0%
+            transform translateY(0px)
+        100%
+            transform translateY(160px)
+
+.inner-2
+    position absolute
+    top -3px
+    left -3px
+    width 30px
+    height 30px

site/src/components/blast/template.html

@@ -0,0 +1,7 @@
+<div class="blast" :style="`left:${Math.random() * 100}%;top:${Math.random() * 100}%;`">
+    <div v-for="spark of sparks" class="spark" :style="`transform: rotate(${spark[0]}) scale(${spark[1]}, ${spark[1]});`">
+        <div class="inner-1" :style="`animation-duration: ${spark[2]}`">
+            <div class="inner-2" :style="`transform: scale(${1 - spark[1]}, ${1 - spark[1]}); background-color: ${color};`"></div>
+        </div>
+    </div>
+</div>

site/src/components/fireworks/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>

site/src/components/fireworks/script.js

@@ -0,0 +1,85 @@
+import Blast from '@/components/blast'
+
+export default
+{
+    name: 'fireworks',
+
+    components:
+    {
+        Blast
+    },
+
+    props:
+    {
+        running: { type: Boolean, default: true }
+    },
+
+    data()
+    {
+        return {
+            blasts: []
+        }
+    },
+
+    watch:
+    {
+        running: 'onRunningChange'
+    },
+
+    created()
+    {
+        this.blastsIndex = 0
+    },
+
+    mounted()
+    {
+        this.start()
+    },
+
+    methods:
+    {
+        onRunningChange(value)
+        {
+            if(value)
+            {
+                this.addBlast()
+            }
+        },
+
+        start()
+        {
+            if(this.running)
+            {
+                this.addBlast()
+            }
+        },
+
+        addBlast()
+        {
+            this.blasts.push(this.blastsIndex++)
+
+            if(this.running)
+            {
+                window.setTimeout(() =>
+                {
+                    this.addBlast()
+                }, 1000 + Math.random() * 3000)
+            }
+        },
+
+        removeBlast(index)
+        {
+            const blast = this.blasts.indexOf(index)
+
+            if(blast !== -1)
+            {
+                this.blasts.splice(blast, 1)
+            }
+        },
+
+        onBlastEnd(index)
+        {
+            this.removeBlast(index)
+        }
+    }
+}

site/src/components/fireworks/style.styl

@@ -0,0 +1,9 @@
+.fireworks
+    position absolute
+    top 50%
+    left 50%
+    width 400px
+    height 400px
+    margin-top -280px
+    margin-left calc(-200px - 145px)
+    z-index 1

site/src/components/fireworks/template.html

@@ -0,0 +1,3 @@
+<div class="fireworks">
+    <blast v-for="blast in blasts" :key="blast" @end="onBlastEnd(blast)"></blast>
+</div>

site/src/components/landing/script.js

@@ -1,9 +1,29 @@
 import quotes from './quotes'
+import Fireworks from '@/components/fireworks'
 
 export default
 {
     name: 'landing',
 
+    components:
+    {
+        Fireworks
+    },
+
+    data()
+    {
+        return {
+            focus: false,
+            fireworksRunning: false,
+            stars: []
+        }
+    },
+
+    watch:
+    {
+        focus: 'onFocusChange'
+    },
+
     computed:
     {
         quote: () => quotes[Math.floor(quotes.length * Math.random())],
@@ -11,5 +31,53 @@ export default
         {
             return this.$store.state.url
         }
+    },
+
+    created()
+    {
+        for(let i = 0; i < 20; i++)
+        {
+            this.stars.push([
+                Math.round(Math.random() * 200 - 50) + '%',
+                Math.round(Math.random() * 200 - 50) + '%',
+                Math.random() * 4 + 's'
+            ])
+        }
+    },
+
+    methods:
+    {
+        onFocusChange(value)
+        {
+            // Enter focus
+            if(value)
+            {
+                // Wait few seconds
+                window.setTimeout(() =>
+                {
+                    // Still focusing
+                    if(this.focus)
+                    {
+                        this.fireworksRunning = true
+                    }
+                }, 3000)
+            }
+
+            // Leave focus
+            else
+            {
+                this.fireworksRunning = false
+            }
+        },
+
+        onUrlClick()
+        {
+            this.focus = !this.focus
+        },
+
+        onLandingClick()
+        {
+            this.focus = false
+        }
     }
 }

site/src/components/landing/style.styl

@@ -25,11 +25,6 @@
     background #2D2D49
     font-family 'DINNextRoundedLTPro'
 
-.url
-    color #fff
-    font-size 20px
-    margin-bottom 50px
-
 .illustration
     position relative
     width 300px
@@ -117,3 +112,34 @@
     color #4bd1c5
     font-size 18px
 
+.url
+    color #fff
+    font-size 20px
+    margin-bottom 30px
+    padding 20px
+    cursor pointer
+    z-index 2
+    transform translateX(0) translateY(0) scale(1, 1)
+    transition transform 0.3s
+
+    .focus &
+        transform  translateX(-145px) translateY(250px) scale(3, 3)
+        transition-duration 5s
+
+.mask
+    position absolute
+    top 0
+    left -290px
+    width calc(100% + 290px)
+    height 100%
+    background #000
+    z-index 1
+    pointer-events none
+    opacity 0
+    transition opacity 0.3s
+    will-change opacity
+
+    .focus &
+        pointer-events default
+        opacity 0.8
+        transition-duration 3s

site/src/components/landing/template.html

@@ -1,9 +1,11 @@
-<div class="landing">
-    <div class="url">
+<div class="landing" :class="[ focus ? 'focus' : '' ]" @click.prevent="onLandingClick">
+
+    <div class="url" @click.prevent.stop="onUrlClick">
         {{ url }}
     </div>
+
     <div class="illustration">
-        <div class="element star" v-for="index in 20" :style="`left: ${Math.random() * 200 - 50}%;top: ${Math.random() * 200 - 50}%;animation-delay: ${Math.random() * 4}s;`">
+        <div class="element star" v-for="star of stars" :style="`left: ${star[0]};top: ${star[1]};animation-delay: ${star[2]};`">
             <span class="bar bar-1"></span>
             <span class="bar bar-2"></span>
         </div>
@@ -11,13 +13,20 @@
         <img class="element astronaut" src="../../../static/svg/landing-astronaut.svg" alt="">
         <img class="element book" src="../../../static/svg/landing-book.svg" alt="">
     </div>
+
     <div class="title">
         Welcome to keppler!
     </div>
+
     <div class="sub-title">
         Here you can browse the presenter's code in real time.
     </div>
+
     <div class="quote">
         — {{ quote }}
     </div>
+
+    <div class="mask"></div>
+
+    <fireworks :running="fireworksRunning"></fireworks>
 </div>