feat: open apps menu on scroll, set apps to grid view, etc

This commit is contained in:
Khairul Hidayat 2024-08-11 03:08:59 +07:00
parent 598f269b08
commit dc48c53aa2
6 changed files with 518 additions and 104 deletions

View File

@ -1,13 +1,11 @@
.boxes { .boxes {
display: flex; display: grid;
flex: 1 1 0; grid-template-columns: repeat(1, 1fr);
flex-wrap: wrap; grid-gap: 8px;
padding: 16px;
} }
.box { .box {
min-width: 292px;
flex: 1;
margin: 2px;
border-radius: 20px; border-radius: 20px;
padding: 8px; padding: 8px;
display: flex; display: flex;
@ -15,7 +13,7 @@
text-align: left; text-align: left;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: background .2s; transition: background 0.2s;
} }
.box:hover { .box:hover {
@ -44,9 +42,23 @@ a.box {
} }
.box .name { .box .name {
font-size: 18px; font-size: 16px;
} }
.box .desc { .box .desc {
opacity: .6; opacity: 0.6;
}
/* media query for medium screens */
@media only screen and (min-width: 512px) {
.boxes {
grid-template-columns: repeat(2, 1fr);
}
}
/* large screens */
@media only screen and (min-width: 768px) {
.boxes {
grid-template-columns: repeat(3, 1fr);
}
} }

View File

@ -1,31 +1,50 @@
import App from "../../App" import App from "../../App";
import { currentPage, showPage } from "../../Utils/DOMUtils";
export default class Main { export default class Main {
constructor() { constructor() {
this.app = new App() this.app = new App();
this.config = this.app.config this.config = this.app.config;
this.init() this.init();
} }
init() { init() {
document.title = this.config.get("name") document.title = this.config.get("name");
document.querySelector("#favicon").href = this.config.get("icon") document.querySelector("#favicon").href = this.config.get("icon");
this.initBackgrounds() this.initBackgrounds();
this.initScrollEvent();
} }
initBackgrounds() { initBackgrounds() {
this.backgrounds = document.querySelector("#background") this.backgrounds = document.querySelector("#background");
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
let img = document.createElement("img") let img = document.createElement("img");
img.classList.add("notloaded") img.classList.add("notloaded");
img.addEventListener("load", () => { img.addEventListener("load", () => {
img.classList.remove("notloaded") img.classList.remove("notloaded");
}) });
this.backgrounds.appendChild(img) this.backgrounds.appendChild(img);
} }
this.backgrounds = this.backgrounds.children this.backgrounds = this.backgrounds.children;
this.backgrounds[0].src = this.config.get("wallpaper") this.backgrounds[0].src = this.config.get("wallpaper");
this.backgrounds[1].src = this.config.get("wallpaper_dark") this.backgrounds[1].src = this.config.get("wallpaper_dark");
}
initScrollEvent() {
const servicesPage = document.querySelector(".page[p=services]");
window.addEventListener("wheel", (e) => {
if (currentPage === "home" && e.deltaY > 0) {
showPage("services");
}
if (
currentPage === "services" &&
e.deltaY < 0 &&
servicesPage.scrollTop === 0
) {
showPage("home");
}
});
} }
} }

View File

@ -1,13 +1,15 @@
export let currentPage;
export function showPage(target) { export function showPage(target) {
let bg = document.querySelector("#background").classList let bg = document.querySelector("#background").classList;
if (target == "home") bg.add("scaled") if (target == "home") bg.add("scaled");
else bg.remove("scaled") else bg.remove("scaled");
let pages = document.querySelectorAll(".page") let pages = document.querySelectorAll(".page");
for (let page of pages) { for (let page of pages) {
let p = page.getAttribute("p") let p = page.getAttribute("p");
if (p == target) page.classList.add("current") if (p == target) page.classList.add("current");
else page.classList.remove("current") else page.classList.remove("current");
} }
currentPage = target;
} }

View File

