chore: add theming for welcome page
This commit is contained in:
parent
4c9a315251
commit
2a9af0bfb1
GPG Key ID:
03624C433676E465
|
|
@ -0,0 +1,135 @@
|
||||||
|
<!--
|
||||||
|
~ JBoss, Home of Professional Open Source.
|
||||||
|
~ Copyright (c) 2011, Red Hat, Inc., and individual contributors
|
||||||
|
~ as indicated by the @author tags. See the copyright.txt file in the
|
||||||
|
~ distribution for a full listing of individual contributors.
|
||||||
|
~
|
||||||
|
~ This is free software; you can redistribute it and/or modify it
|
||||||
|
~ under the terms of the GNU Lesser General Public License as
|
||||||
|
~ published by the Free Software Foundation; either version 2.1 of
|
||||||
|
~ the License, or (at your option) any later version.
|
||||||
|
~
|
||||||
|
~ This software is distributed in the hope that it will be useful,
|
||||||
|
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
~ Lesser General Public License for more details.
|
||||||
|
~
|
||||||
|
~ You should have received a copy of the GNU Lesser General Public
|
||||||
|
~ License along with this software; if not, write to the Free
|
||||||
|
~ Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
|
||||||
|
~ 02110-1301 USA, or see the FSF site: http://www.fsf.org.
|
||||||
|
-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Welcome to Werkraum Karlsruhe SSO</title>
|
||||||
|
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<meta name="robots" content="noindex, nofollow">
|
||||||
|
|
||||||
|
<link rel="shortcut icon" href="welcome-content/favicon.png" />
|
||||||
|
|
||||||
|
<#if properties.stylesCommon?has_content>
|
||||||
|
<#list properties.stylesCommon?split(' ') as style>
|
||||||
|
<link href="${resourcesCommonPath}/${style}" rel="stylesheet" />
|
||||||
|
</#list>
|
||||||
|
</#if>
|
||||||
|
<#if properties.styles?has_content>
|
||||||
|
<#list properties.styles?split(' ') as style>
|
||||||
|
<link href="${resourcesPath}/${style}" rel="stylesheet" />
|
||||||
|
</#list>
|
||||||
|
</#if>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
|
||||||
|
<div class="welcome-header">
|
||||||
|
<img src="${resourcesPath}/logo.png" alt="${productName}" border="0" />
|
||||||
|
<h1>Welcome to <strong>Werkraum Karlsruhe SSO</strong></h1>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<#if adminConsoleEnabled>
|
||||||
|
<div class="col-xs-12 col-sm-4">
|
||||||
|
<div class="card-pf h-l">
|
||||||
|
<#if successMessage?has_content>
|
||||||
|
<p class="alert success">${successMessage}</p>
|
||||||
|
<#elseif errorMessage?has_content>
|
||||||
|
<p class="alert error">${errorMessage}</p>
|
||||||
|
<h3><img src="welcome-content/user.png">Administration Console</h3>
|
||||||
|
<#elseif bootstrap>
|
||||||
|
<#if localUser>
|
||||||
|
<h3><img src="welcome-content/user.png">Administration Console</h3>
|
||||||
|
<p>Please create an initial admin user to get started.</p>
|
||||||
|
<#else>
|
||||||
|
<p class="welcome-message">
|
||||||
|
<img src="welcome-content/alert.png">You need local access to create the initial admin user. <br><br>Open <a href="${localAdminUrl}">${localAdminUrl}</a>
|
||||||
|
<br>${adminUserCreationMessage}.
|
||||||
|
</p>
|
||||||
|
</#if>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#if bootstrap && localUser>
|
||||||
|
<form method="post" class="welcome-form">
|
||||||
|
<p>
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input id="username" name="username" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input id="password" name="password" type="password" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="passwordConfirmation">Password confirmation</label>
|
||||||
|
<input id="passwordConfirmation" name="passwordConfirmation" type="password" />
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<input id="stateChecker" name="stateChecker" type="hidden" value="${stateChecker}" />
|
||||||
|
|
||||||
|
<button id="create-button" type="submit" class="btn btn-primary">Create</button>
|
||||||
|
</form>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<div class="welcome-primary-link">
|
||||||
|
<h3><a href="https://auth.werkraum-karlsruhe.org/admin/werkraum/console"><img src="welcome-content/user.png">Administration Console <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||||
|
<div class="description">
|
||||||
|
Centrally manage all aspects of the ${productName} server
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</#if> <#-- adminConsoleEnabled -->
|
||||||
|
<div class="col-xs-12 col-sm-4">
|
||||||
|
<div class="card-pf h-l">
|
||||||
|
<h3><a href="https://auth.werkraum-karlsruhe.org/realms/werkraum/account"><img class="doc-img" src="welcome-content/admin-console.png">Account Console <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||||
|
<div class="description">
|
||||||
|
|
||||||
|
User profile, Two-Factor sign in and sessions
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-4">
|
||||||
|
<#if properties.displayCommunityLinks = "true">
|
||||||
|
<div class="card-pf h-m">
|
||||||
|
<h3><a href="https://nextcloud.werkraum-karlsruhe.org"><img src="welcome-content/nextcloud.png">WRK Nextcloud <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-pf h-m">
|
||||||
|
<h3><a href="https://element.werkraum-karlsruhe.org"><img src="welcome-content/element.png">WRK Element web matrix client <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||||
|
</div>
|
||||||
|
<div class="card-pf h-m">
|
||||||
|
<h3><a href="https://pass.werkraum-karlsruhe.org"><img src="welcome-content/bitwarden.png">WRK Password manager <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
|
||||||
|
</div>
|
||||||
|
</#if>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 712 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,149 @@
|
||||||
|
body {
|
||||||
|
background: #111 url(../bg.jpg) no-repeat center bottom fixed;
|
||||||
|
background-size: cover;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.welcome-header {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
margin-left: -10px;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
.welcome-header img {
|
||||||
|
width: 150px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.welcome-header h1 {
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
.welcome-header h1 strong {
|
||||||
|
font-weight: 800 !important;
|
||||||
|
}
|
||||||
|
.welcome-message {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.h-l {
|
||||||
|
min-height: 370px;
|
||||||
|
padding: 10px 20px 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.h-l h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.h-m {
|
||||||
|
height: 110px;
|
||||||
|
padding-top: 23px;
|
||||||
|
}
|
||||||
|
.card-pf img {
|
||||||
|
width: 22px;
|
||||||
|
margin-right: 10px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
img.doc-img {
|
||||||
|
width: auto;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
font-size: 16px;
|
||||||
|
vertical-align: baseline;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
h3 a:link,
|
||||||
|
h3 a:visited {
|
||||||
|
color: #ddd;
|
||||||
|
font-weight: 550;
|
||||||
|
}
|
||||||
|
h3 a:hover,
|
||||||
|
h3 a:hover .link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #00659c;
|
||||||
|
}
|
||||||
|
.h-l h3 a img {
|
||||||
|
height: 30px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-pf {
|
||||||
|
border-top: 1px solid rgba(3, 3, 3, 0.1);
|
||||||
|
box-shadow: 0 1px 1px rgba(3, 3, 3, 0.275);
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-form label,
|
||||||
|
.welcome-form input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome-form label {
|
||||||
|
color: #828486;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
.welcome-form input {
|
||||||
|
border: 0;
|
||||||
|
border-bottom: solid 1px #cbcbcb;
|
||||||
|
}
|
||||||
|
.welcome-form input:focus {
|
||||||
|
border-bottom: solid 1px #5e99c6;
|
||||||
|
outline-width: 0;
|
||||||
|
}
|
||||||
|
.welcome-form button {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.error {
|
||||||
|
color: #c00;
|
||||||
|
border-color: #c00;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.success {
|
||||||
|
color: #3f9c35;
|
||||||
|
border-color: #3f9c35;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.welcome-form + .welcome-primary-link,
|
||||||
|
.welcome-message + .welcome-primary-link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer img {
|
||||||
|
float: right;
|
||||||
|
width: 150px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.welcome-header {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.welcome-header img {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.h-l,
|
||||||
|
.h-m {
|
||||||
|
height: auto;
|
||||||
|
min-height: auto;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.h-l img {
|
||||||
|
display: inline;
|
||||||
|
margin-bottom: auto;
|
||||||
|
}
|
||||||
|
.description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.footer img {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
styles=css/welcome.css
|
||||||
|
import=common/keycloak
|
||||||
|
|
||||||
|
stylesCommon=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css
|
||||||
|
|
||||||
|
productName=id.finally.coffee
|
||||||
|
documentationUrl=https://www.keycloak.org/documentation.html
|
||||||
|
displayCommunityLinks=true
|
||||||
Loading…
Reference in New Issue