diff --git a/public/css/common/reset.css b/public/css/common/reset.css deleted file mode 100644 index 6fbdd89..0000000 --- a/public/css/common/reset.css +++ /dev/null @@ -1,57 +0,0 @@ -/* 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; -} diff --git a/public/css/common/style.css b/public/css/common/style.css deleted file mode 100644 index 4b1f1bc..0000000 --- a/public/css/common/style.css +++ /dev/null @@ -1,88 +0,0 @@ -@charset "UTF-8"; -html, -body { - background-color: #f5f5f5; - min-height: 100%; -} - -.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 */ \ No newline at end of file diff --git a/public/css/common/style.css.map b/public/css/common/style.css.map deleted file mode 100644 index 9f4c42d..0000000 --- a/public/css/common/style.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "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" -} \ No newline at end of file diff --git a/public/css/common/style.scss b/public/css/common/style.scss deleted file mode 100644 index b2e1d69..0000000 --- a/public/css/common/style.scss +++ /dev/null @@ -1,74 +0,0 @@ -html, -body { - background-color: #f5f5d5; - min-height: 100%; -} - -.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); - } -} diff --git a/public/css/page/a.css b/public/css/page/a.css deleted file mode 100644 index e81d9a3..0000000 --- a/public/css/page/a.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - color: #008000; -} diff --git a/public/css/page/a.styl b/public/css/page/a.styl deleted file mode 100644 index 7216b37..0000000 --- a/public/css/page/a.styl +++ /dev/null @@ -1,2 +0,0 @@ -body - color: green; \ No newline at end of file diff --git a/public/css/page/css.css b/public/css/page/css.css deleted file mode 100644 index 6358389..0000000 --- a/public/css/page/css.css +++ /dev/null @@ -1,68 +0,0 @@ -html, body{ - padding: 0; - margin: 0; -} - -*{ - cursor: pointer; - position: relative; -} - - -.container { - width: 900px; - margin: 0 auto; - } - -.title{ - padding-left: 20px; - z-index: 10; -} - -.author:hover::before{ - content: attr(title); - position: absolute; - top: 0; - left: 0; - background-color: yellow; - text-indent: 0; - font-size: 12px; - opacity: .4; - padding: 1px 8px; - pointer-events: none; -} -.author:hover::after{ - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 1px solid yellow; - pointer-events: none; -} - -.word{ - text-indent: 30px; - padding: 5px 10px; -} - -.word .comment{ - display: none; - position: relative; -} -.word:hover .comment{ - display: block; - position: absolute; - left: 100%; - top: 0; - font-size: 14px; - padding: 6px; - box-sizing: border-box; - text-indent: 0; - background-color: rgb(177, 177, 177); - max-width: 180px; - width: 100%; - max-height: 100%; - overflow-y: auto; -} \ No newline at end of file diff --git a/public/css/page/login copy.css b/public/css/page/login copy.css deleted file mode 100644 index ff2e24c..0000000 --- a/public/css/page/login copy.css +++ /dev/null @@ -1,252 +0,0 @@ - -@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); - -* { - box-sizing: border-box; -} - -body { - background: #f6f5f7; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - font-family: 'Montserrat', sans-serif; - height: 100vh; - /* margin: -20px 0 50px; */ -} - -h1 { - font-weight: bold; - margin: 0; -} - -h2 { - text-align: center; -} - -p { - font-size: 14px; - font-weight: 100; - line-height: 20px; - letter-spacing: 0.5px; - margin: 20px 0 30px; -} - -span { - font-size: 12px; -} - -a { - color: #333; - font-size: 14px; - text-decoration: none; - margin: 15px 0; -} - -button { - border-radius: 20px; - border: 1px solid #FF4B2B; - background-color: #FF4B2B; - color: #FFFFFF; - font-size: 12px; - font-weight: bold; - padding: 12px 45px; - letter-spacing: 1px; - text-transform: uppercase; - transition: transform 80ms ease-in; -} - -button:active { - transform: scale(0.95); -} - -button:focus { - outline: none; -} - -button.ghost { - background-color: transparent; - border-color: #FFFFFF; -} - -form { - background-color: #FFFFFF; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 50px; - height: 100%; - text-align: center; -} - -input { - background-color: #eee; - border: none; - padding: 12px 15px; - margin: 8px 0; - width: 100%; -} - -.container { - background-color: #fff; - border-radius: 10px; - box-shadow: 0 14px 28px rgba(0,0,0,0.25), - 0 10px 10px rgba(0,0,0,0.22); - position: relative; - overflow: hidden; - width: 768px; - max-width: 100%; - min-height: 480px; -} - -.form-container { - position: absolute; - top: 0; - height: 100%; - transition: all 0.6s ease-in-out; -} - -.sign-in-container { - left: 0; - width: 50%; - z-index: 2; -} - -.container.right-panel-active .sign-in-container { - transform: translateX(100%); -} - -.sign-up-container { - left: 0; - width: 50%; - opacity: 0; - z-index: 1; -} - -.container.right-panel-active .sign-up-container { - transform: translateX(100%); - opacity: 1; - z-index: 5; - animation: show 0.6s; -} - -@keyframes show { - 0%, 49.99% { - opacity: 0; - z-index: 1; - } - - 50%, 100% { - opacity: 1; - z-index: 5; - } -} - -.overlay-container { - position: absolute; - top: 0; - left: 50%; - width: 50%; - height: 100%; - overflow: hidden; - transition: transform 0.6s ease-in-out; - z-index: 100; -} - -.container.right-panel-active .overlay-container{ - transform: translateX(-100%); -} - -.overlay { - background: #FF416C; - background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); - background: linear-gradient(to right, #FF4B2B, #FF416C); - background-repeat: no-repeat; - background-size: cover; - background-position: 0 0; - color: #FFFFFF; - position: relative; - left: -100%; - height: 100%; - width: 200%; - transform: translateX(0); - transition: transform 0.6s ease-in-out; -} - -.container.right-panel-active .overlay { - transform: translateX(50%); -} - -.overlay-panel { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding: 0 40px; - text-align: center; - top: 0; - height: 100%; - width: 50%; - transform: translateX(0); - transition: transform 0.6s ease-in-out; -} - -.overlay-left { - transform: translateX(-20%); -} - -.container.right-panel-active .overlay-left { - transform: translateX(0); -} - -.overlay-right { - right: 0; - transform: translateX(0); -} - -.container.right-panel-active .overlay-right { - transform: translateX(20%); -} - -.social-container { - margin: 20px 0; -} - -.social-container a { - border: 1px solid #DDDDDD; - border-radius: 50%; - display: inline-flex; - justify-content: center; - align-items: center; - margin: 0 5px; - height: 40px; - width: 40px; -} - -footer { - background-color: #222; - color: #fff; - font-size: 14px; - bottom: 0; - position: fixed; - left: 0; - right: 0; - text-align: center; - z-index: 999; -} - -footer p { - margin: 10px 0; -} - -footer i { - color: red; -} - -footer a { - color: #3c97bf; - text-decoration: none; -} diff --git a/public/css/tool/_tool.scss b/public/css/tool/_tool.scss deleted file mode 100644 index dddebeb..0000000 --- a/public/css/tool/_tool.scss +++ /dev/null @@ -1,36 +0,0 @@ -@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; - } -} diff --git a/public/css/views/404.css b/public/css/views/404.css deleted file mode 100644 index 02756e3..0000000 --- a/public/css/views/404.css +++ /dev/null @@ -1,320 +0,0 @@ -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; - } -} diff --git a/public/css/views/color.css b/public/css/views/color.css deleted file mode 100644 index 4304a07..0000000 --- a/public/css/views/color.css +++ /dev/null @@ -1,95 +0,0 @@ -.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 */ \ No newline at end of file diff --git a/public/css/views/color.css.map b/public/css/views/color.css.map deleted file mode 100644 index bf1e812..0000000 --- a/public/css/views/color.css.map +++ /dev/null @@ -1,10 +0,0 @@ -{ - "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" -} \ No newline at end of file diff --git a/public/css/views/color.scss b/public/css/views/color.scss deleted file mode 100644 index 954015b..0000000 --- a/public/css/views/color.scss +++ /dev/null @@ -1,75 +0,0 @@ -@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); - } - } - } -} diff --git a/public/css/views/index.css b/public/css/views/index.css deleted file mode 100644 index 2c5fd57..0000000 --- a/public/css/views/index.css +++ /dev/null @@ -1,60 +0,0 @@ -@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 */ \ No newline at end of file diff --git a/public/css/views/index.css.map b/public/css/views/index.css.map deleted file mode 100644 index 0abe0d2..0000000 --- a/public/css/views/index.css.map +++ /dev/null @@ -1,10 +0,0 @@ -{ - "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" -} \ No newline at end of file diff --git a/public/css/views/index.scss b/public/css/views/index.scss deleted file mode 100644 index 3534111..0000000 --- a/public/css/views/index.scss +++ /dev/null @@ -1,43 +0,0 @@ -@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) - } - } -} - diff --git a/public/image/add.png b/public/image/add.png deleted file mode 100644 index 9b04554..0000000 Binary files a/public/image/add.png and /dev/null differ diff --git a/public/image/icons/error.svg b/public/image/icons/error.svg deleted file mode 100644 index 658f161..0000000 --- a/public/image/icons/error.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/js/common/main.js b/public/js/common/main.js new file mode 100644 index 0000000..be6f62b --- /dev/null +++ b/public/js/common/main.js @@ -0,0 +1,38 @@ +document.addEventListener("DOMContentLoaded", () => { + // Get all "navbar-burger" elements + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0) + + // Add a click event on each of them + $navbarBurgers.forEach(el => { + el.addEventListener("click", () => { + // Get the target from the "data-target" attribute + const target = el.dataset.target + const $target = document.getElementById(target) + + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + el.classList.toggle("is-active") + $target.classList.toggle("is-active") + }) + }) + + const $messages = Array.prototype.slice.call(document.querySelectorAll(".message-container .message button.delete"), 0) + $messages.forEach((el, index) => { + let timeID; + function click() { + // Get the target from the "data-target" attribute + const target = el.dataset.target + const $target = document.getElementById(target) + el.removeEventListener("click", click) + $target.remove() + clearTimeout(timeID) + } + timeID = setTimeout(() => { + const target = el.dataset.target + const $target = document.getElementById(target) + el.removeEventListener("click", click) + $target.remove() + }, (index + 1) * 6000); + el.addEventListener("click", click) + }) +}) + diff --git a/public/js/page/css.js b/public/js/page/css.js deleted file mode 100644 index e69de29..0000000 diff --git a/public/style/common/normalize.css b/public/style/common/normalize.css index 3630694..c469989 100644 --- a/public/style/common/normalize.css +++ b/public/style/common/normalize.css @@ -8,344 +8,342 @@ * 2. Prevent adjustments of font size after orientation changes in iOS. */ -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections - ========================================================================== */ + ========================================================================== */ /** - * Remove the margin in all browsers. - */ + * Remove the margin in all browsers. + */ body { - margin: 0; + margin: 0; } /** - * Render the `main` element consistently in IE. - */ + * Render the `main` element consistently in IE. + */ main { - display: block; + display: block; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } /* Grouping content - ========================================================================== */ + ========================================================================== */ /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /* Text-level semantics - ========================================================================== */ + ========================================================================== */ /** - * Remove the gray background on active links in IE 10. - */ + * Remove the gray background on active links in IE 10. + */ a { - background-color: transparent; + background-color: transparent; } /** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** - * Add the correct font weight in Chrome, Edge, and Safari. - */ + * Add the correct font weight in Chrome, Edge, and Safari. + */ b, strong { - font-weight: bolder; + font-weight: bolder; } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ code, kbd, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Add the correct font size in all browsers. - */ + * Add the correct font size in all browsers. + */ small { - font-size: 80%; + font-size: 80%; } /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } /* Embedded content - ========================================================================== */ + ========================================================================== */ /** - * Remove the border on images inside links in IE 10. - */ + * Remove the border on images inside links in IE 10. + */ img { - border-style: none; + border-style: none; } /* Forms - ========================================================================== */ + ========================================================================== */ /** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ button, input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ } /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ button, -input { - /* 1 */ - overflow: visible; +input { /* 1 */ + overflow: visible; } /** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ button, -select { - /* 1 */ - text-transform: none; +select { /* 1 */ + text-transform: none; } /** - * Correct the inability to style clickable types in iOS and Safari. - */ + * Correct the inability to style clickable types in iOS and Safari. + */ button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + -webkit-appearance: button; } /** - * Remove the inner border and padding in Firefox. - */ + * Remove the inner border and padding in Firefox. + */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } /** - * Restore the focus styles unset by the previous rule. - */ + * Restore the focus styles unset by the previous rule. + */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } /** - * Correct the padding in Firefox. - */ + * Correct the padding in Firefox. + */ fieldset { - padding: 0.35em 0.75em 0.625em; + padding: 0.35em 0.75em 0.625em; } /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ progress { - vertical-align: baseline; + vertical-align: baseline; } /** - * Remove the default vertical scrollbar in IE 10+. - */ + * Remove the default vertical scrollbar in IE 10+. + */ textarea { - overflow: auto; + overflow: auto; } /** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ [type="checkbox"], [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ + * Correct the cursor style of increment and decrement buttons in Chrome. + */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** - * Remove the inner padding in Chrome and Safari on macOS. - */ + * Remove the inner padding in Chrome and Safari on macOS. + */ [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /* Interactive - ========================================================================== */ + ========================================================================== */ /* - * Add the correct display in Edge, IE 10+, and Firefox. - */ + * Add the correct display in Edge, IE 10+, and Firefox. + */ details { - display: block; + display: block; } /* - * Add the correct display in all browsers. - */ + * Add the correct display in all browsers. + */ summary { - display: list-item; + display: list-item; } /* Misc - ========================================================================== */ + ========================================================================== */ /** - * Add the correct display in IE 10+. - */ + * Add the correct display in IE 10+. + */ template { - display: none; + display: none; } /** - * Add the correct display in IE 10. - */ + * Add the correct display in IE 10. + */ [hidden] { - display: none; + display: none; } diff --git a/public/style/common/style.css b/public/style/common/style.css index 9163659..227e8ef 100644 --- a/public/style/common/style.css +++ b/public/style/common/style.css @@ -1,6 +1,21 @@ +html{ + overflow-y: auto +} -/* html, -body { - background-color: #f5f5f5; - min-height: 100%; -} */ +.message-container{ + position: fixed; + right: 0; + top: 0; + z-index: 999; + overflow: auto; + height: 100vh; +} +.message-container::-webkit-scrollbar{ + display: none; +} +.message-container .message{ + min-width: 250px; + max-width: 250px; + margin: 25px; + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; +} diff --git a/public/style/views/index.css b/public/style/views/index.css deleted file mode 100644 index e69de29..0000000 diff --git a/public/css/page/login.css b/public/style/views/login.css similarity index 100% rename from public/css/page/login.css rename to public/style/views/login.css diff --git a/public/upload/2050798.jpg b/public/upload/2050798.jpg deleted file mode 100644 index afc9399..0000000 Binary files a/public/upload/2050798.jpg and /dev/null differ diff --git a/public/upload/icon.png b/public/upload/icon.png deleted file mode 100644 index 9e7ccc0..0000000 Binary files a/public/upload/icon.png and /dev/null differ diff --git a/route.txt b/route.txt index d7013d2..412e74b 100644 --- a/route.txt +++ b/route.txt @@ -1,4 +1,4 @@ -D:\1XYX\demo\hapi-demo\source\route\api对应路径： +D:\@code\project\hapi-demo\source\route\api对应路径： 不需权限 ： GET /api/{path*} 需要权限 ： GET /api/v1/upload 需要权限 ： POST /api/v1/upload/upload @@ -7,7 +7,7 @@ D:\1XYX\demo\hapi-demo\source\route\api对应路径： 不需权限 ： POST /api/v1/user/login 需要权限 ： DELETE /api/v1/user/del 需要权限 ： GET /api/v1/user/userinfo -D:\1XYX\demo\hapi-demo\source\route\views对应路径： +D:\@code\project\hapi-demo\source\route\views对应路径： 不需权限(提供无需验证)： GET /404 不需权限 ： GET /css 不需权限(提供无需验证)： GET / diff --git a/source/plugins/index.ts b/source/plugins/index.ts index 8dee145..0d68709 100644 --- a/source/plugins/index.ts +++ b/source/plugins/index.ts @@ -40,7 +40,7 @@ export default [ // 需要设置auth是try或者true才行 const isLogin = request.auth.isAuthenticated; console.log("是否登录：",isLogin, request.path); - + // @ts-ignore // console.log(isLogin, request.path, request.response.variety); let user; @@ -58,7 +58,7 @@ export default [ // @ts-ignore request.response.source.context = Hoek.applyToDefaults( { - flash: flash, + flash: !!Object.keys(flash).length?flash:false, isLogin: isLogin, user: user }, diff --git a/source/route/views/index.ts b/source/route/views/index.ts index 7045326..a9418b4 100644 --- a/source/route/views/index.ts +++ b/source/route/views/index.ts @@ -12,7 +12,7 @@ export default class { @method("GET") async login_GET(request: Req, h: Res): ReturnValue { if (request.auth.isAuthenticated) { - request.yar.flash('error', '您已经登陆'); + request.yar.flash('warning', '您已经登陆'); return h.redirect("/") } else { logger.debug("未登录"); @@ -36,14 +36,14 @@ export default class { return h.redirect("/login"); } request.cookieAuth.set({ id: account.id }); - + request.yar.flash('success', '用户已登录'); return h.redirect(referrer ? referrer : "/"); } @method("GET") @auth() async logout(request: Req, h: Res): ReturnValue { - request.yar.flash('error', '用户已退出'); + request.yar.flash('success', '用户已退出'); request.cookieAuth.clear(); return h.redirect('/'); } @@ -53,7 +53,7 @@ export default class { @method("GET") async registerView(request: Req, h: Res): ReturnValue { if (request.auth.isAuthenticated) { - request.yar.flash('error', '您已经登陆'); + request.yar.flash('warning', '您已经登陆'); return h.redirect("/") } else { logger.debug("未登录"); diff --git a/template/404.pug b/template/404.pug index 2ab1e4a..5b90813 100644 --- a/template/404.pug +++ b/template/404.pug @@ -4,32 +4,5 @@ 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') + div(style="text-align: center") + span.text404 404 diff --git a/template/helper/flush.pug b/template/helper/flush.pug index 2e1ace1..a07d9e5 100644 --- a/template/helper/flush.pug +++ b/template/helper/flush.pug @@ -1,15 +1,53 @@ //- 服务器反馈UI -if flash&&flash.error - .toast-container.top-0.end-0.p-3 +if flash + .message-container + - index = 0 + if flash.error each item in flash.error - .toast.show(role='alert', aria-live='assertive', aria-atomic='true') - .toast-header - img.rounded.me-2(src='/public/image/icons/error.svg', alt='错误' style="width:20px;height: 20px;") - strong.me-auto 提示 - //- small.text-muted just now - button.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close') - .toast-body. - #{item} + - index++ + .message.is-danger(id="message"+index) + .message-header + p 错误 + button.delete(aria-label='delete' data-target="message"+index) + .message-body + | #{item} + if flash.success + each item in flash.success + - index++ + .message.is-success(id="message"+index) + .message-header + p 成功 + button.delete(aria-label='delete' data-target="message"+index) + .message-body + | #{item} + if flash.info + each item in flash.info + - index++ + .message.is-info(id="message"+index) + .message-header + p 信息 + button.delete(aria-label='delete' data-target="message"+index) + .message-body + | #{item} + if flash.warning + each item in flash.warning + - index++ + .message.is-warning(id="message"+index) + .message-header + p 警告 + button.delete(aria-label='delete' data-target="message"+index) + .message-body + | #{item} + //- .toast-container.top-0.end-0.p-3 + //- each item in flash.error + //- .toast.show(role='alert', aria-live='assertive', aria-atomic='true') + //- .toast-header + //- img.rounded.me-2(src='/public/image/icons/error.svg', alt='错误' style="width:20px;height: 20px;") + //- strong.me-auto 提示 + //- //- small.text-muted just now + //- button.btn-close(type='button', data-bs-dismiss='toast', aria-label='Close') + //- .toast-body. + //- #{item} //- .toast-container.position-fixed.bottom-0.end-0.p-3 //- #liveToast.toast(role='alert', aria-live='assertive', aria-atomic='true') //- .toast-header diff --git a/template/helper/helper.pug b/template/helper/helper.pug index 223d6ec..09846b6 100644 --- a/template/helper/helper.pug +++ b/template/helper/helper.pug @@ -2,3 +2,7 @@ mixin css(href) link(rel="stylesheet" href="/public/"+href) mixin script(src) script(src="/public/"+src) + +mixin security + include ./form_security.pug + diff --git a/template/helper/rain.pug b/template/helper/rain.pug deleted file mode 100644 index bdba81f..0000000 --- a/template/helper/rain.pug +++ /dev/null @@ -1,42 +0,0 @@ -//- 下雨UI -canvas(id="snow") 不支持canvas -style - | canvas#snow { position: absolute; z-index: -1; top: 0; left: 0; opacity: 0.5; } -script(type="text/javascript", src="https://code.jquery.com/jquery-3.6.0.min.js") -script - | $(function () { - | var W = $(window).width(), - | H = $(window).height(), - | x2 = -15, len = 30, count = 100; - | var canvas = document.getElementById("snow"); - | canvas.width = W; - | canvas.height = H; - | var ctx = canvas.getContext('2d'); - | - | setInterval(clearCanvas,100); - | function clearCanvas() { - | ctx.clearRect(0, 0, W, H); - | draws(); - | } - | - | function draw(x, y) { - | //canvas写渐变：createLinearGradient（startX,startY,endX,endY） - | var grd = ctx.createLinearGradient(x, y, x + x2, y + len); - | grd.addColorStop(0, "rgba(0,0,0,0)"); - | grd.addColorStop(0.5, "rgba(105,105,105,1)"); - | grd.addColorStop(1, "rgba(255,255,255,1)"); - | ctx.strokeStyle = grd; - | - | ctx.beginPath(); - | ctx.moveTo(x, y); - | ctx.lineTo(x + x2, y + len); - | ctx.lineWidth = 2; - | ctx.stroke(); - | ctx.closePath(); - | } - | function draws() { - | for (var i = 1; i <= count; i++) { - | draw(Math.random() * W, Math.random() * H); - | } - | } - |}); \ No newline at end of file diff --git a/template/helper/ui.pug b/template/helper/ui.pug deleted file mode 100644 index 67ba7ce..0000000 --- a/template/helper/ui.pug +++ /dev/null @@ -1,26 +0,0 @@ -//- 站点导航栏 -mixin header() - nav.navbar.navbar-expand-lg.bg-light - .container - a.navbar-brand(href='/') 飘雨 - button.navbar-toggler(type='button', data-bs-toggle='collapse', data-bs-target='#navbarSupportedContent', aria-controls='navbarSupportedContent', aria-expanded='false', aria-label='Toggle navigation') - span.navbar-toggler-icon - .collapse.navbar-collapse#navbarSupportedContent - ul.navbar-nav.me-auto.mb-2.mb-lg-0 - li.nav-item - a.nav-link.active(aria-current='page', href='/util') 工具 - li.nav-item - a.nav-link.active(aria-current='page', href='/about') 关于 - .navbar-text - if !isLogin - a(href="/login") - .btn.btn-sm.btn-outline-secondary 登陆 - a(href="/login") - .btn.btn-sm.btn-outline-secondary 注册 - else - div #{user.username} - a(href="/logout") - .btn.btn-sm.btn-outline-secondary 退出 - //- form(action="/login/logout", method="post") - //- include @/helper/form_security.pug - //- button.btn.btn-sm.btn-outline-secondary(type="submit") 退出 diff --git a/template/layout/layout.pug b/template/layout/layout.pug index 458540a..ff7c42d 100644 --- a/template/layout/layout.pug +++ b/template/layout/layout.pug @@ -1,24 +1,21 @@ doctype html include @/helper/helper.pug -include @/helper/ui.pug -html(lang="zh-cn") - block var +block var +html(lang="zh-cn" class=hideHeader?"":"has-navbar-fixed-top") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") link(rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon") meta(name="viewport", content="width=device-width, initial-scale=1.0") title #{title || 'WEB'} - link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css", integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx", crossorigin="anonymous") - link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css") + link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css") +css("style/common/style.css") block head body include @/helper/flush.pug if !hideHeader - +header() + include @/ui/header.pug block content - script(src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js", integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa", crossorigin="anonymous") + +script("js/common/main.js") block script - //- include @/helper/rain.pug diff --git a/template/ui/header.pug b/template/ui/header.pug new file mode 100644 index 0000000..acaf162 --- /dev/null +++ b/template/ui/header.pug @@ -0,0 +1,38 @@ +nav.is-fixed-top.navbar(role='navigation', aria-label='main navigation') + .navbar-brand + a.navbar-item(href='/') + img(src='https://bulma.io/images/bulma-logo.png', width='112', height='28') + a.navbar-burger(role='button', aria-label='menu', aria-expanded='false', data-target='navbarBasicExample') + span(aria-hidden='true') + span(aria-hidden='true') + span(aria-hidden='true') + #navbarBasicExample.navbar-menu + .navbar-start + a.navbar-item + | 文档 + .navbar-item.has-dropdown.is-hoverable + a.navbar-link + | 更多 + .navbar-dropdown + a.navbar-item(href="/about") + | 关于本站 + a.navbar-item + | 关于作者 + hr.navbar-divider + a.navbar-item + | 报告问题 + .navbar-end + if !isLogin + .navbar-item + .buttons + a.button.is-primary(href="/register") + strong 注册 + a.button.is-light(href="/login") + | 登录 + else + .navbar-item + .buttons + button.button.is-white + | #{user.username} + a.button.is-danger.is-light(href="/logout") + | 退出 diff --git a/template/views/about copy.ejs b/template/views/about copy.ejs deleted file mode 100644 index e69de29..0000000 diff --git a/template/views/about.pug b/template/views/about.pug index 6d6540a..56cf5cb 100644 --- a/template/views/about.pug +++ b/template/views/about.pug @@ -1,58 +1,12 @@ extends /layout/layout block var - -title="关于我" // 网页标题 -//- -hideHeader=true + -title="关于" block head -//- +css("style/views/index.css") block content - .container(style="margin-top: 20px;") - include:markdown-it @/md/about.md - div!= md - //- .row.overflow-hidden - //- .col-12.p-2.col-md-6.col-lg-3 - //- .card(style='margin: 0 auto;') - //- .card-body - //- h5.card-title Card title - //- h6.card-subtitle.mb-2.text-muted Card subtitle - //- p.card-text Some quick example text to build on the card title and make up the bulk of the card's content. - //- a.card-link(href='#') Card link - //- a.card-link(href='#') Another link - //- .col-12.p-2.col-md-6.col-lg-3 - //- .card(style='margin: 0 auto;') - //- .card-body - //- h5.card-title Card title - //- h6.card-subtitle.mb-2.text-muted Card subtitle - //- p.card-text Some quick example text to build on the card title and make up the bulk of the card's content. - //- a.card-link(href='#') Card link - //- a.card-link(href='#') Another link - //- .col-12.p-2.col-md-6.col-lg-3 - //- .card(style='margin: 0 auto;') - //- .card-body - //- h5.card-title Card title - //- h6.card-subtitle.mb-2.text-muted Card subtitle - //- p.card-text Some quick example text to build on the card title and make up the bulk of the card's content. - //- a.card-link(href='#') Card link - //- a.card-link(href='#') Another link - //- .col-12.p-2.col-md-6.col-lg-3 - //- .card(style='margin: 0 auto;') - //- .card-body - //- h5.card-title Card title - //- h6.card-subtitle.mb-2.text-muted Card subtitle - //- p.card-text Some quick example text to build on the card title and make up the bulk of the card's content. - //- a.card-link(href='#') Card link - //- a.card-link(href='#') Another link - //- ul - //- li: a(href="https://cloud.tencent.com/developer/article/1793543" target="_blank") 15个最优秀的响应式CSS框架 - //- li https://getbootstrap.com/docs/5.2/components/collapse/ - //- li https://getbase.org/ - //- li https://tooltt.com/html2pug/ - //- li https://www.pugjs.cn/language/conditionals.html - //- li https://bulma.io/ - //- https://picturepan2.github.io/spectre/index.html - //- http://v3.getuikit.work/doc/v3/components/offcanvas.html - //- https://github.com/pure-css/pure - //- https://semantic-ui.com/ - //- https://github.com/transitive-bullshit/check-links/blob/master/lib/check-link.js \ No newline at end of file + section.section + .container.content!= md + +block script diff --git a/template/views/color.pug b/template/views/color.pug deleted file mode 100644 index 20372cd..0000000 --- a/template/views/color.pug +++ /dev/null @@ -1,52 +0,0 @@ -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:"#000000",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" style=`background: ${item.color}`) - 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") 提交 diff --git a/template/views/css.pug b/template/views/css.pug deleted file mode 100644 index 4cebed3..0000000 --- a/template/views/css.pug +++ /dev/null @@ -1,27 +0,0 @@ -extends /layout/layout - -block var - -title="终是无缘一别两欢" // 网页标题 - -block head - //- link(rel="stylesheet", href="/public/css/common/reset.css") - link(rel="stylesheet", href="/public/css/page/css.css") - -block content - .container - h1.title.author.word(title="xyx") 终是无缘一别两欢 - .comment 为啥要写这个文章 - div.author.word(title="xyx") 昨天看了我初中喜欢的人在空间发的一篇关于怀念初中的短篇小说吧，记录了他对一些记忆深刻的人的评价，而我也看到了我明明一直清楚，却不肯打心底接受的真相，他喜欢另外一个人，过往那么多的蛛丝马迹，那么多明明一件事就能看出他喜欢的人是她的真相，可我却是宁愿找借口自欺欺人，而今他给出坦白答案，他是放下了，才说出来，我是不是也该放下了，直到今日才明白我一个人自以为刻骨铭心的回忆，他也许早就忘怀，他的短篇小说故事中我没有丝言片语，也许若干年后他回想起来的只是我的名字，我只是个戏子，在他的故事中流着自己的泪，一个于他青春年华中不曾使他掀起过一丝波澜的模糊影子，而他不知道也永远不会知道，我的故事里他出现的很多，占了很多篇幅，我把他写进我的故事，因为他路过我心上，他踏着万千星河而来，又乘舟奔赴远方，我与春风皆过客，你携秋水揽星河。如今看来万般故事不过情伤，易水人去，明月如霜。 - .comment 我记得我无数次点开对话框，却只好失望的再关掉。我好多时候都想着万一他真的喜欢是她，我应该狠下心割舍这份感情，毕竟我不想太黯然神伤，我总是假装不在意远离他，不是因为讨厌陌生，而是太喜欢，又怕表现的明显，明知道没有什么可能不想陷入的更深。有那么一些瞬间，我假装不在意的擦肩而过，恰好离他很近，几分毫之差，却像是我们之间隔了银河的距离。走不进他的世界，却不想退出，现在想想初中三年除了开始在一个小组过，就没有再怎么交集过多少，毕业后反倒可以频繁的交集，我很珍惜，也行对他而言不过尔尔，充其量我只能算是他一个普通朋友。 - div.author.word(title="xyx") 他是无意穿堂风，却偏偏孤据引山洪。我是垂眉摆渡翁，却独独偏爱哝。 - .comment sada - div.author.word(title="xyx") 忽然想起那年夏日毕业之际，我送他的藏头巧妙情诗，还有在QQ的匿名坦白说，还有我第一次鼓起勇气隐晦的告白，毕业后我想着也许在我们笑着说再见时候深知再见遥遥无期，我想过叫他一起来学习预习新课，如今想想对我而言珍贵如斯，因为整整初中三年我都喜欢他，从始至终，从一开始和他一个组，就喜欢他。可是我也心里早已隐隐知道他喜欢的是另外一个人，我怕喜欢被他知道，也怕他不知道，又怕他装作不知道，总是假装不在意他，却总是留意他的消息，其实也是只要他没有说出来证实那个我知道他喜欢另外一个人的猜想，我就还抱着一丝期待，才没办法停止喜欢。这世上最安慰人的童话是，你挖空心思暗恋的人，他也挖空心思暗恋你，可惜这只是童话。 - div.author.word(title="xyx") 我记得我无数次点开对话框，却只好失望的再关掉。我好多时候都想着万一他真的喜欢是她，我应该狠下心割舍这份感情，毕竟我不想太黯然神伤，我总是假装不在意远离他，不是因为讨厌陌生，而是太喜欢，又怕表现的明显，明知道没有什么可能不想陷入的更深。有那么一些瞬间，我假装不在意的擦肩而过，恰好离他很近，几分毫之差，却像是我们之间隔了银河的距离。走不进他的世界，却不想退出，现在想想初中三年除了开始在一个小组过，就没有再怎么交集过多少，毕业后反倒可以频繁的交集，我很珍惜，也行对他而言不过尔尔，充其量我只能算是他一个普通朋友。 - div.author.word(title="xyx") 犹记得那次初三模考后不好，本来就难受从未那么差过，可是他在安慰另外一个人，我就更难过。多少次狠下心不想喜欢，却是告终。 - div.author.word(title="xyx") 比如毕业后，我开着玩笑跟他要生日礼物，终究是一纸空话，而我也知道也许他是不想给也就罢了，毕竟我什么都算不上吧，还有我那次想叫他去看电影，看最好的我们，我是有目的，听说电影的最后彩蛋是告白带来这里一起看电影的人是为了对他告白，可惜他没去，我和我一个很好的闺蜜去了电影院。 - div.author.word(title="xyx") 其实毕业后，我有过暗示，他懂了，懂了后是沉默，我早该明白的，沉默就是答案，躲闪就是答案，不过是留一个情面给我，互相都不要太过难堪，他也不知道，我很多说说日志写着是希望他能看到的，虽然有些不是我的原创，却带着我的心声，他不曾懂过。也不需要去懂了，从始至终感动的只有我自己。海底月捞不起，心上人不可及，向来心是看客心，奈何人是局中人。 - div.author.word(title="xyx") 这世间最难不过徒手摘月，喜欢而不得。 - div.author.word(title="xyx") 但我也想明白了，当我不能将一个人彻底忘却，就好好珍藏，封存在某个不易察觉的角落，午夜阑珊的时候悄悄想去。生不逢时，喜欢不逢人，所得之处皆是命数。白茶清欢无别事，我在等风也等你，苦酒折留今相离，无风无月也无你。 - div.author.word(title="xyx") 当年我说的凤囚凰那首诗也许他早已忘记，有美人兮，见之不忘，一日不见兮，思之如狂。凤飞遨翔兮，四海求凰，无奈佳人兮，不在东墙。将琴代语兮，聊写衷肠，愿言配德兮，携手相将。何时见许兮，慰我旁徨，不得于飞兮，使我沦亡，使我沦亡。本想暗示他我喜欢过他，终是没有说出口下阙。 - div.author.word(title="xyx") 蝴蝶很美，终究飞不过沧海，某些性质上我和他一样，都是内心远没有看起来的风平浪静，实则是波涛起伏，曾想过愿我如星君如月，夜夜流光相皎洁。 - div.author.word(title="xyx") 所谓执念，不过求而不得，不过难以割舍，不想错过，可终究情深是我，缘浅是我们，落花有意，流水无情，竟是付诸东流，若是如此，就这样吧，从此山水不相逢，愿若干年后的我们是最好的我们，蝴蝶很美，终究飞不过沧海，生生的两端，我们彼此站成岸。何来人间一惊鸿，不过人间一俗人。从此相忘江湖，若许不相识，也愿我遇到比你更好的人，说了那么多轻松多了，写下这些也是为了忘记放下他，虽然以前想过有时候放不下是最好的放下，无论他是否看得到，就这样吧，至此纪念我初中的喜欢，你是年少的欢喜，但也是过去时。我也要努力学习，考的比他更好。 diff --git a/template/views/demo.ejs b/template/views/demo.ejs deleted file mode 100644 index f2fb410..0000000 --- a/template/views/demo.ejs +++ /dev/null @@ -1,58 +0,0 @@ -
- - -
-
- - diff --git a/template/views/include/footer.ejs b/template/views/include/footer.ejs deleted file mode 100644 index 308b1d0..0000000 --- a/template/views/include/footer.ejs +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/template/views/include/header.ejs b/template/views/include/header.ejs deleted file mode 100644 index 57c76fd..0000000 --- a/template/views/include/header.ejs +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - <%- title || "WEB" %> - - \ No newline at end of file diff --git a/template/views/index.ejs b/template/views/index.ejs deleted file mode 100644 index cb8d62a..0000000 --- a/template/views/index.ejs +++ /dev/null @@ -1,3 +0,0 @@ -index - -login diff --git a/template/views/index.pug b/template/views/index.pug index 00c1bb2..e6a0b50 100644 --- a/template/views/index.pug +++ b/template/views/index.pug @@ -5,8 +5,13 @@ block var //- -hideHeader=true block head - +css("style/views/index.css") block content + section.section .container - div(class="animated bounce") asda + h1.title + | Hello World + p.subtitle + | My first website with + strong Bulma + | ! diff --git a/template/views/login copy.pug b/template/views/login copy.pug deleted file mode 100644 index b23614b..0000000 --- a/template/views/login copy.pug +++ /dev/null @@ -1,56 +0,0 @@ -extends /layout/layout - -block var - -title="登陆" // 网页标题 - -hideHeader=true - -block head - +css("css/page/login.css") - -block content - .container#container - .form-container.sign-up-container - form(action='/login/register' method='post') - h1 创建账户 - .social-container - a.social(href='#') - i.fab.fa-facebook-f - a.social(href='#') - i.fab.fa-google-plus-g - a.social(href='#') - i.fab.fa-linkedin-in - span 使用您的邮箱注册 - input(type='text', name="username", placeholder='请输入用户名') - input(type='email', name="email",placeholder='请输入邮箱') - input(type='password', name="password",placeholder='请输入密码') - include @/helper/form_security.pug - button 注册 - .form-container.sign-in-container - form(action='/login' method='post') - h1 登录 - .social-container - a.social(href='#') - i.fab.fa-facebook-f - a.social(href='#') - i.fab.fa-google-plus-g - a.social(href='#') - i.fab.fa-linkedin-in - span 填写您的账户 - input(type='text',name="username" , placeholder='请输入邮箱') - input(type='password',name="password" , placeholder='请输入密码') - include @/helper/form_security.pug - a(href='#') 忘记密码? - button 登录 - .overlay-container - .overlay - .overlay-panel.overlay-left - h1 欢迎回来! - p 填写您的账户，与我们保持亲密联系吧！ - button.ghost#signIn 登录 - .overlay-panel.overlay-right - h1 你好朋友! - p 创建您的个人账户，随我们遨游于此吧！ - button.ghost#signUp 注册 - -block script - +script("js/page/login.js") diff --git a/template/views/login.pug b/template/views/login.pug index e7f8443..975d61f 100644 --- a/template/views/login.pug +++ b/template/views/login.pug @@ -5,17 +5,18 @@ block var -hideHeader=true block head - +css("css/page/login.css") + +css("style/views/login.css") block content .login - h1 登录 + h1.title.is-1 登录 form(action='/login' method='post') input(id="referrer" type="text" name="referrer" class="form-control" style="display:none;") input(type='text', name='username', placeholder='用户名', required) input(type='password', name='password', placeholder='密码', required) - include @/helper/form_security.pug + +security button.btn.btn-primary.btn-block.btn-large(type='submit') 现在登录！ + a(href="/register" style="margin-top: 8px;color: white;font-size: 14px;display: inline-block;float: right") 前往注册 block script +script("js/page/login.js") diff --git a/template/views/upload.ejs b/template/views/upload.ejs deleted file mode 100644 index 78eb511..0000000 --- a/template/views/upload.ejs +++ /dev/null @@ -1,3 +0,0 @@ -
- uploadsuccess -
diff --git a/template/views/user.pug b/template/views/user.pug deleted file mode 100644 index 1d57ddf..0000000 --- a/template/views/user.pug +++ /dev/null @@ -1,41 +0,0 @@ -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);