aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/config.xml3
-rw-r--r--src/index.html68
-rw-r--r--src/index.js12
-rw-r--r--src/styles/main.scss17
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 {