aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-06-20 12:52:29 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:20:13 +0100
commit0a898f853727a8600ecc57617b006af0f9694502 (patch)
tree6c2448dc5ff9692583fb83d4609bdca50044cf42 /src
parentb1f53f7ee96455fcca4c6e5273c41dd5e498a735 (diff)
FUNCT Add support to load apps from AGL
Diffstat (limited to 'src')
-rw-r--r--src/config.xml2
-rw-r--r--src/images/noicon.svg244
-rw-r--r--src/index.html47
-rw-r--r--src/index.js2
-rw-r--r--src/js/AFB.js215
-rw-r--r--src/js/app.js59
-rw-r--r--src/styles/main.scss20
7 files changed, 552 insertions, 37 deletions
diff --git a/src/config.xml b/src/config.xml
index 1f409f6..b3a885d 100644
--- a/src/config.xml
+++ b/src/config.xml
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="webapps-html5-homescreen" version="5.0.0">
<name>HTML5 Homescreen</name>
- <icon src="icon.png"/>
+ <icon src="icon.svg"/>
<content src="index.html" type="text/html"/>
<description>HTML5 Homescreen demo</description>
<author>Igalia, S.L.</author>
diff --git a/src/images/noicon.svg b/src/images/noicon.svg
new file mode 100644
index 0000000..6e1f9d3
--- /dev/null
+++ b/src/images/noicon.svg
@@ -0,0 +1,244 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 320 320"
+ style="enable-background:new 0 0 320 320;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="noicon.svg"><metadata
+ id="metadata1292"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs1290" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1680"
+ inkscape:window-height="1005"
+ id="namedview1288"
+ showgrid="false"
+ inkscape:zoom="2.95"
+ inkscape:cx="177.45946"
+ inkscape:cy="147.70379"
+ inkscape:window-x="1971"
+ inkscape:window-y="0"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="Multimedia_Inactive_copy" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.4;fill:url(#SVGID_1_);}
+ .st3{fill:url(#SVGID_2_);}
+ .st4{fill:#FFFFFF;}
+ .st5{font-family:'Roboto-Regular';}
+ .st6{font-size:25px;}
+ .st7{letter-spacing:6;}
+ .st8{fill:url(#SVGID_3_);}
+ .st9{fill:url(#SVGID_4_);}
+ .st10{fill:url(#SVGID_5_);}
+ .st11{fill:url(#SVGID_6_);}
+ .st12{fill:url(#SVGID_7_);}
+ .st13{fill:url(#SVGID_8_);}
+ .st14{fill:url(#SVGID_9_);}
+ .st15{fill:url(#SVGID_10_);}
+ .st16{fill:url(#SVGID_11_);}
+ .st17{fill:url(#SVGID_12_);}
+ .st18{fill:url(#SVGID_13_);}
+ .st19{fill:url(#SVGID_14_);}
+ .st20{fill:url(#SVGID_15_);}
+ .st21{fill:url(#SVGID_16_);}
+ .st22{fill:url(#SVGID_17_);}
+ .st23{fill:url(#SVGID_18_);}
+ .st24{opacity:0.29;}
+ .st25{fill:url(#SVGID_19_);}
+ .st26{fill:url(#SVGID_20_);}
+ .st27{fill:url(#SVGID_21_);}
+ .st28{fill:url(#SVGID_22_);}
+ .st29{fill:url(#SVGID_23_);}
+ .st30{fill:url(#SVGID_24_);}
+ .st31{fill:url(#SVGID_25_);}
+ .st32{fill:url(#SVGID_26_);}
+ .st33{fill:url(#SVGID_27_);}
+ .st34{fill:url(#SVGID_28_);}
+ .st35{fill:url(#SVGID_29_);}
+ .st36{fill:url(#SVGID_30_);}
+ .st37{fill:url(#SVGID_31_);}
+ .st38{fill:url(#SVGID_32_);}
+ .st39{fill:url(#SVGID_33_);}
+ .st40{fill:url(#SVGID_34_);}
+ .st41{fill:url(#SVGID_35_);}
+ .st42{fill:url(#SVGID_36_);}
+ .st43{opacity:0.4;fill:url(#SVGID_37_);}
+ .st44{fill:url(#SVGID_38_);}
+ .st45{fill:url(#SVGID_39_);}
+ .st46{fill:url(#SVGID_40_);}
+ .st47{fill:url(#SVGID_41_);}
+ .st48{fill:url(#SVGID_42_);}
+ .st49{fill:url(#SVGID_43_);}
+ .st50{fill:url(#SVGID_44_);}
+ .st51{display:inline;opacity:0.29;}
+ .st52{display:inline;fill:url(#SVGID_45_);}
+ .st53{display:inline;fill:url(#SVGID_46_);}
+ .st54{display:inline;fill:#FFFFFF;}
+ .st55{display:inline;fill:url(#SVGID_47_);}
+ .st56{display:inline;fill:url(#SVGID_48_);}
+ .st57{display:inline;fill:url(#SVGID_49_);}
+ .st58{display:inline;fill:url(#SVGID_50_);}
+ .st59{display:inline;fill:url(#SVGID_51_);}
+ .st60{display:inline;fill:url(#SVGID_52_);}
+ .st61{opacity:0.4;fill:url(#SVGID_53_);}
+ .st62{fill:url(#SVGID_54_);}
+ .st63{fill:url(#SVGID_55_);}
+ .st64{fill:url(#SVGID_56_);}
+ .st65{fill:url(#SVGID_57_);}
+ .st66{fill:url(#SVGID_58_);}
+ .st67{opacity:0.4;fill:url(#SVGID_59_);}
+ .st68{fill:url(#SVGID_60_);}
+ .st69{fill:url(#SVGID_61_);}
+ .st70{fill:url(#SVGID_62_);}
+ .st71{fill:url(#SVGID_63_);}
+ .st72{fill:url(#SVGID_64_);}
+ .st73{fill:url(#SVGID_65_);}
+ .st74{fill:url(#SVGID_66_);}
+ .st75{fill:url(#SVGID_67_);}
+ .st76{fill:url(#SVGID_68_);}
+ .st77{fill:url(#SVGID_69_);}
+ .st78{fill:url(#SVGID_70_);}
+ .st79{fill:url(#SVGID_71_);}
+ .st80{fill:url(#SVGID_72_);}
+ .st81{fill:url(#SVGID_73_);}
+ .st82{fill:url(#SVGID_74_);}
+ .st83{fill:url(#SVGID_75_);}
+ .st84{fill:url(#SVGID_76_);}
+ .st85{fill:url(#SVGID_77_);}
+ .st86{fill:url(#SVGID_78_);}
+ .st87{fill:url(#SVGID_79_);}
+ .st88{fill:url(#SVGID_80_);}
+ .st89{fill:url(#SVGID_81_);}
+ .st90{fill:url(#SVGID_82_);}
+ .st91{fill:url(#SVGID_83_);}
+ .st92{fill:url(#SVGID_84_);}
+ .st93{fill:url(#SVGID_85_);}
+ .st94{fill:url(#SVGID_86_);}
+ .st95{opacity:0.4;fill:url(#SVGID_87_);}
+ .st96{fill:url(#SVGID_88_);}
+ .st97{fill:url(#SVGID_89_);}
+ .st98{fill:url(#SVGID_90_);}
+ .st99{fill:url(#SVGID_91_);}
+ .st100{fill:url(#SVGID_92_);}
+ .st101{fill:url(#SVGID_93_);}
+ .st102{fill:url(#SVGID_94_);}
+ .st103{opacity:0.4;fill:url(#SVGID_95_);}
+ .st104{fill:url(#SVGID_96_);}
+ .st105{fill:url(#SVGID_97_);}
+ .st106{fill:url(#SVGID_98_);}
+ .st107{fill:url(#SVGID_99_);}
+ .st108{fill:url(#SVGID_100_);}
+ .st109{fill:url(#SVGID_101_);}
+ .st110{display:inline;fill:url(#SVGID_102_);}
+ .st111{display:inline;fill:url(#SVGID_103_);}
+ .st112{fill:url(#SVGID_104_);}
+ .st113{fill:url(#SVGID_105_);}
+ .st114{fill:url(#SVGID_106_);}
+ .st115{fill:url(#SVGID_107_);}
+ .st116{fill:url(#SVGID_108_);}
+ .st117{opacity:0.4;fill:url(#SVGID_109_);}
+ .st118{fill:url(#SVGID_110_);}
+ .st119{fill:url(#SVGID_111_);}
+ .st120{fill:url(#SVGID_112_);}
+ .st121{fill:url(#SVGID_113_);}
+ .st122{fill:url(#SVGID_114_);}
+ .st123{opacity:0.4;fill:url(#SVGID_115_);}
+ .st124{fill:url(#SVGID_116_);}
+ .st125{fill:url(#SVGID_117_);}
+ .st126{fill:url(#SVGID_118_);}
+ .st127{display:inline;fill:url(#SVGID_119_);}
+ .st128{display:inline;fill:url(#SVGID_120_);}
+ .st129{fill:url(#SVGID_121_);}
+ .st130{fill:url(#SVGID_122_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Multimedia_Inactive_copy"><circle
+ class="st24"
+ cx="159.7"
+ cy="133.4"
+ r="101.9"
+ id="circle884" /><linearGradient
+ id="SVGID_91_"
+ gradientUnits="userSpaceOnUse"
+ x1="115.9317"
+ y1="254.1836"
+ x2="256.3852"
+ y2="-133.5267"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop887" /><stop
+ offset="2.015080e-02"
+ style="stop-color:#7CCB56;stop-opacity:0.9678"
+ id="stop889" /><stop
+ offset="6.089833e-02"
+ style="stop-color:#62D67D;stop-opacity:0.9028"
+ id="stop891" /><stop
+ offset="0.1057"
+ style="stop-color:#4BDFA0;stop-opacity:0.8312"
+ id="stop893" /><stop
+ offset="0.1543"
+ style="stop-color:#38E7BE;stop-opacity:0.7537"
+ id="stop895" /><stop
+ offset="0.2077"
+ style="stop-color:#28EED6;stop-opacity:0.6684"
+ id="stop897" /><stop
+ offset="0.2681"
+ style="stop-color:#1CF3E8;stop-opacity:0.572"
+ id="stop899" /><stop
+ offset="0.3394"
+ style="stop-color:#13F6F5;stop-opacity:0.4581"
+ id="stop901" /><stop
+ offset="0.4323"
+ style="stop-color:#0EF8FD;stop-opacity:0.3098"
+ id="stop903" /><stop
+ offset="0.6264"
+ style="stop-color:#0DF9FF;stop-opacity:0"
+ id="stop905" /></linearGradient><circle
+ class="st99"
+ cx="159.7"
+ cy="133.4"
+ r="101.9"
+ id="circle907" /><linearGradient
+ id="SVGID_92_"
+ gradientUnits="userSpaceOnUse"
+ x1="4.0481"
+ y1="287.9492"
+ x2="320.4859"
+ y2="-15.4029"
+ gradientTransform="matrix(1 5.464556e-03 -5.464556e-03 1 -2.0192 -3.0212)"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop910" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop912" /></linearGradient><path
+ class="st100"
+ d="M160,238.8c-0.2,0-0.4,0-0.6,0c-58-0.3-104.9-47.7-104.6-105.7C55.2,75.3,102.3,28.5,160,28.5 c0.2,0,0.4,0,0.6,0c58,0.3,104.9,47.7,104.6,105.7l0,0C264.8,192,217.7,238.8,160,238.8z M160,32.2 c-55.7,0-101.2,45.2-101.5,100.9c-0.3,55.9,45,101.7,100.9,102c0.2,0,0.4,0,0.6,0c55.7,0,101.2-45.2,101.5-100.9 c0.3-55.9-45-101.7-100.9-102C160.4,32.2,160.2,32.2,160,32.2z"
+ id="path914" /></g></g></switch></svg> \ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 971ba8d..f280ebe 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,43 +6,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
- <div class="parent">
- <div class="item">
- <img src="mockups/dashboard.svg" onload="SVGInject(this);">
- <div class="name">
- DASHBOARD
+ <div id="AppContainer" class="parent">
+ <script id="item-template" type="x-tmpl-mustache">
+ <div class="item">
+ <img class="icon" src="{{ icon }}" onload="SVGInject(this);">
+ <div class="name">
+ {{ name }}
+ </div>
</div>
- </div>
- <div class="item">
- <img src="mockups/hvac.svg" onload="SVGInject(this);">
- <div class="name">
- HVAC
- </div>
- </div>
- <div class="item">
- <img src="mockups/multimedia.svg" onload="SVGInject(this);">
- <div class="name">
- MULTIMEDIA
- </div>
- </div>
- <div class="item">
- <img src="mockups/phone.svg" onload="SVGInject(this);">
- <div class="name">
- PHONE
- </div>
- </div>
- <div class="item">
- <img src="mockups/radio.svg" onload="SVGInject(this);">
- <div class="name">
- RADIO
- </div>
- </div>
- <div class="item">
- <img src="mockups/settings.svg" onload="SVGInject(this);">
- <div class="name">
- SETTINGS
- </div>
- </div>
+ </script>
+ </div>
+ <div class="log" id="log">
+
</div>
</body>
</html> \ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 406ef65..1d569d6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,6 @@
import '@iconfu/svg-inject';
+import './js/AFB.js';
+import './js/app.js';
console.log('Arrancada la aplicación compilando CSS y SaSS');
diff --git a/src/js/AFB.js b/src/js/AFB.js
new file mode 100644
index 0000000..d6e6bfa
--- /dev/null
+++ b/src/js/AFB.js
@@ -0,0 +1,215 @@
+/*
+ * Copyright (C) 2017, 2018 "IoT.bzh"
+ * Author: José Bollo <jose.bollo@iot.bzh>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+AFB = function(base, initialtoken){
+
+if (typeof base != "object")
+ base = { base: base, token: initialtoken };
+
+var initial = {
+ base: base.base || "api",
+ token: base.token || initialtoken || "HELLO",
+ host: base.host || window.location.host,
+ url: base.url || undefined
+};
+
+var urlws = initial.url || "ws://"+initial.host+"/"+initial.base;
+
+/*********************************************/
+/**** ****/
+/**** AFB_context ****/
+/**** ****/
+/*********************************************/
+var AFB_context;
+{
+ var UUID = undefined;
+ var TOKEN = initial.token;
+
+ var context = function(token, uuid) {
+ this.token = token;
+ this.uuid = uuid;
+ }
+
+ context.prototype = {
+ get token() {return TOKEN;},
+ set token(tok) {if(tok) TOKEN=tok;},
+ get uuid() {return UUID;},
+ set uuid(id) {if(id) UUID=id;}
+ };
+
+ AFB_context = new context();
+}
+/*********************************************/
+/**** ****/
+/**** AFB_websocket ****/
+/**** ****/
+/*********************************************/
+var AFB_websocket;
+{
+ var CALL = 2;
+ var RETOK = 3;
+ var RETERR = 4;
+ var EVENT = 5;
+
+ var PROTO1 = "x-afb-ws-json1";
+
+ AFB_websocket = function(on_open, on_abort) {
+ var u = urlws, p = '?';
+ if (AFB_context.token) {
+ u = u + '?x-afb-token=' + AFB_context.token;
+ p = '&';
+ }
+ if (AFB_context.uuid)
+ u = u + p + 'x-afb-uuid=' + AFB_context.uuid;
+ this.ws = new WebSocket(u, [ PROTO1 ]);
+ this.url = u;
+ this.pendings = {};
+ this.awaitens = {};
+ this.counter = 0;
+ this.ws.onopen = onopen.bind(this);
+ this.ws.onerror = onerror.bind(this);
+ this.ws.onclose = onclose.bind(this);
+ this.ws.onmessage = onmessage.bind(this);
+ this.onopen = on_open;
+ this.onabort = on_abort;
+ }
+
+ function onerror(event) {
+ var f = this.onabort;
+ if (f) {
+ delete this.onopen;
+ delete this.onabort;
+ f && f(this);
+ }
+ this.onerror && this.onerror(this);
+ }
+
+ function onopen(event) {
+ var f = this.onopen;
+ delete this.onopen;
+ delete this.onabort;
+ f && f(this);
+ }
+
+ function onclose(event) {
+ var err = {
+ jtype: 'afb-reply',
+ request: {
+ status: 'disconnected',
+ info: 'server hung up'
+ }
+ };
+ for (var id in this.pendings) {
+ try { this.pendings[id][1](err); } catch (x) {/*NOTHING*/}
+ }
+ this.pendings = {};
+ this.onclose && this.onclose();
+ }
+
+ function fire(awaitens, name, data) {
+ var a = awaitens[name];
+ if (a)
+ a.forEach(function(handler){handler(data);});
+ var i = name.indexOf("/");
+ if (i >= 0) {
+ a = awaitens[name.substring(0,i)];
+ if (a)
+ a.forEach(function(handler){handler(data);});
+ }
+ a = awaitens["*"];
+ if (a)
+ a.forEach(function(handler){handler(data);});
+ }
+
+ function reply(pendings, id, ans, offset) {
+ if (id in pendings) {
+ var p = pendings[id];
+ delete pendings[id];
+ try { p[offset](ans); } catch (x) {/*TODO?*/}
+ }
+ }
+
+ function onmessage(event) {
+ var obj = JSON.parse(event.data);
+ var code = obj[0];
+ var id = obj[1];
+ var ans = obj[2];
+ AFB_context.token = obj[3];
+ switch (code) {
+ case RETOK:
+ reply(this.pendings, id, ans, 0);
+ break;
+ case RETERR:
+ reply(this.pendings, id, ans, 1);
+ break;
+ case EVENT:
+ default:
+ fire(this.awaitens, id, ans);
+ break;
+ }
+ }
+
+ function close() {
+ this.ws.close();
+ this.ws.onopen =
+ this.ws.onerror =
+ this.ws.onclose =
+ this.ws.onmessage =
+ this.onopen =
+ this.onabort = function(){};
+ }
+
+ function call(method, request, callid) {
+ return new Promise((function(resolve, reject){
+ var id, arr;
+ if (callid) {
+ id = String(callid);
+ if (id in this.pendings)
+ throw new Error("pending callid("+id+") exists");
+ } else {
+ do {
+ id = String(this.counter = 4095 & (this.counter + 1));
+ } while (id in this.pendings);
+ }
+ this.pendings[id] = [ resolve, reject ];
+ arr = [CALL, id, method, request ];
+ if (AFB_context.token) arr.push(AFB_context.token);
+ this.ws.send(JSON.stringify(arr));
+ }).bind(this));
+ }
+
+ function onevent(name, handler) {
+ var id = name;
+ var list = this.awaitens[id] || (this.awaitens[id] = []);
+ list.push(handler);
+ }
+
+ AFB_websocket.prototype = {
+ close: close,
+ call: call,
+ onevent: onevent
+ };
+}
+/*********************************************/
+/**** ****/
+/**** ****/
+/**** ****/
+/*********************************************/
+return {
+ context: AFB_context,
+ ws: AFB_websocket
+};
+};
diff --git a/src/js/app.js b/src/js/app.js
new file mode 100644
index 0000000..fccf04e
--- /dev/null
+++ b/src/js/app.js
@@ -0,0 +1,59 @@
+import Mustache from 'mustache';
+
+var host = document.location.hostname;
+var port = document.location.port;
+var args = new URLSearchParams(document.location.search.substring(1));
+var token = args.get("x-afb-token") || args.get("token") || "HELLO";
+var afb;
+var template;
+
+function log(smgs) {
+ document.getElementById('log').innerHTML += '<div>'+smgs+'</div>';
+}
+
+function getIcon(app) {
+ if( app.icon.match(/^.*\.svg$/) ) {
+ return '/icons/'+app.id;
+ } else {
+ return '/images/noicon.svg';
+ }
+}
+
+function display_applications(apps) {
+ var appContainer = document.getElementById('AppContainer');
+ for( var i=0; i<apps.length; i++) {
+ apps[i].icon = getIcon(apps[i]);
+ appContainer.innerHTML += Mustache.render(template, apps[i]);
+ }
+}
+
+function load_application_list() {
+ var ws = new afb.ws(function() {
+ var api_verb = "afm-main/runnables";
+ ws.call(api_verb, {}).then(
+ function(obj) {
+ display_applications(obj.response);
+ },
+ function(obj) {
+ //TODO Manage errors
+ log("failure");
+ }
+ );
+ },
+ function() {
+ //TODO manage errors
+ log("ws aborted");
+ });
+}
+
+function init() {
+ template = document.getElementById('item-template').innerHTML;
+ Mustache.parse(template);
+ afb = new AFB({
+ host: "raspberrypi3.local:31022",
+ token: token
+ });
+ load_application_list();
+}
+
+document.addEventListener('DOMContentLoaded', init); \ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 5aca22b..1c6220e 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,11 @@
+::-webkit-scrollbar {
+ display: none;
+}
+
html {
height: 100%;
background-size: cover;
+ -webkit-overflow-scrolling: touch;
}
body {
@@ -18,6 +23,11 @@ body {
height: 100%;
.item {
+ .icon {
+ width: 100%;
+ height: 100%;
+ }
+
.name {
width: 100%;
text-align: center;
@@ -26,4 +36,14 @@ body {
}
}
}
+
+ .log {
+ display: none;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 1080px;
+ background: white;
+ font-size: 1.5rem;
+ }
} \ No newline at end of file