Animus Greeter

commit 744e2063ae18f7150c6e8d084e3c57ddba31c60f Author: Jakub Nowak Date: Sun Feb 9 16:17:12 2025 +0800 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..54b432d --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +# Emacs related +*~ +\#*\# +/.emacs.desktop +/.emacs.desktop.lock +*.elc +auto-save-list +tramp +.\#* \ No newline at end of file diff --git a/README.org b/README.org new file mode 100644 index 0000000..6dc970e --- /dev/null +++ b/README.org @@ -0,0 +1 @@ +Icons from https://github.com/vinceliuice/Colloid-icon-theme \ No newline at end of file diff --git a/assets/backgrounds/mountain.jpg b/assets/backgrounds/mountain.jpg new file mode 100644 index 0000000..fe671f8 Binary files /dev/null and b/assets/backgrounds/mountain.jpg differ diff --git a/assets/svg/battery-low.svg b/assets/svg/battery-low.svg new file mode 100644 index 0000000..45ad96b --- /dev/null +++ b/assets/svg/battery-low.svg @@ -0,0 +1,54 @@ + + diff --git a/assets/svg/battery-mid.svg b/assets/svg/battery-mid.svg new file mode 100644 index 0000000..8055c1d --- /dev/null +++ b/assets/svg/battery-mid.svg @@ -0,0 +1,59 @@ + + diff --git a/assets/svg/battery_charging.svg b/assets/svg/battery_charging.svg new file mode 100644 index 0000000..14b0a6b --- /dev/null +++ b/assets/svg/battery_charging.svg @@ -0,0 +1,62 @@ + + diff --git a/assets/svg/battery_full.svg b/assets/svg/battery_full.svg new file mode 100644 index 0000000..ae73ee8 --- /dev/null +++ b/assets/svg/battery_full.svg @@ -0,0 +1,58 @@ + + diff --git a/assets/svg/reboot.svg b/assets/svg/reboot.svg new file mode 100644 index 0000000..01c0382 --- /dev/null +++ b/assets/svg/reboot.svg @@ -0,0 +1,17 @@ + + diff --git a/assets/svg/settings.svg b/assets/svg/settings.svg new file mode 100644 index 0000000..5bacc1c --- /dev/null +++ b/assets/svg/settings.svg @@ -0,0 +1,16 @@ + + diff --git a/assets/svg/shutdown.svg b/assets/svg/shutdown.svg new file mode 100644 index 0000000..9856498 --- /dev/null +++ b/assets/svg/shutdown.svg @@ -0,0 +1,16 @@ + + diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..c0e2683 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,205 @@ +:root { + --bleed-extra: 80px; + --bleed: 40px; +} + +body { + /* set basic colors */ + background-color: var(--surface); + color: var(--on-surface); + font-family: sans-serif; + + /* main background image */ + background-image: var(--background); + //background-size: auto; + background-repeat: no-repeat; + background-position: center center; + + /* Disable overflow */ + overflow: hidden; +} + +.silhouette { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + background: radial-gradient(closest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%); + + backdrop-filter: blur( 20px ); + -webkit-backdrop-filter: blur( 20px ); + + mask-image: radial-gradient(closest-side, rgba(0,0,0) 50%, rgba(0,0,0,0.4) 90%, rgba(0,0,0,1.0) 100%); + -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 90%, rgba(0,0,0,1.0) 100%); + + transition: all 400ms cubic-bezier(.47,1.64,.41,.8); +} + +.silhouette.hidden { + backdrop-filter: blur( 0px ); + -webkit-backdrop-filter: blur( 0px ); + + background: transparent; +} + +/* Alignment Styles */ +.top-middle { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +.top-right { + position: absolute; + top: 0; + right: 0; + transition: transform 400ms cubic-bezier(.47,1.64,.41,.8); +} + +.top-right.hidden { + transform: translate(200px, -200px); +} + +.top-left { + position: absolute; + top: 0; + left: 0; + transition: transform 400ms cubic-bezier(.47,1.64,.41,.8); +} + +.top-left.hidden { + transform: translate(-200px, -200px); +} + +.bottom-left { + position: absolute; + bottom: 0; + left: 0; + transition: transform 400ms cubic-bezier(.47,1.64,.41,.8); +} + +.bottom-left.hidden { + transform: translate(-200px, 200px); +} + +.bottom-right { + position: absolute; + bottom: 0; + right: 0; + transition: transform 400ms cubic-bezier(.47,1.64,.41,.8); +} + +.bottom-right.hidden { + transform: translate(200px, 200px); +} + +.top-bleed { + top: var(--bleed); +} + +.bottom-bleed { + bottom: var(--bleed); +} + +.right-bleed { + right: var(--bleed); +} + +.left-bleed { + left: var(--bleed); +} + +.top-bleed-extra { + top: var(--bleed-extra); +} + +.center-text { + text-align: center; +} + +/* Text Styles */ +.title { + font-size: 80px; + font-weight: bold; +} + +.subtitle { + font-size: 25px; + font-weight: bold; +} + +.label { + font-size: 15px; + font-weight: bold; +} + +/* Glassy Neumorphism */ + +.raised { + border-radius: 14px; + backdrop-filter: blur( 12px ); + -webkit-backdrop-filter: blur( 12px ); + box-shadow: var(--tl-shadow-primary-concave), + var(--br-shadow-primary-concave); +} + +.raised-text { + text-shadow: var(--tl-shadow-secondary-concave), + var(--br-shadow-secondary-concave); +} + +.raised-text-small { + text-shadow: var(--tl-shadow-tertiary-concave), + var(--br-shadow-tertiary-concave); +} + +/* Component Styles */ +#clock-box { + padding: 20px; +} + +.action-btn { + width: 60px; + height: 60px; + + background-color: transparent; + + backdrop-filter: blur( 12px ); + -webkit-backdrop-filter: blur( 12px ); + + color: var(--on-surface); + + align-items: center; + justify-content: center; + text-align: center; + + border: none; + border-radius: 50%; + outline: none; + + box-shadow: var(--tl-shadow-primary-concave), var(--br-shadow-primary-concave), inset 0 0 0 0 transparent; + transition: box-shadow 200ms, transform 300ms cubic-bezier(.2,2,1,1); + + margin: 15px; +} + +.action-btn:hover { + color: var(--on-surface-dim); +} + +.action-btn:active { + box-shadow: 0 0 0 transparent, 0 0 0 transparent, var(--tl-shadow-primary-convex), var(--br-shadow-primary-convex); + transform: scale(.9); +} + + +.action-btn img { + width: 25px; + height: auto; +} + +#battery-icon { + background: url("../assets/svg/battery-mid.svg"); +} diff --git a/css/themes/melanosis.css b/css/themes/melanosis.css new file mode 100644 index 0000000..912bf95 --- /dev/null +++ b/css/themes/melanosis.css @@ -0,0 +1,33 @@ +:root { + --surface: #0B1012; + --surface-secondary: #37484D; + + --on-surface: #F3F5FF; + --on-surface-dim: #9AB5B3; + + --primary: #788BFF; + --primary-bright: #AEB9FF; + --primary-dim: #6F77AC; + + --secondary: #BBA0CA; + --secondary-bright: #E0C0F1; + --secondary-dim: #9A7AAB; + + --tertiary: #B4EDB4; + --tertiary-bright: #D5FFD5; + --tertiary-dim: #91CD91; + + --background: url("../../assets/backgrounds/mountain.jpg"); + + --tl-shadow-primary-concave: 9px 9px 18px #040607; + --br-shadow-primary-concave: -9px -9px 18px #121a1d; + + --tl-shadow-primary-convex: inset 9px 9px 18px #040607; + --br-shadow-primary-convex: inset -9px -9px 18px #121a1d; + + --tl-shadow-secondary-concave: 2px 2px 10px #040607; + --br-shadow-secondary-concave: -2px -2px 10px #121a1d; + + --tl-shadow-tertiary-concave: 0px 0px 1px #839a98; + --br-shadow-tertiary-concave: -0px -0px 1px #b1d0ce; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e56bcd6 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + Animus Greeter + + + + + +

