diff options
| -rw-r--r-- | src/config.xml | 3 | ||||
| -rw-r--r-- | src/index.html | 68 | ||||
| -rw-r--r-- | src/index.js | 12 | ||||
| -rw-r--r-- | src/styles/main.scss | 17 |
4 files changed, 91 insertions, 9 deletions
diff --git a/src/config.xml b/src/config.xml index 4e3f71c..d3820f8 100644 --- a/src/config.xml +++ b/src/config.xml @@ -15,6 +15,7 @@ <feature name="urn:AGL:widget:required-api"> <param name="windowmanager" value="ws" /> <param name="homescreen" value="ws" /> - <param name="afm-main" value="ws" /> + <param name="network-manager" value="ws" /> + <param name="Bluetooth-Manager" value="ws" /> </feature> </widget>
\ No newline at end of file diff --git a/src/index.html b/src/index.html index 9798f94..65d316c 100644 --- a/src/index.html +++ b/src/index.html @@ -21,11 +21,11 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> - <div class="content"> + <div class="page" id="main"> <h1 class="header"> Settings </h1> - <a href="#" class="entry"> + <a href="#" class="entry" onclick="window.show('datetime');"> <div class="icon"> <span class="icon-time"></span> </div> @@ -33,7 +33,7 @@ Date & Time </div> </a> - <a href="#" class="entry"> + <a href="#" class="entry" onclick="window.show('bluetooth');"> <div class="icon"> <span class="icon-bluetooth"></span> </div> @@ -44,7 +44,7 @@ <span class="icon-toggle_on"></span> </div> </a> - <a href="#" class="entry"> + <a href="#" class="entry" onclick="window.show('wifi');"> <div class="icon"> <span class="icon-wifi"></span> </div> @@ -55,7 +55,7 @@ <span class="icon-toggle_off"></span> </div> </a> - <a href="#" class="entry"> + <a href="#" class="entry" onclick="window.show('wired');"> <div class="icon"> <span class="icon-ethernet"></span> </div> @@ -63,7 +63,7 @@ Wired </div> </a> - <a href="#" class="entry"> + <a href="#" class="entry" onclick="window.show('version');"> <div class="icon"> <span class="icon-speed"></span> </div> @@ -72,6 +72,62 @@ </div> </a> </div> + + <div class="secondary page hide" id="datetime"> + <h1 class="header"> + Date & Time + </h1> + <div class="entry"> + <h2> + Date + </h2> + </div> + <div class="entry"> + <h2> + Time + </h2> + </div> + <a href="#" class="confirm button" onclick="window.hide('datetime')"> + Confirm + </a> + </div> + + <div class="secondary page hide" id="bluetooth"> + <h1 class="header"> + Bluetotth + </h1> + <a href="#" class="confirm button" onclick="window.hide('bluetooth')"> + Confirm + </a> + </div> + + <div class="secondary page hide" id="wifi"> + <h1 class="header"> + Wifi + </h1> + <a href="#" class="confirm button" onclick="window.hide('wifi')"> + Confirm + </a> + </div> + + <div class="secondary page hide" id="wired"> + <h1 class="header"> + Wired + </h1> + <a href="#" class="confirm button" onclick="window.hide('wired')"> + Confirm + </a> + </div> + + <div class="secondary page hide" id="version"> + <h1 class="header"> + Version info + </h1> + <a href="#" class="confirm button" onclick="window.hide('version')"> + Confirm + </a> + </div> + <div class="log" id="log"> </div> diff --git a/src/index.js b/src/index.js index 962b5a6..ded8fe7 100644 --- a/src/index.js +++ b/src/index.js @@ -18,4 +18,14 @@ import './js/AFB.js'; /* CSS */ -import './styles/app.scss';
\ No newline at end of file +import './styles/app.scss'; + +window.show = function(page){ + document.getElementById('main').classList.add('hide'); + document.getElementById(page).classList.remove('hide'); +} + +window.hide = function(page) { + document.getElementById('main').classList.remove('hide'); + document.getElementById(page).classList.add('hide'); +}
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 22dd899..518bdc2 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -50,13 +50,17 @@ body { } } - .content { + .page { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; height: 100%; + &.hide { + display: none; + } + .header { text-align: center; margin: 0; @@ -97,6 +101,17 @@ body { } } } + + .confirm { + position: absolute; + bottom: 5%; + text-align: center; + height: 120px; + line-height: 120px; + width: 90%; + background: map-get($colors, primary); + border-radius: 20px; + } } .log { |