@ -6,7 +6,8 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview --host" "preview": "vite preview --host",
"deploy": "cp -r dist/* ../honey"
}, },
"devDependencies": { "devDependencies": {
"vite": "^4.5.0" "vite": "^4.5.0"

326
pnpm-lock.yaml generated Normal file
View File

@ -0,0 +1,326 @@
lockfileVersion: '9.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
importers:
.:
devDependencies:
vite:
specifier: ^4.5.0
version: 4.5.3
packages:
'@esbuild/android-arm64@0.18.20':
resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
engines: {node: '>=12'}
cpu: [arm64]
os: [android]
'@esbuild/android-arm@0.18.20':
resolution: {integrity: sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==}
engines: {node: '>=12'}
cpu: [arm]
os: [android]
'@esbuild/android-x64@0.18.20':
resolution: {integrity: sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==}
engines: {node: '>=12'}
cpu: [x64]
os: [android]
'@esbuild/darwin-arm64@0.18.20':
resolution: {integrity: sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==}
engines: {node: '>=12'}
cpu: [arm64]
os: [darwin]
'@esbuild/darwin-x64@0.18.20':
resolution: {integrity: sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==}
engines: {node: '>=12'}
cpu: [x64]
os: [darwin]
'@esbuild/freebsd-arm64@0.18.20':
resolution: {integrity: sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==}
engines: {node: '>=12'}
cpu: [arm64]
os: [freebsd]
'@esbuild/freebsd-x64@0.18.20':
resolution: {integrity: sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==}
engines: {node: '>=12'}
cpu: [x64]
os: [freebsd]
'@esbuild/linux-arm64@0.18.20':
resolution: {integrity: sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==}
engines: {node: '>=12'}
cpu: [arm64]
os: [linux]
'@esbuild/linux-arm@0.18.20':
resolution: {integrity: sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==}
engines: {node: '>=12'}
cpu: [arm]
os: [linux]
'@esbuild/linux-ia32@0.18.20':
resolution: {integrity: sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==}
engines: {node: '>=12'}
cpu: [ia32]
os: [linux]
'@esbuild/linux-loong64@0.18.20':
resolution: {integrity: sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==}
engines: {node: '>=12'}
cpu: [loong64]
os: [linux]
'@esbuild/linux-mips64el@0.18.20':
resolution: {integrity: sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==}
engines: {node: '>=12'}
cpu: [mips64el]
os: [linux]
'@esbuild/linux-ppc64@0.18.20':
resolution: {integrity: sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==}
engines: {node: '>=12'}
cpu: [ppc64]
os: [linux]
'@esbuild/linux-riscv64@0.18.20':
resolution: {integrity: sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==}
engines: {node: '>=12'}
cpu: [riscv64]
os: [linux]
'@esbuild/linux-s390x@0.18.20':
resolution: {integrity: sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==}
engines: {node: '>=12'}
cpu: [s390x]
os: [linux]
'@esbuild/linux-x64@0.18.20':
resolution: {integrity: sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==}
engines: {node: '>=12'}
cpu: [x64]
os: [linux]
'@esbuild/netbsd-x64@0.18.20':
resolution: {integrity: sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==}
engines: {node: '>=12'}
cpu: [x64]
os: [netbsd]
'@esbuild/openbsd-x64@0.18.20':
resolution: {integrity: sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==}
engines: {node: '>=12'}
cpu: [x64]
os: [openbsd]
'@esbuild/sunos-x64@0.18.20':
resolution: {integrity: sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==}
engines: {node: '>=12'}
cpu: [x64]
os: [sunos]
'@esbuild/win32-arm64@0.18.20':
resolution: {integrity: sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==}
engines: {node: '>=12'}
cpu: [arm64]
os: [win32]
'@esbuild/win32-ia32@0.18.20':
resolution: {integrity: sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==}
engines: {node: '>=12'}
cpu: [ia32]
os: [win32]
'@esbuild/win32-x64@0.18.20':
resolution: {integrity: sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==}
engines: {node: '>=12'}
cpu: [x64]
os: [win32]
esbuild@0.18.20:
resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==}
engines: {node: '>=12'}
hasBin: true
fsevents@2.3.3:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
nanoid@3.3.7:
resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
picocolors@1.0.1:
resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
postcss@8.4.41:
resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
engines: {node: ^10 || ^12 || >=14}
rollup@3.29.4:
resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
source-map-js@1.2.0:
resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
engines: {node: '>=0.10.0'}
vite@4.5.3:
resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
lightningcss: ^1.21.0
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
lightningcss:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
snapshots:
'@esbuild/android-arm64@0.18.20':
optional: true
'@esbuild/android-arm@0.18.20':
optional: true
'@esbuild/android-x64@0.18.20':
optional: true
'@esbuild/darwin-arm64@0.18.20':
optional: true
'@esbuild/darwin-x64@0.18.20':
optional: true
'@esbuild/freebsd-arm64@0.18.20':
optional: true
'@esbuild/freebsd-x64@0.18.20':
optional: true
'@esbuild/linux-arm64@0.18.20':
optional: true
'@esbuild/linux-arm@0.18.20':
optional: true
'@esbuild/linux-ia32@0.18.20':
optional: true
'@esbuild/linux-loong64@0.18.20':
optional: true
'@esbuild/linux-mips64el@0.18.20':
optional: true
'@esbuild/linux-ppc64@0.18.20':
optional: true
'@esbuild/linux-riscv64@0.18.20':
optional: true
'@esbuild/linux-s390x@0.18.20':
optional: true
'@esbuild/linux-x64@0.18.20':
optional: true
'@esbuild/netbsd-x64@0.18.20':
optional: true
'@esbuild/openbsd-x64@0.18.20':
optional: true
'@esbuild/sunos-x64@0.18.20':
optional: true
'@esbuild/win32-arm64@0.18.20':
optional: true
'@esbuild/win32-ia32@0.18.20':
optional: true
'@esbuild/win32-x64@0.18.20':
optional: true
esbuild@0.18.20:
optionalDependencies:
'@esbuild/android-arm': 0.18.20
'@esbuild/android-arm64': 0.18.20
'@esbuild/android-x64': 0.18.20
'@esbuild/darwin-arm64': 0.18.20
'@esbuild/darwin-x64': 0.18.20
'@esbuild/freebsd-arm64': 0.18.20
'@esbuild/freebsd-x64': 0.18.20
'@esbuild/linux-arm': 0.18.20
'@esbuild/linux-arm64': 0.18.20
'@esbuild/linux-ia32': 0.18.20
'@esbuild/linux-loong64': 0.18.20
'@esbuild/linux-mips64el': 0.18.20
'@esbuild/linux-ppc64': 0.18.20
'@esbuild/linux-riscv64': 0.18.20
'@esbuild/linux-s390x': 0.18.20
'@esbuild/linux-x64': 0.18.20
'@esbuild/netbsd-x64': 0.18.20
'@esbuild/openbsd-x64': 0.18.20
'@esbuild/sunos-x64': 0.18.20
'@esbuild/win32-arm64': 0.18.20
'@esbuild/win32-ia32': 0.18.20
'@esbuild/win32-x64': 0.18.20
fsevents@2.3.3:
optional: true
nanoid@3.3.7: {}
picocolors@1.0.1: {}
postcss@8.4.41:
dependencies:
nanoid: 3.3.7
picocolors: 1.0.1
source-map-js: 1.2.0
rollup@3.29.4:
optionalDependencies:
fsevents: 2.3.3
source-map-js@1.2.0: {}
vite@4.5.3:
dependencies:
esbuild: 0.18.20
postcss: 8.4.41
rollup: 3.29.4
optionalDependencies:
fsevents: 2.3.3

View File

@ -1,63 +1,117 @@
{ {
"ui": { "ui": {
"name": "honey", "name": "Eclair",
"desc": "Nice and sweet place for all your self-hosted services.", "desc": "Nice and sweet place for all your self-hosted services.",
"icon": "img/icon.png", "icon": "img/icon.png",
"wallpaper": "img/background.jpg", "wallpaper": "img/background.jpg",
"wallpaper_dark": "img/background-dark.jpg", "wallpaper_dark": "img/background-dark.jpg",
"dark_mode": false, "dark_mode": true,
"open_new_tab": false, "open_new_tab": false,
"blur": true, "blur": true,
"animations": true "animations": true
}, },
"services": [ "services": [
{ {
"name": "CalDav", "name": "Jellyfin",
"desc": "Simple CalDav server for calendar sync between various devices.", "desc": "",
"href": "caldav", "href": "https://jellyfin.rul.sh/",
"icon": "img/preview/caldav.png" "icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/jellyfin.svg"
}, },
{ {
"name": "Files", "name": "NextDeck",
"desc": "Fancy file manager for the web.", "desc": "",
"href": "files", "href": "https://cloud.rul.sh/apps/deck/#/board/1",
"icon": "img/preview/files.png" "icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/nextcloud-deck.svg"
}, },
{ {
"name": "Gallery", "name": "Memos",
"desc": "Photo & video gallery syncable with multiple Android devices.", "desc": "",
"href": "gallery", "href": "https://memos.rul.sh",
"icon": "img/preview/gallery.png" "icon": "https://memos.rul.sh/apple-touch-icon.png"
},
{
"name": "Git",
"desc": "Self-hosted, painless, secure place for your repositories.",
"href": "git",
"icon": "img/preview/git.png"
},
{
"name": "E-Mail",
"desc": "Feature-rich, decentralized and secure E-Mail server.",
"href": "mail",
"icon": "img/preview/mail.png"
},
{
"name": "Music",
"desc": "Beautiful, moody music streaming app.",
"href": "music",
"icon": "img/preview/music.png"
}, },
{ {
"name": "Notes", "name": "Notes",
"desc": "Sweet & lightweight app for taking notes.", "desc": "",
"href": "notes", "href": "https://cloud.rul.sh/apps/notes/",
"icon": "img/preview/notes.png" "icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/nextcloud-notes.svg"
}, },
{ {
"name": "Google", "name": "Nextcloud",
"desc": "DON'T CLICK: goes to google.com", "desc": "",
"href": "https://google.com", "href": "https://cloud.rul.sh/",
"icon": "img/preview/google.png" "icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/nextcloud.svg"
},
{
"name": "Gitea",
"desc": "",
"href": "https://git.rul.sh",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/gitea.svg"
},
{
"name": "Gotify",
"desc": "",
"href": "https://gotify.rul.sh",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/gotify.svg"
},
{
"name": "Vaultwarden",
"desc": "",
"href": "https://vw.rul.sh",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/vaultwarden.svg"
},
{
"name": "Pi-hole",
"desc": "",
"href": "http://pi.hole/admin",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/pi-hole.svg"
},
{
"name": "Headscale",
"desc": "",
"href": "https://headscale.rul.sh/web",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/tailscale.svg"
},
{
"name": "Nginx Proxy Manager",
"desc": "",
"href": "http://nginx-pm.home.ip/",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/nginx-proxy-manager.svg"
},
{
"name": "Nginx UI",
"desc": "",
"href": "https://nginx-ui.rul.sh/",
"icon": "https://nginxui.com/assets/icon.svg"
},
{
"name": "pgAdmin",
"desc": "",
"href": "http://pgadmin.home.ip/",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/pgadmin.svg"
},
{
"name": "phpMyAdmin",
"desc": "",
"href": "http://pma.home.ip/",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/phpmyadmin.svg"
},
{
"name": "Mongo Express",
"desc": "",
"href": "http://home:27018/",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/mongodb.svg"
},
{
"name": "Hoppscotch",
"desc": "",
"href": "https://hopp.rul.sh/",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/hoppscotch.svg"
},
{
"name": "Portainer",
"desc": "",
"href": "https://portainer.rul.sh/",
"icon": "https://github.com/walkxcode/dashboard-icons/raw/be82e22c418f5980ee2a13064d50f1483df39c8c/svg/portainer.svg"
} }
] ]
} }