diff --git a/css/styles.css b/css/styles.css
index 0fcbc5f..b7dddc7 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -92,6 +92,18 @@ body {
transform: translate(-200px, 200px);
}
+.bottom-middle {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
+}
+
+.bottom-middle.hidden {
+ transform: translate(-50%, 300px);
+}
+
+
.bottom-right {
position: absolute;
bottom: 0;
@@ -123,6 +135,10 @@ body {
top: var(--bleed-extra);
}
+.bottom-bleed-extra {
+ bottom: var(--bleed-extra);
+}
+
.center-text {
text-align: center;
}
@@ -211,3 +227,107 @@ body {
#battery-icon {
background: url("../assets/svg/battery-mid.svg");
}
+
+.input-container {
+ display: flex;
+ background: white;
+ border-radius: 1rem;
+ background-color: transparent;
+
+ backdrop-filter: blur( 2px );
+ -webkit-backdrop-filter: blur( 2px );
+ box-shadow:
+ var(--tl-shadow-primary-concave),
+ var(--br-shadow-primary-concave);
+ padding: 0.3rem;
+ gap: 0.3rem;
+}
+
+.input-container input {
+ border-radius: 0.8rem;
+ background-color: transparent;
+
+ backdrop-filter: blur( 2px );
+ -webkit-backdrop-filter: blur( 2px );
+ box-shadow:
+ var(--tl-shadow-primary-convex),
+ var(--br-shadow-primary-convex),
+ 0px 0px 100px color-mix(in srgb, var(--primary) 0%, transparent),
+ 0px 0px 100px color-mix(in srgb, var(--secondary) 0%, transparent);
+ width: 100%;
+ flex-basis: 100%;
+ padding: 1rem;
+ border: none;
+ border: 1px solid transparent;
+ color: white;
+ transition: all 0.2s ease-in-out;
+}
+
+.input-container input:focus {
+ border: 1px solid var(--primary-dim);
+ outline: none;
+ box-shadow:
+ inset 0px 0px 10px color-mix(in srgb, var(--primary) 20%, transparent),
+ inset 0px 0px 10px color-mix(in srgb, var(--secondary) 20%, transparent),
+ 0px 0px 100px color-mix(in srgb, var(--secondary) 20%, transparent),
+ 0px 0px 100px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+@media (max-width: 500px) {
+ .input-container {
+ flex-direction: column;
+ }
+
+ .input-container input {
+ border-radius: 0.8rem;
+ }
+}
+
+.dial-container {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 10px;
+ border-radius: 1rem;
+
+ background-color: transparent;
+
+ backdrop-filter: blur( 2px );
+ -webkit-backdrop-filter: blur( 2px );
+
+ border-radius: 14px;
+ box-shadow: var(--tl-shadow-primary-concave),
+ var(--br-shadow-primary-concave);
+
+ margin-bottom: 20px;
+}
+
+.arrow {
+ cursor: pointer;
+ padding: 10px;
+ user-select: none;
+ pointer-events: all;
+}
+
+.items-container {
+ width: 200px;
+ overflow: hidden;
+}
+
+.items-wrapper {
+ display: flex;
+ transition: transform 0.3s ease-in-out;
+}
+
+.item {
+ min-width: 200px;
+ text-align: center;
+ padding: 10px;
+ flex-shrink: 0;
+
+ font-weight: bold;
+ font-size: 16px;
+
+ text-shadow: var(--tl-shadow-secondary-concave),
+ var(--br-shadow-secondary-concave);
+}
diff --git a/index.html b/index.html
index 73d6dc0..181158d 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,36 @@
citadel
+
+
@@ -41,6 +71,8 @@
+
+
diff --git a/js/session-select.js b/js/session-select.js
new file mode 100644
index 0000000..844cf7f
--- /dev/null
+++ b/js/session-select.js
@@ -0,0 +1,37 @@
+const sessionsWrapper = document.querySelector('#session-items-wrapper');
+const sessions = document.querySelectorAll('#session');
+let currentSession = 0;
+let isAnimatingSession = false;
+
+function cycleSession(direction) {
+ if (isAnimatingSession) return;
+
+ const itemWidth = sessions[0].offsetWidth;
+ const oldIndex = currentSession;
+ currentSession = (currentSession + direction + sessions.length) % sessions.length;
+
+ const animationOffset = direction * itemWidth;
+
+ sessionsWrapper.style.transform = `translateX(${-oldIndex * itemWidth - animationOffset}px)`;
+ isAnimatingSession = true;
+
+ setTimeout(() => {
+ sessionsWrapper.style.transition = 'none';
+ sessionsWrapper.style.transform = `translateX(-${currentSession * itemWidth}px)`;
+ void sessionsWrapper.offsetHeight; // Trigger reflow
+ sessionsWrapper.style.transition = 'transform 0.3s ease-in-out';
+ isAnimatingSession = false;
+ }, 300);
+}
+
+function populateSessions() {
+ let sessionObjects = lightdm.sessions;
+ sessionsWrapper.innerHtml = "";
+ sessionObjects.forEach((s) => {
+ let newSession = document.createElement("div");
+ newSession.id = s.key;
+ newSession.className = "item session";
+ newSession.textContent = s.name;
+ usersWrapper.appendChild(newSession);
+ });
+}
diff --git a/js/user-select.js b/js/user-select.js
new file mode 100644
index 0000000..5851b7c
--- /dev/null
+++ b/js/user-select.js
@@ -0,0 +1,37 @@
+const usersWrapper = document.querySelector('#user-items-wrapper');
+const users = document.querySelectorAll('.user');
+let currentUser = 0;
+let isAnimatingUsers = false;
+
+function cycleUser(direction) {
+ if (isAnimatingUsers) return;
+
+ const itemWidth = users[0].offsetWidth;
+ const oldIndex = currentUser;
+ currentUser = (currentUser + direction + users.length) % users.length;
+
+ const animationOffset = direction * itemWidth;
+
+ usersWrapper.style.transform = `translateX(${-oldIndex * itemWidth - animationOffset}px)`;
+ isAnimatingUsers = true;
+
+ setTimeout(() => {
+ usersWrapper.style.transition = 'none';
+ usersWrapper.style.transform = `translateX(-${currentUser * itemWidth}px)`;
+ void usersWrapper.offsetHeight; // Trigger reflow
+ usersWrapper.style.transition = 'transform 0.3s ease-in-out';
+ isAnimatingUsers = false;
+ }, 300);
+}
+
+function populateUsers() {
+ let userObjects = lightdm.users;
+ usersWrapper.innerHtml = "";
+ userObjects.forEach((u) => {
+ let newUser = document.createElement("div");
+ newUser.id = u.username;
+ newUser.className = "item user";
+ newUser.textContent = u.display_name;
+ usersWrapper.appendChild(newUser);
+ });
+}