commit 635689e7fb1a249111123ddd44922cf0694ee287 Author: Daniel Date: Fri Jan 13 22:59:03 2023 +0100 Sweet dashboard for self-hosted services has just arrived diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..9ee9155 --- /dev/null +++ b/css/main.css @@ -0,0 +1,240 @@ +@font-face { + font-family: 'Material Symbols Rounded'; + font-style: normal; + font-weight: 500; + src: url(../font/MaterialSymbolsRounded.woff2) format('woff2'); +} + +body { + background: #DDD; + color: #222; + margin: 0; + font-family: Quicksand; + font-weight: bold; + user-select: none; + font-size: 14px; + -webkit-tap-highlight-color: transparent; +} +::-webkit-scrollbar { + display: none; +} +a { + color: #44F; +} +.icon { + font-family: 'Material Symbols Rounded'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} +.background, #background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + object-fit: cover; + transition: all .45s; +} +#background.scaled { + transform: scale(1.14); +} +.unloaded { + opacity: 0; +} + +.main { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.appicon { + width: 192px; + height: 192px; + object-fit: cover; +} +.page { + position: fixed; + top: 0; + left: 50%; + width: 100%; + max-width: 920px; + height: 100vh; + transform: translateX(-50%); + overflow-y: scroll; + transition: all .4s; +} +.home.page { + top: 50%; + left: 50%; + width: 100%; + height: auto; + overflow: hidden; + transform: translate(-50%, -50%); +} +.page.hidden { + top: 320px; + visibility: hidden; + opacity: 0; +} +.home.page.hidden { + top: calc(50% - 72px); +} +.wrapper { + box-shadow: 2px 2px 8px #0003; + background: #FFF8; + padding: 3px; + backdrop-filter: blur(16px); + border-radius: 24px; + margin: -4px 12px 16px; + text-align: center; + overflow: hidden; + min-width: 340px; +} +.home .wrapper { + box-shadow: none; + background: #FFF0; + backdrop-filter: none; +} + +.appname { + font-size: 48px; +} +.appdesc { + opacity: .7; + margin: 2px 12px; +} +.appname.about { + font-size: 36px; +} +.buttons { + box-shadow: 2px 2px 8px #0002; + display: flex; + margin: 16px auto 0; + backdrop-filter: blur(16px); + border-radius: 24px; + max-width: 480px; + background: #FFF8; + padding: 2px; + justify-content: space-between; +} +.buttons > div { + padding: 16px; + margin: 2px; + cursor: pointer; + border-radius: 20px; + width: calc(100% / 2); + transition: all .2s; +} +.buttons > div:hover { + background: #0001; +} +.buttons .text { + margin-top: -2px; +} + +.back { + box-shadow: 2px 2px 8px #0002; + position: relative; + width: 64px; + height: 64px; + border-radius: 24px; + background: #FFF8; + margin: 20px; + backdrop-filter: blur(16px); +} + +.back .icon { + margin: 4px; + width: 56px; + height: 56px; + cursor: pointer; + border-radius: 20px; + transition: all .2s; +} +.back .icon:hover { + background: #0001; +} +.back .icon:after { + content: "chevron_left"; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.boxes { + display: flex; + flex: 1 1 0; + flex-wrap: wrap; +} +.static { + margin: 24px 6px 16px; +} +.static .box:hover { + background: transparent; +} +.box { + min-width: 292px; + flex: 1; + margin: 2px; + border-radius: 20px; + padding: 8px; + display: flex; + align-items: center; + text-align: left; + text-decoration: none; + color: inherit; + transition: all .2s; +} +.box:hover { + background: #0001; +} +.box .icon { + font-size: 24px; + padding: 20px; + background: hsl(var(--color), 100%, 90%); + color: hsl(var(--color), 100%, 35%); + border-radius: 100px; + margin: 2px 12px 2px 2px; +} +a.box { + cursor: pointer; + padding: 14px; +} +.box img { + width: 64px; + height: 64px; + object-fit: cover; + margin-right: 12px; +} +.box .name { + font-size: 18px; +} +.box .desc { + opacity: .65; +} +.header { + display: flex; + align-items: center; + margin: 20px 20px 16px; +} +.header .icon { + margin-top: 1px; + margin-right: 10px; +} +.header .text { + font-size: 26px; +} \ No newline at end of file diff --git a/font/MaterialSymbolsRounded.woff2 b/font/MaterialSymbolsRounded.woff2 new file mode 100644 index 0000000..5b6f096 Binary files /dev/null and b/font/MaterialSymbolsRounded.woff2 differ diff --git a/img/appicon.png b/img/appicon.png new file mode 100644 index 0000000..53b5b22 Binary files /dev/null and b/img/appicon.png differ diff --git a/img/background.jpg b/img/background.jpg new file mode 100644 index 0000000..9764919 Binary files /dev/null and b/img/background.jpg differ diff --git a/img/icon.png b/img/icon.png new file mode 100644 index 0000000..53b5b22 Binary files /dev/null and b/img/icon.png differ diff --git a/img/preview/caldav.png b/img/preview/caldav.png new file mode 100644 index 0000000..9116d2c Binary files /dev/null and b/img/preview/caldav.png differ diff --git a/img/preview/files.png b/img/preview/files.png new file mode 100644 index 0000000..981f2ad Binary files /dev/null and b/img/preview/files.png differ diff --git a/img/preview/gallery.png b/img/preview/gallery.png new file mode 100644 index 0000000..490cb49 Binary files /dev/null and b/img/preview/gallery.png differ diff --git a/img/preview/git.png b/img/preview/git.png new file mode 100644 index 0000000..c601cb8 Binary files /dev/null and b/img/preview/git.png differ diff --git a/img/preview/mail.png b/img/preview/mail.png new file mode 100644 index 0000000..b6f7332 Binary files /dev/null and b/img/preview/mail.png differ diff --git a/img/preview/music.png b/img/preview/music.png new file mode 100644 index 0000000..346a6b6 Binary files /dev/null and b/img/preview/music.png differ diff --git a/img/preview/notes.png b/img/preview/notes.png new file mode 100644 index 0000000..f88ec3d Binary files /dev/null and b/img/preview/notes.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e8d7af9 --- /dev/null +++ b/index.html @@ -0,0 +1,141 @@ + + + + + + honey + + + + + + +
+ +
+
+ + + +
+ + \ No newline at end of file diff --git a/js/dom.js b/js/dom.js new file mode 100644 index 0000000..d7c66d6 --- /dev/null +++ b/js/dom.js @@ -0,0 +1,12 @@ +function get(id) { + return document.getElementById(id); +} +function for_all(class_name, func) { + let a = document.getElementsByClassName(class_name); + for (let i = 0; i < a.length; i++) { + func(a[i]); + } +} +function load_img(img) { + img.classList.remove("unloaded"); +} diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..a4be2b4 --- /dev/null +++ b/js/main.js @@ -0,0 +1,19 @@ +function onload() { + for_all("back", (btn) => { + btn.onclick = back; + }); + back(); +} + +function show(id) { + for_all("page", (page) => { + page.classList.add("hidden"); + }); + get(id).classList.remove("hidden"); + get(id).scrollTop = 0; + get("background").classList.remove("scaled"); +} +function back() { + show("page-home"); + get("background").classList.add("scaled"); +} \ No newline at end of file