Skip to content

W
wiki-js
You need to sign in or sign up before continuing.
Commit fa7391ea authored by NGPixel's avatar NGPixel
Browse files
Options

Login screen

parent 6e65c636
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 247 additions and 11 deletions
assets/css/app.css
View file @ fa7391ea
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/css/login.css 0 → 100644
View file @ fa7391ea
#bg,#bg>div{width:100%;height:100%;top:0;left:0}#root,#root button,#root h1,a{color:#FFF}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}[v-cloak]{display:none}body{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px}a{transition:color .4s ease;text-decoration:none}a:hover{color:#FB8C00;text-decoration:underline}#bg{position:fixed;z-index:1;background-color:#000}#bg>div{background-size:cover;background-position:center center;position:absolute;opacity:0;visibility:hidden;transition:opacity 3s ease,visibility 3s;animation:bg 30s linear infinite}#copyright,#root{display:flex;left:10vw;z-index:2}#bg>div:nth-child(1){animation-delay:10s}#bg>div:nth-child(2){animation-delay:20s}#root h1,#root h2{animation:headerIntro 3s ease;padding:0}#root{position:fixed;top:15vh;flex-direction:column}#root h1{font-size:4rem;margin:0}#root h2{font-size:1.5rem;font-weight:400;color:rgba(255,255,255,.7);margin:0 0 25px}#root input[type=password],#root input[type=text]{width:350px;max-width:80vw;border:1px solid rgba(255,255,255,.3);border-radius:3px;background-color:rgba(0,0,0,.2);padding:0 15px;height:40px;margin:0 0 10px;color:#FFF;font-weight:700;font-size:14px;transition:all .4s ease}#root input[type=password]:focus,#root input[type=text]:focus{outline:0;border-color:rgba(255,255,255,.8)}#root button{background-color:#FB8C00;border:1px solid #ffa32f;border-radius:3px;height:40px;width:125px;padding:0;font-weight:700;margin:15px 0 0;transition:all .4s ease;cursor:pointer}#root button:focus{outline:0;border-color:#FFF}#root button:hover{background-color:#c87000}#copyright{align-items:center;justify-content:flex-start;position:absolute;bottom:10vh;color:rgba(255,255,255,.5);font-weight:700}#copyright .icon{font-size:1.2rem;margin:0 8px}#copyright a{opacity:.75}@-webkit-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-moz-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-o-keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@keyframes bg{0%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1);visibility:visible;opacity:0}33%,5%{opacity:.5}38%{-webkit-transform:scale(1.2,1.2);-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0}39%{visibility:hidden}100%{visibility:hidden;opacity:0}}@-webkit-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@-moz-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@-o-keyframes headerIntro{0%{opacity:0}100%{opacity:1}}@keyframes headerIntro{0%{opacity:0}100%{opacity:1}}
\ No newline at end of file
assets/images/bg_1.jpg 0 → 100644
View file @ fa7391ea
This diff was suppressed by a .gitattributes entry.
assets/images/bg_2.jpg 0 → 100644
View file @ fa7391ea
This diff was suppressed by a .gitattributes entry.
assets/images/bg_3.jpg 0 → 100644
View file @ fa7391ea
This diff was suppressed by a .gitattributes entry.
assets/js/login.js 0 → 100644
View file @ fa7391ea
"use strict";jQuery(document).ready(function(u){u("#login-user").focus()});
\ No newline at end of file
client/js/login.js 0 → 100644
View file @ fa7391ea
"use strict";
jQuery( document ).ready(function( $ ) {
$('#login-user').focus();
});
\ No newline at end of file
client/scss/layout/_base.scss
View file @ fa7391ea
......@@ -5,10 +5,6 @@ html {
box-sizing: inherit;
}
#root {
padding-top: 52px;
}
[v-cloak] {
display: none;
}
\ No newline at end of file
client/scss/layout/_content.scss
View file @ fa7391ea
#root {
padding-top: 52px;
}
#page-type-view > section {
transition: background-color .5s ease;
......
client/scss/login.scss 0 → 100644
View file @ fa7391ea
@import './layout/_base';
@import './layout/_mixins';
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
}
a {
color: #FFF;
transition: color 0.4s ease;
text-decoration: none;
&:hover {
color: #FB8C00;
text-decoration: underline;
}
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
> div {
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
transition: opacity 3s ease, visibility 3s;
animation: bg 30s linear infinite;
&:nth-child(1) {
animation-delay: 10s;
}
&:nth-child(2) {
animation-delay: 20s;
}
}
}
#root {
position: fixed;
top: 15vh;
left: 10vw;
z-index: 2;
color: #FFF;
display: flex;
flex-direction: column;
h1 {
font-size: 4rem;
color: #FFF;
padding: 0;
margin: 0;
animation: headerIntro 3s ease;
}
h2 {
font-size: 1.5rem;
font-weight: normal;
color: rgba(255,255,255,0.7);
padding: 0;
margin: 0 0 25px 0;
animation: headerIntro 3s ease;
}
input[type=text], input[type=password] {
width: 350px;
max-width: 80vw;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 3px;
background-color: rgba(0,0,0,0.2);
padding: 0 15px;
height: 40px;
margin: 0 0 10px 0;
color: #FFF;
font-weight: bold;
font-size: 14px;
transition: all 0.4s ease;
&:focus {
outline: none;
border-color: rgba(255,255,255,0.8);
}
}
button {
background-color: #FB8C00;
color: #FFF;
border: 1px solid lighten(#FB8C00, 10%);
border-radius: 3px;
height: 40px;
width: 125px;
padding: 0;
font-weight: bold;
margin: 15px 0 0 0;
transition: all 0.4s ease;
cursor: pointer;
&:focus {
outline: none;
border-color: #FFF;
}
&:hover {
background-color: darken(#FB8C00, 10%);
}
}
}
#copyright {
display: flex;
align-items: center;
justify-content: flex-start;
position: absolute;
left: 10vw;
bottom: 10vh;
z-index: 2;
color: rgba(255,255,255,0.5);
font-weight: bold;
.icon {
font-size: 1.2rem;
margin: 0 8px;
}
a {
opacity: 0.75;
}
}
@include keyframes(bg) {
0% {
@include prefix(transform, scale(1,1));
visibility: visible;
opacity: 0;
},
5% {
opacity: 0.5;
},
33% {
opacity: 0.5;
},
38% {
@include prefix(transform, scale(1.2, 1.2));
opacity: 0;
},
39% {
visibility: hidden;
}
100% {
visibility: hidden;
opacity: 0;
}
}
@include keyframes(headerIntro) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
\ No newline at end of file
gulpfile.js
View file @ fa7391ea
......@@ -39,7 +39,7 @@ var paths = {
'!./node_modules/ace-builds/src-min-noconflict/mode-markdown.js'
],
scriptapps: [
'./client/js/app.js'
'./client/js/*.js'
],
scriptapps_watch: [
'./client/js/**/*.js'
......@@ -50,7 +50,7 @@ var paths = {
'./node_modules/simplemde/dist/simplemde.min.css'
],
cssapps: [
'./client/scss/app.scss'
'./client/scss/*.scss'
],
cssapps_watch: [
'./client/scss/**/*.scss'
......@@ -115,7 +115,6 @@ gulp.task("scripts-app", function () {
return gulp.src(paths.scriptapps)
.pipe(plumber())
.pipe(concat('app.js'))
.pipe(include({ extensions: "js" }))
.pipe(babel())
.pipe(uglify())
......@@ -148,7 +147,6 @@ gulp.task("css-app", function () {
return gulp.src(paths.cssapps)
.pipe(plumber())
.pipe(sass())
.pipe(concat('app.css'))
.pipe(cleanCSS({ keepSpecialComments: 0 }))
.pipe(plumber.stop())
.pipe(gulp.dest("./assets/css"));
......
views/auth/login.pug
View file @ fa7391ea
DUDE
\ No newline at end of file
doctype html
html
head
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
meta(name='theme-color', content='#009688')
meta(name='msapplication-TileColor', content='#009688')
meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
title= appconfig.title
// Favicon
each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
each favsize in [32, 96, 16]
link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
link(rel='manifest', href='/manifest.json')
// CSS
link(type='text/css', rel='stylesheet', href='/css/libs.css')
link(type='text/css', rel='stylesheet', href='/css/login.css')
// JS
script(type='text/javascript', src='/js/libs.js')
script(type='text/javascript', src='/js/login.js')
body
#bg
each bg in [1, 2, 3]
div(style="background-image:url(/images/bg_" + bg + ".jpg);")
#root
h1= appconfig.title
h2 Login required
input#login-user(type='text', placeholder='Email address')
input#login-pass(type='password', placeholder='Password')
button Log In
#copyright
= t('footer.poweredby') + ' '
a.icon(href='https://github.com/Requarks/wiki')
i.fa.fa-github
a(href='https://github.com/Requarks/wiki') Requarks Wiki
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment