Login screen

assets/css/login.css

@@ -0,0 +1 @@
+#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}}

assets/js/login.js

@@ -0,0 +1 @@
+"use strict";jQuery(document).ready(function(u){u("#login-user").focus()});

client/js/login.js

@@ -0,0 +1,7 @@
+"use strict";
+
+jQuery( document ).ready(function( $ ) {
+
+	$('#login-user').focus();
+
+});

client/scss/layout/_base.scss

@@ -5,10 +5,6 @@ html {
   box-sizing: inherit;
 }
 
-#root {
-	padding-top: 52px;
-}
-
 [v-cloak] {
   display: none;
 }

client/scss/layout/_content.scss

@@ -1,4 +1,8 @@
 
+#root {
+	padding-top: 52px;
+}
+
 #page-type-view > section {
 	transition: background-color .5s ease;
 

client/scss/login.scss

@@ -0,0 +1,184 @@
+@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;
+	}
+}

gulpfile.js

@@ -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

@@ -1 +1,43 @@
-DUDE
+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
+