From a0fbb2bd6db8702ad9729823b91176861b2098c9 Mon Sep 17 00:00:00 2001 From: TrueKuehli Date: Wed, 26 Sep 2018 20:30:15 +0200 Subject: Grundimplementierung des Servers und der Webseite --- WebInterface/NodeJSServer/src/index.js | 6 + .../NodeJSServer/src/modules/ui/backdrop.js | 41 ++++ WebInterface/NodeJSServer/src/server.js | 24 +++ WebInterface/NodeJSServer/src/style/index.scss | 218 +++++++++++++++++++++ .../NodeJSServer/src/style/partials/_colors.scss | 13 ++ 5 files changed, 302 insertions(+) create mode 100644 WebInterface/NodeJSServer/src/index.js create mode 100644 WebInterface/NodeJSServer/src/modules/ui/backdrop.js create mode 100644 WebInterface/NodeJSServer/src/server.js create mode 100644 WebInterface/NodeJSServer/src/style/index.scss create mode 100644 WebInterface/NodeJSServer/src/style/partials/_colors.scss (limited to 'WebInterface/NodeJSServer/src') diff --git a/WebInterface/NodeJSServer/src/index.js b/WebInterface/NodeJSServer/src/index.js new file mode 100644 index 0000000..1bb45aa --- /dev/null +++ b/WebInterface/NodeJSServer/src/index.js @@ -0,0 +1,6 @@ +import Backdrop from './modules/ui/backdrop.js'; + +let backdrop = new Backdrop('menu', 'front-layer', 'show-menu'); +backdrop.register(); + +console.log('HI') diff --git a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js new file mode 100644 index 0000000..243bbb3 --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js @@ -0,0 +1,41 @@ +// Showing / Hiding the backdrop menu + +export default class Backdrop { + constructor(backdropMenu, frontLayer, menuButton) { + this.backdrop = document.getElementById(backdropMenu); + this.frontLayer = document.getElementById(frontLayer); + this.menuButton = document.getElementById(menuButton); + } + + + register() { + this.registerButtonEvent(); + this.registerFrontLayerEvent(); + } + + registerButtonEvent() { + this.menuButton.addEventListener('click', () => { + // Hide / Unhide Backdrop Menu + if (this.backdrop.classList.contains('hidden')) { + this.backdrop.classList.remove('hidden'); + } else { + this.backdrop.classList.add('hidden'); + } + + // Set open state for menu button + if (this.menuButton.classList.contains('open')) { + this.menuButton.classList.remove('open'); + } else { + this.menuButton.classList.add('open'); + } + }); + } + + registerFrontLayerEvent() { + // Hide menu when interacting with front layer + this.frontLayer.addEventListener('click', () => { + this.backdrop.classList.add('hidden'); + this.menuButton.classList.remove('open'); + }); + } +} diff --git a/WebInterface/NodeJSServer/src/server.js b/WebInterface/NodeJSServer/src/server.js new file mode 100644 index 0000000..1321973 --- /dev/null +++ b/WebInterface/NodeJSServer/src/server.js @@ -0,0 +1,24 @@ +var express = require('express'); +var app = express(); +var http = require('http').Server(app); +var io = require('socket.io')(http); + +app.use('/ressources', express.static(__dirname + '/ressources/')); + +app.get('/', function(req, res){ + res.sendFile(__dirname + '/index.html'); +}); +app.get('/index.css', function(req, res){ + res.sendFile(__dirname + '/index.css'); +}); +app.get('/index.js', function(req, res){ + res.sendFile(__dirname + '/index.js'); +}); + +io.on('connection', function(socket){ + console.log('Connection: ' + socket); +}); + +http.listen(3000, function(){ + console.log('Listening on *:3000'); +}); diff --git a/WebInterface/NodeJSServer/src/style/index.scss b/WebInterface/NodeJSServer/src/style/index.scss new file mode 100644 index 0000000..da6afee --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/index.scss @@ -0,0 +1,218 @@ +@import 'partials/_colors.scss'; + +html,body { + height: 100vh; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + overflow: hidden; + background-color: $primary; + color: $primary-text; + user-select: none; +} + +body { + display: flex; + flex-direction: column; + background-color: $secondary; + position: relative; +} + +.backdrop { + background-color: $secondary; + color: $secondary-text; + font-size: 1rem; + + .header-bar { + display: flex; + align-items: center; + + .menu-icon { + background-image: url("/ressources/menu.png"); + background-position: center; + background-repeat: no-repeat; + width: 36px; + height: 36px; + padding: 4px; + margin: 1rem; + display: inline-block; + border: none; + border-radius: 32px; + transition: background-color 100ms ease; + + &:hover { + background-color: $secondary-dark; + } + + &.open { + background-image: url("/ressources/menu_close.png"); + } + } + + .header { + margin: 0; + padding: 16px; + text-align: center; + z-index: 2; + flex-grow: 1; + + @media (min-width: 450px) { + margin-right: 56px; + } + } + } + + .menu-actions { + box-sizing: border-box; + transition: max-height 200ms ease, color 200ms ease, background-color 100ms ease;; + position: relative; + max-height: 16rem; + margin: 0 1rem; + + .menu-option { + color: $primary-text; + text-decoration: none; + box-sizing: border-box; + display: inline-block; + font-size: 1.5rem; + width: 100%; + text-align: center; + padding: 1rem; + border: none; + border-radius: 8px; + cursor: pointer; + + &:hover { + background-color: $secondary-half-dark; + } + + &.active { + background-color: $secondary-dark; + } + } + + &.hidden { + max-height: 0; + color: rgba(0,0,0,0); + + .menu-option { + color: rgba(0,0,0,0); + background-color: rgba(0,0,0,0) !important; + } + } + } +} + +.container { + @keyframes start { + from {top: 100vh;} + to {top: 0;} + } + + position: relative; + border: none; + border-radius: 16px 16px 0 0; + min-height: 0; + + box-sizing: border-box; + background-color: white; + margin-top: 8px; + animation-name: start; + animation-duration: 1s; + animation-timing-function: ease; + color: black; + + display: flex; + flex-direction: column; + + .banner { + z-index: 1; + background-color: white; + border: none; + border-radius: 16px 16px 0 0; + display: flex; + margin: 0; + margin-bottom: 1rem; + padding-top: 1rem; + max-height: 10rem; + flex-direction: row; + flex-wrap: wrap; + transform-origin: top; + transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-start; + + &.hidden { + transform: scaleY(0); + visibility: hidden; + max-height: 0; + transition: max-height 200ms ease, transform 200ms ease, visibility 200ms step-end; + } + + .banner-text { + align-self: left; + margin: 1rem; + flex-grow: 1; + } + + .btn-container{ + flex-grow: 1; + text-align: right; + .banner-button { + display: inline-block; + background: none; + color: $secondary-dark; + border: none; + box-shadow: none; + font-size: 1rem; + align-self: right; + text-transform: uppercase; + padding: 16px; + margin: 0; + margin-right: 1rem; + font-family: 'Roboto Condensed', sans-serif; + cursor: pointer; + font-weight: bold; + letter-spacing: 0.125rem; + } + } + + hr { + width: 100%; + } + } + + .server-listing { + box-sizing: border-box; + background-color: $primary; + color: $primary-text; + min-height: 0; + display: flex; + flex-direction: column; + border-style: none; + border-radius: 8px; + margin: 1rem; + margin-bottom: 2rem; + padding: 0.5rem; + padding-top: 0.25rem; + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); + h1 { + text-align: center; + } + hr { + width: 100%; + } + + .server-entries { + overflow-y: auto; + min-height: 0; + } + } + + .copyright-container { + box-sizing: border-box; + position: absolute; + width: 100%; + margin: 4px; + bottom: 0; + text-align: center; + } +} diff --git a/WebInterface/NodeJSServer/src/style/partials/_colors.scss b/WebInterface/NodeJSServer/src/style/partials/_colors.scss new file mode 100644 index 0000000..a19a2ab --- /dev/null +++ b/WebInterface/NodeJSServer/src/style/partials/_colors.scss @@ -0,0 +1,13 @@ +$primary: #212121; +$primary-disabled: #21212161; +$primary-light: #484848; +$primary-dark: #000000; +$primary-text: #ffffff; +$primary-text-disabled: #ffffff61; +$secondary: #546e7a; +$secondary-disabled: #546e7a61; +$secondary-half-dark: #3e5864; +$secondary-dark: #29434e; +$secondary-light: #819ca9; +$secondary-text: #ffffff; +$secondary-text-disabled: #ffffff61; -- cgit v1.2.3-70-g09d2