diff options
| -rw-r--r-- | index.html | 22 | ||||
| -rw-r--r-- | scripts/gui-common/widgets.js | 0 | ||||
| -rw-r--r-- | styles/main.css | 9 | ||||
| -rw-r--r-- | styles/widgets.css | 187 |
4 files changed, 209 insertions, 9 deletions
@@ -5,20 +5,30 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OpenSmarts</title> <link rel="stylesheet" href="styles/main.css" /> + <link rel="stylesheet" href="styles/widgets.css" /> </head> <body> <user> - <img id="profile" src="assets/profile.png" /> + <a href="?page=user"> + <img id="profile" src="assets/profile.png" /> + </a> </user> <nav> - <a class="nav-el" href="#">Dashboard</a> - <a class="nav-el" href="#">Manage Devices</a> - <a class="nav-el" href="#">Alerts</a> - <a class="nav-el" href="#">Settings</a> - <a class="nav-el" href="#">Home Automation</a> + <a class="nav-el" href="?page=dashboard">Dashboard</a> + <a class="nav-el" href="?page=manage">Manage Devices</a> + <a class="nav-el" href="?page=alerts">Alerts</a> + <a class="nav-el" href="?page=settings">Settings</a> + <a class="nav-el" href="?page=automation">Home Automation</a> </nav> + <content> + <span class="widget button" style="--top-color: blue; --side-color:red;">Lamp 1</span> + <div class="widget button toggle">Lamp 1</div> + <div class="widget slider" style="--fill-percent: 0.3;"></div> + <div class="widget button checkbox"></div> + </content> + <script src="scripts/main.js"></script> </body> </html>
\ No newline at end of file diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/scripts/gui-common/widgets.js diff --git a/styles/main.css b/styles/main.css index bddd9c2..0472fab 100644 --- a/styles/main.css +++ b/styles/main.css @@ -6,6 +6,7 @@ html, body { body { min-height: 100vh; margin:0; + background-color: #eee; } user { @@ -51,4 +52,12 @@ nav .nav-el { nav .nav-el:hover { color: white; +} + +content { + display: block; + margin-top: 100px; + margin-left: 50px; + margin-right: 50px; + margin-bottom:50px; }
\ No newline at end of file diff --git a/styles/widgets.css b/styles/widgets.css index a8310e3..bea8084 100644 --- a/styles/widgets.css +++ b/styles/widgets.css @@ -1,8 +1,189 @@ .widget { - background-color: #ddd; + display:inline-block; + + background-color: var(--top-color); + box-shadow: 1px 1px var(--side-color), 3px 3px var(--side-color), 5px 5px var(--side-color); + + padding:20px; + margin: 10px 15px 15px 10px; border-radius: 10px; + box-sizing: border-box; + + transition-duration: 0.15s; + + overflow: hidden; + + --base-unit: 50px; + + min-width: var(--base-unit); + min-height: var(--base-unit); + + cursor:pointer; +} + +.widget:hover { + background-color: var(--top-color-hover); +} + +.widget:active { + background-color: var(--top-color-active); +} + +/** + Button widget that a lot of other widgets build from +*/ + +.button { + align-content: center; + text-align: center; + + user-select: none; + -webkit-user-select: none; } +.button:active { + transform:translate(5px, 5px); + box-shadow: none; + border:none; +} + +/** + Toggle widget for things like power buttons +*/ + .toggle { - background-color: gray; -}
\ No newline at end of file + width: calc(3 * var(--base-unit)); + height: calc(3 * var(--base-unit)); + --top-color: #888; + --top-color-hover: #aaa; + --top-color-active: #aaa; + --side-color: #444; + color: #222; + font-weight: bold; +} + +.toggle.active { + --top-color: #dd3; + --top-color-hover: #ee7; + --top-color-active: #ee7; + color: rgb(255, 128, 0); + --side-color: rgb(255, 128, 0); +} + +/** + Slider widget (add h class for horizontal) +*/ + +.slider { + --top-color: #888; + --top-color-hover: #aaa; + --top-color-active: #ccc; + --side-color: #444; + width: var(--base-unit); + height: calc(3 * var(--base-unit)); + position: relative; +} + +.slider.h { + height: var(--base-unit); + width: calc(3 * var(--base-unit)); +} + +.slider::before { + border-radius: 10px; + position:absolute; + bottom: 0; + left: 0; + height: calc(100% * var(--fill-percent)); + width: 100%; + background-color: #0084ff; + + transition-duration: 0.15s; + + content: ''; +} + +.slider.h::before { + width: calc(100% * var(--fill-percent)); + height: 100%; +} + +.slider:hover::before { + background-color: #2696ff; +} + +.slider:active::before { + background-color: #3ea2ff; +} + +.slider::after { + position:absolute; + top: 10px; + left: calc(50% - 2px); + height: calc(100% - 20px); + width: 0; + border-right: 4px dotted rgba(255, 255, 255, 0.7); + + content: ''; +} + +.slider.h::after { + top: calc(50% - 2px); + left: 10px; + width: calc(100% - 20px); + height: 0; + + border-right: none; + border-top: 4px dotted rgba(255, 255, 255, 0.7); +} + +/** + Checkbox widget +*/ + +.checkbox { + --top-color: #888; + --top-color-hover: #aaa; + --top-color-active: #aaa; + --side-color: #444; + position: relative; +} + +.checkbox::after +{ + height: 24px; + width: 13px; + + box-sizing: border-box; + + position: absolute; + + display: block; + + border-color: white; + border-style: solid; + border-width: 0px 0px 0px 0px; + + top: calc(50% - 13px); + left: calc(50% - 6px); + + transform-origin: center; + transform: rotate(45deg); + + content: ''; +} + +.checkbox.active { + --top-color: green; + --top-color-hover: lightgreen; + --top-color-active: lightgreen; +} + +.checkbox.active::after +{ + border-width: 0px 5px 5px 0px; +} + +/** + Color widget +*/
\ No newline at end of file |