s2i2s-theme/welcome/index.ftl

80 lines
3.0 KiB
Plaintext

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
<title>Welcome to ${properties.productName}</title>
<link rel="shortcut icon" href="${resourcesPath}/img/favicon.ico">
<#if properties.darkMode?boolean>
<script type="module" async blocking="render">
const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
updateDarkMode(mediaQuery.matches);
mediaQuery.addEventListener("change", (event) => updateDarkMode(event.matches));
function updateDarkMode(isEnabled) {
const { classList } = document.documentElement;
if (isEnabled) {
classList.add(DARK_MODE_CLASS);
} else {
classList.remove(DARK_MODE_CLASS);
}
}
</script>
</#if>
<#if properties.stylesCommon?has_content>
<#list properties.stylesCommon?split(' ') as style>
<link rel="stylesheet" href="${resourcesCommonPath}/${style}">
</#list>
</#if>
<#if properties.styles?has_content>
<#list properties.styles?split(' ') as style>
<link rel="stylesheet" href="${resourcesPath}/${style}">
</#list>
</#if>
</head>
<body data-page-id="welcome">
<div class="pf-v5-c-background-image" style="--pf-v5-c-background-image--BackgroundImage: url(${baseUrl}${resourcesPath}/img/isti-bg.png)"></div>
<div class="pf-v5-c-login">
<div class="pf-v5-c-login__container">
<header class="pf-v5-c-login__header">
<div class="pf-v5-c-brand">
<img src="${resourcesPath}/img/logo-ISTI.svg" alt="${properties.productName} Logo" class="kc-brand">
</div>
</header>
<!-- NEW -->
<div class="pf-v5-l-grid__item pf-m-12-col">
<div class="welcome-header">
<h1>Welcome to <strong>ISTI-CNR authentication service</strong></h1>
</div>
</div>
<ul class="pf-v5-l-grid pf-m-all-6-col-on-sm">
<li class="pf-v5-l-grid__item">
<div class="card-pf h-l">
<h3><a href="${properties.linkIPA}" target="_blank"><img class="doc-img" src="${resourcesPath}/img/link-toipa.png"> ISTI Account Manager </a></h3>
<div class="description">
Manage ISTI Credentials
</div>
</div>
</li>
<li class="pf-v5-l-grid__item">
<div class="card-pf h-l">
<h3><a href="${adminUrl}" target="_blank"><img class="doc-img" src="${resourcesPath}/img/user.png">Account Access</a></h3>
<div class="description">
Manage your sessions and your 2FA settings.
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- <div class='footer-admin'>
<a href="${adminUrl}"><img src="${resourcesPath}/img/link-toadmin.png" alt="admin console"></a>
</div>-->
</body>
</html>