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

57
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-mark">D</div>
<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>