After Width: | Height: | Size: 574 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 259 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.4 KiB |
@ -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> |
@ -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) |
@ -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; |
||||||
|
} |
||||||
|
|
After Width: | Height: | Size: 53 KiB |
After Width: | Height: | Size: 919 KiB |
After Width: | Height: | Size: 222 KiB |
After Width: | Height: | Size: 235 KiB |
After Width: | Height: | Size: 249 KiB |
After Width: | Height: | Size: 419 KiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 96 KiB |
After Width: | Height: | Size: 1.0 MiB |
After Width: | Height: | Size: 209 KiB |
After Width: | Height: | Size: 275 KiB |