1
0
forked from orson/bachemap
bachemap/templates/base.html
2024-09-04 23:15:16 -06:00

94 lines
3.3 KiB
HTML

<!DOCTYPE html>
<html data-theme="light" lang="en" style="background-color: rgb(205, 243, 148); color: black;">
<head>
<meta charset="UTF-8">
<title>Interactive Map</title>
<link rel="stylesheet" href="{{ url_for('static', filename='pico.amber.css') }}">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body style="color: black;">
<nav style="height: 7vh;">
<ul>
<a href="/"><li><h2>El Bachemapa</h2></li></a>
</ul>
<ul>
<li><button id="pinner-top">Agregar</button></li>
<li><button><a href="/quienes">Quienes somos</a></button></li>
{% if current_user.is_authenticated %}
<li><button><a href="/dashboard">Perfil</a></button></li>
<li><button><a href="/logout">Cerrar sesión</a></button></li>
{% endif %}
</ul>
</nav>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flashes">
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<main class="" style="padding:0px;height: 100vh; width:100vw; z-index: 5; position: absolute;">
{% block content %}
{% endblock %}
<div id="pinner-modal" style="z-index:999;position:absolute;top:7vh" hidden="true">
{% if current_user.is_authenticated %}
{% include 'add_pin.html' %}
{% else %}
<div style="z-index: 9000; background-color: rgb(205, 243, 148, 0.7); position: relative; top: inherit; left: 100%;">
<h3>Seguramente quieres hacer <a href="{{ url_for('thelogin') }}">login</a></h3>
</div>
{% endif %}
</div>
</main>
</body>
<script>
const observer = new MutationObserver((mutations) => {
const element = document.getElementById('pinner-pop');
if (element) {
element.addEventListener('click', toggleSlide);
}
})
const pinner_button_top = document.getElementById("pinner-top");
const modal_stat = document.getElementById("pinner-modal");
function toggleSlide() {
if (modal_stat.hidden === true) {
modal_stat.hidden = false;
} else {modal_stat.hidden = true;}
}
pinner_button_top.addEventListener('click', toggleSlide);
const cancel_add = document.getElementById("cancel-add");
cancel_add.addEventListener('click', toggleSlide);
observer.observe(document.body, { childList: true, subtree: true });
</script>
<script>
// Wait until the entire page is fully loaded
window.addEventListener('load', function() {
const link = document.querySelector("link[rel='stylesheet'][href='{{ url_for('static', filename='styles.css') }}']");
if (link) {
const newLink = link.cloneNode();
link.remove();
document.head.appendChild(newLink);
}
});
</script>
</html>