<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<!-- Favicons -->
<link rel="shortcut icon" type="image/x-icon" href="<%= getPrivateUrl('favicon.ico') %>">
<link rel="icon" type="image/svg+xml" href="<%= getPrivateUrl('favicon.svg') %>">
<link rel="apple-touch-icon" sizes="180x180" href="<%= getPrivateUrl('apple-touch-icon.png') %>">
<link rel="icon" type="image/png" sizes="32x32" href="<%= getPrivateUrl('favicon-32x32.png') %>">
<link rel="icon" type="image/png" sizes="16x16" href="<%= getPrivateUrl('favicon-16x16.png') %>">
<link rel="manifest" href="<%= getUrl(name + '.webmanifest') %>">
<link rel="mask-icon" href="<%= getPrivateUrl('safari-pinned-tab.svg') %>" color="#3775c1">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<!-- Loading spinner -->
<script type="module">
import {Spinner} from '<%= getPrivateUrl('spinner.js') %>';
customElements.define('dbp-loading-spinner', Spinner);
</script>
<!-- App bundles-->
<script type="module" src="<%= getUrl(name + '.js') %>"></script>
<!-- Prevent Chrome/Edge from suggesting to translate the page -->
<meta name="google" content="notranslate">
<!-- Font related CSS -->
<style>
@import "<%= getPrivateUrl('fonts/nunito-sans/300.css') %>";
@import "<%= getPrivateUrl('fonts/nunito-sans/300-italic.css') %>";
@import "<%= getPrivateUrl('fonts/nunito-sans/600.css') %>";
@import "<%= getPrivateUrl('fonts/nunito-sans/600-italic.css') %>";
body {
font-family: 'Nunito Sans', 'Calibri', 'Arial', 'sans-serif';
line-height: 1.4em;
font-weight: 400;
margin: 0;
margin-top: 40px;
}
@media (max-width: 768px) {
body{
margin-top: 0px;
}
}
.light-theme{
--dbp-override-background: white;
--dbp-override-content: #222120;
--dbp-override-primary: #3775c1;
--dbp-override-on-primary-surface: white;
--dbp-override-secondary: #222120;
--dbp-override-secondary-surface: white;
--dbp-override-on-secondary-surface: #222120;
--dbp-override-secondary-surface-border-color: #222120;
--dbp-override-muted: #767676;
--dbp-override-accent: #9e1e4d;
--dbp-override-info: #38808a;
--dbp-override-success: #338555;
--dbp-override-success-surface: #5ec189;
--dbp-override-on-success-surface: #222120;
--dbp-override-warning: #bf8808;
--dbp-override-warning-surface: #f9cc66;
--dbp-override-on-warning-surface: #222120;
--dbp-override-danger: #cc3232;
--dbp-override-border: 1px solid #222120;
}
.dark-theme{
--dbp-override-background: #222120;
--dbp-override-content: white;
--dbp-override-primary: #3775c1;
--dbp-override-on-primary-surface: white;
--dbp-override-secondary: white;
--dbp-override-secondary-surface: #222120;
--dbp-override-on-secondary-surface: white;
--dbp-override-secondary-surface-border-color: white;
--dbp-override-muted: #767676;
--dbp-override-accent: #C13F6F;
--dbp-override-info: #38808a;
--dbp-override-success: #5ec189;
--dbp-override-success-surface: #5ec189;
--dbp-override-on-success-surface: #222120;
--dbp-override-warning: #f9cc66;
--dbp-override-danger: #cc3232;
--dbp-override-border: 1px solid white;
}
</style>
<!-- Preloading/Preconnecting -->
<link rel="preconnect" href="<%= entryPointURL %>">
<link rel="preconnect" href="<%= keyCloakBaseURL %>">
</head>
<body>
<<%= name %>
provider-root
lang="de"
lang-dir="<%= getPrivateUrl('translation-overrides/') %>"
entry-point-url="<%= entryPointURL %>"
nextcloud-auth-url="<%= nextcloudWebAppPasswordURL %>"
nextcloud-web-dav-url="<%= nextcloudWebDavURL %>"
nextcloud-name="<%= nextcloudName %>"
nextcloud-file-url="<%= nextcloudFileURL %>"
src="<%= getUrl(name + '.topic.metadata.json') %>"
lang="en"
base-path="<%= getUrl('') %>"
keycloak-config='{"url": "<%= keyCloakBaseURL %>", "realm": "<%= keyCloakRealm %>", "clientId": "<%= keyCloakClientId %>", "silentCheckSsoRedirectUri": "<%= getUrl('silent-check-sso.html') %>"}'
matomo-url="<%= matomoUrl %>" matomo-site-id="<%= matomoSiteId %>"
git-info='<%= buildInfo.info %>'
build-url='<%= buildInfo.url %>'
build-time='<%= buildInfo.time %>'
env='<%= buildInfo.env %>'
themes='[{"class": "light-theme", "icon": "sun", "name": "Light Mode"},
{"class": "dark-theme", "icon": "night", "name": "Dark Mode"}]'
html-overrides="global-override"
><dbp-loading-spinner></dbp-loading-spinner></<%= name %>>
<template id="global-override">
<template id="<%= name %>">
<div slot="name">
<style>
.logo-dark, .dbp-light-theme .logo-dark, .dbp-dark-theme .logo-light{
display: none;
}
.logo-light, .dbp-light-theme .logo-light, .dbp-dark-theme .logo-dark{
display: block;
}
.wrapper{
position: absolute;
left: 0px;
width: 100%;
}
.logo-section{
margin: auto;
max-width: 1400px;
}
</style>
<div class="wrapper">
<div class="logo-section">
<img class="logo-light" style="height: 100px" src="<%= getPrivateUrl('dbp_logo_on_white.svg') %>" alt="Digital Blueprint - A University toolbox logo">
<img class="logo-dark" style="height: 100px" src="<%= getPrivateUrl('dbp_logo_on_black.svg') %>" alt="Digital Blueprint - A University toolbox logo">
</div>
</div>
</div>
<div slot="title" style="margin-top:40px;">
<span>digital blueprint playground</span>
</div>
<div slot="logo" style="width: 100%;
position: absolute;
color: var(--dbp-override-background);
background: var(--dbp-override-primary);
left: 0px;
top: 0px;
text-align: center;
padding: 10px 0;">
<a style="color: var(--dbp-override-on-primary-surface);" href="mailto:hello@digital-blueprint.org" target="_blank">Get demo account now!</a> <a href="https://dbp-demo.tugraz.at/site/" style="color: var(--dbp-override-on-primary-surface);">Install this app!</a>
</div>
</template>
</template>
<!-- Error handling for too old browsers -->
<script src="<%= getPrivateUrl('browser-check.js') %>" defer></script>
<noscript>Diese Applikation benötigt Javascript / This application requires Javascript</noscript>
</body>
</html>