APervov/drill-keycloak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance 'drill-luxe' Keycloak theme with updated login interface and styles

Browse Source 
- Redesigned login page layout to include a status pill and improved brand section.
- Updated text content for clarity and relevance, emphasizing features of Drill View.
- Enhanced CSS for better visual presentation, including new metrics section and responsive adjustments.
- Improved accessibility and user experience with refined spacing and element alignment.
This commit is contained in:
Первов Артем
2026-04-06 00:55:38 +03:00
parent f74bb56a89
commit cdd5526b17
2 changed files with 124 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
keycloak/themes/drill-luxe/login/login.ftl
View File

@@ -16,39 +16,60 @@
<body class="drill-login">
<main class="drill-login__shell">
<section class="drill-login__brand">
<div class="drill-login__brand-top">
<div class="drill-login__brand-mark">D</div>
<div class="drill-login__status-pill">Industrial Intelligence Suite</div>
</div>
<div class="drill-login__brand-copy">
<span class="drill-login__eyebrow">Greact Drill</span>
<h1>Премиальный доступ к Drill View</h1>
<span class="drill-login__eyebrow">Drill View</span>
<h1>Операционная среда для мониторинга, схем и инженерной аналитики.</h1>
<p>
Единая точка входа для операторов, инженеров и аналитиков. Безопасный вход в среду мониторинга,
документов и схем в фирменной бронзово-графитовой палитре Drill.
Drill View объединяет производственные данные, документы, визуальные схемы и оперативные события
в единое рабочее пространство. Интерфейс создан для быстрого чтения состояния объекта, уверенной
навигации по технологическим узлам и точной работы с критичными сигналами.
</p>
</div>
<div class="drill-login__metrics">
<div>
<strong>Live</strong>
<span>Мониторинг состояния оборудования и технологических цепочек в реальном времени.</span>
</div>
<div>
<strong>Visual</strong>
<span>Наглядные схемы, связи и контекст объекта в одном визуальном контуре.</span>
</div>
<div>
<strong>Evidence</strong>
<span>Документы, медиа и инженерные материалы рядом с событиями и сигналами.</span>
</div>
</div>
<div class="drill-login__feature-grid">
<article>
<span>01</span>
<strong>Единая сессия</strong>
<p>Один realm Keycloak для Drill View, Cloud API и встроенных приложений.</p>
<strong>Обзор объекта в реальном времени</strong>
<p>Быстрый доступ к актуальному состоянию узлов, компонентов и ключевых производственных индикаторов.</p>
</article>
<article>
<span>02</span>
<strong>Защищённый доступ</strong>
<p>Токены проверяются на backend, а браузер получает только актуальную сессию.</p>
<strong>Схемы и связи без лишнего шума</strong>
<p>Понимание силовых, сигнальных и аварийных контуров через чистую визуальную модель.</p>
</article>
<article>
<span>03</span>
<strong>Фирменный стиль</strong>
<p>Визуальная система синхронизирована с интерфейсом Drill View.</p>
<strong>Единая среда для команды</strong>
<p>Пространство для операторов, инженеров, аналитиков и специалистов сопровождения.</p>
</article>
</div>
</section>
<section class="drill-login__panel">
<div class="drill-login__panel-head">
<span class="drill-login__eyebrow">Secure Sign In</span>
<h2>Вход в систему</h2>
<p>Используйте корпоративную учётную запись Keycloak.</p>
<span class="drill-login__eyebrow">Private Access</span>
<h2>Вход в рабочее пространство</h2>
<p>Используйте корпоративную учетную запись для доступа к среде Drill View.</p>
</div>
<#if message?has_content>
@@ -75,7 +96,7 @@
<div class="drill-login__field-row">
<label for="password">Пароль</label>
<#if realm.resetPasswordAllowed>
<a href="${url.loginResetCredentialsUrl}">Не удаётся войти?</a>
<a href="${url.loginResetCredentialsUrl}">Не удается войти?</a>
</#if>
</div>
<input
@@ -95,13 +116,13 @@
</#if>
<button class="drill-login__submit" name="login" id="kc-login" type="submit">
<span>Войти в Drill View</span>
<span>Открыть Drill View</span>
</button>
</form>
<div class="drill-login__footer">
<span>Realm: ${realm.name}</span>
<span>Client: ${client.clientId!'drill-view-frontend'}</span>
<span>Инженерная визуализация и контекст объекта</span>
<span>Protected session</span>
</div>
</section>
</main>

