User and session selection rotaries

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);
+}

index.html

@@ -32,6 +32,36 @@
         <div id="hostname-label" class="label raised-text-small">citadel</div>
     </div>
 
+    <div id="login-form-container" class="bottom-middle bottom-bleed-extra hideable hidden">
+      <div class="dial-container">
+	<div class="arrow" onclick="cycleSession(-1)">◀</div>
+	<div class="items-container">
+          <div id="session-items-wrapper" class="items-wrapper">
+            <div class="item session">bspwm</div>
+	    <div class="item session">awesome</div>
+	    <div class="item session">sway</div>
+	    <div class="item session">i3</div>
+          </div>
+	</div>
+	<div class="arrow" onclick="cycleSession(1)">▶</div>
+      </div>
+
+      <div class="dial-container">
+	<div class="arrow" onclick="cycleUser(-1)">◀</div>
+	<div class="items-container">
+          <div id="user-items-wrapper" class="items-wrapper">
+            <div class="item user">User 1</div>
+	    <div class="item user">User 2</div>
+          </div>
+	</div>
+	<div class="arrow" onclick="cycleUser(1)">▶</div>
+      </div>
+      
+      <div class="input-container">
+	<input placeholder="" type="password" tabindex="1" />
+      </div>
+    </div>
+
     <div id="host-info-container" class="bottom-right bottom-bleed right-bleed hideable hidden">
         <div id="battery-icon"></div>
     </div>
@@ -41,6 +71,8 @@
     <script src="js/theme.js"></script>
     <script src="js/clock.js"></script>
     <script src="js/power-actions.js"></script>
+    <script src="js/user-select.js"></script>
+    <script src="js/session-select.js"></script>
     <script src="js/idle-hide.js"></script>
     <script src="js/hostname.js"></script>
     <script src="js/index.js"></script>

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);
+    });
+}

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);
+    });
+}