Files
fet2020/fet2020/templates/base.html

249 lines
16 KiB
HTML

{% load flatpages static version %}
<!DOCTYPE html>
<html lang="de" x-data="bodyData" x-bind="documentRoot">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FET: {% block title %}Startseite{% endblock %}</title>
<meta name="author" content="Fachschaft Elektrotechnik (FET)">
<meta name="description" content="Die Fachschaft Elektrotechnik besteht aus ET Studierenden, die sich um die Anliegen der Studenten und Studentinnen kümmern.">
<meta property="og:image" content="#"> <!--og:... = Facebook metadata-->
<meta property="og:description" content="Die Fachschaft Elektrotechnik besteht aus ET Studierenden, die sich um die Anliegen der Studenten und Studentinnen kümmern.">
<meta property="og:title" content="Fachschaft Elektrotechnik (FET)">
<meta name="twitter:title" content="Fachschaft Elektrotechnik (FET)">
<meta name="theme-color" content="#006599">
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicons/apple-touch-icon.png' %}">
<!-- <link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicons/favicon-32x32.png' %}"> -->
<!-- <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicons/favicon-16x16.png' %}"> -->
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/fet_logo_white.png' %}">
<link rel="manifest" href="{% static 'img/favicons/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'img/favicons/safari-pinned-tab.svg' %}" color="#006599">
<link rel="shortcut icon" href="{% static 'img/fet_logo_white.png' %}">
<meta name="apple-mobile-web-app-title" content="FET - Fachschaft Elektrotechnik">
<meta name="application-name" content="FET - Fachschaft Elektrotechnik">
<meta name="msapplication-TileColor" content="#2b5797">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<!-- FontAwesome Kit -->
<!--<script src="https://kit.fontawesome.com/fb26f70535.js" crossorigin="anonymous"></script>-->
<link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'fontawesomefree/css/regular.css' %}" rel="stylesheet" type="text/css">
<!-- Prism.js Theme -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-dark.min.css"> -->
<link rel="stylesheet" href="{% static 'css/prism-one-dark.min.css' %}">
<!-- Fonts -->
<link rel="stylesheet" href="{% static 'fonts/Inter-3.19/inter.css' %}">
<!-- <link rel="stylesheet" href="{% static 'fonts/Poppins-4.003/poppins.css' %}"> -->
<link rel="stylesheet" href="{% static 'fonts/Besley-2.0/besley.css' %}">
<link rel="stylesheet" href="{% static 'fonts/Fira_Code-6.2/fira_code.css' %}">
{% block galleryheader %}
{% endblock galleryheader %}
{% block extraheader %}
{% endblock extraheader %}
</head>
<body x-bind="documentBody">
{% if request.user.is_authenticated %}
<!-- SEARCH-BAR -->
<div class="fixed w-screen h-screen z-30 backdrop-blur-sm backdrop-saturate-50"
x-show="showSearch"
x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform backdrop-blur-none backdrop-saturate-100"
x-transition:enter-end="transform backdrop-blur-sm backdrop-saturate-50"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="transform backdrop-blur-sm backdrop-saturate-50"
x-transition:leave-end="transform backdrop-blur-none backdrop-saturate-100"
>
<form action="{% url 'search:index' %}" @click.outside="closeSearch" class="flex items-center opacity-90 gap-x-4 mt-[33vh] sm:max-w-md lg:max-w-lg xl:max-w-xl mx-4 sm:mx-auto py-2 px-4 shadow-lg dark:shadow-none bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg dark:border-2 dark:border-gray-700"
x-show="showSearch"
x-transition:enter="transition transform ease-out duration-300"
x-transition:enter-start="scale-0 opacity-0"
x-transition:enter-end="scale-100 opacity-90"
x-transition:leave="transition transform ease-in duration-150"
x-transition:leave-start="scale-100 opacity-90"
x-transition:leave-end="scale-0 opacity-0"
>
<input class="flex-grow bg-inherit text-inherit h-10 p-0 border-0 focus:outline-none focus:border-transparent focus:ring-0" type="search" name="q" placeholder="Nach Person, Artikel oder Fotoalbum suchen...">
<button type="submit" class="flex-none">
<i class="fa-solid fa-magnifying-glass text-gray-500 dark:text-gray-600"></i>
</button>
</form>
</div>
{% endif %}
<!-- NAVBAR -->
<nav class="navBar-lg" x-data="navBar">
<div>
{% if request.user.is_authenticated %}
<button class="searchbar-toggle"
@click="openSearch"
>
<i class="fa-solid fa-magnifying-glass"></i>
</button>
{% endif %}
<a href="{% url 'home' %}">
<img src="{% static 'img/FET-Logo-2014_64_light.svg' %}" alt="FET-Logo" class="navbar-logo p-2 dark:hidden">
<img src="{% static 'img/FET-Logo-2014_64_dark.svg' %}" alt="FET-Logo" class="navbar-logo p-2 hidden dark:block">
</a>
<button class="navbar-toggle"
@click="toggleNav"
aria-label="Toggle navigation"
>
<i class="fa-solid fa-bars"></i>
</button>
<ul id="navBarContent" class="navbar-content" x-bind="navBarContent" x-collapse.min.0px>
{% get_flatpages '/mitmachen/' as pages %}
{% if pages %}
<li class="{% if '/mitmachen/' in request.path %}active{% endif %}"><a href="{{ pages.first.url }}">{{ pages.first.title }}</a></li>
{% endif %}
<li class="{% if 'posts' in request.path %}active{% endif %}"><a href="{% url 'posts:index' %}">News</a></li>
<li class="{% if 'members' in request.path %}active{% endif %}"><a href="{% url 'members:index' %}">Fachschaft</a></li>
<li class="{% if 'gallery' in request.path %}active{% endif %}"><a href="{% url 'gallery:index' %}">Galerie</a></li>
<li class="{% if 'rental' in request.path %}active{% endif %}"><a href="{% url 'rental:index' %}">Verleih</a></li>
<li class="{% if 'jobs' in request.path %}active{% endif %}"><a href="{% url 'blackboard:index' %}">Jobs</a></li>
{% get_flatpages '/kontakt/' as pages %}
{% if pages %}
<li class="{% if '/kontakt/' in request.path %}active{% endif %}"><a href="{{ pages.first.url }}">{{ pages.first.title }}</a></li>
{% endif %}
<li class="relative visible-expandedOnly" x-bind="navBarThemeContent">
<button class="relative" @click="toggleThemePopup">
<i x-show="isThemeLight" class="fa-solid fa-sun"></i>
<i x-show="isThemeDark" class="fa-solid fa-moon"></i>
</button>
<ul id="expandedThemeSwitcher"
x-show="themePopupVisible"
@click="closeThemePopup"
@click.outside="closeThemePopup"
x-cloak
>
<li class="hover:bg-gray-200 dark:hover:bg-gray-600"><button class="!px-2 !py-1 !m-0 text-left" @click="setThemeLight">Light</button></li>
<li class="hover:bg-gray-200 dark:hover:bg-gray-600"><button class="!px-2 !py-1 !m-0 text-left" @click="setThemeDark">Dark</button></li>
<li class="hover:bg-gray-200 dark:hover:bg-gray-600"><button class="!px-2 !py-1 !m-0 text-left" @click="setThemeSystem">System</button></li>
</ul>
</li>
{% if not request.user.is_authenticated %}
<li><a href="{% url 'authentications:login' %}?next={{ request.path }}"><span class="visible-collapsedOnly mr-2">Anmelden</span><i class="fa-solid fa-right-to-bracket"></i></a></li>
{% else %}
<hr class="border-proprietary">
<div href="#" class="navbar-subcontent mx-1 px-2"
@click.outside="closePopupNav"
>
<div class="navbar-subcontentButton">
<a class="rounded-l" href="#"
@click="togglePopupNav"
>
{% if request.user.first_name %}
Hallo {{ request.user.first_name }}
{% else %}
Hallo {{ request.user.username }}
{% endif %}
</a>
<a class="rounded-r" href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-solid fa-power-off"></i></a>
</div>
<div class="navbar-subcontentList"
x-bind="popupNavContentLg"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform origin-top opacity-0 scale-95"
x-transition:enter-end="transform origin-top opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="transform origin-top opacity-100 scale-100"
x-transition:leave-end="transform origin-top opacity-0 scale-95"
>
<li class="navInternal"><a href="{% url 'admin:index' %}"><i class="fa-fw fa-solid fa-user-secret mr-2"></i>Admin</a></li>
<li class="navInternal"><a href="{% url 'intern:index' %}"><i class="fa-fw fa-solid fa-database mr-2"></i>Intern</a></li>
<li class="navInternal"><a href="https://wiki.fet.at"><i class="fa-fw fa-brands fa-wikipedia-w mr-2"></i></i>Wiki</a></li>
<li class="navInternal"><a href="https://mail.fet.at"><i class="fa-fw fa-solid fa-inbox mr-2"></i></i>Mail</a></li>
<li class="navInternal"><a href="https://ticket.fet.at"><i class="fa-fw fa-solid fa-ticket mr-2"></i></i>Ticket</a></li>
<li class="navInternal"><a href="https://legacy.fet.at/home/intern"><i class="fa-fw fa-solid fa-box-archive mr-2"></i>Legacy</a></li>
<li class="navInternal"
x-show="showPopupNavLogout"
><a href="{% url 'authentications:logout' %}?next={{ request.path }}"><i class="fa-fw fa-solid fa-power-off mr-2"></i>Abmelden</a></li>
</div>
</div>
{% endif %}
{% if request.user.is_authenticated %}
<li class="visible-expandedOnly"><button @click="openSearch"><span class="hidden md:inline"><i class="fa-solid fa-magnifying-glass"></i></span></button></li>
{% endif %}
<li class="visible-collapsedOnly w-fit mx-auto py-1">
<div class="flex items-center">
<span class="mr-2">Theme:</span>
<ul id="mobileThemeSwitcher">
<li class="rounded" x-bind="navBarThemeContentLight">
<button class="!px-2 !py-0.5 !m-0 rounded-sm text-left bg-inherit" @click="setThemeLight">Light</button>
</li>
<li class="rounded" x-bind="navBarThemeContentDark">
<button class="!px-2 !py-0.5 !m-0 rounded-sm text-left bg-inherit" @click="setThemeDark">Dark</button>
</li>
<li class="rounded" x-bind="navBarThemeContentSystem">
<button class="!px-2 !py-0.5 !m-0 rounded-sm text-left bg-inherit" @click="setThemeSystem">System</button>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock content %}
<footer>
<ul class="icon-list">
<li>
<a href="{% url 'facebook' %}" aria-label="Facebook"><i class="fa-brands fa-facebook"></i></a>
</li>
<li>
<a href="{% url 'whatsapp' %}" aria-label="WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
</li>
<li>
<a href="{% url 'instagram' %}" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
</li>
<li>
<a href="{% url 'discord' %}" aria-label="Discord"><i class="fa-brands fa-discord"></i></a>
</li>
<li>
<a href="{% url 'telegram' %}" aria-label="Telegram"><i class="fa-brands fa-telegram"></i></a>
</li>
<li>
<a href="mailto:service@fet.at" aria-label="Email"><i class="fa-solid fa-envelope"></i></a>
</li>
</ul>
{% get_flatpages '/impressum/' as pages %}
{% if pages %}
<div class="legal">
<a href="{{ pages.first.url }}" class="text-center text-sm sm:text-base">{{ pages.first.title }}</a>
</div>
{% endif %}
<hr class="legal-divider">
<p class="copyright">© {% now 'Y' %} FET - Alle Rechte vorbehalten.</p>
{% if request.user.is_authenticated %}
<p class="text-center">{% version %}</p>
{% endif %}
</footer>
<div class="super-duper-awesome-signature font-normal" x-data="footerCounter">
<span x-bind="footerFirst">Handcrafted </span><span x-bind="footerSecond">with </span><i class="fa-solid fa-heart" role="img" aria-label="love" @click="increase" x-bind="footerThird"></i><span x-bind="footerFourth"> by</span><span x-bind="footerFifth"> fet</span>
</div>
<script src="{% static 'js/flowbite@3.1.2.js' %}"></script>
<script defer src="{% static 'js/vendor.js' %}"></script>
<script defer src="{% static 'js/scripts.js' %}"></script>
</body>
</html>