From fdce5592cda70c26c6d8bfac52734a176f4e8436 Mon Sep 17 00:00:00 2001 From: Unknown Date: Sun, 8 Apr 2018 17:40:47 +0200 Subject: [PATCH] Structure de base Trois pages statiques dont login, avec style --- app.js | 59 +++++++++++++++++ bin/www | 9 +++ package.json | 17 +++++ public/stylesheets/style.css | 121 +++++++++++++++++++++++++++++++++++ routes/index.js | 17 +++++ routes/users.js | 9 +++ views/about.jade | 5 ++ views/error.jade | 6 ++ views/index.jade | 6 ++ views/layout.jade | 29 +++++++++ views/login.jade | 14 ++++ 11 files changed, 292 insertions(+) create mode 100644 app.js create mode 100644 bin/www create mode 100644 package.json create mode 100644 public/stylesheets/style.css create mode 100644 routes/index.js create mode 100644 routes/users.js create mode 100644 views/about.jade create mode 100644 views/error.jade create mode 100644 views/index.jade create mode 100644 views/layout.jade create mode 100644 views/login.jade diff --git a/app.js b/app.js new file mode 100644 index 0000000..02dd921 --- /dev/null +++ b/app.js @@ -0,0 +1,59 @@ +var express = require('express'); +var path = require('path'); +var favicon = require('static-favicon'); +var logger = require('morgan'); +var cookieParser = require('cookie-parser'); +var bodyParser = require('body-parser'); + +var routes = require('./routes/index'); +var users = require('./routes/users'); + +var app = express(); + +// view engine setup +app.set('views', path.join(__dirname, 'views')); +app.set('view engine', 'jade'); + +app.use(favicon()); +app.use(logger('dev')); +app.use(bodyParser.json()); +app.use(bodyParser.urlencoded()); +app.use(cookieParser()); +app.use(express.static(path.join(__dirname, 'public'))); + +app.use('/', routes); +app.use('/users', users); + +/// catch 404 and forwarding to error handler +app.use(function(req, res, next) { + var err = new Error('Not Found'); + err.status = 404; + next(err); +}); + +/// error handlers + +// development error handler +// will print stacktrace +if (app.get('env') === 'development') { + app.use(function(err, req, res, next) { + res.status(err.status || 500); + res.render('error', { + message: err.message, + error: err + }); + }); +} + +// production error handler +// no stacktraces leaked to user +app.use(function(err, req, res, next) { + res.status(err.status || 500); + res.render('error', { + message: err.message, + error: {} + }); +}); + + +module.exports = app; diff --git a/bin/www b/bin/www new file mode 100644 index 0000000..e312572 --- /dev/null +++ b/bin/www @@ -0,0 +1,9 @@ +#!/usr/bin/nodejs +var debug = require('debug')('my-application'); +var app = require('../app'); + +app.set('port', process.env.PORT || 3000); + +var server = app.listen(app.get('port'), function() { + debug('Express server listening on port ' + server.address().port); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..db27002 --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "application-name", + "version": "0.0.1", + "private": true, + "scripts": { + "start": "nodejs ./bin/www" + }, + "dependencies": { + "express": "~4.0.0", + "static-favicon": "~1.0.0", + "morgan": "~1.0.0", + "cookie-parser": "~1.0.1", + "body-parser": "~1.0.0", + "debug": "~0.7.4", + "jade": "~1.3.0" + } +} \ No newline at end of file diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css new file mode 100644 index 0000000..b1335d2 --- /dev/null +++ b/public/stylesheets/style.css @@ -0,0 +1,121 @@ + +/**************************************** +*********** Élements généraux *********** +****************************************/ + +body { + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + overflow-x: hidden; +} + +a { + color: #00B7FF; +} + +.wrap { + width: 90%; + max-width: 900px; + margin: auto; +} + +header .wrap, +footer .wrap { + max-width: 1200px; +} + + +/**************************************** +***************** Header **************** +****************************************/ + +header { + position: relative; +} + +header::before { + content: ""; + display: block; + position: absolute; + top: -7em; + left: -1em; + width: 2560px; + height: 20em; + min-width: 120vw; + background-color: #006D80; + border-bottom: #78A419 solid 1em; + transform: rotate(5deg); + z-index: -1; +} + +/********** Logo ************/ + +.site-name { + position: absolute; + top: 15px; + font-size: 3em; + font-family: "Delius Unicase", Verdana, sans-serif; + font-weight: bold; + letter-spacing: 0px; + text-transform: uppercase; + color: white; +} + +/********** Navigation ************/ + +header .nav { + width : 100%; + padding-top: 1em; +} + +header .nav li { + z-index: 1; +} + +header .nav a { + font-size: 1.1em; + color: white; + transition: all 0.2s; +} + +header .nav a:hover { + color: #78A419; +} + + +/**************************************** +***************** Footer **************** +****************************************/ +footer { + position: relative; + overflow: hidden; + width: 100vw; + padding-top: 9em; + color: white; +} + +footer::before { + content: ""; + display: block; + position: absolute; + bottom: -7em; + left: -1em; + width: 2560px; + height: 10em; + min-width: 120vw; + background-color: #006D80; + border-top: #78A419 solid 1em; + transform: rotate(5deg); + z-index: -1; +} + +footer .wrap { +} + +/**************************************** +***************** Content *************** +****************************************/ + +.content { + min-height: calc(100vh - 24.7em); + margin-top: 10em; +} diff --git a/routes/index.js b/routes/index.js new file mode 100644 index 0000000..470d747 --- /dev/null +++ b/routes/index.js @@ -0,0 +1,17 @@ +var express = require('express'); +var router = express.Router(); + +/* GET home page. */ +router.get('/', function(req, res) { + res.render('index', { title: 'Accueil' }); +}) + +.get("/about", function(req, res) { + res.render('about', {title: 'À propos'}); +}) + +.get('/login', function(req, res) { + res.render('login', {title: 'Connexion'}); +}); + +module.exports = router; diff --git a/routes/users.js b/routes/users.js new file mode 100644 index 0000000..c00d7de --- /dev/null +++ b/routes/users.js @@ -0,0 +1,9 @@ +var express = require('express'); +var router = express.Router(); + +/* GET users listing. */ +router.get('/', function(req, res) { + res.send('respond with a resource'); +}); + +module.exports = router; diff --git a/views/about.jade b/views/about.jade new file mode 100644 index 0000000..40aac60 --- /dev/null +++ b/views/about.jade @@ -0,0 +1,5 @@ +extends layout + +block content + h1= title + p Monnéthic c'est bien, c'est chic. diff --git a/views/error.jade b/views/error.jade new file mode 100644 index 0000000..51ec12c --- /dev/null +++ b/views/error.jade @@ -0,0 +1,6 @@ +extends layout + +block content + h1= message + h2= error.status + pre #{error.stack} diff --git a/views/index.jade b/views/index.jade new file mode 100644 index 0000000..3bdbf97 --- /dev/null +++ b/views/index.jade @@ -0,0 +1,6 @@ +extends layout + +block content + h1= title + p Vous avez ma page #{title} ? + p Elle est belle, hein ? diff --git a/views/layout.jade b/views/layout.jade new file mode 100644 index 0000000..dfc20e2 --- /dev/null +++ b/views/layout.jade @@ -0,0 +1,29 @@ +doctype html +html + head + title= title + meta(charset="utf-8") + meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no") + link(href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous") + link(href="https://fonts.googleapis.com/css?family=Delius+Unicase:700" rel="stylesheet") + script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous") + link(rel='stylesheet', href='/stylesheets/style.css') + body + header + .wrap + p.site-name Monnéthic + ul.nav.justify-content-end + li.nav-item + a.nav-link(href="/") Accueil + li.nav-item + a.nav-link(href="/about") À propos + li.nav-item + a.nav-link(href="/login") Connexion + + .content.wrap + block content + + footer + .wrap + p © Monnéthic 2018 + diff --git a/views/login.jade b/views/login.jade new file mode 100644 index 0000000..62dc259 --- /dev/null +++ b/views/login.jade @@ -0,0 +1,14 @@ +extends layout + +block content + h1= title + p Par ici les infos ! + + form + .form-group + label(for="exampleInputId") Identifiant + input(type="text" class="form-control" id="exampleInputId" aria-describedby="idHelp" placeholder="Jean-Eudes69") + .form-group + label(for="exampleInputPassword") Mot de passe + input(type="password" class="form-control" id="exampleInputPassword" placeholder="Mot de passe") + button(type="submit" class="btn btn-primary") Valider