mirror of
https://github.com/FAUSheppy/flask-json-dream-website
synced 2025-12-06 08:11:35 +01:00
144 lines
4.9 KiB
HTML
144 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
{% include 'head.html' %}
|
|
|
|
{% if conf["TWITCH_CHANNEL"] %}
|
|
<!-- Load the Twitch embed script -->
|
|
<!-- <script src="https://embed.twitch.tv/embed/v1.js"></script> -->
|
|
<script defer src="https://sslrelay.atlantishq.de/twitch"></script>
|
|
{% endif %}
|
|
|
|
</head>
|
|
<body id="main_scrollable">
|
|
<!-- NAVBAR -->
|
|
{% include 'navbar.html' %}
|
|
|
|
<!-- Site wellcome header -->
|
|
<header class="masthead {% if conf['NO_CENTER_TITLE'] %} h-50 {% endif %}"
|
|
style="background-color: #312a2a;"
|
|
{% if conf['WALLPAPER_URL'] %} realsrc='{{ conf["WALLPAPER_URL"] }}' {% endif %}>
|
|
<div class="{% if conf['NO_CENTER_TITLE'] %} pb-4 pl-2 pr-2 {% else %} container {% endif %}
|
|
{% if conf['WALLPAPER_URL'] %} h-50 {% endif %}">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-12 {% if not conf['NO_CENTER_TITLE'] %} text-center {% endif %}">
|
|
<div style="opacity: 0;"></div> <!-- TODO color for text configurable -->
|
|
<div class="mt-5" style="opacity: 0;"></div>
|
|
{% if "SITE_WELLCOME_TITLE" in conf %} <h1 class="font-weight-light" style="{{ conf['SITE_WELLCOME_TITLE_CSS'] | safe }}">{{ conf["SITE_WELLCOME_TITLE"] | safe }}</h1> {% endif %}
|
|
{% if "SITE_WELLCOME_SUBTITLE" in conf %} <p class="lead">{{ conf["SITE_WELLCOME_SUBTITLE"] | safe }}</p> {% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- events -->
|
|
{% include 'events.html' %}
|
|
|
|
<!-- picture links -->
|
|
{% if mainLinks and not conf["DISABLE_MAIN_LINKS"] %}
|
|
<div class="bg-dark pt-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
{% for card in mainLinks %}
|
|
<div class="col-md-3">
|
|
<div class="card mb-4 box-shadow border-0 hover-to-75">
|
|
<img class="card-img-top" realsrc="{{ card['picture'] }}">
|
|
<div class="card-img-overlay">
|
|
<a href="{{ card['link'] }}" class="stretched-link"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- announcements -->
|
|
{% if announcements %}
|
|
<div class="bg-secondary">
|
|
<div class="container pb-2 pt-2">
|
|
{% include 'announcements.html' %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- twitch -->
|
|
{% if conf["TWITCH_CHANNEL"] %}
|
|
<div class="bg-dark pb-4">
|
|
<div class="container pt-5 text-color-special">
|
|
|
|
<div id="twitch-consent-placeholder" class="card bg-dark text-white">
|
|
<img style="min-width: 80%; min-height: 200px;"
|
|
class="card-img" realsrc="{{ conf['TWITCH_PLACEHOLDER_IMG'] }}" >
|
|
<div class="card-img-overlay">
|
|
<label class="switch mt-3 mt-0-u440">
|
|
<input id="toogle-twitch" class="custom-control-input"
|
|
type="checkbox" onchange="handleToggle(this.id)">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<div class="switch-caption ml-3 mt-3 mt-0-u440" style="font-size: x-large;">
|
|
Laden externe Inhalte von Twitch.tv zulassen
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Add a placeholder for the Twitch embed -->
|
|
<div id="twitch-embed"></div>
|
|
<script>
|
|
document.getElementById("toogle-twitch").checked = false
|
|
function handleToggle(id){
|
|
if(document.getElementById(id).checked){
|
|
createTwitchFrame()
|
|
document.getElementById("twitch-consent-placeholder").style.display = "none";
|
|
}else{
|
|
document.getElementById("twitch-consent-placeholder").style.display = "";
|
|
destroyTwitchFrame()
|
|
}
|
|
}
|
|
|
|
function createTwitchFrame(){
|
|
options = { width: "100%", height: 480, channel: "{{ conf['TWITCH_CHANNEL'] }}" }
|
|
new Twitch.Embed("twitch-embed", options);
|
|
}
|
|
|
|
function destroyTwitchFrame(){
|
|
window.location.reload()
|
|
}
|
|
</script>
|
|
|
|
|
|
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for section in sections %}
|
|
<div class="{% if loop.index %2 == 1 %} bg-secondary {% else %} bg-dark {% endif %} pt-2 pb-2">
|
|
<div class="container text-color-special">
|
|
<div class="row" {% if loop.index %2 == 1 %} style="flex-direction: row-reverse;" {% endif %}>
|
|
<div class="mt-3 col image-min-dimensions">
|
|
<img class="img-responsive w-100" realsrc="{{ section['picture'] }}">
|
|
</div>
|
|
<div class="mt-3 col text-min-dimensions">
|
|
<h1>{{ section['title'] }}</h1>
|
|
<p class="mt-3">
|
|
{{ section["text"] }}
|
|
</p>
|
|
{% if section["moreInfoButtonText"] %}
|
|
<a type=button href="{{ section['moreInfoButtonHref'] }}"
|
|
class="mt-3 btn btn-light">{{ section["moreInfoButtonText"] }}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% include 'footer.html' %}
|
|
</body>
|
|
</html>
|