diff --git a/controller/express.js b/controller/express.js index e8c9dca..8360477 100644 --- a/controller/express.js +++ b/controller/express.js @@ -17,5 +17,6 @@ export class Web{ }) app.use(express.static('static')); app.listen(Config.WEB_SERVER.PORT); + this.app = app; } -} \ No newline at end of file +} \ No newline at end of file diff --git a/controller/websocket.js b/controller/websocket.js index 2be74c1..444b6d2 100644 --- a/controller/websocket.js +++ b/controller/websocket.js @@ -22,5 +22,11 @@ export class WebSock { ws.send('something'); }); this.wss = wss; + + /*Storage.web.app.on('upgrade', (request, socket, head) => { + wss.handleUpgrade(request, socket, head, socket => { + wss.emit('connection', socket, request); + }); + });*/ } } \ No newline at end of file diff --git a/index.js b/index.js index 16cab39..96408e4 100644 --- a/index.js +++ b/index.js @@ -13,6 +13,7 @@ let x = new Hub(); Storage.hub = x; let web = new Web(); +Storage.web = web; let sock = new WebSock(); let weather = new Weather(); diff --git a/static/index.html b/static/index.html index cb9dcdd..1d3be3a 100644 --- a/static/index.html +++ b/static/index.html @@ -20,7 +20,7 @@ background: #000000ad; color: #FFF; font-weight: bold; - width: 200px; + width: 170px; height: 50px; } @@ -29,7 +29,7 @@ width: 0; height: 0; border-style: solid; - border-width: 0px 0px 25px 25px; + border-width: 0px 0px 38px 38px; border-color: transparent transparent transparent #00aee7; left: 0; top: 0; @@ -37,6 +37,7 @@ } #box-top-left:after { + /* content: ''; width: 0; height: 0; @@ -46,6 +47,17 @@ right: 0; top: 0; position: absolute; + */ + content: ''; + width: 0; + height: 0; + border-style: solid; + border-width: 50px 50px 50px 0px; + border-color: transparent transparent #000000ad transparent; + right: -75px; + top: -25px; + position: absolute; + transform: rotateZ(90deg); } div#temp-inside { @@ -62,7 +74,7 @@ } div#temp-inside:after { - content: "°C"; + content: ""; display: inline-block; margin-right: 5px; } @@ -70,7 +82,7 @@ div#temp-outside { position: absolute; top: 25px; - left: 10px; + left: 25px; /* transform: rotateZ(-45deg);*/ } @@ -81,7 +93,7 @@ } div#temp-outside:after { - content: "°C"; + content: ""; display: inline-block; margin-right: 5px; } @@ -96,11 +108,24 @@ border-radius: 50px; margin-top: 5px; } + .notShown{ + opacity: 0; + } + .slideIn{ + opacity:0; + animation: slidein 1.5s cubic-bezier(0, 0, 0.02, 0.99) forwards; + } + + @keyframes slidein{ + 0%{ opacity:0; transform:translateY(-50px); } + 25%{ opacity:0.25; transform:translateY(-50px); } + 100%{ opacity:1; transform:translateY(0px); } + } -
+
@@ -115,30 +140,64 @@