diff options
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | scripts/gui-common/widgets.js | 38 | ||||
| -rw-r--r-- | scripts/main.js | 4 | ||||
| -rw-r--r-- | styles/main.css | 14 | ||||
| -rw-r--r-- | styles/themes/base.css | 36 | ||||
| -rw-r--r-- | styles/widgets.css | 277 |
6 files changed, 279 insertions, 105 deletions
@@ -4,8 +4,18 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OpenSmarts</title> + + <!-- Widgets and Main styles --> <link rel="stylesheet" href="styles/main.css" /> <link rel="stylesheet" href="styles/widgets.css" /> + + <!-- Google Fonts --> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet"> + + <!-- Theme --> + <link id="theme" rel="stylesheet" href="styles/themes/base.css" /> </head> <body> <user> @@ -30,6 +40,11 @@ <div class="widget color-wheel" style="--pos-x: 0.3; --pos-y: 0.3;"></div> <div class="widget color-temp" style="--pos: 0.3;"></div> <div class="widget color-light" style="--pos: 0.3;"></div> + <div class="widget thermostat" style="--percent: 0.3; --arch-color: #0084ff;"> + <div class="arch"></div> + <div class="gague">68</div> + <div class="temp">72°</div> + </div> </content> <script type="module" src="scripts/main.js"></script> diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js index 28efe7f..e365f56 100644 --- a/scripts/gui-common/widgets.js +++ b/scripts/gui-common/widgets.js @@ -1,5 +1,37 @@ -function widget() { - console.log("widgets!"); +/** + * @typedef {{ + * el: HTMLElement; + * value: T; + * set: (value: T) => void; + * get: () => T}} Widget<T> + * @template {any} T + */ + +/** + * @typedef {"button" | "toggle" | "slider" | "checkbox"} WidgetType + */ + +/** + * @template {any} T + * @param {WidgetType} type + * @returns {Widget<T>} + */ +function Widget (type = "button") { + /** @type {Widget<Number>} */ + let out = { + el: document.createElement("div"), + value: 0, + set: (e) => {value = e}, + get: () => this.value, + }; + + out.el.classList = ["widget", type]; + if (type == "checkbox" || type == "toggle") + { + out.el.classList.add("button"); + } + + return out; } -export { widget };
\ No newline at end of file +export { Widget };
\ No newline at end of file diff --git a/scripts/main.js b/scripts/main.js index b86a956..ce0dfe4 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -1,3 +1,3 @@ -import { widget } from './gui-common/widgets.js'; +import * as w from './gui-common/widgets.js'; -widget();
\ No newline at end of file +let a = w.Widget(); diff --git a/styles/main.css b/styles/main.css index c9f0728..56e1c50 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,3 +1,11 @@ +* { + font-family: "Host Grotesk", sans-serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + font-size: 18px; +} + html, body { font-family: sans-serif; box-sizing: border-box; @@ -6,7 +14,8 @@ html, body { body { min-height: 100vh; margin:0; - background-color: #eee; + background-color: var(--bg); + color: var(--color); } user { @@ -44,9 +53,8 @@ nav { nav .nav-el { margin:10px; - font-weight: bold; text-decoration: none; - color: #ddd; + color: #eee; transition-duration: 0.2s; } diff --git a/styles/themes/base.css b/styles/themes/base.css new file mode 100644 index 0000000..24ff4b9 --- /dev/null +++ b/styles/themes/base.css @@ -0,0 +1,36 @@ +* { + --bg: seashell; + --color: #222; + + /* Gobal colors */ + --w-bg: #ccc; + --w-bg-hover: #eee; + --w-bg-active: #eee; + --w-shadow: #aaa; + + /* Toggle Widget colors */ + --w-tg-inactive-color: #222; + --w-tg-inactive-bg: #0084ff; + --w-tg-inactive-bg-hover: #3ea2ff; + --w-tg-inactive-bg-active: #3ea2ff; + --w-tg-active-color: rgb(255, 128, 0); + --w-tg-active-bg: #dd3; + --w-tg-active-bg-hover: #ee7; + --w-tg-active-bg-active: #ee7; + + /* Slider colors */ + --w-sl-fill: #0084ff; + --w-sl-fill-hover: #2696ff; + --w-sl-fill-active: #3ea2ff; + --w-sl-dots-size: 6px; + --w-sl-dots: var(--w-sl-dots-size) dotted rgba(255, 255, 255, 0.7); + + /* Checkbox */ + --w-cb-inactive-outline: #ccc; + --w-cb-inactive-outline-hover: #eee; + --w-cb-inactive-outline-active: #eee; + --w-cb-active-bg: #1d6; + --w-cb-active-bg-hover: #5f9; + --w-cb-active-bg-active: #5f9; + +}
\ No newline at end of file diff --git a/styles/widgets.css b/styles/widgets.css index 012c692..16bc7f5 100644 --- a/styles/widgets.css +++ b/styles/widgets.css @@ -1,8 +1,8 @@ .widget { 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); + background-color: var(--w-bg); + box-shadow: 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow); padding:20px; margin: 10px 15px 15px 10px; @@ -13,21 +13,21 @@ overflow: hidden; - --base-unit: 50px; + --base-unit: 36px; min-width: var(--base-unit); min-height: var(--base-unit); cursor:pointer; - position: relative; + position: relative; } .widget:hover { - background-color: var(--top-color-hover); + background-color: var(--w-bg-hover); } .widget:active { - background-color: var(--top-color-active); + background-color: var(--w-bg-active); } /** @@ -55,20 +55,18 @@ .toggle { 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; + --w-bg: var(--w-tg-inactive-bg); + --w-bg-hover: var(--w-tg-inactive-bg-hover); + --w-bg-active: var(--w-tg-inactive-bg-active); + color: var(--w-tg-inactive-color); 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); + --w-bg: var(--w-tg-active-bg); + --w-bg-hover: var(--w-tg-active-bg-hover); + --w-bg-active: var(--w-tg-active-bg-active); + color: var(--w-tg-active-color); } /** @@ -76,10 +74,6 @@ */ .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)); } @@ -96,7 +90,7 @@ left: 0; height: calc(100% * var(--fill-percent)); width: 100%; - background-color: #0084ff; + background-color: var(--w-sl-fill); transition-duration: 0.15s; @@ -109,32 +103,48 @@ } .slider:hover::before { - background-color: #2696ff; + background-color: var(--w-sl-fill-hover); } .slider:active::before { - background-color: #3ea2ff; + background-color: var(--w-sl-fill-active); } .slider::after { position: absolute; - top: 10px; - left: calc(50% - 2px); - height: calc(100% - 20px); + top: 6px; + left: calc(50% - var(--w-sl-dots-size) / 2); + height: calc(100% - var(--w-sl-dots-size) * 2); width: 0; - border-right: 4px dotted rgba(255, 255, 255, 0.7); + border-right: var(--w-sl-dots); content: ''; } .slider.h::after { - top: calc(50% - 2px); - left: 10px; - width: calc(100% - 20px); + top: calc(50% - var(--w-sl-dots-size) / 2); + left: 6px; + width: calc(100% - var(--w-sl-dots-size) * 2); height: 0; border-right: none; - border-top: 4px dotted rgba(255, 255, 255, 0.7); + border-bottom: var(--w-sl-dots); +} + +.slider > .detail { + display: none; + position: absolute; + left: calc(100% + 5px); + background-color: #0084ff; + color: white; + font-weight: bold; + width: var(--base-unit); + height: var(--base-unit); + clip-path: path(""); +} + +.slider:active > .detail { + } /** @@ -142,58 +152,59 @@ */ .checkbox { - --top-color: rgba(0, 0, 0, 0); - --top-color-hover: rgba(0, 0, 0, 0); - --top-color-active: rgba(0, 0, 0, 0); - --side-color: #444; + --w-bg: rgba(0, 0, 0, 0); + --w-bg-hover: rgba(0, 0, 0, 0); + --w-bg-active: rgba(0, 0, 0, 0); - border: 7px solid #888; - box-shadow: 5px 5px inset var(--side-color), 1px 1px var(--side-color), 3px 3px var(--side-color), 5px 5px var(--side-color); + border: 7px solid var(--w-cb-inactive-outline); + box-shadow: 5px 5px inset var(--w-shadow), 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow); padding: 0; } .checkbox:hover { - border-color: #aaa; + border-color: var(--w-cb-inactive-outline-hover); } .checkbox:active { - border: 7px solid #aaa; + border: 7px solid var(--w-cb-inactive-outline-active); } .checkbox::after { - height: 24px; - width: 13px; + height: 24px; + width: 13px; - box-sizing: border-box; + box-sizing: border-box; - position: absolute; + position: absolute; - display: block; + display: block; - border-color: white; - border-style: solid; - border-width: 0px 0px 0px 0px; + border-color: white; + border-style: solid; + border-width: 0px 0px 0px 0px; - top: calc(50% - 13px); - left: calc(50% - 6px); + top: calc(50% - 13px); + left: calc(50% - 6px); - transform-origin: center; - transform: rotate(45deg); + transform-origin: center; + transform: rotate(45deg); - content: ''; + transition-duration: 0.15s; + + content: ''; } .checkbox.active { - --top-color: green; - --top-color-hover: lightgreen; - --top-color-active: lightgreen; + --w-bg: var(--w-cb-active-bg); + --w-bg-hover: var(--w-cb-active-bg-hover); + --w-bg-active: var(--w-cb-active-bg-active); border: none; - box-shadow: 1px 1px var(--side-color), 3px 3px var(--side-color), 5px 5px var(--side-color); + box-shadow: 1px 1px var(--w-shadow), 3px 3px var(--w-shadow), 5px 5px var(--w-shadow); } .checkbox.active::after { - border-width: 0px 5px 5px 0px; + border-width: 0px 5px 5px 0px; } /** @@ -201,82 +212,154 @@ */ .color-wheel { - background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); - border-radius: 50%; + background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); + border-radius: 50%; width: calc(3 * var(--base-unit)); height: calc(3 * var(--base-unit)); --side-color: #aaa; - overflow: unset; + overflow: unset; } .color-wheel::after { - content: ''; - height: 18px; - width: 18px; - border: 5px solid #444; - position: absolute; - bottom: calc((50% - 9px) + (50%) * var(--pos-y)); - left: calc((50% - 9px) + (50%) * var(--pos-x)); + content: ''; + height: 18px; + width: 18px; + border: 5px solid #444; + position: absolute; + bottom: calc((50% - 9px) + (50%) * var(--pos-y)); + left: calc((50% - 9px) + (50%) * var(--pos-x)); - border-radius: 50%; - transition-duration: 0.15s; - box-sizing: border-box; + border-radius: 50%; + transition-duration: 0.15s; + box-sizing: border-box; } .color-wheel:hover::after { - border-color: #888; + border-color: #888; } .color-temp { width: var(--base-unit); height: calc(3 * var(--base-unit)); - background: linear-gradient(rgb(190, 200, 255), white 30%, rgb(250, 160, 100)); + background: linear-gradient(rgb(190, 200, 255), white 30%, rgb(250, 160, 100)); --side-color: #aaa; - overflow: unset; + overflow: unset; } .color-temp::after { - content: ''; - width: calc(100% + 8px); - height: 14px; - border: 5px solid #444; - position: absolute; - bottom: calc(-7px + (100% + 14px) * var(--pos)); - left: -4px; + content: ''; + width: calc(100% + 8px); + height: 14px; + border: 5px solid #444; + position: absolute; + bottom: calc(100% * var(--pos) - 7px); + left: -4px; - box-sizing: border-box; + box-sizing: border-box; - border-radius: 7px; - transition-duration: 0.15s; + border-radius: 7px; + transition-duration: 0.15s; } .color-temp:hover::after { - border-color: #888; + border-color: #888; } .color-light { height: var(--base-unit); width: calc(3 * var(--base-unit)); - background: linear-gradient(to left, white, black); + background: linear-gradient(to left, white, black); --side-color: #aaa; - overflow: unset; + overflow: unset; } .color-light::after { - content: ''; - height: calc(100% + 8px); - width: 14px; - border: 5px solid #444; - position: absolute; - left: calc(-7px + (100% + 14px) * var(--pos)); - top: -4px; + content: ''; + height: calc(100% + 8px); + width: 14px; + border: 5px solid #444; + position: absolute; + left: calc(100% * var(--pos) - 7px); + top: -4px; - box-sizing: border-box; + box-sizing: border-box; - border-radius: 7px; - transition-duration: 0.15s; + border-radius: 7px; + transition-duration: 0.15s; } .color-light:hover::after { - border-color: #888; + border-color: #888; } + +/** + Thermostat +*/ + +.thermostat { + align-content: center; + text-align: center; + + width: calc(6 * var(--base-unit)); + height: calc(3 * var(--base-unit)); + + overflow: unset; +} + +.thermostat > .arch { + position: absolute; + + height: 100px; + width: 200px; + + top: calc(50% - 45px); + left: calc(50% - 100px); + + + clip-path: path("M 6.6525702323609295 64.13556976925895 A 100 100 0 0 1 193.34742976763908 64.13556976925895 A 5 5 0 0 1 184.01268679087516 67.72201279233306 A 90 90 0 0 0 15.987313209124835 67.72201279233306 A 5 5 0 0 1 6.6525702323609295 64.13556976925895 "); + background-color: #222; +} + +.thermostat > .arch::after { + content: ''; + display: block; + height: 100px; + width: 200px; + background-color: var(--arch-color); + transform-origin: bottom center; + transform: rotate(calc((1 - var(--percent)) * -144deg - 18deg)); + transition-duration: 0.5s; +} + +.thermostat > .gague { + position: absolute; + bottom: calc(-13px + ((100% - 100px) / 2) + 90px); + left: calc(-13px + 50%); + height: 26px; + width: 26px; + border-radius: 50%; + background-color: white; + transition-duration: 0.5s; + + box-sizing: border-box; + border: 2px solid white; + + box-shadow: inset 0px 0px 0px 2px var(--arch-color); + + transform-origin: 13px 108px; + transform: rotate(calc(72deg - (1 - var(--percent)) * 144deg)); + + text-align: center; + align-content: center; + font-size: 10px; + font-weight: bold; +} + +.thermostat > .temp { + position: absolute; + bottom: calc((100% - 100px) / 2); + left: calc(50% - 65px); + width: 130px; + font-size: 55px; + text-align: center; +}
\ No newline at end of file |