mirror of
https://github.com/FAUSheppy/flask-json-dream-website
synced 2025-12-06 08:11:35 +01:00
193 lines
6.8 KiB
HTML
193 lines
6.8 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 style="background-color: #312a2a;" -->
|
|
{% if "WALLPAPER_REEL" not in conf or not conf["WALLPAPER_REEL"] %}
|
|
|
|
<header class="masthead {% if conf['NO_CENTER_TITLE'] %} {% endif %}"
|
|
{% if conf['WALLPAPER_URL'] %} realsrc='{{ conf["WALLPAPER_URL"] }}' {% endif %}
|
|
style="background-image: url('{{ conf["WALLPAPER_URL"] }}');">
|
|
<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>
|
|
{% if "SITE_WELLCOME_TITLE" in conf %} <h1 class="pt-4 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="pt-4 title-responsive font-weight-light" style="{{ conf['SITE_WELLCOME_TITLE_CSS'] | safe }}">{{ conf["SITE_WELLCOME_SUBTITLE"] | safe }}</p> {% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{% else %}
|
|
|
|
<div id="carouselIndicators" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselIndicators" data-slide-to="1"></li>
|
|
<li data-target="#carouselIndicators" data-slide-to="2"></li>
|
|
</ol>
|
|
<div class="carousel-inner">
|
|
{% for (url, alt, title, subtitle) in conf["WALLPAPER_REEL"] %}
|
|
<div class="carousel-item {% if loop.first %} active {% endif %}">
|
|
<img class="d-block w-100" src="{{ url }}" alt="{{ alt }}">
|
|
<div class="carousel-caption d-none d-md-block">
|
|
<h2>{{ title }}</h2>
|
|
<p>{{ subtitle }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
<!-- 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 %}
|
|
|
|
<!--
|
|
<div>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 70 500 80">
|
|
<path fill="#6c757d"d="M-19.19,103.90 C244.35,159.17 290.06,-2.67 507.90,124.63 L500.00,150.00 L-9.03,192.72 Z">
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
-->
|
|
|
|
{% for section in sections %}
|
|
<div {% if "id" in section %} id="{{ section['id'] }}" {% endif %}
|
|
class="{% if loop.index %2 == 1 %} bg-secondary {% else %} bg-dark {% endif %} pt-2 pb-4">
|
|
<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'] }}" LAZYLOAD_WIDTH="520">
|
|
</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>
|
|
<!---<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 70 500 80">
|
|
<path {% if loop.index %2 == 1 %} fill="#343a40" {% else %} fill="#6c757d" {% endif %} d="M-19.19,103.90 C244.35,159.17 290.06,-2.67 507.90,124.63 L500.00,150.00 L-9.03,192.72 Z">
|
|
</path>
|
|
</svg>-->
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% include 'footer.html' %}
|
|
</body>
|
|
</html>
|