first commit

2 years ago · 606f565aee
21 changed files with 412 additions and 0 deletions
--- a/README.md
+++ b/README.md
--- a/images/default_face.png
+++ b/images/default_face.png
--- a/images/hibernate.png
+++ b/images/hibernate.png
--- a/images/logo.png
+++ b/images/logo.png
--- a/images/restart.png
+++ b/images/restart.png
--- a/images/shutdown.png
+++ b/images/shutdown.png
--- a/images/sleep.png
+++ b/images/sleep.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css" class="style">
+	<script type="text/javascript" src="main.js"></script>
+  <title>Example Theme</title>
+</head>
+<body>
+	<div class="wrapper">
+		<table class="main">
+			<tr>
+				<td id="buttons" >
+					<table id="menu">
+						<tr><td colspan="3"><img src="images/logo.png" width="174" height="150"><td></tr>
+						<tr><td style="width: 16px;"><img style="margin-left:1em;" src="images/shutdown.png" width="16" height="16" /></td><td colspan="2"><button id="menu_btn" onClick="lightdm.shutdown()">Выключить</button></td></tr>
+						<tr><td style="width: 16px;"><img style="margin-left:1em;" src="images/restart.png" width="16" height="16" /></td><td colspan="2"><button id="menu_btn" onClick="lightdm.restart()">Перегрузить</button></td></tr>
+						<tr><td style="width: 16px;"><img style="margin-left:1em;" src="images/hibernate.png" width="16" height="16" /></td><td colspan="2"><button id="menu_btn" onClick="lightdm.hibernate()">Гибернация</button></td></tr>
+						<tr><td style="width: 16px;"><img style="margin-left:1em;" src="images/sleep.png" width="16" height="16" /></td><td colspan="2"><button id="menu_btn" onClick="lightdm.suspend()">Сон</button></td></tr>
+						<tr id="bottom_info">
+							<td colspan="2" valign="bottom">
+								<br /><br /><br /><br /><br />
+								<select name="wallpappers" id="wallpappers" class="wallpappers">
+									<option value="Rosatomflot.jpg">Росатомфлот</option>
+									<option value="Arctic.webp">Арктика</option>
+									<option value="MCST.webp">МЦСТ-Эльбрус</option>
+									<option value="Space_Launch.jpg">Ракета</option>
+									<option value="Satelite.jpg">Спутник</option>
+									<option value="Baikal1.png">Байкал - 1</option>
+									<option value="Baikal2.jpg">Байкал - 2</option>
+									<option value="Baikal3.jpg">Байкал - 3</option>
+									<option value="Elbrus1.jpg">Эльбрус - 1</option>
+									<option value="Elbrus2.jpg">Эльбрус - 2</option>
+									<option value="Elbrus3.jpg">Эльбрус - 3</option>
+								</select>
+								</dev>
+							</td>
+							<td align="right" valign="bottom"><span id="time" /></td>
+						</tr>
+					</table>
+				</td>
+				<td id="user_form">
+					<center>
+						<br /><br /><br />
+						<img src="images/default_face.png" id="user-image" width="88" height="88"/><br />
+						<p id="user" />
+						<table>
+							<tr><td colspan="2"><div id="underline"><input type="password" name="password" id="password" class="input" autocomplete="off" placeholder="Введите пароль" /></div></td></tr>
+							<tr><td><select name="sessions" id="sessions" /></td><td align="right"><button type="button" id="submit" class='input_submit' onClick="doLogin()">Поехали!</button></td></tr>
+						</table>
+					</center>
+					<br /><br /><br />
+					<div style="margin-bottom:5px" class="user-dropdown"><button>Изменить польлзователя</button>
+					<div class="user-dropdown-content" id="user-dropdown-content" /></div>
+				</td>
+			</tr>
+			<tr><td colspan="2" align="right"><span id="date" /></td></tr>
+		</table>
+	</div>
+</body>
+</html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,127 @@
+const DEFAULT_USER = "defaultUser";
+const DEFAULT_SESSION = "defaultSession";
+const DEFAULT_WALLPAPPER = "defaultWallpapper";
+
+function updateDefaults(user, session) {
+
+	localStorage.setItem(DEFAULT_USER, user)
+	localStorage.setItem(DEFAULT_SESSION, session)
+
+	var wallpapper = document.getElementById("wallpappers").value
+	if(wallpapper) {
+		localStorage.setItem(DEFAULT_WALLPAPPER, wallpapper)
+	}
+}
+
+function dateFormat(date) {
+	var parts=date.split('.');
+	var options = { weekday: 'long', month: 'long', day: 'numeric' };
+	var today  = new Date('20' + parts[2], parts[1] - 1, parts[0]);
+
+	return today.toLocaleDateString("ru-RU", options); // Saturday, September 17
+	//return `${parts[2]}, ${parts[1]} - 1, ${parts[0]}`
+}
+
+function selectItemByValue(elmnt, value){
+
+  for(var i=0; i < elmnt.options.length; i++)
+  {
+    if(elmnt.options[i].value === value) {
+      elmnt.selectedIndex = i;
+      break;
+    }
+  }
+}
+
+function doLogin() {
+	var user = document.getElementById("user").textContent
+	var password = document.getElementById("password").value
+	var session = document.getElementById("sessions").value
+	if (!user || !password || !session) {
+		return false;
+	}
+
+	lightdm.cancel_authentication()
+
+	lightdm.show_prompt.connect((text, type) => {
+	  lightdm.respond(password);
+	})
+	lightdm.authentication_complete.connect(() => {
+	  lightdm.start_session(session);
+	})
+
+	updateDefaults(user, session);
+	lightdm.authenticate(user)
+	return false;
+}
+
+function updateUser(username) {
+	document.getElementById("user-image").src = 'images/default_face.png'
+	document.getElementById("user").textContent = username
+	theme_utils.dirlist(`/var/lib/lightdm-data/${username}`, true, (images) => {
+		if(images) {
+			for (let i = 0; i < images.length; i++) {
+				let image = images[i]
+				if(image.indexOf("/face.png") == image.length - 9) {
+					document.getElementById("user-image").src = image
+					return;
+				}
+			}
+		}
+	});
+}
+
+function updateWallpapper(wallpapper) {
+	var body = document.getElementsByTagName('body')[0];
+	body.style.backgroundImage = `url(wallpappers/${wallpapper})`;
+}
+
+function initGreeter() {
+
+	let users = lightdm.users
+	let defaultUser = localStorage.getItem(DEFAULT_USER) || users[0].username;
+	updateUser(defaultUser);
+
+	let select = document.getElementById('user-dropdown-content')
+	for (let i = 0; i < users.length; i++) {
+		var btn = document.createElement('button')
+		btn.innerHTML = users[i].username
+		btn.addEventListener("click", () => {
+		  updateUser(users[i].username)
+		})
+
+		select.appendChild(btn)
+	}
+
+	const wallpappers = document.getElementById('wallpappers');
+
+	wallpappers.addEventListener('change', (event) => {
+		updateWallpapper(event.target.value);
+	});
+
+	let defaultWallpapper = localStorage.getItem(DEFAULT_WALLPAPPER);
+	if(defaultWallpapper) {
+		selectItemByValue(wallpappers, defaultWallpapper);
+		updateWallpapper(defaultWallpapper);
+	}
+
+	let sessions = lightdm.sessions
+	let defaultSession = localStorage.getItem(DEFAULT_SESSION) || sessions[0].key;
+	let sessionsSelect = document.getElementById('sessions')
+	for (let i = 0; i < sessions.length; i++) {
+		var opt = document.createElement('option')
+		opt.innerHTML = sessions[i].key
+		opt.value = sessions[i].key
+		if(defaultSession == sessions[i].key) {
+			opt.selected = true
+		}
+
+		sessionsSelect.appendChild(opt)
+	}
+	sessionsSelect.value = defaultSession;
+
+	document.getElementById("date").textContent=dateFormat(theme_utils.get_current_localized_date());
+	document.getElementById("time").textContent=theme_utils.get_current_localized_time();
+}
+
+window.addEventListener("GreeterReady", initGreeter)
--- a/style.css
+++ b/style.css
@ -0,0 +1,224 @@
+
+* {
+  --bg: rgb(255,165,0);
+	--btbg: gray;
+	--opacity: 0.9;
+	--color: white;
+}
+
+html, body {
+	width: 99.71%;
+	height: 99.51%;
+}
+
+body {
+	background-image: url("wallpappers/Rosatomflot.jpg");
+	background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+#submit {
+	background-color: rgba(255, 140, 0, 1);
+	border: 0;
+	color: var(--color);
+	font-weight:bold;
+	margin-left: 5px;
+	box-shadow: 1px 1px 1px black;
+	border-radius: 5px
+}
+
+#password::placeholder {
+    font-weight: bold;
+    opacity: .5;
+    color: var(--color);
+}
+
+#menu {
+	margin-top: 5px;
+	margin-left: 5px;
+	margin-right: 5px;
+	margin-bottom: 5px;
+	height: 100%;
+}
+
+div.wrapper {
+	height: 100%;
+	display: flex;
+  align-items: center;
+  justify-content: center 
+}
+
+div.wrapper table.main {
+	margin: 0;
+}
+
+input:focus,
+select:focus,
+option:focus,
+textarea:focus,
+button:focus {
+	outline: none;
+}
+
+#date {
+	color: var(--color);
+	font-size:10px;
+	font-weight:bold;
+	font-style: italic;
+	text-shadow: 1px 1px 1px #000,0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000;
+}
+
+#password, #user, #user option {
+	background-color: var(--bg);
+	opacity: var(--opacity);
+	border: 0;
+	width: 200px;
+	margin: 0;
+	padding: 0;
+	color: var(--color);
+}
+
+#user, #user option {
+	font-size:35px;
+	white-space:nowrap;
+}
+
+#wallpappers, #wallpappers option {
+	background-color: var(--btbg);
+	opacity: var(--opacity);
+	border: 0;
+	margin: 0;
+	padding: 0;
+	font-size:10px;
+	font-weight:bold;
+	color: var(--color);
+}
+
+#wallpappers:hover {
+	color: var(--bg);
+}
+
+select.wallpappers {
+	/* for Firefox */
+  -moz-appearance: none;
+  /* for Chrome */
+  -webkit-appearance: none;
+}
+
+select.wallpappers::-ms-expand {
+	display: none;
+}
+
+table, tr, td {
+	border: 0;
+	border-spacing: 0;
+	border-collapse: collapse;
+	margin: 0;
+	padding: 0;
+}
+
+#buttons {
+	background-color: gray;
+	opacity: var(--opacity);
+	width: 150px;
+	margin: 0;
+	padding: 0;
+}
+
+#user_form {
+	background-color: var(--bg);
+	opacity: var(--opacity);
+	width: 400px;
+	height: 15em;
+	margin: 0;
+	padding: 0;
+	color: var(--color);
+}
+
+#bottom_info {
+	font-size:10px;
+	font-weight:bold;
+	height: 100%;
+	color: var(--color);
+	height: 100%; 
+	border: 1;
+	border-spacing: 1;
+}
+
+#sessions, #sessions option {
+	background-color: rgba(255, 140, 0, 1);
+	opacity: 1;
+	border: 0;
+	width: 150px;
+	margin: 0;
+	padding: 0;
+	color: var(--color);
+}
+
+#sessions {
+	box-shadow: 1px 1px 1px black;
+	border-radius: 5px
+}
+
+#underline {
+	border-bottom: 2px solid var(--color);
+	margin-bottom: 5px;
+}
+
+#menu_btn {
+	border: 0;
+	background-color: var(--btbg);
+	opacity: var(--opacity);
+	color: var(--color);
+	font: small-caps 15px/1 caption;
+}
+
+#menu_btn:hover {
+	border: 0;
+	background-color: var(--btbg);
+	opacity: var(--opacity);
+	color: var(--bg);
+	font: small-caps 15px/1 caption;
+}
+
+.user-dropdown {
+  display: inline-block;
+  position: relative;
+	background-color: var(--bg);
+	opacity: var(--opacity);
+}
+.user-dropdown button {
+	border: 0;
+	background-color: var(--bg);
+	opacity: var(--opacity);
+	color: var(--color);
+	font-weight:bold;
+}
+.user-dropdown-content {
+  display: none;
+  position: absolute;
+  width: 100%;
+  overflow: auto;
+  box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
+	background-color: var(--bg);
+	opacity: var(--opacity);
+}
+.user-dropdown:hover .user-dropdown-content {
+  display: block;
+}
+.user-dropdown-content button {
+	border: 0;
+	width:100%;
+  display: block;
+  padding: 5px;
+  text-decoration: none;
+	text-align: start;
+	background-color: var(--bg);
+	opacity: var(--opacity);
+	color: var(--color);
+}
+.user-dropdown-content button:hover {
+  color: #FFFFFF;
+  background-color: #00A4BD;
+}
+
--- a/wallpappers/Arctic.webp
+++ b/wallpappers/Arctic.webp
--- a/wallpappers/Baikal1.png
+++ b/wallpappers/Baikal1.png
--- a/wallpappers/Baikal2.jpg
+++ b/wallpappers/Baikal2.jpg
--- a/wallpappers/Baikal3.jpg
+++ b/wallpappers/Baikal3.jpg
--- a/wallpappers/Elbrus1.jpg
+++ b/wallpappers/Elbrus1.jpg
--- a/wallpappers/Elbrus2.jpg
+++ b/wallpappers/Elbrus2.jpg
--- a/wallpappers/Elbrus3.jpg
+++ b/wallpappers/Elbrus3.jpg
--- a/wallpappers/MCST.webp
+++ b/wallpappers/MCST.webp
--- a/wallpappers/Rosatomflot.jpg
+++ b/wallpappers/Rosatomflot.jpg
--- a/wallpappers/Satelite.jpg
+++ b/wallpappers/Satelite.jpg
--- a/wallpappers/Space_Launch.jpg
+++ b/wallpappers/Space_Launch.jpg