50 changed files with 2293 additions and 237 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,57 @@ |
|||
/* http://meyerweb.com/eric/tools/css/reset/ |
|||
v2.0 | 20110126 |
|||
License: none (public domain) |
|||
*/ |
|||
|
|||
html, body, div, span, applet, object, iframe, |
|||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
|||
a, abbr, acronym, address, big, cite, code, |
|||
del, dfn, em, img, ins, kbd, q, s, samp, |
|||
small, strike, strong, sub, sup, tt, var, |
|||
b, u, i, center, |
|||
dl, dt, dd, ol, ul, li, |
|||
fieldset, form, label, legend, |
|||
table, caption, tbody, tfoot, thead, tr, th, td, |
|||
article, aside, canvas, details, embed, |
|||
figure, figcaption, footer, header, hgroup, |
|||
menu, nav, output, ruby, section, summary, |
|||
time, mark, audio, video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
} |
|||
/* HTML5 display-role reset for older browsers */ |
|||
article, aside, details, figcaption, figure, |
|||
footer, header, hgroup, menu, nav, section { |
|||
display: block; |
|||
} |
|||
body { |
|||
line-height: 1; |
|||
} |
|||
ol, ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, blockquote:after, |
|||
q:before, q:after { |
|||
content: ''; |
|||
content: none; |
|||
} |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
|
|||
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
body, button, input, select, textarea { |
|||
font: 12px/1.5 tahoma,arial,"Hiragino Sans GB",宋体,sans-serif; |
|||
} |
|||
@ -0,0 +1,89 @@ |
|||
@charset "UTF-8"; |
|||
html, |
|||
body { |
|||
background-color: #f5f5f5; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.left-list { |
|||
position: absolute; |
|||
right: calc(100% + 10px); |
|||
top: 8%; |
|||
min-width: 50px; |
|||
padding: 0 10px; |
|||
line-height: 3; |
|||
text-align: center; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
.left-list .item { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.left-list .item a { |
|||
display: inline-block; |
|||
text-decoration: none; |
|||
font-size: 1.2em; |
|||
} |
|||
|
|||
.container { |
|||
width: 1100px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.a-flex { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
} |
|||
|
|||
/* |
|||
图片类样式 |
|||
*/ |
|||
.img-wrapper { |
|||
width: 100px; |
|||
height: 100px; |
|||
overflow: hidden; |
|||
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); |
|||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); |
|||
border-radius: 50%; |
|||
display: inline-block; |
|||
-webkit-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
border: 3px solid #000; |
|||
/* ============== * 深褐色过滤* ==============*/ |
|||
} |
|||
|
|||
.img-wrapper img { |
|||
width: 100%; |
|||
height: 100px; |
|||
-webkit-transition: 0.3s linear; |
|||
transition: 0.3s linear; |
|||
} |
|||
|
|||
.img-wrapper img:hover { |
|||
-webkit-transform: scale(1.1); |
|||
transform: scale(1.1); |
|||
} |
|||
|
|||
.img-wrapper .grayscale-img { |
|||
-webkit-filter: grayscale(100%); |
|||
filter: grayscale(100%); |
|||
} |
|||
|
|||
.img-wrapper .grayscale-img:hover { |
|||
-webkit-filter: grayscale(0); |
|||
filter: grayscale(0); |
|||
} |
|||
|
|||
.img-wrapper .sepia-img { |
|||
-webkit-filter: sepia(100%); |
|||
filter: sepia(100%); |
|||
} |
|||
|
|||
.img-wrapper .sepia-img:hover { |
|||
-webkit-filter: sepia(0); |
|||
filter: sepia(0); |
|||
} |
|||
/*# sourceMappingURL=style.css.map */ |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"version": 3, |
|||
"mappings": ";AAAA,AAAA,IAAI;AACJ,IAAI,CAAC;EACH,gBAAgB,EAAE,OAAO;EACzB,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;CACjB;;AAED,AAAA,UAAU,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,iBAAiB;EACxB,GAAG,EAAE,EAAE;EACP,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,MAAM;EACf,WAAW,EAAE,CAAC;EACd,UAAU,EAAE,MAAM;EAClB,YAAY,EAAE,GAAG,CAAC,KAAK,CAAC,kBAAkB;CAS3C;;AAjBD,AASE,UATQ,CASR,KAAK,CAAC;EACJ,WAAW,EAAE,MAAM;CAMpB;;AAhBH,AAWI,UAXM,CASR,KAAK,CAEH,CAAC,CAAA;EACC,OAAO,EAAE,YAAY;EACrB,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,KAAK;CACjB;;AAIL,AAAA,UAAU,CAAC;EACT,KAAK,EAAE,MAAM;EACb,MAAM,EAAE,MAAM;CACf;;AAED,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,IAAI;CACd;;AAED;;EAEE;AACF,AAAA,YAAY,CAAC;EACX,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,QAAQ,EAAE,MAAM;EAChB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAkB;EACxC,aAAa,EAAE,GAAG;EAElB,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,cAAc;EAkBpB,gDAAgD;CASnD;;AApCD,AAUE,YAVU,CAUV,GAAG,CAAC;EACF,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,kBAAkB,EAAE,WAAW;EAC/B,UAAU,EAAE,WAAW;CAIxB;;AAlBH,AAeI,YAfQ,CAUV,GAAG,AAKA,MAAM,CAAC;EACN,SAAS,EAAE,UAAU;CACtB;;AAjBL,AAoBE,YApBU,CAoBV,cAAc,CAAC;EACb,cAAc,EAAE,eAAe;EAC/B,MAAM,EAAE,eAAe;CACxB;;AAvBH,AAwBE,YAxBU,CAwBV,cAAc,AAAA,MAAM,CAAC;EACnB,cAAc,EAAE,YAAY;EAC5B,MAAM,EAAE,YAAY;CACrB;;AA3BH,AA4BE,YA5BU,CA4BV,UAAU,CAAC;EACT,cAAc,EAAE,WAAW;EAC3B,MAAM,EAAE,WAAW;CACpB;;AA/BH,AAgCE,YAhCU,CAgCV,UAAU,AAAA,MAAM,CAAC;EACf,cAAc,EAAE,QAAQ;EACxB,MAAM,EAAE,QAAQ;CACjB", |
|||
"sources": [ |
|||
"style.scss" |
|||
], |
|||
"names": [], |
|||
"file": "style.css" |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
html, |
|||
body { |
|||
background-color: #f5f5f5; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.left-list { |
|||
position: absolute; |
|||
right: calc(100% + 10px); |
|||
top: 8%; |
|||
min-width: 50px; |
|||
padding: 0 10px; |
|||
line-height: 3; // 12*3=36px |
|||
text-align: center; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.6); |
|||
.item { |
|||
white-space: nowrap; |
|||
a{ |
|||
display: inline-block; |
|||
text-decoration: none; |
|||
font-size: 1.2em; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.container { |
|||
width: 1100px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.a-flex { |
|||
display: flex; |
|||
} |
|||
|
|||
/* |
|||
图片类样式 |
|||
*/ |
|||
.img-wrapper { |
|||
width: 100px; |
|||
height: 100px; |
|||
overflow: hidden; |
|||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); |
|||
border-radius: 50%; |
|||
|
|||
display: inline-block; |
|||
box-sizing: border-box; |
|||
border: 3px solid #000; |
|||
img { |
|||
width: 100%; |
|||
height: 100px; |
|||
-webkit-transition: 0.3s linear; |
|||
transition: 0.3s linear; |
|||
&:hover { |
|||
transform: scale(1.1); |
|||
} |
|||
} |
|||
|
|||
.grayscale-img { |
|||
-webkit-filter: grayscale(100%); |
|||
filter: grayscale(100%); |
|||
} |
|||
.grayscale-img:hover { |
|||
-webkit-filter: grayscale(0); |
|||
filter: grayscale(0); |
|||
} /* ============== * 深褐色过滤* ==============*/ |
|||
.sepia-img { |
|||
-webkit-filter: sepia(100%); |
|||
filter: sepia(100%); |
|||
} |
|||
.sepia-img:hover { |
|||
-webkit-filter: sepia(0); |
|||
filter: sepia(0); |
|||
} |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
@mixin media($type...) { |
|||
@each $screen in $type { |
|||
@if $screen == xs { |
|||
@media (max-width: 768px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == sm { |
|||
@media (max-width: 920px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == md { |
|||
@media (max-width: 1200px) { |
|||
@content; |
|||
} |
|||
} @else if $screen == lg { |
|||
@media (max-width: 1366px) { |
|||
@content; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
@mixin ellipsis($lines: 1) { |
|||
@if ($lines==1) { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} @else { |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: $lines; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
@ -0,0 +1,320 @@ |
|||
body{ |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
#app { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100vh; |
|||
perspective: 1400px; |
|||
background: #fff; |
|||
font-family: 'Helvetica'; |
|||
} |
|||
#app #outer { |
|||
width: 100vw; |
|||
height: 100vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100vh; |
|||
perspective: 1400px; |
|||
background: #fff; |
|||
transform: scale(0.75); |
|||
} |
|||
#app .wrap { |
|||
position: absolute; |
|||
width: 750px; |
|||
height: 400px; |
|||
-webkit-animation: squiggly-anim 0.3s infinite; |
|||
animation: squiggly-anim 0.3s infinite; |
|||
} |
|||
@-webkit-keyframes squiggly-anim { |
|||
0% { |
|||
filter: url("#squiggly-0"); |
|||
} |
|||
25% { |
|||
filter: url("#squiggly-1"); |
|||
} |
|||
50% { |
|||
-webkit-filter: url("#squiggly-2"); |
|||
} |
|||
75% { |
|||
filter: url("#squiggly-3"); |
|||
} |
|||
100% { |
|||
filter: url("#squiggly-4"); |
|||
} |
|||
} |
|||
@keyframes squiggly-anim { |
|||
0% { |
|||
filter: url("#squiggly-0"); |
|||
} |
|||
25% { |
|||
filter: url("#squiggly-1"); |
|||
} |
|||
50% { |
|||
-webkit-filter: url("#squiggly-2"); |
|||
} |
|||
75% { |
|||
filter: url("#squiggly-3"); |
|||
} |
|||
100% { |
|||
filter: url("#squiggly-4"); |
|||
} |
|||
} |
|||
#app .wrap .ghost { |
|||
position: absolute; |
|||
width: 50px; |
|||
height: 100px; |
|||
display: none; |
|||
overflow: hidden; |
|||
} |
|||
#app .wrap .ghost:nth-of-type(3) { |
|||
width: 200px; |
|||
height: 200px; |
|||
display: block; |
|||
left: 240px; |
|||
-webkit-clip-path: polygon(100% 0, 100% 67%, 82% 100%, 0 100%, 0 0); |
|||
clip-path: polygon(100% 0, 100% 67%, 82% 100%, 0 100%, 0 0); |
|||
} |
|||
#app .wrap .ghost:nth-of-type(3) .inner { |
|||
width: 50px; |
|||
height: 75px; |
|||
left: 100px; |
|||
transform-origin: 200% 100%; |
|||
box-shadow: inset 0 0 0 2px #ccc; |
|||
-webkit-animation: swing 10s ease-in-out infinite alternate; |
|||
animation: swing 10s ease-in-out infinite alternate; |
|||
transform: rotate(-90deg) translateY(75px); |
|||
} |
|||
#app .wrap .ghost:nth-of-type(3) .inner:before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #ccc; |
|||
border-radius: 100%; |
|||
top: 10px; |
|||
right: 10px; |
|||
box-shadow: -15px 5px 0 0 #ccc; |
|||
-webkit-animation: blink2 2s ease-in-out infinite alternate; |
|||
animation: blink2 2s ease-in-out infinite alternate; |
|||
} |
|||
@-webkit-keyframes blink2 { |
|||
to { |
|||
transform: translateX(-10px) translateY(5px); |
|||
box-shadow: -15px -5px 0 0 #ccc; |
|||
} |
|||
} |
|||
@keyframes blink2 { |
|||
to { |
|||
transform: translateX(-10px) translateY(5px); |
|||
box-shadow: -15px -5px 0 0 #ccc; |
|||
} |
|||
} |
|||
@-webkit-keyframes swing { |
|||
68% { |
|||
transform: rotate(-90deg) translateY(75px); |
|||
} |
|||
70% { |
|||
transform: rotate(0deg) translateY(0px); |
|||
} |
|||
100% { |
|||
transform: rotate(0deg) translateY(0px); |
|||
} |
|||
} |
|||
@keyframes swing { |
|||
68% { |
|||
transform: rotate(-90deg) translateY(75px); |
|||
} |
|||
70% { |
|||
transform: rotate(0deg) translateY(0px); |
|||
} |
|||
100% { |
|||
transform: rotate(0deg) translateY(0px); |
|||
} |
|||
} |
|||
#app .wrap .ghost:nth-of-type(3) .inner:after { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 200px; |
|||
height: 125px; |
|||
bottom: -120px; |
|||
left: 0; |
|||
background: radial-gradient(circle at top, rgba(0, 0, 0, 0) 50px, #cccccc 50px, #cccccc 52px, #ffffff 52px, #ffffff 98px, #cccccc 98px, #cccccc 100px, rgba(0, 0, 0, 0) 100px); |
|||
} |
|||
#app .wrap .ghost:nth-of-type(2) { |
|||
display: block; |
|||
top: 80px; |
|||
right: 150px; |
|||
} |
|||
#app .wrap .ghost:nth-of-type(2) .inner { |
|||
-webkit-animation: peek1 10s ease-in-out infinite alternate; |
|||
animation: peek1 10s ease-in-out infinite alternate; |
|||
-webkit-animation-delay: 0.5s; |
|||
animation-delay: 0.5s; |
|||
transform: translateY(100%); |
|||
} |
|||
#app .wrap .ghost:nth-of-type(2) .inner:before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #ccc; |
|||
border-radius: 100%; |
|||
top: 10px; |
|||
right: 10px; |
|||
box-shadow: -15px 5px 0 0 #ccc; |
|||
-webkit-animation: blink 4s linear infinite; |
|||
animation: blink 4s linear infinite; |
|||
-webkit-animation-delay: 5s; |
|||
animation-delay: 5s; |
|||
} |
|||
#app .wrap .ghost:first-of-type { |
|||
top: 65px; |
|||
left: 50px; |
|||
transform: rotate(-35deg); |
|||
display: block; |
|||
} |
|||
#app .wrap .ghost:first-of-type .inner { |
|||
-webkit-animation: peek1 10s ease-in-out infinite alternate; |
|||
animation: peek1 10s ease-in-out infinite alternate; |
|||
transform: translateY(100%); |
|||
} |
|||
#app .wrap .ghost:first-of-type .inner:before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #ccc; |
|||
border-radius: 100%; |
|||
top: 10px; |
|||
left: 10px; |
|||
box-shadow: 15px 5px 0 0 #ccc; |
|||
-webkit-animation: blink 4s linear infinite; |
|||
animation: blink 4s linear infinite; |
|||
-webkit-animation-delay: 3s; |
|||
animation-delay: 3s; |
|||
} |
|||
@-webkit-keyframes blink { |
|||
90% { |
|||
transform: scaleY(1); |
|||
} |
|||
92% { |
|||
transform: scaleY(0); |
|||
} |
|||
94% { |
|||
transform: scaleY(1); |
|||
} |
|||
96% { |
|||
transform: scaleY(0); |
|||
} |
|||
98% { |
|||
transform: scaleY(1); |
|||
} |
|||
} |
|||
@keyframes blink { |
|||
90% { |
|||
transform: scaleY(1); |
|||
} |
|||
92% { |
|||
transform: scaleY(0); |
|||
} |
|||
94% { |
|||
transform: scaleY(1); |
|||
} |
|||
96% { |
|||
transform: scaleY(0); |
|||
} |
|||
98% { |
|||
transform: scaleY(1); |
|||
} |
|||
} |
|||
@-webkit-keyframes peek1 { |
|||
78% { |
|||
transform: translateY(100%); |
|||
} |
|||
80% { |
|||
transform: translateY(0%); |
|||
} |
|||
100% { |
|||
transform: translateY(0%); |
|||
} |
|||
} |
|||
@keyframes peek1 { |
|||
78% { |
|||
transform: translateY(100%); |
|||
} |
|||
80% { |
|||
transform: translateY(0%); |
|||
} |
|||
100% { |
|||
transform: translateY(0%); |
|||
} |
|||
} |
|||
#app .wrap .ghost .inner { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
box-shadow: inset 0 0 0 2px #ccc, inset 0 -10px 20px rgba(0, 0, 0, 0.05); |
|||
border-radius: 100px 100px 0 0; |
|||
top: 3px; |
|||
transform-style: preserve-3d; |
|||
background: #fff; |
|||
} |
|||
#app h1 { |
|||
z-index: -1; |
|||
font-size: 500px; |
|||
margin: 0px; |
|||
color: #fff; |
|||
transform-style: preserve-3d; |
|||
transform: rotateY(-30deg) rotateX(50deg); |
|||
text-shadow: 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fafafa, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fbfbfb, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fcfcfc, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fdfdfd, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 #fefefe, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white, 0px 0px 0 white; |
|||
transition: 0.2s ease-in-out; |
|||
-webkit-animation: shadow 10s ease-in-out infinite alternate; |
|||
animation: shadow 10s ease-in-out infinite alternate; |
|||
margin-right: -50px; |
|||
will-change: text-shadow; |
|||
} |
|||
#app h1:nth-of-type(1) { |
|||
-webkit-animation-delay: 0.33333s; |
|||
animation-delay: 0.33333s; |
|||
} |
|||
#app h1:nth-of-type(2) { |
|||
-webkit-animation-delay: 0.66667s; |
|||
animation-delay: 0.66667s; |
|||
} |
|||
#app h1:nth-of-type(3) { |
|||
-webkit-animation-delay: 1s; |
|||
animation-delay: 1s; |
|||
} |
|||
@-webkit-keyframes shadow { |
|||
15% { |
|||
transform: rotateY(-30deg) rotateX(50deg) translateY(0px) translateX(0px); |
|||
text-shadow: 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9; |
|||
} |
|||
25% { |
|||
transform: rotateY(-30deg) rotateX(50deg) translateY(-75px) translateX(-50px); |
|||
text-shadow: 0.52992px 0.84805px 0 #ececec, 1.05984px 1.6961px 0 #ececec, 1.58976px 2.54414px 0 #ebebeb, 2.11968px 3.39219px 0 #ebebeb, 2.6496px 4.24024px 0 #ebebeb, 3.17952px 5.08829px 0 #ebebeb, 3.70943px 5.93634px 0 #eaeaea, 4.23935px 6.78438px 0 #eaeaea, 4.76927px 7.63243px 0 #eaeaea, 5.29919px 8.48048px 0 #eaeaea, 5.82911px 9.32853px 0 #e9e9e9, 6.35903px 10.17658px 0 #e9e9e9, 6.88895px 11.02463px 0 #e9e9e9, 7.41887px 11.87267px 0 #e9e9e9, 7.94879px 12.72072px 0 #e8e8e8, 8.47871px 13.56877px 0 #e8e8e8, 9.00863px 14.41682px 0 #e8e8e8, 9.53855px 15.26487px 0 #e8e8e8, 10.06847px 16.11291px 0 #e7e7e7, 10.59839px 16.96096px 0 #e7e7e7, 11.1283px 17.80901px 0 #e7e7e7, 11.65822px 18.65706px 0 #e7e7e7, 12.18814px 19.50511px 0 #e6e6e6, 12.71806px 20.35315px 0 #e6e6e6, 13.24798px 21.2012px 0 #e6e6e6, 13.7779px 22.04925px 0 #e6e6e6, 14.30782px 22.8973px 0 #e5e5e5, 14.83774px 23.74535px 0 #e5e5e5, 15.36766px 24.59339px 0 #e5e5e5, 15.89758px 25.44144px 0 #e5e5e5, 16.4275px 26.28949px 0 #e4e4e4, 16.95742px 27.13754px 0 #e4e4e4, 17.48734px 27.98559px 0 #e4e4e4, 18.01725px 28.83364px 0 #e4e4e4, 18.54717px 29.68168px 0 #e3e3e3, 19.07709px 30.52973px 0 #e3e3e3, 19.60701px 31.37778px 0 #e3e3e3, 20.13693px 32.22583px 0 #e3e3e3, 20.66685px 33.07388px 0 #e2e2e2, 21.19677px 33.92192px 0 #e2e2e2, 21.72669px 34.76997px 0 #e2e2e2, 22.25661px 35.61802px 0 #e2e2e2, 22.78653px 36.46607px 0 #e1e1e1, 23.31645px 37.31412px 0 #e1e1e1, 23.84637px 38.16216px 0 #e1e1e1, 24.37629px 39.01021px 0 #e1e1e1, 24.90621px 39.85826px 0 #e0e0e0, 25.43612px 40.70631px 0 #e0e0e0, 25.96604px 41.55436px 0 #e0e0e0, 26.49596px 42.4024px 0 #e0e0e0, 27.02588px 43.25045px 0 #dfdfdf, 27.5558px 44.0985px 0 #dfdfdf, 28.08572px 44.94655px 0 #dfdfdf, 28.61564px 45.7946px 0 #dfdfdf, 29.14556px 46.64265px 0 #dedede, 29.67548px 47.49069px 0 #dedede, 30.2054px 48.33874px 0 #dedede, 30.73532px 49.18679px 0 #dedede, 31.26524px 50.03484px 0 #dddddd, 31.79516px 50.88289px 0 #dddddd, 32.32508px 51.73093px 0 #dddddd, 32.85499px 52.57898px 0 #dddddd, 33.38491px 53.42703px 0 gainsboro, 33.91483px 54.27508px 0 gainsboro, 34.44475px 55.12313px 0 gainsboro, 34.97467px 55.97117px 0 gainsboro, 35.50459px 56.81922px 0 #dbdbdb, 36.03451px 57.66727px 0 #dbdbdb, 36.56443px 58.51532px 0 #dbdbdb, 37.09435px 59.36337px 0 #dbdbdb, 37.62427px 60.21141px 0 #dadada, 38.15419px 61.05946px 0 #dadada, 38.68411px 61.90751px 0 #dadada, 39.21403px 62.75556px 0 #dadada, 39.74394px 63.60361px 0 #d9d9d9, 40.27386px 64.45166px 0 #d9d9d9, 40.80378px 65.2997px 0 #d9d9d9, 41.3337px 66.14775px 0 #d9d9d9, 41.86362px 66.9958px 0 #d8d8d8, 42.39354px 67.84385px 0 #d8d8d8, 42.92346px 68.6919px 0 #d8d8d8, 43.45338px 69.53994px 0 #d8d8d8, 43.9833px 70.38799px 0 #d7d7d7, 44.51322px 71.23604px 0 #d7d7d7, 45.04314px 72.08409px 0 #d7d7d7, 45.57306px 72.93214px 0 #d7d7d7, 46.10298px 73.78018px 0 #d6d6d6, 46.6329px 74.62823px 0 #d6d6d6, 47.16281px 75.47628px 0 #d6d6d6, 47.69273px 76.32433px 0 #d6d6d6, 48.22265px 77.17238px 0 #d5d5d5, 48.75257px 78.02042px 0 #d5d5d5, 49.28249px 78.86847px 0 #d5d5d5, 49.81241px 79.71652px 0 #d5d5d5, 50.34233px 80.56457px 0 #d4d4d4, 50.87225px 81.41262px 0 #d4d4d4, 51.40217px 82.26067px 0 #d4d4d4, 51.93209px 83.10871px 0 #d4d4d4, 52.46201px 83.95676px 0 lightgray, 52.99193px 84.80481px 0 lightgray; |
|||
} |
|||
100% { |
|||
transform: rotateY(-30deg) rotateX(50deg) translateY(-75px) translateX(-50px); |
|||
text-shadow: 0.52992px 0.84805px 0 #ececec, 1.05984px 1.6961px 0 #ececec, 1.58976px 2.54414px 0 #ebebeb, 2.11968px 3.39219px 0 #ebebeb, 2.6496px 4.24024px 0 #ebebeb, 3.17952px 5.08829px 0 #ebebeb, 3.70943px 5.93634px 0 #eaeaea, 4.23935px 6.78438px 0 #eaeaea, 4.76927px 7.63243px 0 #eaeaea, 5.29919px 8.48048px 0 #eaeaea, 5.82911px 9.32853px 0 #e9e9e9, 6.35903px 10.17658px 0 #e9e9e9, 6.88895px 11.02463px 0 #e9e9e9, 7.41887px 11.87267px 0 #e9e9e9, 7.94879px 12.72072px 0 #e8e8e8, 8.47871px 13.56877px 0 #e8e8e8, 9.00863px 14.41682px 0 #e8e8e8, 9.53855px 15.26487px 0 #e8e8e8, 10.06847px 16.11291px 0 #e7e7e7, 10.59839px 16.96096px 0 #e7e7e7, 11.1283px 17.80901px 0 #e7e7e7, 11.65822px 18.65706px 0 #e7e7e7, 12.18814px 19.50511px 0 #e6e6e6, 12.71806px 20.35315px 0 #e6e6e6, 13.24798px 21.2012px 0 #e6e6e6, 13.7779px 22.04925px 0 #e6e6e6, 14.30782px 22.8973px 0 #e5e5e5, 14.83774px 23.74535px 0 #e5e5e5, 15.36766px 24.59339px 0 #e5e5e5, 15.89758px 25.44144px 0 #e5e5e5, 16.4275px 26.28949px 0 #e4e4e4, 16.95742px 27.13754px 0 #e4e4e4, 17.48734px 27.98559px 0 #e4e4e4, 18.01725px 28.83364px 0 #e4e4e4, 18.54717px 29.68168px 0 #e3e3e3, 19.07709px 30.52973px 0 #e3e3e3, 19.60701px 31.37778px 0 #e3e3e3, 20.13693px 32.22583px 0 #e3e3e3, 20.66685px 33.07388px 0 #e2e2e2, 21.19677px 33.92192px 0 #e2e2e2, 21.72669px 34.76997px 0 #e2e2e2, 22.25661px 35.61802px 0 #e2e2e2, 22.78653px 36.46607px 0 #e1e1e1, 23.31645px 37.31412px 0 #e1e1e1, 23.84637px 38.16216px 0 #e1e1e1, 24.37629px 39.01021px 0 #e1e1e1, 24.90621px 39.85826px 0 #e0e0e0, 25.43612px 40.70631px 0 #e0e0e0, 25.96604px 41.55436px 0 #e0e0e0, 26.49596px 42.4024px 0 #e0e0e0, 27.02588px 43.25045px 0 #dfdfdf, 27.5558px 44.0985px 0 #dfdfdf, 28.08572px 44.94655px 0 #dfdfdf, 28.61564px 45.7946px 0 #dfdfdf, 29.14556px 46.64265px 0 #dedede, 29.67548px 47.49069px 0 #dedede, 30.2054px 48.33874px 0 #dedede, 30.73532px 49.18679px 0 #dedede, 31.26524px 50.03484px 0 #dddddd, 31.79516px 50.88289px 0 #dddddd, 32.32508px 51.73093px 0 #dddddd, 32.85499px 52.57898px 0 #dddddd, 33.38491px 53.42703px 0 gainsboro, 33.91483px 54.27508px 0 gainsboro, 34.44475px 55.12313px 0 gainsboro, 34.97467px 55.97117px 0 gainsboro, 35.50459px 56.81922px 0 #dbdbdb, 36.03451px 57.66727px 0 #dbdbdb, 36.56443px 58.51532px 0 #dbdbdb, 37.09435px 59.36337px 0 #dbdbdb, 37.62427px 60.21141px 0 #dadada, 38.15419px 61.05946px 0 #dadada, 38.68411px 61.90751px 0 #dadada, 39.21403px 62.75556px 0 #dadada, 39.74394px 63.60361px 0 #d9d9d9, 40.27386px 64.45166px 0 #d9d9d9, 40.80378px 65.2997px 0 #d9d9d9, 41.3337px 66.14775px 0 #d9d9d9, 41.86362px 66.9958px 0 #d8d8d8, 42.39354px 67.84385px 0 #d8d8d8, 42.92346px 68.6919px 0 #d8d8d8, 43.45338px 69.53994px 0 #d8d8d8, 43.9833px 70.38799px 0 #d7d7d7, 44.51322px 71.23604px 0 #d7d7d7, 45.04314px 72.08409px 0 #d7d7d7, 45.57306px 72.93214px 0 #d7d7d7, 46.10298px 73.78018px 0 #d6d6d6, 46.6329px 74.62823px 0 #d6d6d6, 47.16281px 75.47628px 0 #d6d6d6, 47.69273px 76.32433px 0 #d6d6d6, 48.22265px 77.17238px 0 #d5d5d5, 48.75257px 78.02042px 0 #d5d5d5, 49.28249px 78.86847px 0 #d5d5d5, 49.81241px 79.71652px 0 #d5d5d5, 50.34233px 80.56457px 0 #d4d4d4, 50.87225px 81.41262px 0 #d4d4d4, 51.40217px 82.26067px 0 #d4d4d4, 51.93209px 83.10871px 0 #d4d4d4, 52.46201px 83.95676px 0 lightgray, 52.99193px 84.80481px 0 lightgray; |
|||
} |
|||
} |
|||
@keyframes shadow { |
|||
15% { |
|||
transform: rotateY(-30deg) rotateX(50deg) translateY(0px) translateX(0px); |
|||
text-shadow: 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9, 0px 0px 0 #f9f9f9; |
|||
} |
|||
25% { |
|||
transform: rotateY(-30deg) rotateX(50deg) translateY(-75px) translateX(-50px); |
|||
text-shadow: 0.52992px 0.84805px 0 #ececec, 1.05984px 1.6961px 0 #ececec, 1.58976px 2.54414px 0 #ebebeb, 2.11968px 3.39219px 0 #ebebeb, 2.6496px 4.24024px 0 #ebebeb, 3.17952px 5.08829px 0 #ebebeb, 3.70943px 5.93634px 0 #eaeaea, 4.23935px 6.78438px 0 #eaeaea, 4.76927px 7.63243px 0 #eaeaea, 5.29919px 8.48048px 0 #eaeaea, 5.82911px 9.32853px 0 #e9e9e9, 6.35903px 10.17658px 0 #e9e9e9, 6.88895px 11.02463px 0 #e9e9e9, 7.41887px 11.87267px 0 #e9e9e9, 7.94879px 12.72072px 0 #e8e8e8, 8.47871px 13.56877px 0 #e8e8e8, 9.00863px 14.41682px 0 #e8e8e8, 9.53855px 15.26487px 0 #e8e8e8, 10.06847px 16.11291px 0 #e7e7e7, 10.59839px 16.96096px 0 #e7e7e7, 11.1283px 17.80901px 0 #e7e7e7, 11.65822px 18.65706px 0 #e7e7e7, 12.18814px 19.50511px 0 #e6e6e6, 12.71806px 20.35315px 0 #e6e6e6, 13.24798px 21.2012px 0 #e6e6e6, 13.7779px 22.04925px 0 #e6e6e6, 14.30782px 22.8973px 0 #e5e5e5, 14.83774px 23.74535px 0 #e5e5e5, 15.36766px 24.59339px 0 #e5e5e5, 15.89758px 25.44144px 0 #e5e5e5, 16.4275px 26.28949px 0 #e4e4e4, 16.95742px 27.13754px 0 #e4e4e4, 17.48734px 27.98559px 0 #e4e4e4, 18.01725px 28.83364px 0 #e4e4e4, 18.54717px 29.68168px 0 #e3e3e3, 19.07709px 30.52973px 0 #e3e3e3, 19.60701px 31.37778px 0 #e3e3e3, 20.13693px 32.22583px 0 #e3e3e3, 20.66685px 33.07388px 0 #e2e2e2, 21.19677px 33.92192px 0 #e2e2e2, 21.72669px 34.76997px 0 #e2e2e2, 22.25661px 35.61802px 0 #e2e2e2, 22.78653px 36.46607px 0 #e1e1e1, 23.31645px 37.31412px 0 #e1e1e1, 23.84637px 38.16216px 0 #e1e1e1, 24.37629px 39.01021px 0 #e1e1e1, 24.90621px 39.85826px 0 #e0e0e0, 25.43612px 40.70631px 0 #e0e0e0, 25.96604px 41.55436px 0 #e0e0e0, 26.49596px 42.4024px 0 #e0e0e0, 27.02588px 43.25045px 0 #dfdfdf, 27.5558px 44.0985px 0 #dfdfdf, 28.08572px 44.94655px 0 #dfdfdf, 28.61564px 45.7946px 0 #dfdfdf, 29.14556px 46.64265px 0 #dedede, 29.67548px 47.49069px 0 #dedede, 30.2054px 48.33874px 0 #dedede, 30.73532px 49.18679px 0 #dedede, 31.26524px 50.03484px 0 #dddddd, 31.79516px 50.88289px 0 #dddddd, 32.32508px 51.73093px 0 #dddddd, 32.85499px 52.57898px 0 #dddddd, 33.38491px 53.42703px 0 gainsboro, 33.91483px 54.27508px 0 gainsboro, 34.44475px 55.12313px 0 gainsboro, 34.97467px 55.97117px 0 gainsboro, 35.50459px 56.81922px 0 #dbdbdb, 36.03451px 57.66727px 0 #dbdbdb, 36.56443px 58.51532px 0 #dbdbdb, 37.09435px 59.36337px 0 #dbdbdb, 37.62427px 60.21141px 0 #dadada, 38.15419px 61.05946px 0 #dadada, 38.68411px 61.90751px 0 #dadada, 39.21403px 62.75556px 0 #dadada, 39.74394px 63.60361px 0 #d9d9d9, 40.27386px 64.45166px 0 #d9d9d9, 40.80378px 65.2997px 0 #d9d9d9, 41.3337px 66.14775px 0 #d9d9d9, 41.86362px 66.9958px 0 #d8d8d8, 42.39354px 67.84385px 0 #d8d8d8, 42.92346px 68.6919px 0 #d8d8d8, 43.45338px 69.53994px 0 #d8d8d8, 43.9833px 70.38799px 0 #d7d7d7, 44.51322px 71.23604px 0 #d7d7d7, 45.04314px 72.08409px 0 #d7d7d7, 45.57306px 72.93214px 0 #d7d7d7, 46.10298px 73.78018px 0 #d6d6d6, 46.6329px 74.62823px 0 #d6d6d6, 47.16281px 75.47628px 0 #d6d6d6, 47.69273px 76.32433px 0 #d6d6d6, 48.22265px 77.17238px 0 #d5d5d5, 48.75257px 78.02042px 0 #d5d5d5, 49.28249px 78.86847px 0 #d5d5d5, 49.81241px 79.71652px 0 #d5d5d5, 50.34233px 80.56457px 0 #d4d4d4, 50.87225px 81.41262px 0 #d4d4d4, 51.40217px 82.26067px 0 #d4d4d4, 51.93209px 83.10871px 0 #d4d4d4, 52.46201px 83.95676px 0 lightgray, 52.99193px 84.80481px 0 lightgray; |
|||
} |
|||
100% { |
|||
transform: rotateY(-30deg) rotateX(50deg) translateY(-75px) translateX(-50px); |
|||
text-shadow: 0.52992px 0.84805px 0 #ececec, 1.05984px 1.6961px 0 #ececec, 1.58976px 2.54414px 0 #ebebeb, 2.11968px 3.39219px 0 #ebebeb, 2.6496px 4.24024px 0 #ebebeb, 3.17952px 5.08829px 0 #ebebeb, 3.70943px 5.93634px 0 #eaeaea, 4.23935px 6.78438px 0 #eaeaea, 4.76927px 7.63243px 0 #eaeaea, 5.29919px 8.48048px 0 #eaeaea, 5.82911px 9.32853px 0 #e9e9e9, 6.35903px 10.17658px 0 #e9e9e9, 6.88895px 11.02463px 0 #e9e9e9, 7.41887px 11.87267px 0 #e9e9e9, 7.94879px 12.72072px 0 #e8e8e8, 8.47871px 13.56877px 0 #e8e8e8, 9.00863px 14.41682px 0 #e8e8e8, 9.53855px 15.26487px 0 #e8e8e8, 10.06847px 16.11291px 0 #e7e7e7, 10.59839px 16.96096px 0 #e7e7e7, 11.1283px 17.80901px 0 #e7e7e7, 11.65822px 18.65706px 0 #e7e7e7, 12.18814px 19.50511px 0 #e6e6e6, 12.71806px 20.35315px 0 #e6e6e6, 13.24798px 21.2012px 0 #e6e6e6, 13.7779px 22.04925px 0 #e6e6e6, 14.30782px 22.8973px 0 #e5e5e5, 14.83774px 23.74535px 0 #e5e5e5, 15.36766px 24.59339px 0 #e5e5e5, 15.89758px 25.44144px 0 #e5e5e5, 16.4275px 26.28949px 0 #e4e4e4, 16.95742px 27.13754px 0 #e4e4e4, 17.48734px 27.98559px 0 #e4e4e4, 18.01725px 28.83364px 0 #e4e4e4, 18.54717px 29.68168px 0 #e3e3e3, 19.07709px 30.52973px 0 #e3e3e3, 19.60701px 31.37778px 0 #e3e3e3, 20.13693px 32.22583px 0 #e3e3e3, 20.66685px 33.07388px 0 #e2e2e2, 21.19677px 33.92192px 0 #e2e2e2, 21.72669px 34.76997px 0 #e2e2e2, 22.25661px 35.61802px 0 #e2e2e2, 22.78653px 36.46607px 0 #e1e1e1, 23.31645px 37.31412px 0 #e1e1e1, 23.84637px 38.16216px 0 #e1e1e1, 24.37629px 39.01021px 0 #e1e1e1, 24.90621px 39.85826px 0 #e0e0e0, 25.43612px 40.70631px 0 #e0e0e0, 25.96604px 41.55436px 0 #e0e0e0, 26.49596px 42.4024px 0 #e0e0e0, 27.02588px 43.25045px 0 #dfdfdf, 27.5558px 44.0985px 0 #dfdfdf, 28.08572px 44.94655px 0 #dfdfdf, 28.61564px 45.7946px 0 #dfdfdf, 29.14556px 46.64265px 0 #dedede, 29.67548px 47.49069px 0 #dedede, 30.2054px 48.33874px 0 #dedede, 30.73532px 49.18679px 0 #dedede, 31.26524px 50.03484px 0 #dddddd, 31.79516px 50.88289px 0 #dddddd, 32.32508px 51.73093px 0 #dddddd, 32.85499px 52.57898px 0 #dddddd, 33.38491px 53.42703px 0 gainsboro, 33.91483px 54.27508px 0 gainsboro, 34.44475px 55.12313px 0 gainsboro, 34.97467px 55.97117px 0 gainsboro, 35.50459px 56.81922px 0 #dbdbdb, 36.03451px 57.66727px 0 #dbdbdb, 36.56443px 58.51532px 0 #dbdbdb, 37.09435px 59.36337px 0 #dbdbdb, 37.62427px 60.21141px 0 #dadada, 38.15419px 61.05946px 0 #dadada, 38.68411px 61.90751px 0 #dadada, 39.21403px 62.75556px 0 #dadada, 39.74394px 63.60361px 0 #d9d9d9, 40.27386px 64.45166px 0 #d9d9d9, 40.80378px 65.2997px 0 #d9d9d9, 41.3337px 66.14775px 0 #d9d9d9, 41.86362px 66.9958px 0 #d8d8d8, 42.39354px 67.84385px 0 #d8d8d8, 42.92346px 68.6919px 0 #d8d8d8, 43.45338px 69.53994px 0 #d8d8d8, 43.9833px 70.38799px 0 #d7d7d7, 44.51322px 71.23604px 0 #d7d7d7, 45.04314px 72.08409px 0 #d7d7d7, 45.57306px 72.93214px 0 #d7d7d7, 46.10298px 73.78018px 0 #d6d6d6, 46.6329px 74.62823px 0 #d6d6d6, 47.16281px 75.47628px 0 #d6d6d6, 47.69273px 76.32433px 0 #d6d6d6, 48.22265px 77.17238px 0 #d5d5d5, 48.75257px 78.02042px 0 #d5d5d5, 49.28249px 78.86847px 0 #d5d5d5, 49.81241px 79.71652px 0 #d5d5d5, 50.34233px 80.56457px 0 #d4d4d4, 50.87225px 81.41262px 0 #d4d4d4, 51.40217px 82.26067px 0 #d4d4d4, 51.93209px 83.10871px 0 #d4d4d4, 52.46201px 83.95676px 0 lightgray, 52.99193px 84.80481px 0 lightgray; |
|||
} |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
.page { |
|||
min-height: 100%; |
|||
padding-top: 20px; |
|||
position: relative; |
|||
} |
|||
|
|||
.color_list { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-ms-flex-wrap: wrap; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.color_list .color_item { |
|||
position: relative; |
|||
display: inline-block; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
padding: 5px 10px; |
|||
cursor: pointer; |
|||
width: 100px; |
|||
height: 125px; |
|||
} |
|||
|
|||
.color_list .color_item:hover .color_add { |
|||
-webkit-transform: translate(-50%, -50%) scale(1.3); |
|||
transform: translate(-50%, -50%) scale(1.3); |
|||
} |
|||
|
|||
.color_list .color_item .color_add { |
|||
width: 50px; |
|||
height: 50px; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
-webkit-transition: -webkit-transform .3s linear; |
|||
transition: -webkit-transform .3s linear; |
|||
transition: transform .3s linear; |
|||
transition: transform .3s linear, -webkit-transform .3s linear; |
|||
-webkit-transform: translate(-50%, -50%); |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.color_list .color_item:hover { |
|||
background-color: rgba(0, 0, 0, 0.041); |
|||
} |
|||
|
|||
.color_list .color_item:hover .color_toggle_list { |
|||
max-height: 99px; |
|||
} |
|||
|
|||
.color_list .color_item .color_toggle_list { |
|||
overflow: hidden; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
max-height: 0; |
|||
-webkit-transition: max-height .5s linear; |
|||
transition: max-height .5s linear; |
|||
background-color: rgba(180, 180, 180, 0.274); |
|||
} |
|||
|
|||
.color_list .color_item .color_toggle_list .color_toggle_item { |
|||
display: inline-block; |
|||
padding: 2px 6px; |
|||
} |
|||
|
|||
.color_list .color_item .color_toggle_list .color_toggle_item:hover { |
|||
background-color: rgba(0, 0, 0, 0.185); |
|||
} |
|||
|
|||
.color_list .color_item .color_item_bg { |
|||
height: 50px; |
|||
background-color: red; |
|||
position: relative; |
|||
} |
|||
|
|||
.color_list .color_item .color_item_content .color_item_title { |
|||
font-size: 1.2em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.color_list .color_item .color_item_content .color_item_desc { |
|||
color: #a7a6a6; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
} |
|||
/*# sourceMappingURL=color.css.map */ |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"version": 3, |
|||
"mappings": "AAEA,AAAA,KAAK,CAAC;EACJ,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,IAAI;EACjB,QAAQ,EAAE,QAAQ;CACnB;;AAED,AAAA,WAAW,CAAC;EACV,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;CAgEhB;;AAlED,AAGE,WAHS,CAGT,WAAW,CAAC;EACV,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,YAAY;EACrB,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,QAAQ;EACjB,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;CAsDd;;AAjEH,AAaM,WAbK,CAGT,WAAW,AASR,MAAM,CACL,UAAU,CAAA;EACR,SAAS,EAAE,qBAAoB,CAAC,UAAU;CAC3C;;AAfP,AAiBI,WAjBO,CAGT,WAAW,CAcT,UAAU,CAAA;EACR,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,oBAAoB;EAChC,SAAS,EAAE,qBAAoB;CAChC;;AAzBL,AA0BI,WA1BO,CAGT,WAAW,AAuBR,MAAM,CAAC;EACN,gBAAgB,EAAE,oBAAoB;CAIvC;;AA/BL,AA4BM,WA5BK,CAGT,WAAW,AAuBR,MAAM,CAEL,kBAAkB,CAAC;EACjB,UAAU,EAAE,IAAI;CACjB;;AA9BP,AAgCI,WAhCO,CAGT,WAAW,CA6BT,kBAAkB,CAAC;EACjB,QAAQ,EAAE,MAAM;EAChB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,CAAC;EACb,UAAU,EAAE,qBAAqB;EACjC,gBAAgB,EAAE,0BAA0B;CAQ7C;;AAjDL,AA0CM,WA1CK,CAGT,WAAW,CA6BT,kBAAkB,CAUhB,kBAAkB,CAAC;EACjB,OAAO,EAAE,YAAY;EACrB,OAAO,EAAE,OAAO;CAIjB;;AAhDP,AA6CQ,WA7CG,CAGT,WAAW,CA6BT,kBAAkB,CAUhB,kBAAkB,AAGf,MAAM,CAAC;EACN,gBAAgB,EAAE,oBAAoB;CACvC;;AA/CT,AAkDI,WAlDO,CAGT,WAAW,CA+CT,cAAc,CAAC;EACb,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAAE,GAAG;EACrB,QAAQ,EAAE,QAAQ;CACnB;;AAtDL,AAwDM,WAxDK,CAGT,WAAW,CAoDT,mBAAmB,CACjB,iBAAiB,CAAC;EAChB,SAAS,EAAE,KAAK;EAChB,WAAW,EAAE,IAAI;CAClB;;AA3DP,AA4DM,WA5DK,CAGT,WAAW,CAoDT,mBAAmB,CAKjB,gBAAgB,CAAC;EACf,KAAK,EAAE,OAAkB;ECzC7B,OAAO,EAAE,WAAW;EACpB,kBAAkB,EAAE,QAAQ;EAC5B,kBAAkB,EDwCI,CAAC;ECvCvB,QAAQ,EAAE,MAAM;EAChB,aAAa,EAAE,QAAQ;EACvB,UAAU,EAAE,SAAS;CDsClB", |
|||
"sources": [ |
|||
"color.scss", |
|||
"../tool/_tool.scss" |
|||
], |
|||
"names": [], |
|||
"file": "color.css" |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
@import "../tool/tool"; |
|||
|
|||
.page { |
|||
min-height: 100%; |
|||
padding-top: 20px; |
|||
position: relative; |
|||
} |
|||
|
|||
.color_list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.color_item { |
|||
position: relative; |
|||
display: inline-block; |
|||
border-radius: 5px; |
|||
overflow: hidden; |
|||
padding: 5px 10px; |
|||
cursor: pointer; |
|||
width: 100px; |
|||
height: 125px; |
|||
&:hover{ |
|||
.color_add{ |
|||
transform: translate(-50%,-50%) scale(1.3); |
|||
} |
|||
} |
|||
.color_add{ |
|||
width: 50px; |
|||
height: 50px; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transition: transform .3s linear; |
|||
transform: translate(-50%,-50%); |
|||
} |
|||
&:hover { |
|||
background-color: rgba(0, 0, 0, 0.041); |
|||
.color_toggle_list { |
|||
max-height: 99px; |
|||
} |
|||
} |
|||
.color_toggle_list { |
|||
overflow: hidden; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
max-height: 0; |
|||
transition: max-height .5s linear; |
|||
background-color: rgba(180, 180, 180, 0.274); |
|||
.color_toggle_item { |
|||
display: inline-block; |
|||
padding: 2px 6px; |
|||
&:hover { |
|||
background-color: rgba(0, 0, 0, 0.185); |
|||
} |
|||
} |
|||
} |
|||
.color_item_bg { |
|||
height: 50px; |
|||
background-color: red; |
|||
position: relative; |
|||
} |
|||
.color_item_content { |
|||
.color_item_title { |
|||
font-size: 1.2em; |
|||
font-weight: bold; |
|||
} |
|||
.color_item_desc { |
|||
color: rgb(167, 166, 166); |
|||
@include ellipsis(2); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,60 @@ |
|||
@charset "UTF-8"; |
|||
.avatar { |
|||
width: 100px; |
|||
height: 100px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.page { |
|||
min-height: 100%; |
|||
padding-top: 20px; |
|||
position: relative; |
|||
} |
|||
|
|||
/* |
|||
用户信息样式 |
|||
*/ |
|||
.userinfo { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
width: 500px; |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.userinfo { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 920px) { |
|||
.userinfo { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.userinfo .user_detail { |
|||
-webkit-box-flex: 1; |
|||
-ms-flex: 1; |
|||
flex: 1; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.userinfo .user_detail .user_name { |
|||
font-size: 1.67em; |
|||
} |
|||
|
|||
.userinfo .user_detail .user_desc { |
|||
text-indent: 10px; |
|||
padding-top: 5px; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 3; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
} |
|||
/*# sourceMappingURL=index.css.map */ |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"version": 3, |
|||
"mappings": ";AAOA,AAAA,OAAO,CAAA;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,aAAa,EAAE,GAAG;CACnB;;AAED,AAAA,KAAK,CAAA;EACH,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,IAAI;EACjB,QAAQ,EAAE,QAAQ;CACnB;;AAED;;EAEE;AACF,AAAA,SAAS,CAAA;EACP,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,KAAK;CAgBb;;ACtCK,MAAM,EAAE,SAAS,EAAE,KAAK;EDmB9B,AAAA,SAAS,CAAA;IAKL,KAAK,EAAE,IAAI;GAcd;;;AClCK,MAAM,EAAE,SAAS,EAAE,KAAK;EDe9B,AAAA,SAAS,CAAA;IAKL,KAAK,EAAE,IAAI;GAcd;;;AAnBD,AAOE,SAPO,CAOP,YAAY,CAAA;EACV,IAAI,EAAE,CAAC;EACP,WAAW,EAAE,IAAI;CASlB;;AAlBH,AAUI,SAVK,CAOP,YAAY,CAGV,UAAU,CAAA;EACR,SAAS,EAAE,MAAM;CAClB;;AAZL,AAaI,SAbK,CAOP,YAAY,CAMV,UAAU,CAAA;EACR,WAAW,EAAE,IAAI;EACjB,WAAW,EAAE,GAAG;ECTlB,OAAO,EAAE,WAAW;EACpB,kBAAkB,EAAE,QAAQ;EAC5B,kBAAkB,EDQE,CAAC;ECPrB,QAAQ,EAAE,MAAM;EAChB,aAAa,EAAE,QAAQ;EACvB,UAAU,EAAE,SAAS;CDMpB", |
|||
"sources": [ |
|||
"index.scss", |
|||
"../tool/_tool.scss" |
|||
], |
|||
"names": [], |
|||
"file": "index.css" |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
@import "../tool/tool"; |
|||
|
|||
// body{ |
|||
// background-image: url(/public/image/gezi.png); |
|||
// background-size: 20px 20px; |
|||
// } |
|||
|
|||
.avatar{ |
|||
width: 100px; |
|||
height: 100px; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.page{ |
|||
min-height: 100%; |
|||
padding-top: 20px; |
|||
position: relative; |
|||
} |
|||
|
|||
/* |
|||
用户信息样式 |
|||
*/ |
|||
.userinfo{ |
|||
display: flex; |
|||
align-items: center; |
|||
width: 500px; |
|||
@include media(xs,sm) { |
|||
width: 100%; |
|||
} |
|||
.user_detail{ |
|||
flex: 1; |
|||
margin-left: 10px; |
|||
.user_name{ |
|||
font-size: 1.67em; // 20px/12 |
|||
} |
|||
.user_desc{ |
|||
text-indent: 10px; // |
|||
padding-top: 5px; |
|||
@include ellipsis(3) |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
After Width: | Height: | Size: 7.7 KiB |
@ -1,3 +0,0 @@ |
|||
*{ |
|||
color: red; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
* http://html2jade.org/ |
|||
* https://darkmodejs.learn.uno/ |
|||
* https://blog.csdn.net/weixin_39923599/article/details/111214071 |
|||
* https://pugjs.org/language/attributes.html |
|||
* https://blog.meathill.com/tech/fe/interpolation-in-pug-with-extends.html |
|||
Binary file not shown.
@ -1,11 +1,17 @@ |
|||
import {connect} from "@/db/index" |
|||
import User from "@/model/User" |
|||
|
|||
import {connect, sequelize} from "@/db/index" |
|||
|
|||
import "@/model/User" |
|||
import "@/model/Color" |
|||
|
|||
const argv = require('minimist')(process.argv.slice(2)); |
|||
|
|||
const isForce = !!(argv._.indexOf("force")!=-1) || false |
|||
const isForce = !!(argv._.indexOf("force")!=-1) || false // 会把之前的表删除，慎用
|
|||
const isAlter = !!(argv._.indexOf("alter")!=-1) || false |
|||
|
|||
connect().then(()=>{ |
|||
User.sync({force: isForce,alter: isAlter}) |
|||
}) |
|||
sequelize.sync({force: isForce,alter: isAlter}); |
|||
// User.sync({force: isForce,alter: isAlter})
|
|||
// Color.sync({force: isForce,alter: isAlter})
|
|||
// ColorChunk.sync({force: isForce,alter: isAlter})
|
|||
}) |
|||
|
|||
@ -0,0 +1,27 @@ |
|||
import { sequelize, connect } from "@/db/index"; |
|||
import { DataTypes } from "sequelize"; |
|||
/** |
|||
* 图片解析表： |
|||
*/ |
|||
const Color = sequelize.define( |
|||
"Color", |
|||
{ |
|||
// 图片地址
|
|||
color: { |
|||
type: DataTypes.STRING |
|||
}, |
|||
title: { |
|||
type: DataTypes.STRING, |
|||
allowNull: true |
|||
}, |
|||
describe: { |
|||
type: DataTypes.STRING, |
|||
allowNull: true |
|||
}, |
|||
}, |
|||
{ |
|||
timestamps: false, |
|||
} |
|||
); |
|||
|
|||
export { Color }; |
|||
@ -0,0 +1,7 @@ |
|||
|
|||
|
|||
export default class { |
|||
wxinit(req,h){ |
|||
// const {subgbat÷}÷
|
|||
} |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
import { Color } from "@/model/Color"; |
|||
import { gFail, gSuccess } from "@/util"; |
|||
import Joi from "joi"; |
|||
import { auth, method, route, validate } from "@noderun/hapi-router"; |
|||
|
|||
export default class { |
|||
|
|||
index(request,h){ |
|||
return h.view('views/color.pug') |
|||
} |
|||
|
|||
@method("POST") |
|||
@route("/add") |
|||
@validate({ |
|||
payload: Joi.object({ |
|||
color: Joi.string().required(), |
|||
title: Joi.string(), |
|||
describe: Joi.string(), |
|||
}), |
|||
}) |
|||
async add(request, h) { |
|||
let { color, title, describe } = request.payload || {}; |
|||
try { |
|||
await Color.create({ color, title, describe }); |
|||
return gSuccess("success"); |
|||
} catch (error) { |
|||
request.log("error", error); |
|||
return gFail(null, "添加颜色失败"); |
|||
} |
|||
} |
|||
|
|||
@method("GET") |
|||
@route("/all_color") |
|||
async getAll(request, h) { |
|||
try { |
|||
let allColors = <any>await Color.findAll(); |
|||
if (allColors == null) { |
|||
return gFail(null, "不存在颜色"); |
|||
} |
|||
return gSuccess(allColors, "success"); |
|||
} catch (error) { |
|||
request.log("error", error); |
|||
return gFail(null, "获取颜色失败"); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
import { config, method, route, swagger, validate } from "@noderun/hapi-router"; |
|||
import UploadFunc from "./_upload"; |
|||
import Joi from "joi"; |
|||
export default class { |
|||
index(request, h) { |
|||
return h.view("views/demo.ejs"); |
|||
} |
|||
|
|||
@config({ |
|||
payload: { |
|||
maxBytes: 20000 * 1024 * 1024, |
|||
output: "stream", |
|||
parse: false, |
|||
// multipart: true,
|
|||
allow: "multipart/form-data", |
|||
} |
|||
}) |
|||
@method("POST") |
|||
@swagger("文件上传", "文件上传a ", ["sum", "api"]) |
|||
async upload(req, h) { |
|||
const startTime = new Date().getTime(); |
|||
const res = await UploadFunc(req, h); |
|||
const endTime = new Date().getTime(); |
|||
console.log( |
|||
`该请求处理时间为：${Number(endTime - startTime).toFixed(2)}ms` |
|||
); |
|||
return res; |
|||
} |
|||
|
|||
@route("/{path*}") |
|||
async 404(req, h) { |
|||
// 404页面
|
|||
return h.view("404.ejs"); |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
|
|||
|
|||
export default class { |
|||
index(req, h){ |
|||
|
|||
} |
|||
} |
|||
@ -1,33 +1,63 @@ |
|||
import { config, method, route } from "@noderun/hapi-router"; |
|||
import UploadFunc from "./_upload"; |
|||
|
|||
import { |
|||
auth, |
|||
config, |
|||
method, |
|||
route, |
|||
swagger, |
|||
validate, |
|||
} from "@noderun/hapi-router"; |
|||
import UploadFunc from "../demo/_upload"; |
|||
import Joi from "joi"; |
|||
import User from "@/model/User"; |
|||
import * as bcrypt from "bcrypt"; |
|||
export default class { |
|||
@auth() |
|||
@config({ |
|||
auth: { |
|||
mode: "try" |
|||
} |
|||
}) |
|||
index(request, h) { |
|||
return h.view("views/index.ejs"); |
|||
// console.log(request.auth);
|
|||
if(request.isAuthenticated){ |
|||
// 登录了
|
|||
}else{ |
|||
// 未登录
|
|||
} |
|||
return h.view("views/index.pug"); |
|||
} |
|||
@method("GET") |
|||
@route("/login") |
|||
loginView(request, h) { |
|||
return h.view("views/login.ejs"); |
|||
} |
|||
|
|||
@config({ |
|||
payload: { |
|||
maxBytes: 20000 * 1024 * 1024, |
|||
output: "stream", |
|||
parse: false, |
|||
allow: "multipart/form-data", |
|||
}, |
|||
}) |
|||
@method("POST") |
|||
async upload(req, h) { |
|||
const startTime = new Date().getTime(); |
|||
const res = await UploadFunc(req, h); |
|||
const endTime = new Date().getTime(); |
|||
console.log( |
|||
`该请求处理时间为：${Number(endTime - startTime).toFixed(2)}ms` |
|||
); |
|||
return res; |
|||
@auth(false) |
|||
@route("/login") |
|||
async login(request, h) { |
|||
const { username, password } = request.payload; |
|||
const account = <any>await User.findOne({ where: { username: username } }); |
|||
|
|||
if (!account || !(await bcrypt.compare(password, account.password))) { |
|||
return h.view("/login"); |
|||
} |
|||
|
|||
request.cookieAuth.set({ id: account.id }); |
|||
|
|||
return h.redirect("/"); |
|||
} |
|||
|
|||
@route("/about") |
|||
@auth() |
|||
about(request, h) { |
|||
console.log(request.auth); |
|||
return h.view("views/about.ejs"); |
|||
} |
|||
|
|||
@route("/{path*}") |
|||
async 404(req, h) { |
|||
// 404页面
|
|||
return h.view("404.ejs"); |
|||
return h.view("404.pug"); |
|||
} |
|||
} |
|||
|
|||
@ -1 +0,0 @@ |
|||
404 |
|||
@ -0,0 +1,35 @@ |
|||
extends layout/layout |
|||
|
|||
block head |
|||
link(rel="stylesheet", href="/public/css/views/404.css") |
|||
|
|||
block content |
|||
#app |
|||
#outer |
|||
h1 4 |
|||
h1 0 |
|||
h1 4 |
|||
.wrap |
|||
.ghost |
|||
.inner |
|||
.ghost |
|||
.inner |
|||
.ghost |
|||
.inner |
|||
svg(xmlns='http://www.w3.org/2000/svg' version='1.1' style='display: none') |
|||
defs |
|||
filter#squiggly-0 |
|||
feturbulence#turbulence(baseFrequency='0.03' numOctaves='3' result='noise' seed='0') |
|||
fedisplacementmap#displacement(in='SourceGraphic' in2='noise' scale='2') |
|||
filter#squiggly-1 |
|||
feturbulence#turbulence(baseFrequency='0.02' numOctaves='3' result='noise' seed='1') |
|||
fedisplacementmap(in='SourceGraphic' in2='noise' scale='3') |
|||
filter#squiggly-2 |
|||
feturbulence#turbulence(baseFrequency='0.02' numOctaves='3' result='noise' seed='2') |
|||
fedisplacementmap(in='SourceGraphic' in2='noise' scale='0.5') |
|||
filter#squiggly-3 |
|||
feturbulence#turbulence(baseFrequency='0.02' numOctaves='3' result='noise' seed='3') |
|||
fedisplacementmap(in='SourceGraphic' in2='noise' scale='3') |
|||
filter#squiggly-4 |
|||
feturbulence#turbulence(baseFrequency='0.05' numOctaves='2' result='noise' seed='4') |
|||
fedisplacementmap(in='SourceGraphic' in2='noise' scale='1') |
|||
@ -1,2 +0,0 @@ |
|||
</body> |
|||
</html> |
|||
@ -1,22 +0,0 @@ |
|||
<!-- |
|||
* @Author: your name |
|||
* @Date: 2021-06-16 02:56:55 |
|||
* @LastEditTime: 2021-06-16 17:21:34 |
|||
* @LastEditors: your name |
|||
* @Description: In User Settings Edit |
|||
* @FilePath: /hapi-demo/template/includes/head.ejs |
|||
--> |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<meta |
|||
name="viewport" |
|||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" |
|||
/> |
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> |
|||
<title>Document</title> |
|||
<link rel="stylesheet" href="/public/style.css" /> |
|||
</head> |
|||
<body></body> |
|||
</html> |
|||
@ -1,4 +0,0 @@ |
|||
|
|||
<%- include("./includes/head")%> |
|||
<%- content %> |
|||
<%- include("./includes/foot")%> |
|||
@ -0,0 +1 @@ |
|||
<%- content %> |
|||
@ -0,0 +1,19 @@ |
|||
doctype html |
|||
|
|||
html(lang="en") |
|||
block var |
|||
i |
|||
head |
|||
meta(charset="UTF-8") |
|||
meta(http-equiv="X-UA-Compatible", content="IE=edge") |
|||
//- device-width 宽度低于1100像素的设备直接缩小 |
|||
meta(name="viewport", content="width=1100, initial-scale=1.0") |
|||
title #{title || 'WEB'} |
|||
link(rel="stylesheet", href="/public/css/common/style.css") |
|||
block head |
|||
i |
|||
body |
|||
block content |
|||
div no content |
|||
block script |
|||
i |
|||
@ -0,0 +1,52 @@ |
|||
extends /layout/layout |
|||
|
|||
block var |
|||
-title="颜色表" // 网页标题 |
|||
|
|||
block head |
|||
link(rel="stylesheet", href="/public/css/common/reset.css") |
|||
link(rel="stylesheet", href="/public/css/views/color.css") |
|||
|
|||
block content |
|||
div(class="container page") |
|||
div(class="color_list") |
|||
- |
|||
var list=[ |
|||
{ color:"#999999",title: "辅助色",describe:"灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色"}, |
|||
{ color:"#999999",title: "辅助色",describe:"灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色"}, |
|||
{ color:"#999999",title: "辅助色",describe:"灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色灰色"}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
{ color:"#999999",title: "辅助色",describe:""}, |
|||
] |
|||
each item in list |
|||
div(class="color_item") |
|||
div(class="color_item_bg") |
|||
div(class="color_toggle_list") |
|||
div(class="color_toggle_item") hex |
|||
div(class="color_toggle_item") rgba |
|||
div(class="color_item_name") #{item.color} |
|||
div(class="color_item_content") |
|||
div(class="color_item_title") #{item.title} |
|||
div(class="color_item_desc") #{item.describe || "暂无描述"} |
|||
div(class="color_item") |
|||
img(src="/public/image/add.png", alt="添加" title="添加" class="color_add") |
|||
div |
|||
form(action="POST" method="post") |
|||
div(class=".wrapper_input"): input(type="text" tabindex="1" value="sadsa" name="a") |
|||
div(class=".wrapper_input"): input(type="text" tabindex="3" value="sadsa" name="b") |
|||
button(type="submit" tabindex="2") 提交 |
|||
@ -0,0 +1,58 @@ |
|||
<form action="/upload" method="post" enctype="multipart/form-data"> |
|||
<input type="file" name="file" id="file" multiple /> |
|||
<button type="submit" id="upload">上传</button> |
|||
</form> |
|||
<div id="filelist"></div> |
|||
|
|||
<script> |
|||
function $(selector) { |
|||
return document.querySelector(selector); |
|||
} |
|||
var uploadEl = $("#upload"); |
|||
var filelistEl = $("#filelist"); |
|||
var fileEl = $("#file"); |
|||
|
|||
uploadEl.addEventListener("click", function (e) { |
|||
e.preventDefault(); |
|||
|
|||
var xmlhttp; |
|||
if (window.XMLHttpRequest) { |
|||
// code for IE7+, Firefox, Chrome, Opera, Safari |
|||
xmlhttp = new XMLHttpRequest(); |
|||
} else { |
|||
// code for IE6, IE5 |
|||
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); |
|||
} |
|||
xmlhttp.open("POST", "/upload", true); |
|||
// 这里不需要自己加，会自己处理 |
|||
// xmlhttp.setRequestHeader("Content-Type", "multipart/form-data"); |
|||
|
|||
if (xmlhttp.upload) { |
|||
//监听上传属性的上传事件,每次上传事件都会执行 progressHandlingFunction |
|||
xmlhttp.upload.addEventListener( |
|||
"progress", |
|||
function (evt) { |
|||
var loaded = evt.loaded; |
|||
var tot = evt.total; |
|||
var per = Math.floor((100 * loaded) / tot); //已经上传的百分比 |
|||
}, |
|||
false |
|||
); |
|||
//xmlhttp.upload.progress = function(){} 也可以 |
|||
} |
|||
|
|||
var formData = new FormData(); |
|||
for (let i = 0; i < fileEl.files.length; i++) { |
|||
const file = fileEl.files[i]; |
|||
formData.append("file", file); |
|||
} |
|||
xmlhttp.send(formData); |
|||
|
|||
xmlhttp.onreadystatechange = function () { |
|||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { |
|||
// console.log(xmlhttp.responseText); |
|||
alert("success"); |
|||
} |
|||
}; |
|||
}); |
|||
</script> |
|||
@ -1,58 +1,3 @@ |
|||
<form action="/upload" method="post" enctype="multipart/form-data"> |
|||
<input type="file" name="file" id="file" multiple /> |
|||
<button type="submit" id="upload">上传</button> |
|||
</form> |
|||
<div id="filelist"></div> |
|||
index |
|||
|
|||
<script> |
|||
function $(selector) { |
|||
return document.querySelector(selector); |
|||
} |
|||
var uploadEl = $("#upload"); |
|||
var filelistEl = $("#filelist"); |
|||
var fileEl = $("#file"); |
|||
|
|||
uploadEl.addEventListener("click", function (e) { |
|||
e.preventDefault(); |
|||
|
|||
var xmlhttp; |
|||
if (window.XMLHttpRequest) { |
|||
// code for IE7+, Firefox, Chrome, Opera, Safari |
|||
xmlhttp = new XMLHttpRequest(); |
|||
} else { |
|||
// code for IE6, IE5 |
|||
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); |
|||
} |
|||
xmlhttp.open("POST", "/upload", true); |
|||
// 这里不需要自己加，会自己处理 |
|||
// xmlhttp.setRequestHeader("Content-Type", "multipart/form-data"); |
|||
|
|||
if (xmlhttp.upload) { |
|||
//监听上传属性的上传事件,每次上传事件都会执行 progressHandlingFunction |
|||
xmlhttp.upload.addEventListener( |
|||
"progress", |
|||
function (evt) { |
|||
var loaded = evt.loaded; |
|||
var tot = evt.total; |
|||
var per = Math.floor((100 * loaded) / tot); //已经上传的百分比 |
|||
}, |
|||
false |
|||
); |
|||
//xmlhttp.upload.progress = function(){} 也可以 |
|||
} |
|||
|
|||
var formData = new FormData(); |
|||
for (let i = 0; i < fileEl.files.length; i++) { |
|||
const file = fileEl.files[i]; |
|||
formData.append("file", file); |
|||
} |
|||
xmlhttp.send(formData); |
|||
|
|||
xmlhttp.onreadystatechange = function () { |
|||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { |
|||
// console.log(xmlhttp.responseText); |
|||
alert("success"); |
|||
} |
|||
}; |
|||
}); |
|||
</script> |
|||
<a href="/login">login</a> |
|||
|
|||
@ -0,0 +1,41 @@ |
|||
extends /layout/layout |
|||
|
|||
block var |
|||
-title="时间就是金钱" // 网页标题 |
|||
|
|||
block head |
|||
link(rel="stylesheet", href="/public/css/common/reset.css") |
|||
link(rel="stylesheet", href="/public/css/views/index.css") |
|||
|
|||
block content |
|||
div(class="container page") |
|||
ul(class="left-list") |
|||
li(class="item"): a(href="/login" ) 登录/注册 |
|||
div(class="userinfo") |
|||
div(class="img-wrapper user_avatar"): img(object-fit="scale-down" src="https://scpic.chinaz.net/files/pic/pic9/202106/apic33329.jpg") |
|||
div(class="user_detail") |
|||
-username = "谢亚昕" |
|||
- |
|||
describe = ` |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
来自南方的小城，喜爱悠闲 |
|||
` |
|||
.user_name #{username} |
|||
div(class="user_desc" title=describe ) |
|||
|#{describe} |
|||
|
|||
//- script(src='https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js') |
|||
//- script. |
|||
//- function addDarkmodeWidget() { |
|||
//- new Darkmode().showWidget(); |
|||
//- } |
|||
//- window.addEventListener('load', addDarkmodeWidget); |
|||
@ -0,0 +1,6 @@ |
|||
<h3>Please Log In</h3> |
|||
<form method="post" action="/login"> |
|||
Username: <input type="text" name="username" /><br /> |
|||
Password: <input type="password" name="password" /><br /> |
|||
<input type="submit" value="Login" /> |
|||
</form> |
|||
Loading…
Reference in new issue