forked from orson/bachemap
75 lines
3.6 KiB
HTML
75 lines
3.6 KiB
HTML
<nav style="height: auto; align-items: center;">
|
|
<ul>
|
|
<a href="/">
|
|
<li style="display: flex; align-items: center;">
|
|
<img id="logo" src="{{ url_for('static', filename='images/bachemapalogo.png') }}" alt="Bachemapa Logo" style="height: 10vh; margin-right: 10px;">
|
|
<h3 style="margin-bottom: 0;" id="sitename"><span style="color: #4a8522;">Bache</span><span style="color: #fa8721;">mapa</span></h3>
|
|
</li>
|
|
</a>
|
|
</ul>
|
|
|
|
<ul>
|
|
<!-- Mobile menu toggle -->
|
|
<!-- Mobile menu toggle (only appears on screens less than 600px wide) -->
|
|
<details role="list" dir="rtl" class="mobile-menu" style="margin:0; margin-right:5rem; position: relative;">
|
|
<summary aria-haspopup="listbox" role="link" class="secondary" style="transition: transform 0.3s ease;">
|
|
<i style="color:white" class="fas fa-bars"></i>
|
|
</summary>
|
|
<ul role="listbox" style="position: absolute; right: 0; top: 100%; transition: transform 0.3s ease; transform: translateX(0);">
|
|
{% if current_user.is_authenticated %}
|
|
<li><a id="pinner-top" href="#" role="button"><i class="fas fa-plus"></i></a></li>
|
|
<li><a href="/dashboard" role="button"><i class="fas fa-user"></i></a></li>
|
|
<li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
|
|
<li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></a></li>
|
|
<li><a href="/logout" role="button" class="secondary"><i class="fas fa-sign-out-alt"></i></a></li>
|
|
{% else %}
|
|
<li><a href="/thelogin" role="button"><i class="fas fa-sign-in-alt"></i></a></li>
|
|
<li><a href="/leaderboard" role="button"><i class="fas fa-trophy"></i></a></li>
|
|
<li><a href="/quienes" role="button" class="secondary"><i class="fas fa-info-circle"></i></a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</details>
|
|
|
|
<!-- Desktop menu (only appears on screens 600px or wider) -->
|
|
<ul class="desktop-menu">
|
|
{% if current_user.is_authenticated %}
|
|
<li><a id="pinner-top-desktop" href="#" role="button">Agregar</a></li>
|
|
<li><a href="/logout" role="button" class="secondary">Cerrar Sesión</a></li>
|
|
<li><a href="/dashboard" role="button">Perfil</a></li>
|
|
{% else %}
|
|
<li><a href="/thelogin" role="button">Iniciar Sesión</a></li>
|
|
{% endif %}
|
|
<li><a href="/quienes" role="button" class="secondary">Somos</a></li>
|
|
<li><a href="/leaderboard" role="button">Bachistas ★</a></li>
|
|
</ul>
|
|
</ul>
|
|
|
|
<style>
|
|
@media (max-width: 810px) {
|
|
.desktop-menu {
|
|
display: none;
|
|
}
|
|
#sitename {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 811px) {
|
|
.mobile-menu {
|
|
display: none;
|
|
}
|
|
#sitename {
|
|
display: block;
|
|
}
|
|
}
|
|
body {
|
|
background-image: url("{{ url_for('static', filename='images/bg-trees.jpg') }}");
|
|
background-size: cover;
|
|
}
|
|
</style>
|
|
|
|
|
|
</nav>
|
|
|
|
<!-- FAQ button is absolutely positioned -->
|
|
<li style="display: block; position: absolute; right: 2rem;bottom:2rem; z-index:1200"><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li> |