<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>LinkUp | Вход</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
:root {
/* Настройки для независимого перемещения формы вниз */
--login-top-offset: 100px; /* основной параметр — сколько опустить форму вниз */
--login-margin-top: 0px; /* дополнительный отступ сверху (можно 0 или положительное) */
/* другие глобальные настройки */
--gap-columns: 60px;
--promo-flex: 1.4;
--login-width: 460px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
background: linear-gradient(to bottom, #5a7fa5, #45688e);
color: #000;
min-height: 100vh;
background-attachment: fixed;
}
.wrapper {
max-width: 1280px;
margin: 0 auto;
padding: 100px 20px 80px;
}
.content {
display: flex;
gap: var(--gap-columns);
align-items: flex-start;
}
/* Левая часть — промо */
.promo-col {
flex: var(--promo-flex);
color: #fff;
}
.logo-wrapper {
margin-bottom: 40px;
}
.logo {
font-size: 68px;
font-weight: 900;
color: #fff;
text-shadow: 0 4px 12px rgba(0,0,0,0.4);
letter-spacing: -2px;
background: linear-gradient(90deg, #fff, #e0efff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.slogan {
font-size: 20px;
color: #d8e2ee;
margin-top: 8px;
font-weight: 300;
}
.promo-title {
font-size: 32px;
font-weight: 700;
margin: 40px 0 20px;
text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.promo-text {
font-size: 17px;
line-height: 1.5;
margin-bottom: 30px;
opacity: 0.95;
}
.promo-image {
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,0.45);
margin: 32px 0;
}
.promo-image img {
width: 100%;
height: auto;
display: block;
}
.features {
display: flex;
flex-direction: column;
gap: 28px;
margin-bottom: 40px;
}
.feature {
display: flex;
align-items: flex-start;
gap: 20px;
}
.feature svg {
width: 52px;
height: 52px;
fill: #fff;
opacity: 0.9;
flex-shrink: 0;
}
.feature-text {
font-size: 18px;
line-height: 1.45;
}
.reg-btn {
display: inline-block;
background: linear-gradient(135deg, #6aa84f, #5c9b44);
color: white;
padding: 14px 40px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 17px;
box-shadow: 0 6px 16px rgba(92,155,68,0.4);
transition: all 0.25s;
}
.reg-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(92,155,68,0.5);
}
/* Правая часть — форма (независимо двигается вниз) */
.login-col {
width: var(--login-width);
background: rgba(255, 255, 255, 0.97);
border-radius: 9px;
padding: 60px 48px 50px;
box-shadow: 0 14px 48px rgba(0,0,0,0.35);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.25);
/* Главные настройки перемещения формы */
margin-top: calc(var(--login-top-offset) + var(--login-margin-top));
/* или можно использовать position: relative; top: var(--login-top-offset); */
}
.login-title {
font-size: 26px;
margin-bottom: 32px;
color: #45688e;
font-weight: 700;
text-align: center;
}
.field {
margin-bottom: 22px;
}
input[type="text"],
input[type="password"] {
width: 100%;
height: 52px;
padding: 0 18px;
border: 1px solid #b0c4d8;
border-radius: 10px;
font-size: 16px;
background: #f8fbff;
transition: all 0.2s;
}
input:focus {
border-color: #597da3;
box-shadow: 0 0 0 3px rgba(89,125,163,0.28);
outline: none;
background: #fff;
}
input::placeholder {
color: #8a9bb5;
font-size: 16px;
}
.options {
display: flex;
justify-content: space-between;
align-items: center;
margin: 18px 0 32px;
font-size: 12px;
color: #45688e;
}
.remember {
display: flex;
align-items: center;
gap: 10px;
}
.forgot {
color: #2a5879;
text-decoration: none;
}
.forgot:hover {
text-decoration: underline;
}
.btn-login {
width: 100%;
height: 54px;
background: linear-gradient(135deg, #597da3, #45688e);
color: white;
border: none;
border-radius: 10px;
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s;
box-shadow: 0 6px 16px rgba(69,104,142,0.45);
}
.btn-login:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(69,104,142,0.6);
}
@media (max-width: 1200px) {
.content { flex-direction: column-reverse; gap: 70px; }
.login-col { width: 100%; max-width: 580px; margin: 60px auto 0 !important; }
.promo-col { text-align: center; }
}
/* Чекбокс кастомный */
.checkbox {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #45688e;
cursor: pointer;
user-select: none;
margin-bottom: 22px;
}
.checkbox input {
display: none;
}
.checkbox span {
width: 18px;
height: 18px;
border: 1.5px solid #597da3;
border-radius: 5px;
display: inline-block;
position: relative;
transition: all 0.2s;
}
.checkbox input:checked + span::after {
content: '';
position: absolute;
left: 4px;
top: 0px;
width: 6px;
height: 12px;
border: solid #597da3;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Кнопка Войти */
.btn-login {
width: 100%;
height: 50px;
background: linear-gradient(135deg, #597da3, #45688e);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 6px 16px rgba(69,104,142,0.45);
transition: all 0.25s ease;
}
.btn-login:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(69,104,142,0.6);
}
/* Ссылка Забыли пароль */
.forgot {
display: inline-block;
margin-top: 10px;
font-size: 13px;
color: #2a5879;
text-decoration: none;
transition: all 0.2s ease;
}
.forgot:hover {
text-decoration: underline;
}
/* Соцсети */
.social {
display: flex;
gap: 14px;
margin-top: 18px;
}
.social i {
font-size: 22px;
color: #45688e;
transition: all 0.25s ease;
cursor: pointer;
}
.social i:hover {
transform: scale(1.2);
color: #597da3;
}
/* Медиа */
@media (max-width: 1200px) {
.content { flex-direction: column-reverse; align-items: center; gap: 50px; }
.login-col { width: 100%; max-width: 480px; margin: 40px 0; }
}
.powered-by {
text-align: center;
font-size: 22px;
color: #8a9bb5;
margin: 4px 0 20px;
font-weight: 400;
transition: all 0.2s ease;
}
.powered-by a {
color: #597da3;
text-decoration: none;
font-weight: 500;
}
.powered-by a:hover {
text-decoration: underline;
color: #45688e;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<!-- Левая часть: промо + больше текста -->
<div class="promo-col">
<div class="logo-wrapper">
<div class="logo">LinkUp</div>
<div class="slogan">Общайтесь с друзьями, делитесь моментами, будьте на связи</div>
</div>
<div class="promo-title">Это место, где живут ваши воспоминания и настоящие связи</div>
<div class="promo-image">
</div>
<div class="features">
<div class="feature">
<svg viewBox="0 0 48 48">
<circle cx="24" cy="16" r="10"/>
<path d="M40 44v-4a16 16 0 0 0-32 0v4"/>
</svg>
<span class="feature-text">Общайтесь без границ: чаты, голосовые и видеозвонки, секретные сообщения</span>
</div>
<div class="feature">
<svg viewBox="0 0 48 48">
<rect x="8" y="8" width="32" height="32" rx="4"/>
<path d="M16 16h16M16 24h16M16 32h8"/>
</svg>
<span class="feature-text">Следите за жизнью друзей и близких в ленте новостей и историях</span>
</div>
<div class="feature">
<svg viewBox="0 0 48 48">
<path d="M24 8c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z"/>
<path d="M20 28l8-8"/>
</svg>
<span class="feature-text">Слушайте любимую музыку, смотрите миллионы видео и короткие клипы</span>
</div>
<div class="feature">
<svg viewBox="0 0 48 48">
<path d="M8 12h32v24H8z"/>
<circle cx="24" cy="24" r="6"/>
</svg>
<span class="feature-text">Вступайте в группы и сообщества — найдите людей по любому интересу</span>
</div>
</div>
<a href="/index/3" class="reg-btn">Создать аккаунт</a>
</div>
<!-- Правая часть: форма (опущена ниже) -->
<div class="login-col">
<div class="login-title">Вход в аккаунт</div>
<form class="login-form" method="post" action="/index/sub/">
<!-- ОБЯЗАТЕЛЬНО для uCoz -->
<input type="hidden" name="a" value="2">
<!-- ЛОГИН или EMAIL -->
<div class="field">
<input type="text" name="user" placeholder="Ваш логин" required>
</div>
<!-- ПАРОЛЬ -->
<div class="field">
<input type="password" name="password" placeholder="Пароль" required>
</div>
<!-- ЗАПОМНИТЬ -->
<label class="checkbox">
<input type="checkbox" name="rem">
<span> </span>
Я согласен с условиями сервиса
</label>
<!-- ВОЙТИ -->
<button type="submit" class="btn-login">Войти</button>
<!-- ЗАБЫЛ ПАРОЛЬ -->
<a href="javascript:void(0)" class="forgot" rel="nofollow"
onclick="new _uWnd(
'Prm',
'Восстановление пароля',
360,
160,
{ closeonesc:1 },
{ url:'/index/5' }
); return false;">
Забыли пароль?
</a>
<!-- СОЦСЕТИ (иконки, просто визуально) -->
<div class="social">
<i class="fa-brands fa-google"></i>
<i class="fa-brands fa-apple"></i>
<i class="fa-brands fa-telegram"></i>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!-- Блок Powered By -->
<div class="powered-by">
<span>$POWERED_BY$</span>
</div>
