Mapa Pomoci

Select Language

Czech

Select Language

Czech

Select Language

Czech

Select Language

Czech

Vidíme projekty, které stojí za to. A pomáháme jim růst.

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mapa Pomoci Šumperk</title>
  <style>
    /* Import fontů */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

    :root {
      --color-bg: #fafafa;
      --color-primary: #005f73;
      --color-secondary: #0a9396;
      --color-accent: #94d2bd;
      --color-text-dark: #333333;
      --color-text-light: #555555;
      --color-card-bg: #ffffff;
      --color-border: #e1e5ea;
      --transition-fast: 0.2s ease;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--color-bg);
      color: var(--color-text-dark);
      line-height: 1.6;
      padding: 20px;
    }

    h1 {
      text-align: center;
      font-size: 2.8rem;
      font-weight: 800;
      margin-bottom: 30px;
      color: var(--color-primary);
      letter-spacing: 1px;
    }

    .filter-container {
      max-width: 600px;
      margin: 0 auto 40px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .filter-container label {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--color-text-dark);
    }

    .filter-container select {
      flex: 1;
      padding: 10px;
      font-size: 1rem;
      border: 2px solid var(--color-border);
      border-radius: 8px;
      background-color: #fff;
      color: var(--color-text-dark);
      transition: border-color var(--transition-fast);
    }

    .filter-container select:hover, .filter-container select:focus {
      border-color: var(--color-secondary);
    }

    .legend {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.95rem;
      color: var(--color-text-light);
    }

    .legend-item .dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--color-primary);
    }

    /* Kategorie barvy pro legendu */
    .dot.krizove-linky { background-color: #ee6c4d; }
    .dot.dusevni-pomoc { background-color: #3d5a80; }
    .dot.podpora-lgbt { background-color: #98c1d9; }
    .dot.vzdelavani { background-color: #ffba08; }

    #cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      background-color: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }

    .card h2 {
      font-size: 1.4rem;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .card p {
      font-size: 1rem;
      color: var(--color-text-light);
      margin-bottom: 16px;
      min-height: 48px; /* sjednocení výšky u textů */
    }

    .card a {
      display: inline-block;
      padding: 8px 16px;
      background-color: var(--color-secondary);
      color: #fff;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      transition: background-color var(--transition-fast);
    }

    .card a:hover {
      background-color: var(--color-accent);
    }

    /* Rámeček / pruh indikující kategorii */
    .card.krizove-linky { border-left: 5px solid #ee6c4d; }
    .card.dusevni-pomoc { border-left: 5px solid #3d5a80; }
    .card.podpora-lgbt { border-left: 5px solid #98c1d9; }
    .card.vzdelavani { border-left: 5px solid #ffba08; }

    .hidden {
      display: none;
    }

    /* Responzivita */
    @media (max-width: 768px) {
      body {
        padding: 10px;
      }
      h1 {
        font-size: 2.2rem;
      }
    }

    @media (max-width: 480px) {
      .filter-container {
        flex-direction: column;
        align-items: stretch;
      }
      .filter-container label {
        margin-bottom: 8px;
      }
    }
  </style>
</head>
<body>

  <h1>Mapa Pomoci Šumperk</h1>

  <div class="filter-container">
    <label for="filter">Typ pomoci:</label>
    <select id="filter">
      <option value="all">Vše</option>
      <option value="krizove-linky">Krizové linky</option>
      <option value="dusevni-pomoc">Duševní pomoc</option>
      <option value="podpora-lgbt">Podpora LGBT+</option>
      <option value="vzdelavani">Vzdělávání a prevence</option>
    </select>
  </div>

  <div class="legend">
    <div class="legend-item"><div class="dot krizove-linky"></div><span>Krizové linky</span></div>
    <div class="legend-item"><div class="dot dusevni-pomoc"></div><span>Duševní pomoc</span></div>
    <div class="legend-item"><div class="dot podpora-lgbt"></div><span>Podpora LGBT+</span></div>
    <div class="legend-item"><div class="dot vzdelavani"></div><span>Vzdělávání & prevence</span></div>
  </div>

  <div id="cards">
    <!-- Krizové linky -->
    <div class="card krizove-linky">
      <h2>Bílý kruh bezpečí</h2>
      <p>Pomoc obětem násilí a trestných činů</p>
      <a href="https://www.bkb.cz/" target="_blank">Zjistit více</a>
    </div>
    <div class="card krizove-linky">
      <h2>Linka bezpečí</h2>
      <p>Telefon: 116 111 — ochrana dětí a mládeže</p>
      <a href="https://www.linkabezpeci.cz/" target="_blank">Zjistit více</a>
    </div>
    <div class="card krizove-linky">
      <h2>Linka pro rodinu a školu</h2>
      <p>Telefon: 116 000 — podpora pro rodiny a školy</p>
      <a href="https://linkaztracenedite.cz/" target="_blank">Zjistit více</a>
    </div>

    <!-- Duševní pomoc -->
    <div class="card dusevni-pomoc">
      <h2>PONTIS Šumperk</h2>
      <p>Pomoc při krizových situacích – osobní setkání</p>
      <a href="https://www.pontis.cz/mladez-a-dospeli/deti-a-mladez/" target="_blank">Zjistit více</a>
    </div>
    <div class="card dusevni-pomoc">
      <h2>PPP Šumperk</h2>
      <p>Školní a osobní poradna</p>
      <a href="https://pppaspc-ok.cz/" target="_blank">Zjistit více</a>
    </div>
    <div class="card dusevni-pomoc">
      <h2>Dětské krizové centrum</h2>
      <p>Online podpora v náročných chvílích</p>
      <a href="https://www.ditekrize.cz/" target="_blank">Zjistit více</a>
    </div>
    <!-- Pokračuj ostatní -->
    <div class="card dusevni-pomoc">
      <h2>Někdo ti uvěří</h2>
      <p>Podpora obětem sexuálního násilí v církvi</p>
      <a href="https://nekdotiuveri.cz/" target="_blank">Zjistit více</a>
    </div>
    <div class="card dusevni-pomoc">
      <h2>Nepanikař</h2>
      <p>První pomoc při psychických potížích</p>
      <a href="https://nepanikar.eu/" target="_blank">Zjistit více</a>
    </div>
    <div class="card dusevni-pomoc">
      <h2>Hedepy</h2>
      <p>Online psychoterapie</p>
      <a href="https://hedepy.cz/" target="_blank">Zjistit více</a>
    </div>
    <div class="card dusevni-pomoc">
      <h2>Terap.io</h2>
      <p>Online psychoterapie</p>
      <a href="https://terap.io/" target="_blank">Zjistit více</a>
    </div>
    <div class="card dusevni-pomoc">
      <h2>Locika</h2>
      <p>Problematika domácího násilí, dětské advokační centrum</p>
      <a href="https://centrumlocika.cz/" target="_blank">Zjistit více</a>
    </div>

    <!-- Podpora LGBT+ -->
    <div class="card podpora-lgbt">
      <h2>S Barvou ven</h2>
      <p>Podpora a vzdělávání pro LGBT+ komunitu</p>
      <a href="https://www.sbarvouven.cz/" target="_blank">Zjistit více</a>
    </div>
    <div class="card podpora-lgbt">
      <h2>Jsme Transparent</h2>
      <p>Podpora a vzdělávání pro transgender osoby</p>
      <a href="https://jsmetransparent.cz/" target="_blank">Zjistit více</a>
    </div>

    <!-- Vzdělávání & prevence -->
    <div class="card vzdelavani">
      <h2>Nevypusť Duši</h2>
      <p>Vzdělávání a prevence duševního zdraví</p>
      <a href="https://nevypustdusi.cz/" target="_blank">Zjistit více</a>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const cards = document.querySelectorAll('.card');
      const filter = document.getElementById('filter');

      filter.addEventListener('change', () => {
        const val = filter.value;
        cards.forEach(card => {
          if (val === 'all' || card.classList.contains(val)) {
            card.classList.remove('hidden');
          } else {
            card.classList.add('hidden');
          }
        });
      });
    });
  </script>
</body>
</html>