<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Вход</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
}
body {
margin: 0;
background: #f2f3f5;
}
/* ===== PAGE ===== */
.login-page {
display: flex;
min-height: 100vh;
}
/* ===== LEFT ===== */
.login-box {
width: 420px;
background: #0f1419;
color: #fff;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.login-logo {
font-size: 22px;
font-weight: 700;
margin-bottom: 30px;
}
.login-logo span {
color: #4ba3f7;
}
.login-box h1 {
margin: 0 0 20px;
font-size: 20px;
font-weight: 600;
}
/* ===== FORM ===== */
.field {
margin-bottom: 14px;
}
.field input {
width: 100%;
height: 44px;
border-radius: 8px;
border: none;
background: #1c2229;
color: #fff;
padding: 0 14px;
font-size: 14px;
}
.field input::placeholder {
color: #8a8f98;
}
.checkbox {
display: flex;
align-items: center;
font-size: 13px;
color: #aeb4bc;
margin: 10px 0 20px;
cursor: pointer;
}
.checkbox input {
display: none;
}
.checkbox span {
width: 16px;
height: 16px;
border-radius: 4px;
background: #1c2229;
margin-right: 10px;
}
.checkbox input:checked + span {
background: #4ba3f7;
}
/* ===== BUTTONS ===== */
.btn-primary {
width: 100%;
height: 44px;
border-radius: 8px;
border: none;
background: #4ba3f7;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.btn-primary:hover {
background: #3c94e6;
}
.forgot {
display: block;
text-align: center;
margin: 14px 0;
color: #4ba3f7;
font-size: 13px;
text-decoration: none;
}
.divider {
text-align: center;
color: #8a8f98;
font-size: 13px;
margin: 10px 0;
}
.btn-outline {
width: 100%;
height: 44px;
border-radius: 8px;
background: transparent;
border: 1px solid #4ba3f7;
color: #4ba3f7;
cursor: pointer;
}
/* ===== SOCIAL ===== */
.social {
display: flex;
justify-content: center;
gap: 18px;
margin-top: 20px;
}
.social i {
font-size: 20px;
color: #8a8f98;
cursor: pointer;
}
.social i:hover {
color: #4ba3f7;
}
/* ===== RIGHT (REGULATED) ===== */
.login-preview {
flex: 1;
/* НАСТРОЙКИ */
--img-width: 98%; /* ширина картинки */
--img-height: 93%; /* высота картинки */
background-image: url("https://bro.usite.pro/610.png1");
background-repeat: no-repeat;
background-position: center;
background-size: var(--img-width) var(--img-height);
}
.login-preview img {
max-width: 100%;
}
/* ===== MOBILE ===== */
@media (max-width: 900px) {
.login-preview {
display: none;
}
.login-box {
width: 100%;
}
}
/* ===== uCoz powered ===== */
.u-powered {
position: fixed;
right: 16px;
bottom: 4px;
z-index: 9999;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 10px;
background: rgba(28, 34, 41, 0.85);
backdrop-filter: blur(6px);
font-size: 12px;
line-height: 1;
opacity: .7;
box-shadow: 0 6px 20px rgba(0,0,0,.25);
transition: opacity .2s ease, transform .2s ease;
}
.u-powered:hover {
opacity: 1;
transform: translateY(-2px);
}
/* ===== CONTENT ===== */
.u-powered a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #aeb4bc !important;
text-decoration: none;
white-space: nowrap;
}
.u-powered img {
height: 14px;
width: auto;
vertical-align: middle;
}
/* ===== LIGHT BACKGROUND FIX ===== */
body:not(.dark) .u-powered {
background: rgba(255, 255, 255, 0.75);
}
body:not(.dark) .u-powered a {
color: #5f6b7a !important;
}
</style>
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.0/css/all.css">
</head>
<body>
<div class="login-page">
<!-- Левая панель -->
<div class="login-box">
<div class="login-logo">
<span>BRO</span>Account
</div>
<h1>Войти в аккаунт</h1>
<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-primary">
Войти
</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="divider">или</div>
<!-- РЕГИСТРАЦИЯ -->
<button type="button"
class="btn-outline"
onclick="location.href='/index/3'">
Создать аккаунт
</button>
<!-- СОЦСЕТИ (просто иконки, не uCoz-логин) -->
<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>
<style>
body {
margin: 0;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
background: linear-gradient(135deg, #0a66ff, #0bbcd6);
display: flex;
align-items: center;
}
/* ===== LEFT BLOCK ===== */
.left {
padding: 90px 80px;
color: #fff;
max-width: 550px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
}
/* Заголовок */
.left h1 {
font-size: 56px;
font-weight: 700;
margin: 0 0 12px;
}
/* Подзаголовок */
.subtitle {
font-size: 22px;
opacity: 0.85;
margin-bottom: 60px;
}
/* Список */
.features {
display: flex;
flex-direction: column;
gap: 36px;
}
/* Пункт */
.feature {
display: flex;
align-items: center;
gap: 24px;
}
/* Иконка */
.icon {
width: 40px;
height: 40px;
flex-shrink: 0;
stroke: #fff;
stroke-width: 2;
opacity: 0.9;
}
/* Текст — ВАЖНО */
.feature-text {
max-width: 420px; /* длина строки */
font-size: 26px;
line-height: 1.25;
display: -webkit-box; /* максимум 2 строки */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
<div class="left">
<h1>Актуальное</h1>
<div class="subtitle">Будьте в курсе главных трендов</div>
<div class="features">
<div class="feature">
<svg class="icon" viewBox="0 0 24 24" fill="none">
<path d="M3 18v-6a9 9 0 0118 0v6"/>
<rect x="1" y="14" width="4" height="7" rx="2"/>
<rect x="19" y="14" width="4" height="7" rx="2"/>
</svg>
<span class="feature-text">
Следите за обсуждаемыми темами
</span>
</div>
<div class="feature">
<svg class="icon" viewBox="0 0 24 24" fill="none">
<circle cx="9" cy="7" r="4"/>
<circle cx="17" cy="7" r="3"/>
<path d="M2 21v-2a6 6 0 0112 0v2"/>
<path d="M14 21v-2a5 5 0 018 0v2"/>
</svg>
<span class="feature-text">
Читайте мнения экспертов и очевидцев
</span>
</div>
<div class="feature">
<svg class="icon" viewBox="0 0 24 24" fill="none">
<path d="M21 15a4 4 0 01-4 4H7l-4 4V7a4 4 0 014-4h10a4 4 0 014 4z"/>
</svg>
<span class="feature-text">
Комментируйте
</span>
</div>
</div>
</div>
<!-- Правая часть -->
<div class="login-preview">
<div class="tablet">
<div class="tablet-frame">
<div class="tablet-camera"></div>
<div class="tablet-screen">
<div class="screen-content">
<h1>BRO Tablet</h1>
<p>Premium Interface Concept</p>
<div class="icons">
<span>⚙</span>
<span>📁</span>
<span>🌐</span>
<span>🔔</span>
</div>
</div>
</div>
<div class="tablet-button"></div>
<div class="tablet-brand">SAMSUNG</div>
</div>
</div>
<style>
:root {
--tablet-shift-x: 150px; /* вправо */
--tablet-shift-y: 110px; /* вниз */
}
body {
display: flex;
height: 100vh;
font-family: "Segoe UI", system-ui, sans-serif;
/* смещение планшета */
justify-content: flex-start;
align-items: flex-start;
}
/* ОБЩИЙ КОНТЕЙНЕР */
.tablet {
padding: 3px;
border-radius: 28px;
background: linear-gradient(
135deg,
#f5f5f5,
#bdbdbd,
#8e8e8e,
#e6e6e6
);
box-shadow:
0 0 0 2px #999,
0 30px 80px rgba(0,0,0,.8);
/* управление положением */
transform: translate(var(--tablet-shift-x), var(--tablet-shift-y));
}
/* КОРПУС */
.tablet-frame {
width: 565px;
height: 720px;
background: linear-gradient(#0b0b0b, #000);
border-radius: 20px;
position: relative;
padding: 26px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08);
}
/* КАМЕРА */
.tablet-camera {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: radial-gradient(circle, #555, #000);
border-radius: 50%;
box-shadow: 0 0 4px #000;
}
/* ЭКРАН */
.tablet-screen {
width: 100%;
height: 100%;
background:
linear-gradient(145deg, #0e0e0e, #1a1a1a);
border-radius: 14px;
position: relative;
overflow: hidden;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.06),
inset 0 0 40px rgba(0,0,0,.9);
}
/* БЛИК СТЕКЛА */
.tablet-screen::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
rgba(255,255,255,.12),
transparent 40%
);
}
/* КОНТЕНТ */
.screen-content {
position: relative;
z-index: 2;
color: #e5e5e5;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
letter-spacing: 1px;
}
.screen-content h1 {
font-size: 36px;
margin: 0;
color: #f0f0f0;
text-shadow: 0 0 12px rgba(255,255,255,.25);
}
.screen-content p {
margin-top: 10px;
font-size: 15px;
opacity: .75;
}
/* ИКОНКИ */
.icons {
display: flex;
gap: 22px;
margin-top: 40px;
}
.icons span {
width: 56px;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(#222, #111);
border-radius: 14px;
font-size: 24px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
0 8px 20px rgba(0,0,0,.6);
}
/* НАДПИСЬ SAMSUNG */
.tablet-brand {
position: absolute;
right: 240px;
top: 97%;
transform: translateY(-0%);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
font-family: "Segoe UI", system-ui, sans-serif;
/* БЕЛАЯ НАДПИСЬ */
color: #ffffff;
text-shadow:
0 0 4px rgba(255,255,255,.6),
0 1px 2px rgba(0,0,0,.6);
text-shadow:
0 1px 1px rgba(0,0,0,.5),
0 -1px 1px rgba(255,255,255,.2);
user-select: none;
</style>
</div>
<div class="u-powered">
$POWERED_BY$
</div>
</div>
</body>
</html>
