mirror of
https://github.com/Queer-Lexikon/regenbogenkarte
synced 2024-11-21 19:53:07 +00:00
328 lines
12 KiB
HTML
328 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="theme-color" content="#faedfa" />
|
|
<title>tra-la-card</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script type="module" src="./main.ts"></script>
|
|
</head>
|
|
<body class="bg-ql-pink">
|
|
<!-- MOBILE HEADER START -->
|
|
<button
|
|
title="Menü anzeigen/ausblenden"
|
|
id="hamburger-button"
|
|
class="md:hidden js-header-button z-headerButton fixed top-7 right-4 bg-ql-purple w-10 h-10 rounded-full drop-shadow-lg flex justify-center items-center text-white text-sm hover:drop-shadow-2xl"
|
|
>
|
|
<span class="sr-only">Menü anzeigen/ausblenden</span>
|
|
<!-- TODO: Platzhalter durch sinnvolen Text ersetzen-->
|
|
Menü
|
|
</button>
|
|
|
|
<header id="mobile-header" class="max-md:hidden lg:hidden border-b border-b-ql-purple">
|
|
<section class="p-4 pt-6 text-neutral-700 flex flex-row">
|
|
<div class="flex-grow">
|
|
<h1 class="font-semibold text-lg mb-1">tra-la-card</h1>
|
|
<p>Ein Dienst vom <i>Queer Lexikon e.V.</i></p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="p-2"
|
|
id="open-menu-btn"
|
|
aria-expanded="false"
|
|
aria-controls="menu"
|
|
>
|
|
<span class="sr-only">Info öffnen</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<button title="Menü anzeigen/ausblenden" class="js-header-button md:hidden">
|
|
<span class="sr-only">Menü anzeigen/ausblenden</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</section>
|
|
<section class="p-4 bg-ql-purple text-white" aria-labelledby="search-for-city-header-mobile">
|
|
<h2 id="search-for-city-header-mobile" class="sr-only">
|
|
Suche deine Stadt oder Postleitzahl
|
|
</h2>
|
|
<form method="get" class="flex flex-row">
|
|
<div class="max-w-xl">
|
|
<label for="city-mobile" class="block text-sm font-medium"
|
|
>Name deiner Stadt / Postleitzahl</label
|
|
>
|
|
<div class="flex flex-row mt-1 space-x-4">
|
|
<input
|
|
type="text"
|
|
name="city"
|
|
id="city-mobile"
|
|
autocomplete="address-level2"
|
|
class="focus:ring-accent-300 focus:border-accent-500 block w-full sm:text-sm border-gray-300 rounded text-neutral-900"
|
|
placeholder="Entenhausen"
|
|
/>
|
|
<button
|
|
class="locate-button inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"
|
|
>
|
|
<!-- Heroicon: map-pin -->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"
|
|
>
|
|
Suchen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</header>
|
|
<!-- MOBILE HEADER END -->
|
|
|
|
<!-- DESKTOP HEADER START -->
|
|
<header class="hidden lg:grid grid-flow-col gap-8 border-b border-b-ql-purple">
|
|
<section class="mx-4 md:mx-8 lg:mx-12 my-8 text-neutral-700">
|
|
<h1 class="font-semibold text-lg mb-1">tra-la-carte</h1>
|
|
<p>
|
|
Eine Übersichtskarte über queere Jugendgruppen in Deutschland, Österreich und der Schweiz.
|
|
Betrieben und gewartet vom
|
|
<a href="https://queer-lexikon.net/">Queer Lexikon e.V.</a>
|
|
</p>
|
|
<p>
|
|
Du möchtest einen Eintrag ergänzen, korrigieren oder entfernen?
|
|
<a class="underline" href="mailto:karte@queer-lexikon.de"
|
|
>Dann meld dich bei uns per Mail!</a
|
|
>
|
|
Bitte beachte, dass wir Meldungen nur von Gruppenleitungen annehmen können.
|
|
</p>
|
|
<nav>
|
|
<ul class="flex gap-4 underline mt-4 text-sm">
|
|
<li>
|
|
<a href="https://queer-lexikon.net/impressum/">Impressum</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://queer-lexikon.net/datenschutz/">Datenschutz</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</section>
|
|
<section
|
|
class="px-8 lg:px-12 py-8 bg-ql-purple text-white"
|
|
aria-labelledby="search-own-city-desktop"
|
|
>
|
|
<h2 class="sr-only" id="search-own-city-desktop">Suche deine Stadt oder Postleitzahl</h2>
|
|
<form method="get" class="flex flex-row">
|
|
<div class="max-w-xl">
|
|
<label for="city" class="block text-sm font-medium"
|
|
>Name deiner Stadt oder Postleitzahl</label
|
|
>
|
|
<div class="flex flex-row mt-1 space-x-4">
|
|
<input
|
|
type="text"
|
|
name="city"
|
|
id="city"
|
|
autocomplete="address-level2"
|
|
class="focus:ring-accent-300 focus:border-accent-500 block w-full sm:text-sm border-gray-300 rounded text-neutral-900"
|
|
placeholder="Entenhausen"
|
|
aria-describedby="city-description"
|
|
/>
|
|
<button
|
|
class="locate-button inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"
|
|
>
|
|
<!-- Heroicon: map-pin -->
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-6 h-6"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"
|
|
>
|
|
Suchen
|
|
</button>
|
|
</div>
|
|
<p class="mt-2 text-sm text-white" id="city-description">
|
|
Dein Ort oder deine Postleitzahl wird zu keinem Zeitpunkt von uns gespeichert. Wir
|
|
nutzen die OpenStreetMap API, um die Koordinaten zu finden. Du kannst aber auch
|
|
einfach auf der Karte nach Orten in deiner Nähe suchen.
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</header>
|
|
<!-- DESKTOP HEADER END -->
|
|
|
|
<template id="legend-list-entry">
|
|
<li class="flex flex-col lg:flex-row items-center mb-2 last:mb-0">
|
|
<img src="to_be_set" alt="" class="w-12 h-12 mr-4" />
|
|
<span class="text-sm">description</span>
|
|
</li>
|
|
</template>
|
|
<section class="flex-grow z-0 relative" aria-labelledby="map-header">
|
|
<h2 id="map-header" class="sr-only">Karte</h2>
|
|
<div id="map" aria-label="Karte mit vielen queeren Jugendverbänden" class="h-full"></div>
|
|
|
|
<section
|
|
aria-labelledby="legend-header"
|
|
id="legend"
|
|
class="z-[5000] hidden absolute top-0 inset-x-0 lg:right-4 lg:top-4 lg:left-auto bg-ql-pink shadow-lg lg:rounded border-white lg:border lg:px-6 p-4 md:flex flex-row items-center lg:flex-col"
|
|
>
|
|
<h2 id="legend-header" class="font-semibold text-center mb-4 mr-8">Legende:</h2>
|
|
<ul
|
|
data-id="legend-list"
|
|
class="flex flex-row lg:flex-col items-baseline gap-8 lg:gap-4"
|
|
></ul>
|
|
</section>
|
|
</section>
|
|
|
|
<!-- HAMBURGER MENU START -->
|
|
<div class="relative z-menu lg:hidden menu" id="menu" role="dialog" aria-modal="true">
|
|
<!-- backdrop -->
|
|
<div class="fixed inset-0 bg-neutral-600 bg-opacity-75 backdrop-blur-sm"></div>
|
|
|
|
<div class="fixed inset-0 flex z-menu">
|
|
<div class="flex-shrink-0 w-14 flex-grow" aria-hidden="true">
|
|
<!-- Dummy element to force sidebar to shrink to fit close icon -->
|
|
</div>
|
|
<div class="relative flex flex-col max-w-sm w-full pt-6 bg-ql-pink">
|
|
<!-- close button-->
|
|
<div class="absolute top-0 left-0 -ml-12 pt-2">
|
|
<button
|
|
type="button"
|
|
id="close-menu-btn"
|
|
class="mr-2 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
|
>
|
|
<span class="sr-only">Info schließen</span>
|
|
<!-- Heroicon name: outline/x -->
|
|
<svg
|
|
class="h-6 w-6 text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 px-4 space-y-4 overflow-y-auto">
|
|
<p class="font-semibold text-neutral-700 text-lg mb-1">tra-la-carte</p>
|
|
<p>
|
|
Eine Übersichtskarte über queere Jugendverbände in Deutschland, Österreich und der
|
|
Schweiz. Betrieben und gewartet vom Queer Lexikon e.V.
|
|
</p>
|
|
<p>
|
|
Du möchtest einen Eintrag ergänzen, korrigieren oder entfernen?
|
|
<a class="underline" href="mailto:karte@queer-lexikon.de"
|
|
>Dann meld dich bei uns per Mail!</a
|
|
>
|
|
Bitte beachte, dass wir Meldungen nur von Gruppenleitungen annehmen können.
|
|
</p>
|
|
<p>
|
|
Dein Ort wird zu keinem Zeitpunkt von uns gespeichert. Wir nutzen die OpenStreetMap
|
|
API, um die Koordinaten zu finden. Du kannst aber auch einfach auf der Karte nach
|
|
Orten in deiner Nähe suchen.
|
|
</p>
|
|
<div>
|
|
<h2 class="font-semibold text-center mb-4">Legende:</h2>
|
|
<ul data-id="legend-list" class="flex flex-col sm:flex-row gap-4"></ul>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="flex gap-4 underline mt-4 text-sm">
|
|
<li>
|
|
<a href="https://queer-lexikon.net/impressum/">Impressum</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://queer-lexikon.net/datenschutz/">Datenschutz</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- HAMBURGER MENU END -->
|
|
|
|
<!-- #region Emergency button -->
|
|
<div
|
|
class="flex sticky md:absolute bottom-0 justify-evenly z-emergencyButton md:flex-col gap-y-2 md:bottom-6 md:right-2"
|
|
>
|
|
<button
|
|
id="reset-button"
|
|
class="bg-ql-purple text-white px-4 py-3 md:rounded-full w-full border-r border-white"
|
|
>
|
|
Reset
|
|
</button>
|
|
<button id="emergency-button" class="bg-red-800 text-white px-4 py-3 md:rounded-full w-full">
|
|
Notausgang
|
|
</button>
|
|
</div>
|
|
<!-- #endregion -->
|
|
</body>
|
|
</html>
|