00:00

Monday 1, January 1970

+ + + + + + + + + + + + + + + + + + + diff --git a/index.yml b/index.yml new file mode 100644 index 0000000..c89cfb8 --- /dev/null +++ b/index.yml @@ -0,0 +1,2 @@ +primary_html: "index.html" +secondary_html: "index.html" \ No newline at end of file diff --git a/js/class/data.js b/js/class/data.js new file mode 100644 index 0000000..a3f6827 --- /dev/null +++ b/js/class/data.js @@ -0,0 +1,24 @@ +const ANIMUS_DATA = "animusData"; + +class Data { + constructor() { + this.theme = "melanosis"; + } + + load() { + const data = window.localStorage.getItem(ANIMUS_DATA); + if(!data) return; + const obj = JSON.parse(data); + + this.theme = obj.theme ?? "melanosis"; + } + + save() { + const data = JSON.stringify(this); + window.localStorage.setItem(ANIMUS_DATA, data); + } +} + +const themeData = new Data(); +themeData.load(); +themeData.save(); \ No newline at end of file diff --git a/js/class/util.js b/js/class/util.js new file mode 100644 index 0000000..4e7e1cb --- /dev/null +++ b/js/class/util.js @@ -0,0 +1 @@ +function $(c) { return document.querySelector(c); } \ No newline at end of file diff --git a/js/clock.js b/js/clock.js new file mode 100644 index 0000000..3f50dc5 --- /dev/null +++ b/js/clock.js @@ -0,0 +1,14 @@ +function updateTime() { + const now = new Date(), + hours = now.getHours(), + minutes = now.getMinutes(), + day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][now.getDay()], + date = now.getDate(), + month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][now.getMonth()], + year = now.getFullYear(); + + $("#time-label").textContent = ((hours < 10 ? "0" : "") + hours) + ":" + ((minutes < 10 ? "0" : "") + minutes); + $("#date-label").textContent = day + " " + date + ", " + month + " " + year; +} + +setInterval(updateTime, 500); \ No newline at end of file diff --git a/js/hostname.js b/js/hostname.js new file mode 100644 index 0000000..b0e9d42 --- /dev/null +++ b/js/hostname.js @@ -0,0 +1,3 @@ +function setHostname() { + $("#hostname-label").textContent = lightdm.hostname; +} \ No newline at end of file diff --git a/js/idle-hide.js b/js/idle-hide.js new file mode 100644 index 0000000..6bb5f04 --- /dev/null +++ b/js/idle-hide.js @@ -0,0 +1,23 @@ +let hideInterval = 1; + +setInterval(() => { + if(hideInterval > 8){ + document.querySelectorAll(".hideable").forEach(el => { + el.classList.add("hidden") + }); + hideInterval = 1; + return; + } + hideInterval += 1; +}, 1000); + +function showHiddenElements() { + document.querySelectorAll(".hideable").forEach(el => { + el.classList.remove("hidden") + }); + hideInterval = 1; +} + +document.body.onclick = showHiddenElements; +document.body.onmousemove = showHiddenElements; +document.body.onkeydown = showHiddenElements; diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..819154a --- /dev/null +++ b/js/index.js @@ -0,0 +1,11 @@ +async function initGreeter(){ + if (window.greeter_config?.greeter.debug_mode){ + // debug + } + setHostname(); + connectPowerActions(); +} + +window.addEventListener("GreeterReady", () => { + initGreeter(); +}); diff --git a/js/power-actions.js b/js/power-actions.js new file mode 100644 index 0000000..0334107 --- /dev/null +++ b/js/power-actions.js @@ -0,0 +1,4 @@ +function connectPowerActions() { + $("#poweroff-button").onclick = () => { lightdm.shutdown(); } + $("#restart-button").onclick = () => { lightdm.restart(); } +} diff --git a/js/theme.js b/js/theme.js new file mode 100644 index 0000000..65b9feb --- /dev/null +++ b/js/theme.js @@ -0,0 +1,7 @@ +function changeTheme(name) { + themeData.theme = name; + themeData.save(); + $("#theme-stylesheet").href = "css/themes/" + name + ".css" +} + +changeTheme(themeData.theme); \ No newline at end of file