273 lines
8.6 KiB
Django/Jinja
273 lines
8.6 KiB
Django/Jinja
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Вход в Confluence</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||
background-color: #f4f5f7;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
margin: 0;
|
||
}
|
||
|
||
.login-container {
|
||
background-color: white;
|
||
padding: 40px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||
width: 350px;
|
||
text-align: center;
|
||
}
|
||
|
||
.logo {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.logo img {
|
||
width: 120px;
|
||
}
|
||
|
||
h2 {
|
||
margin-bottom: 20px;
|
||
font-size: 24px;
|
||
color: #0052cc;
|
||
}
|
||
|
||
input[type="text"], input[type="password"] {
|
||
width: 100%;
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
border: 1px solid #dfe1e6;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.error {
|
||
border-color: red;
|
||
}
|
||
|
||
.error-message {
|
||
color: red;
|
||
font-size: 14px;
|
||
display: none;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
button {
|
||
width: 100%;
|
||
padding: 10px;
|
||
background-color: #0052cc;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: #0747a6;
|
||
}
|
||
|
||
.help-links {
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.help-links a {
|
||
color: #0052cc;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.help-links a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
/* Стили для модального окна */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgba(0,0,0,0.4);
|
||
padding-top: 60px;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: white;
|
||
margin: 5% auto;
|
||
padding: 20px;
|
||
border: 1px solid #888;
|
||
width: 80%;
|
||
max-width: 400px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.close {
|
||
color: #aaa;
|
||
float: right;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close:hover,
|
||
.close:focus {
|
||
color: black;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="login-container">
|
||
<div class="logo">
|
||
<img src="https://cdn.icon-icons.com/icons2/2429/PNG/512/confluence_logo_icon_147305.png" alt="Confluence">
|
||
</div>
|
||
<h2 id="login-title">Войти в Confluence</h2>
|
||
<form id="login-form">
|
||
<input type="text" id="username" name="username" placeholder="Адрес электронной почты">
|
||
<input type="password" id="password" name="password" placeholder="Введите пароль">
|
||
<button type="submit" id="login-button">Войти</button>
|
||
</form>
|
||
<div id="error-message" class="error-message">Неправильное имя пользователя или пароль.</div>
|
||
<div class="help-links">
|
||
<a href="#" id="forgot-link">Не удается войти?</a> • <a href="#" id="create-link">Создать аккаунт</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="myModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close">×</span>
|
||
<p id="modal-text">Для создания аккаунта обратитесь к администратору.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function setLanguage(lang) {
|
||
const elements = {
|
||
'ru': {
|
||
loginTitle: 'Войти в Confluence',
|
||
usernamePlaceholder: 'Адрес электронной почты',
|
||
passwordPlaceholder: 'Введите пароль',
|
||
loginButton: 'Войти',
|
||
forgotLink: 'Не удается войти?',
|
||
createLink: 'Создать аккаунт',
|
||
createAccountText: 'Для создания аккаунта обратитесь к администратору.',
|
||
forgotPasswordText: 'Для восстановления доступа обратитесь к администратору.',
|
||
errorMessage: 'Неправильное имя пользователя или пароль.'
|
||
},
|
||
'en': {
|
||
loginTitle: 'Login to Confluence',
|
||
usernamePlaceholder: 'Email address',
|
||
passwordPlaceholder: 'Enter password',
|
||
loginButton: 'Login',
|
||
forgotLink: 'Can\'t log in?',
|
||
createLink: 'Create an account',
|
||
createAccountText: 'To create an account, please contact your administrator.',
|
||
forgotPasswordText: 'To recover access, please contact your administrator.',
|
||
errorMessage: 'Incorrect username or password.'
|
||
}
|
||
};
|
||
|
||
document.getElementById('login-title').innerText = elements[lang].loginTitle;
|
||
document.getElementById('username').placeholder = elements[lang].usernamePlaceholder;
|
||
document.getElementById('password').placeholder = elements[lang].passwordPlaceholder;
|
||
document.getElementById('login-button').innerText = elements[lang].loginButton;
|
||
document.getElementById('forgot-link').innerText = elements[lang].forgotLink;
|
||
document.getElementById('create-link').innerText = elements[lang].createLink;
|
||
|
||
// Устанавливаем тексты для модальных окон и сообщений об ошибках
|
||
document.getElementById('create-link').dataset.modalText = elements[lang].createAccountText;
|
||
document.getElementById('forgot-link').dataset.modalText = elements[lang].forgotPasswordText;
|
||
document.getElementById('error-message').innerText = elements[lang].errorMessage;
|
||
}
|
||
|
||
function detectLanguage() {
|
||
const userLang = navigator.language || navigator.userLanguage;
|
||
if (userLang.startsWith('ru')) {
|
||
setLanguage('ru');
|
||
} else {
|
||
setLanguage('en');
|
||
}
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', detectLanguage);
|
||
|
||
var modal = document.getElementById("myModal");
|
||
|
||
var span = document.getElementsByClassName("close")[0];
|
||
|
||
function openModal(text) {
|
||
document.getElementById('modal-text').innerText = text;
|
||
modal.style.display = "block";
|
||
}
|
||
|
||
document.getElementById("create-link").onclick = function(event) {
|
||
event.preventDefault();
|
||
openModal(this.dataset.modalText);
|
||
}
|
||
|
||
document.getElementById("forgot-link").onclick = function(event) {
|
||
event.preventDefault();
|
||
openModal(this.dataset.modalText);
|
||
}
|
||
|
||
span.onclick = function() {
|
||
modal.style.display = "none";
|
||
}
|
||
|
||
window.onclick = function(event) {
|
||
if (event.target == modal) {
|
||
modal.style.display = "none";
|
||
}
|
||
}
|
||
|
||
document.getElementById('login-form').onsubmit = function(event) {
|
||
event.preventDefault();
|
||
var username = document.getElementById('username');
|
||
var password = document.getElementById('password');
|
||
var errorMessage = document.getElementById('error-message');
|
||
|
||
username.classList.remove('error');
|
||
password.classList.remove('error');
|
||
errorMessage.style.display = 'none';
|
||
|
||
var hasError = false;
|
||
if (username.value.trim() === '') {
|
||
username.classList.add('error');
|
||
hasError = true;
|
||
}
|
||
if (password.value.trim() === '') {
|
||
password.classList.add('error');
|
||
hasError = true;
|
||
}
|
||
|
||
if (hasError) {
|
||
return;
|
||
}
|
||
|
||
errorMessage.style.display = 'block';
|
||
};
|
||
|
||
window.onclick = function(event) {
|
||
if (event.target == modal) {
|
||
modal.style.display = "none";
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|