96
keycloak/themes/drill-luxe/login/resources/css/drill-luxe.css
View File

@@ -21,6 +21,7 @@ body.drill-login {
margin: 0;
min-height: 100vh;
font-family:
"Segoe UI Variable Display",
"Inter Variable",
"Inter",
-apple-system,
@@ -29,15 +30,16 @@ body.drill-login {
sans-serif;
color: var(--drill-text-primary);
background:
radial-gradient(circle at top left, rgba(201, 122, 61, 0.22), transparent 28%),
radial-gradient(circle at bottom right, rgba(139, 90, 43, 0.26), transparent 30%),
linear-gradient(135deg, #090b0f 0%, #0f1115 45%, #181b22 100%);
radial-gradient(circle at 12% 14%, rgba(201, 122, 61, 0.24), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(232, 201, 160, 0.08), transparent 20%),
radial-gradient(circle at 78% 84%, rgba(139, 90, 43, 0.28), transparent 28%),
linear-gradient(135deg, #08090d 0%, #0d1016 38%, #171b24 100%);
}
.drill-login__shell {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(380px, 520px);
grid-template-columns: minmax(0, 1.2fr) minmax(390px, 520px);
gap: 28px;
align-items: stretch;
padding: 28px;
@@ -61,6 +63,7 @@ body.drill-login {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
}
.drill-login__brand::before,
@@ -74,6 +77,26 @@ body.drill-login {
pointer-events: none;
}
.drill-login__brand::after {
content: "";
position: absolute;
inset: auto -12% -20% auto;
width: 340px;
height: 340px;
border-radius: 50%;
background:
radial-gradient(circle, rgba(201, 122, 61, 0.16) 0%, rgba(201, 122, 61, 0.04) 42%, transparent 70%);
filter: blur(14px);
pointer-events: none;
}
.drill-login__brand-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.drill-login__brand-mark {
width: 72px;
height: 72px;
@@ -89,8 +112,24 @@ body.drill-login {
letter-spacing: 0.08em;
}
.drill-login__status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(212, 165, 116, 0.22);
background: rgba(255, 255, 255, 0.04);
color: var(--drill-accent-tertiary);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
white-space: nowrap;
}
.drill-login__brand-copy {
max-width: 640px;
max-width: 680px;
}
.drill-login__eyebrow {
@@ -111,15 +150,43 @@ body.drill-login {
}
.drill-login__brand h1 {
max-width: 720px;
font-size: clamp(3rem, 6vw, 5.6rem);
max-width: 760px;
font-size: clamp(3rem, 6vw, 5.8rem);
}
.drill-login__brand p,
.drill-login__panel p,
.drill-login__feature-grid p {
color: var(--drill-text-secondary);
line-height: 1.65;
line-height: 1.68;
}
.drill-login__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.drill-login__metrics div {
padding: 18px 20px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(212, 165, 116, 0.12);
}
.drill-login__metrics strong {
display: block;
margin-bottom: 10px;
color: var(--drill-accent-tertiary);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.drill-login__metrics span {
display: block;
color: var(--drill-text-secondary);
line-height: 1.55;
}
.drill-login__feature-grid {
@@ -129,9 +196,9 @@ body.drill-login {
}
.drill-login__feature-grid article {
padding: 20px;
padding: 22px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.03);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(212, 165, 116, 0.12);
}
@@ -218,7 +285,7 @@ body.drill-login {
width: 100%;
border: 1px solid rgba(212, 165, 116, 0.16);
border-radius: 18px;
background: rgba(255, 255, 255, 0.03);
background: rgba(255, 255, 255, 0.035);
color: var(--drill-text-primary);
padding: 16px 18px;
font: inherit;
@@ -277,6 +344,7 @@ body.drill-login {
gap: 12px;
color: var(--drill-text-muted);
font-size: 0.82rem;
letter-spacing: 0.02em;
}
.drill-login__footer a {
@@ -293,6 +361,7 @@ body.drill-login {
min-height: 420px;
}
.drill-login__metrics,
.drill-login__feature-grid {
grid-template-columns: 1fr;
}
@@ -310,8 +379,13 @@ body.drill-login {
}
.drill-login__field-row,
.drill-login__brand-top,
.drill-login__footer {
flex-direction: column;
align-items: flex-start;
}
.drill-login__status-pill {
white-space: normal;
}
}