✨ Site > File > Add unreadable message
This commit is contained in:
brunosimon
@@ -1,6 +1,7 @@
|
||||
import Versions from '@/components/versions'
|
||||
import Viewer from '@/components/viewer'
|
||||
import Tooltip from '@/components/tooltip'
|
||||
import Illustration from '@/components/illustration'
|
||||
import copyToClipboard from 'copy-to-clipboard'
|
||||
|
||||
export default
|
||||
@@ -11,7 +12,8 @@ export default
|
||||
{
|
||||
Versions,
|
||||
Viewer,
|
||||
Tooltip
|
||||
Tooltip,
|
||||
Illustration
|
||||
},
|
||||
|
||||
computed:
|
||||
|
||||
@@ -134,4 +134,30 @@ header
|
||||
|
||||
img
|
||||
max-width 100%
|
||||
max-height 100%
|
||||
max-height 100%
|
||||
|
||||
.cant-read
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
flex-direction column
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
left 0
|
||||
height 100%
|
||||
|
||||
.text
|
||||
text-align center
|
||||
margin-bottom 35px
|
||||
line-height 1.4em
|
||||
color #9696a4
|
||||
font-size 20px
|
||||
font-weight 300
|
||||
font-family 'DINNextRoundedLTPro'
|
||||
|
||||
.download
|
||||
color #fff
|
||||
|
||||
&:hover
|
||||
color #4bd1c5
|
||||
@@ -15,8 +15,11 @@
|
||||
|
||||
<!-- Can't read -->
|
||||
<div class="cant-read" v-if="!isCode && !isImage">
|
||||
<br>Sorry, I can't read this file.
|
||||
<br>But you can <a :href="downloadUrl" download>download it</a>
|
||||
<illustration name="sad-robot"></illustration>
|
||||
<div class="text">
|
||||
Sorry, I can't read this file.
|
||||
<br>But you can <a :href="downloadUrl" download class="download">download it</a>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<template src="./template.html"></template>
|
||||
<script src="./script.js"></script>
|
||||
<style src="./style.styl" lang="stylus" scoped></style>
|
||||
@@ -0,0 +1,28 @@
|
||||
export default
|
||||
{
|
||||
name: 'illustration',
|
||||
|
||||
props:
|
||||
{
|
||||
name: { type: String, default: '' }
|
||||
},
|
||||
|
||||
data()
|
||||
{
|
||||
return {
|
||||
stars: []
|
||||
}
|
||||
},
|
||||
|
||||
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'
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
|
||||
.illustration
|
||||
position relative
|
||||
width 300px
|
||||
height 275px
|
||||
margin-bottom 30px
|
||||
user-select none
|
||||
|
||||
.element
|
||||
position absolute
|
||||
|
||||
&.star
|
||||
top 0
|
||||
left 0
|
||||
width 8px
|
||||
height 8px
|
||||
opacity 0
|
||||
animation illustration-star 4.5s ease-in-out infinite alternate
|
||||
will-change opacity
|
||||
|
||||
@keyframes illustration-star
|
||||
0%
|
||||
opacity 0
|
||||
100%
|
||||
opacity 1
|
||||
|
||||
.bar
|
||||
position absolute
|
||||
background #fff
|
||||
border-radius 2px
|
||||
|
||||
&.bar-1
|
||||
top 0
|
||||
left 3px
|
||||
width 2px
|
||||
height 100%
|
||||
|
||||
&.bar-2
|
||||
top 3px
|
||||
left 0
|
||||
width 100%
|
||||
height 2px
|
||||
|
||||
&.cloud
|
||||
top 0
|
||||
left 0
|
||||
|
||||
&.astronaut
|
||||
top 60px
|
||||
left 70px
|
||||
animation illustration-astronaut 6s ease-in-out infinite alternate
|
||||
will-change transform
|
||||
|
||||
@keyframes illustration-astronaut
|
||||
0%
|
||||
transform translateX(-10px) translateY(-5px) translateZ(0)
|
||||
100%
|
||||
transform translateX(10px) translateY(5px) translateZ(0)
|
||||
|
||||
&.book
|
||||
top 170px
|
||||
left 150px
|
||||
animation illustration-book 4.5s ease-in-out infinite alternate
|
||||
will-change transform
|
||||
|
||||
@keyframes illustration-book
|
||||
0%
|
||||
transform translateX(4px) translateY(-8px) translateZ(0)
|
||||
100%
|
||||
transform translateX(-4px) translateY(8px) translateZ(0)
|
||||
|
||||
&.sad-robot
|
||||
top 60px
|
||||
left 80px
|
||||
width 130px
|
||||
animation illustration-sad-robot 6s ease-in-out infinite alternate
|
||||
will-change transform
|
||||
|
||||
@keyframes illustration-sad-robot
|
||||
0%
|
||||
transform translateX(-10px) translateY(-5px) translateZ(0)
|
||||
100%
|
||||
transform translateX(10px) translateY(5px) translateZ(0)
|
||||
@@ -0,0 +1,19 @@
|
||||
<div class="illustration">
|
||||
|
||||
<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>
|
||||
|
||||
<img class="element cloud" src="../../../static/svg/illustration-cloud.svg" alt="">
|
||||
|
||||
<div v-if="name === 'astronaut'">
|
||||
<img class="element astronaut" src="../../../static/svg/illustration-astronaut.svg" alt="">
|
||||
<img class="element book" src="../../../static/svg/illustration-book.svg" alt="">
|
||||
</div>
|
||||
|
||||
<div v-if="name === 'sad-robot'">
|
||||
<img class="element sad-robot" src="../../../static/svg/illustration-sad-robot.svg" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,5 +1,6 @@
|
||||
import quotes from './quotes'
|
||||
import Fireworks from '@/components/fireworks'
|
||||
import Illustration from '@/components/illustration'
|
||||
|
||||
export default
|
||||
{
|
||||
@@ -7,15 +8,15 @@ export default
|
||||
|
||||
components:
|
||||
{
|
||||
Fireworks
|
||||
Fireworks,
|
||||
Illustration
|
||||
},
|
||||
|
||||
data()
|
||||
{
|
||||
return {
|
||||
focus: false,
|
||||
fireworksRunning: false,
|
||||
stars: []
|
||||
fireworksRunning: false
|
||||
}
|
||||
},
|
||||
|
||||
@@ -33,18 +34,6 @@ export default
|
||||
}
|
||||
},
|
||||
|
||||
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)
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
|
||||
.landing
|
||||
display flex
|
||||
position fixed
|
||||
align-items center
|
||||
justify-content center
|
||||
flex-direction column
|
||||
@@ -25,78 +24,8 @@
|
||||
background #2D2D49
|
||||
font-family 'DINNextRoundedLTPro'
|
||||
|
||||
.illustration
|
||||
position relative
|
||||
width 300px
|
||||
height 275px
|
||||
margin-bottom 30px
|
||||
user-select none
|
||||
|
||||
.element
|
||||
position absolute
|
||||
|
||||
&.cloud
|
||||
top 0
|
||||
left 0
|
||||
|
||||
&.astronaut
|
||||
top 60px
|
||||
left 70px
|
||||
animation illustration-astronaut 6s ease-in-out infinite alternate
|
||||
will-change transform
|
||||
|
||||
@keyframes illustration-astronaut
|
||||
0%
|
||||
transform translateX(-10px) translateY(-5px) translateZ(0)
|
||||
100%
|
||||
transform translateX(10px) translateY(5px) translateZ(0)
|
||||
|
||||
&.book
|
||||
top 170px
|
||||
left 150px
|
||||
animation illustration-book 4.5s ease-in-out infinite alternate
|
||||
will-change transform
|
||||
|
||||
@keyframes illustration-book
|
||||
0%
|
||||
transform translateX(4px) translateY(-8px) translateZ(0)
|
||||
100%
|
||||
transform translateX(-4px) translateY(8px) translateZ(0)
|
||||
|
||||
&.star
|
||||
top 0
|
||||
left 0
|
||||
width 8px
|
||||
height 8px
|
||||
opacity 0
|
||||
animation illustration-star 4.5s ease-in-out infinite alternate
|
||||
will-change opacity
|
||||
|
||||
@keyframes illustration-star
|
||||
0%
|
||||
opacity 0
|
||||
100%
|
||||
opacity 1
|
||||
|
||||
.bar
|
||||
position absolute
|
||||
background #fff
|
||||
border-radius 2px
|
||||
|
||||
&.bar-1
|
||||
top 0
|
||||
left 3px
|
||||
width 2px
|
||||
height 100%
|
||||
|
||||
&.bar-2
|
||||
top 3px
|
||||
left 0
|
||||
width 100%
|
||||
height 2px
|
||||
|
||||
.title
|
||||
margin-bottom 20px
|
||||
margin-bottom 12px
|
||||
color #fff
|
||||
font-size 35px
|
||||
|
||||
|
||||
@@ -4,15 +4,7 @@
|
||||
{{ url }}
|
||||
</div>
|
||||
|
||||
<div class="illustration">
|
||||
<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>
|
||||
<img class="element cloud" src="../../../static/svg/landing-cloud.svg" alt="">
|
||||
<img class="element astronaut" src="../../../static/svg/landing-astronaut.svg" alt="">
|
||||
<img class="element book" src="../../../static/svg/landing-book.svg" alt="">
|
||||
</div>
|
||||
<illustration name="astronaut"></illustration>
|
||||
|
||||
<div class="title">
|
||||
Welcome to keppler!
|
||||
|
||||
Reference in New Issue
Block a user