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

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

@@ -21,6 +21,7 @@ body.drill-login {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
font-family: font-family:
"Segoe UI Variable Display",
"Inter Variable", "Inter Variable",
"Inter", "Inter",
-apple-system, -apple-system,
@@ -29,15 +30,16 @@ body.drill-login {
sans-serif; sans-serif;
color: var(--drill-text-primary); color: var(--drill-text-primary);
background: background:
radial-gradient(circle at top left, rgba(201, 122, 61, 0.22), transparent 28%), radial-gradient(circle at 12% 14%, rgba(201, 122, 61, 0.24), transparent 24%),
radial-gradient(circle at bottom right, rgba(139, 90, 43, 0.26), transparent 30%), radial-gradient(circle at 82% 18%, rgba(232, 201, 160, 0.08), transparent 20%),
linear-gradient(135deg, #090b0f 0%, #0f1115 45%, #181b22 100%); 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 { .drill-login__shell {
min-height: 100vh; min-height: 100vh;
display: grid; display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(380px, 520px); grid-template-columns: minmax(0, 1.2fr) minmax(390px, 520px);
gap: 28px; gap: 28px;
align-items: stretch; align-items: stretch;
padding: 28px; padding: 28px;
@@ -61,6 +63,7 @@ body.drill-login {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
gap: 28px;
} }
.drill-login__brand::before, .drill-login__brand::before,
@@ -74,6 +77,26 @@ body.drill-login {
pointer-events: none; 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 { .drill-login__brand-mark {
width: 72px; width: 72px;
height: 72px; height: 72px;
@@ -89,8 +112,24 @@ body.drill-login {
letter-spacing: 0.08em; 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 { .drill-login__brand-copy {
max-width: 640px; max-width: 680px;
} }
.drill-login__eyebrow { .drill-login__eyebrow {
@@ -111,15 +150,43 @@ body.drill-login {
} }
.drill-login__brand h1 { .drill-login__brand h1 {
max-width: 720px; max-width: 760px;
font-size: clamp(3rem, 6vw, 5.6rem); font-size: clamp(3rem, 6vw, 5.8rem);
} }
.drill-login__brand p, .drill-login__brand p,
.drill-login__panel p, .drill-login__panel p,
.drill-login__feature-grid p { .drill-login__feature-grid p {
color: var(--drill-text-secondary); 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 { .drill-login__feature-grid {
@@ -129,9 +196,9 @@ body.drill-login {
} }
.drill-login__feature-grid article { .drill-login__feature-grid article {
padding: 20px; padding: 22px;
border-radius: 24px; 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); border: 1px solid rgba(212, 165, 116, 0.12);
} }
@@ -218,7 +285,7 @@ body.drill-login {
width: 100%; width: 100%;
border: 1px solid rgba(212, 165, 116, 0.16); border: 1px solid rgba(212, 165, 116, 0.16);
border-radius: 18px; border-radius: 18px;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.035);
color: var(--drill-text-primary); color: var(--drill-text-primary);
padding: 16px 18px; padding: 16px 18px;
font: inherit; font: inherit;
@@ -277,6 +344,7 @@ body.drill-login {
gap: 12px; gap: 12px;
color: var(--drill-text-muted); color: var(--drill-text-muted);
font-size: 0.82rem; font-size: 0.82rem;
letter-spacing: 0.02em;
} }
.drill-login__footer a { .drill-login__footer a {
@@ -293,6 +361,7 @@ body.drill-login {
min-height: 420px; min-height: 420px;
} }
.drill-login__metrics,
.drill-login__feature-grid { .drill-login__feature-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@@ -310,8 +379,13 @@ body.drill-login {
} }
.drill-login__field-row, .drill-login__field-row,
.drill-login__brand-top,
.drill-login__footer { .drill-login__footer {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.drill-login__status-pill {
white-space: normal;
}
} }