Site > File > Add unreadable message

This commit is contained in:
brunosimon
2017-09-09 01:56:50 +02:00
parent 13c868ffa3
commit adc0e06e40
14 changed files with 294 additions and 100 deletions
+3 -1
View File
@@ -1,6 +1,7 @@
import Versions from '@/components/versions' import Versions from '@/components/versions'
import Viewer from '@/components/viewer' import Viewer from '@/components/viewer'
import Tooltip from '@/components/tooltip' import Tooltip from '@/components/tooltip'
import Illustration from '@/components/illustration'
import copyToClipboard from 'copy-to-clipboard' import copyToClipboard from 'copy-to-clipboard'
export default export default
@@ -11,7 +12,8 @@ export default
{ {
Versions, Versions,
Viewer, Viewer,
Tooltip Tooltip,
Illustration
}, },
computed: computed:
+27 -1
View File
@@ -134,4 +134,30 @@ header
img img
max-width 100% 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
+5 -2
View File
@@ -15,8 +15,11 @@
<!-- Can't read --> <!-- Can't read -->
<div class="cant-read" v-if="!isCode && !isImage"> <div class="cant-read" v-if="!isCode && !isImage">
<br>Sorry, I can't read this file. <illustration name="sad-robot"></illustration>
<br>But you can <a :href="downloadUrl" download>download it</a> <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> </div>
<!-- Header --> <!-- 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>
+4 -15
View File
@@ -1,5 +1,6 @@
import quotes from './quotes' import quotes from './quotes'
import Fireworks from '@/components/fireworks' import Fireworks from '@/components/fireworks'
import Illustration from '@/components/illustration'
export default export default
{ {
@@ -7,15 +8,15 @@ export default
components: components:
{ {
Fireworks Fireworks,
Illustration
}, },
data() data()
{ {
return { return {
focus: false, focus: false,
fireworksRunning: false, fireworksRunning: false
stars: []
} }
}, },
@@ -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: methods:
{ {
onFocusChange(value) onFocusChange(value)
+1 -72
View File
@@ -13,7 +13,6 @@
.landing .landing
display flex display flex
position fixed
align-items center align-items center
justify-content center justify-content center
flex-direction column flex-direction column
@@ -25,78 +24,8 @@
background #2D2D49 background #2D2D49
font-family 'DINNextRoundedLTPro' 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 .title
margin-bottom 20px margin-bottom 12px
color #fff color #fff
font-size 35px font-size 35px
+1 -9
View File
@@ -4,15 +4,7 @@
{{ url }} {{ url }}
</div> </div>
<div class="illustration"> <illustration name="astronaut"></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>
<div class="title"> <div class="title">
Welcome to keppler! Welcome to keppler!

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

+120
View File
@@ -0,0 +1,120 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg width="161.9px" height="201.8px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 161.9 201.8" style="enable-background:new 0 0 161.9 201.8;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
.st2{clip-path:url(#Left_Arm_1_);fill-rule:evenodd;clip-rule:evenodd;fill:#E1E4E4;}
.st3{clip-path:url(#Left_Arm_1_);fill-rule:evenodd;clip-rule:evenodd;fill:#A9B3B6;}
.st4{clip-path:url(#Right_Arm_1_);fill:#E1E4E4;}
.st5{clip-path:url(#Right_Arm_1_);fill-rule:evenodd;clip-rule:evenodd;fill:#A9B3B6;}
.st6{clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#F9F9FA;}
.st7{clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#A9B3B6;}
.st8{clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st9{clip-path:url(#SVGID_2_);fill-rule:evenodd;clip-rule:evenodd;fill:#E1E4E4;}
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#23292D;}
.st11{clip-path:url(#SVGID_4_);fill-rule:evenodd;clip-rule:evenodd;fill:#333C43;}
.st12{clip-path:url(#SVGID_6_);fill:#E1E4E4;}
.st13{fill:#E1E4E4;}
.st14{fill:#FFFFFF;}
</style>
<g>
<g>
<path id="Left_Arm_6_" class="st0" d="M59.4,175.9c3.1-1.1,4.9-4.3,4-7.5L41.1,95.7c-1-3.2-4.3-4.9-7.5-4c0,0-4.1,0.2-4.7,6.7
c-0.6,6.5-6.4,54.3-5.3,62.8C24.6,169.8,35,183.4,59.4,175.9"/>
<path id="Left_Arm_5_" class="st1" d="M59.4,175.9c3.1-1.1,4.9-4.3,4-7.5L41.1,95.7c-1-3.2-4.3-4.9-7.5-4c0,0-4.1,0.2-4.7,6.7
c-0.6,6.5-6.4,54.3-5.3,62.8C24.6,169.8,35,183.4,59.4,175.9"/>
<g>
<defs>
<path id="Left_Arm_4_" d="M59.4,175.9c3.1-1.1,4.9-4.3,4-7.5L41.1,95.7c-1-3.2-4.3-4.9-7.5-4c0,0-4.1,0.2-4.7,6.7
c-0.6,6.5-6.4,54.3-5.3,62.8C24.6,169.8,35,183.4,59.4,175.9"/>
</defs>
<clipPath id="Left_Arm_1_">
<use xlink:href="#Left_Arm_4_" style="overflow:visible;"/>
</clipPath>
<path class="st2" d="M54.5,149.5l4.9,16.8c0.8,2.7-0.8,5.6-3.6,6.3c-5.5,1.5-14.6,3-21.4-0.8c-10.5-5.8-10.7-21.3-10.7-21.3
l-2.5,17.8l21.7,25l28.2-21.5l-11.8-27.5L54.5,149.5z"/>
<path class="st3" d="M25.1,134c0,0,1.2-4.3,4.2-1.8s25.2,17.2,25.2,17.2s2.8-0.9,4,3l7-12.3l-33-27L17,128L25.1,134z"/>
</g>
</g>
<g>
<path id="Right_Arm_6_" class="st0" d="M85,183c-2.5-2.2-2.9-5.9-0.8-8.5l48.7-58.4c2.1-2.5,5.9-2.9,8.5-0.8c0,0,3.7,1.8,1.8,8
c-1.9,6.2-15.1,52.5-19.4,60C119.5,190.9,104.6,199.3,85,183"/>
<path id="Right_Arm_5_" class="st1" d="M85,183c-2.5-2.2-2.9-5.9-0.8-8.5l48.7-58.4c2.1-2.5,5.9-2.9,8.5-0.8c0,0,3.7,1.8,1.8,8
c-1.9,6.2-15.1,52.5-19.4,60C119.5,190.9,104.6,199.3,85,183"/>
<g>
<defs>
<path id="Right_Arm_4_" d="M85,183c-2.5-2.2-2.9-5.9-0.8-8.5l48.7-58.4c2.1-2.5,5.9-2.9,8.5-0.8c0,0,3.7,1.8,1.8,8
c-1.9,6.2-15.1,52.5-19.4,60C119.5,190.9,104.6,199.3,85,183"/>
</defs>
<clipPath id="Right_Arm_1_">
<use xlink:href="#Right_Arm_4_" style="overflow:visible;"/>
</clipPath>
<path class="st4" d="M103.9,154.3l-15.2,19.2c-1.9,2.4-1.4,5.8,1,7.6c4.4,3.3,11.5,7.6,18.1,7.3c10.5-0.5,14.5-7.3,30.3-57.2
s9.8,23.3,9.8,23.3l-29.3,46.8l-47.5-10.2l10.8-39.5l24.2-1.2L103.9,154.3z"/>
<path class="st5" d="M140.1,133.8c0,0,0-2.8-5.2,0c-5.2,2.8-31,20.5-31,20.5s-0.9-1.8-4.8,2.4s-11.9-12.1-11.9-12.1l57.8-34
l8.3,13L140.1,133.8z"/>
</g>
</g>
<g id="Body_2_">
<path class="st0" d="M81.3,70.2c-38.9,0-71.4,14.8-78.9,34.4c-1.7,4.6-0.1,9.7,3.8,12.7c0,0,43.5,18.8,70,49.6
c0,0,2.6,2.9,5.6,2.9s5.1-2.9,5.1-2.9c26.5-30.7,70-49.6,70-49.6c3.9-2.9,5.5-8.1,3.8-12.7c-7.5-19.6-40-34.4-78.9-34.4H81.3z"/>
<g>
<defs>
<path id="SVGID_1_" d="M81.3,70.2c-38.9,0-71.4,14.8-78.9,34.4c-1.7,4.6-0.1,9.7,3.8,12.7c0,0,43.5,18.8,70,49.6
c0,0,2.6,2.9,5.6,2.9s5.1-2.9,5.1-2.9c26.5-30.7,70-49.6,70-49.6c3.9-2.9,5.5-8.1,3.8-12.7c-7.5-19.6-40-34.4-78.9-34.4H81.3z"
/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<path class="st6" d="M81.8,158.7c0,0-7.2-28-7.2-57.5l7.8,0.8L81.8,158.7z"/>
<path class="st7" d="M81.8,141.2v17.5c0,0,7.5-37.2,8.8-57.2l-9.4-0.5L81.8,141.2z"/>
<path class="st8" d="M77.8,94.5c0,0,2,46.7,4,46.7s4-46.7,4-46.7H77.8z"/>
<path class="st7" d="M81.6,2.5c-10,0-47.5,1-55.5,60c-4.8,35.7,55.5,42,55.5,42s60.3-6.3,55.5-42C129.1,3.5,91.6,2.5,81.6,2.5"/>
<path class="st9" d="M6.2,116.6c0-2.5,2.7-4.2,4.9-3.1c12.1,5.9,44,22.8,65,47.3c0,0,2.6,2.9,5.6,2.9s5.1-2.9,5.1-2.9
c21.4-24.9,54.1-42,65.7-47.6c2-1,4.3,0.5,4.3,2.7v0c0,0.8-0.4,1.6-1,2.2l-35.5,32.6l-84,51.2l-30-84.1
C6.3,117.4,6.2,117,6.2,116.6L6.2,116.6z"/>
</g>
<path class="st1" d="M81.3,70.2c-38.9,0-71.4,14.8-78.9,34.4c-1.7,4.6-0.1,9.7,3.8,12.7c0,0,43.5,18.8,70,49.6
c0,0,2.6,2.9,5.6,2.9s5.1-2.9,5.1-2.9c26.5-30.7,70-49.6,70-49.6c3.9-2.9,5.5-8.1,3.8-12.7c-7.5-19.6-40-34.4-78.9-34.4H81.3z"/>
</g>
<g id="Head_2_">
<path class="st0" d="M81.6,0.5c-10,0-47.5,1-55.5,60c-4.8,35.7,55.5,36,55.5,36s60.3-0.3,55.5-36C129.1,1.5,91.6,0.5,81.6,0.5"/>
<path class="st1" d="M81.6,0.5c-10,0-47.5,1-55.5,60c-4.8,35.7,55.5,36,55.5,36s60.3-0.3,55.5-36C129.1,1.5,91.6,0.5,81.6,0.5"/>
<path class="st10" d="M81.1,33.3c17.1,0,38.9,5.4,40.3,27.1c1.4,21.7-32.4,23.7-40.3,23.7h0h0h0c-7.9,0-41.6-2-40.3-23.7
C42.3,38.8,64,33.3,81.1,33.3L81.1,33.3z"/>
<g>
<defs>
<path id="SVGID_3_" d="M81.1,33.3c17.1,0,38.9,5.4,40.3,27.1c1.4,21.7-32.4,23.7-40.3,23.7h0h0h0c-7.9,0-41.6-2-40.3-23.7
C42.3,38.8,64,33.3,81.1,33.3L81.1,33.3z"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" style="overflow:visible;"/>
</clipPath>
<path class="st11" d="M79.1,34.3c17.1,0,38.9,5.4,40.3,27.1c1.4,21.7-32.4,23.7-40.3,23.7h0h0h0c-7.9,0-41.6-2-40.3-23.7
C40.3,39.8,62,34.3,79.1,34.3L79.1,34.3z"/>
</g>
<g>
<defs>
<path id="SVGID_5_" d="M81.6,0.5c-10,0-47.5,1-55.5,60c-4.8,35.7,55.5,36,55.5,36s60.3-0.3,55.5-36C129.1,1.5,91.6,0.5,81.6,0.5
"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" style="overflow:visible;"/>
</clipPath>
<path class="st12" d="M74.2,0.5c0,0-31.2,12.2-38.5,46.5s4.8,38.8,20.8,46.2c16,7.3-27.8,14.8-27.8,14.8L0,61.5L36.2,10L74.2,0.5
z"/>
</g>
</g>
<path id="Fill-1" class="st13" d="M49.3,62.1c1.5,6,7.2,10.2,13.7,9.2c5.3-0.8,9.6-5.2,10.3-10.6c0.4-3.2-0.4-6.3-2-8.7
c-0.6-0.9-1.9-0.9-2.5,0c-3.9,5.2-12.7,8.6-18.6,8.9C49.6,60.9,49.2,61.5,49.3,62.1"/>
<path id="Fill-1_1_" class="st13" d="M113.7,62.1c-1.5,6-7.2,10.2-13.7,9.2c-5.3-0.8-9.6-5.2-10.3-10.6c-0.4-3.2,0.4-6.3,2-8.7
c0.6-0.9,1.9-0.9,2.5,0c3.9,5.2,12.7,8.6,18.6,8.9C113.4,60.9,113.9,61.5,113.7,62.1"/>
<path id="Fill-1_3_" class="st14" d="M49.3,61.1c1.5,6,7.2,10.2,13.7,9.2c5.3-0.8,9.6-5.2,10.3-10.6c0.4-3.2-0.4-6.3-2-8.7
c-0.6-0.9-1.9-0.9-2.5,0c-3.9,5.2-12.7,8.6-18.6,8.9C49.6,59.9,49.2,60.5,49.3,61.1"/>
<path id="Fill-1_2_" class="st14" d="M113.7,61.1c-1.5,6-7.2,10.2-13.7,9.2c-5.3-0.8-9.6-5.2-10.3-10.6c-0.4-3.2,0.4-6.3,2-8.7
c0.6-0.9,1.9-0.9,2.5,0c3.9,5.2,12.7,8.6,18.6,8.9C113.4,59.9,113.9,60.5,113.7,61.1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB