Elder & Volunteer Matching by @Sussel - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
_selfApre collegamenti ipertestuali nella stessa pagina del browser
multipleConverte in lista a selezione multipla
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
classDefinisce una o più classi per elemento

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

basi html e tag

spiaggia portobotte

codice per verifica

Estrazione Casuale Studenti

Pagina di esempio

VERIFICA RANZI LEONARDO

Taketori Monogatari

Map System using Leaflet

SCHEDA 4 INFORMATICA

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>Elder & Volunteer Matching</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      margin: 0;
      padding: 0;
      background: #f5f5f7;
      color: #111827;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
    }

    .app {
      margin: 24px;
      max-width: 960px;
      width: 100%;
      background: #ffffff;
      border-radius: 18px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.08);
      padding: 24px 20px 32px;
    }

    h1 {
      text-align: center;
      margin-top: 0;
      margin-bottom: 6px;
    }

    .subtitle {
      text-align: center;
      margin-bottom: 24px;
      color: #6b7280;
      font-size: 0.95rem;
    }

    h2 {
      margin-top: 0;
      margin-bottom: 4px;
      font-size: 1.15rem;
    }

    .section {
      margin-top: 24px;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
      gap: 8px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 0.75rem;
      background: #eef2ff;
      color: #3730a3;
      white-space: nowrap;
    }

    .small {
      font-size: 0.87rem;
      color: #6b7280;
      margin-top: 0;
    }

    /* Pulsanti ruoli */
    .role-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      margin-top: 14px;
      margin-bottom: 4px;
    }

    .btn {
      border: none;
      padding: 12px 20px;
      border-radius: 999px;
      font-size: 0.98rem;
      cursor: pointer;
      min-width: 220px;
      transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .btn-primary {
      background: #2563eb;
      color: #fff;
      box-shadow: 0 8px 18px rgba(37,99,235,0.35);
    }

    .btn-secondary {
      background: #e5e7eb;
      color: #111827;
      box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0,0,0,0.12);
    }

    .btn:active {
      transform: translateY(0);
      box-shadow: none;
    }

    /* Lista profili anziani */
    .profiles-container {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
    }

    .elder-card {
      border-radius: 14px;
      border: 1px solid #e5e7eb;
      padding: 12px 12px 14px;
      background: #f9fafb;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .elder-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .elder-name-age {
      font-weight: 600;
      font-size: 0.98rem;
    }

    .elder-distance {
      font-size: 0.78rem;
      color: #6b7280;
    }

    .elder-interests {
      font-size: 0.85rem;
      color: #374151;
      margin-top: 2px;
    }

    .elder-need {
      font-size: 0.85rem;
      color: #111827;
      margin-top: 4px;
    }

    .elder-meta {
      font-size: 0.8rem;
      color: #4b5563;
      margin-top: 4px;
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }

    .tag {
      font-size: 0.75rem;
      padding: 2px 8px;
      border-radius: 999px;
      background: #e0f2fe;
      color: #0369a1;
    }

    .elder-actions {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
    }

    .btn-small {
      font-size: 0.8rem;
      padding: 6px 10px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: #d1fae5;
      color: #166534;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .btn-small:disabled {
      opacity: 0.6;
      cursor: default;
    }

    /* Lista match */
    .matches-box {
      margin-top: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      background: #f9fafb;
    }

    .matches-title {
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .matches-list {
      font-size: 0.85rem;
      margin: 0;
      padding-left: 18px;
    }

    .matches-empty {
      font-size: 0.82rem;
      color: #9ca3af;
      font-style: italic;
      margin: 2px 0 0;
    }

    @media (max-width: 640px) {
      .app {
        margin: 12px;
        padding: 18px 14px 22px;
        border-radius: 14px;
      }

      .section-header {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  </style>
</head>
<body>
  <div class="app">
    <h1>Elder &amp; Volunteer Matching</h1>
    <p class="subtitle">
      Un prototipo di app che collega volontari e persone anziane
      sulla base di interessi comuni, disponibilità e vicinanza geografica.
    </p>

    <!-- Sezione 1: scelta del ruolo + Google Forms -->
    <div class="section">
      <div class="section-header">
        <h2>1. Chi sei?</h2>
        <span class="pill">Step 1 · Questionari Google Forms</span>
      </div>
      <p class="small">
        Per creare i profili utilizziamo due questionari: uno per le persone anziane
        (in spagnolo) e uno per i volontari (in inglese). L&#39;utente sceglie il proprio ruolo
        e viene reindirizzato al modulo corrispondente.
      </p>

      <div class="role-buttons">
        <!-- Anziani -->
        <a class="btn btn-secondary"
           
           
          href="https://docs.google.com/forms/d/e/1FAIpQLScj-FVTexvioHGtNabKUS0kwW928zb2bYw7VtXtLX-buVRfzw/viewform?usp=publish-editor"
           target="_blank" rel="noopener noreferrer">
          ? Soy una persona mayor
        </a>

        <!-- Volontari -->
        <a class="btn btn-primary"
           href="https://docs.google.com/forms/d/e/1FAIpQLSewkNdWxHF1RlQrLvrC_EWnNhq3abUSalwXhoQjxkCH5nDFoA/viewform?usp=header"
           target="_blank" rel="noopener noreferrer">
          ? I&#39;m a volunteer
        </a>
      </div>
    </div>

    <!-- Sezione 2: esempio di lista profili affini per un volontario -->
    <div class="section">
      <div class="section-header">
        <h2>2. Esempio · Profili di anziani affini per un volontario</h2>
        <span class="pill">Step 2 · Matching rispettoso</span>
      </div>
      <p class="small">
        Dopo aver compilato i questionari, l&#39;app confronta interessi, disponibilità e zona.
        Per ogni volontario viene generata una <strong>lista di 3–5 profili di persone anziane</strong>
        considerate particolarmente affini. Qui sotto vedi un esempio di come potrebbe apparire
        questa schermata dal punto di vista di un volontario.
      </p>

      <div class="profiles-container" id="profilesContainer">
        <!-- Le card vengono definite qui in HTML, ma gestite anche via JS per il bottone -->
        <div class="elder-card" data-elder-id="maria">
          <div class="elder-header">
            <div class="elder-name-age">María, 78 anni</div>
            <div class="elder-distance">Barrio Ruzafa · ~1,2 km</div>
          </div>
          <div class="elder-interests">
            Ama leggere romanzi, fare passeggiate lente e chiacchierare davanti a un caffè.
          </div>
          <div class="tag-list">
            <span class="tag">? Lettura</span>
            <span class="tag">? Passeggiate</span>
            <span class="tag">☕ Conversazione</span>
          </div>
          <div class="elder-need">
            Cerca compagnia 2 volte a settimana e qualcuno che la aiuti con lo smartphone.
          </div>
          <div class="elder-meta">
            Lingua: spagnolo · Disponibilità: lunedì e giovedì pomeriggio
          </div>
          <div class="elder-actions">
            <button class="btn-small" data-action="select">
              ❤ Mi piacerebbe aiutare
            </button>
          </div>
        </div>

        <div class="elder-card" data-elder-id="jose">
          <div class="elder-header">
            <div class="elder-name-age">José, 82 anni</div>
            <div class="elder-distance">Barrio El Carmen · ~2 km</div>
          </div>
          <div class="elder-interests">
            È appassionato di storia locale e calcio, gli piace raccontare aneddoti della città.
          </div>
          <div class="tag-list">
            <span class="tag">?️ Storia</span>
            <span class="tag">⚽ Calcio</span>
            <span class="tag">?️ Racconti</span>
          </div>
          <div class="elder-need">
            Vorrebbe qualcuno che lo venga a trovare la domenica pomeriggio per parlare e guardare le partite.
          </div>
          <div class="elder-meta">
            Lingua: spagnolo · Disponibilità: weekend pomeriggio
          </div>
          <div class="elder-actions">
            <button class="btn-small" data-action="select">
              ❤ Mi piacerebbe aiutare
            </button>
          </div>
        </div>

        <div class="elder-card" data-elder-id="carmen">
          <div class="elder-header">
            <div class="elder-name-age">Carmen, 75 anni</div>
            <div class="elder-distance">Vicino al campus universitario · ~800 m</div>
          </div>
          <div class="elder-interests">
            Ama il cinema e le serie tv, e sta cercando di imparare a usare meglio il tablet.
          </div>
          <div class="tag-list">
            <span class="tag">? Cinema</span>
            <span class="tag">? Tecnologia</span>
            <span class="tag">?️ Serie TV</span>
          </div>
          <div class="elder-need">
            Ha bisogno di supporto digitale (app, videochiamate) e compagnia una sera a settimana.
          </div>
          <div class="elder-meta">
            Lingua: spagnolo · Disponibilità: serate feriali
          </div>
          <div class="elder-actions">
            <button class="btn-small" data-action="select">
              ❤ Mi piacerebbe aiutare
            </button>
          </div>
        </div>

        <div class="elder-card" data-elder-id="antonio">
          <div class="elder-header">
            <div class="elder-name-age">Antonio, 80 anni</div>
            <div class="elder-distance">Zona centro · ~2,5 km</div>
          </div>
          <div class="elder-interests">
            Gli piace cucinare piatti tradizionali e fare la spesa al mercato rionale.
          </div>
          <div class="tag-list">
            <span class="tag">? Cucina</span>
            <span class="tag">? Mercato</span>
            <span class="tag">? Socialità</span>
          </div>
          <div class="elder-need">
            Cerca qualcuno che lo accompagni a fare la spesa e che resti a pranzo ogni tanto.
          </div>
          <div class="elder-meta">
            Lingua: spagnolo · Disponibilità: mattine feriali
          </div>
          <div class="elder-actions">
            <button class="btn-small" data-action="select">
              ❤ Mi piacerebbe aiutare
            </button>
          </div>
        </div>

        <div class="elder-card" data-elder-id="pilar">
          <div class="elder-header">
            <div class="elder-name-age">Pilar, 79 anni</div>
            <div class="elder-distance">Parque del Turia · ~1 km</div>
          </div>
          <div class="elder-interests">
            Ama il giardinaggio e fare brevi passeggiate nel parco, ma preferisce non essere sola.
          </div>
          <div class="tag-list">
            <span class="tag">? Giardinaggio</span>
            <span class="tag">? Natura</span>
            <span class="tag">?‍♀️ Passeggiate</span>
          </div>
          <div class="elder-need">
            Vorrebbe qualcuno che la accompagni al parco due volte a settimana per camminare e parlare.
          </div>
          <div class="elder-meta">
            Lingua: spagnolo · Disponibilità: mattine e tardo pomeriggio
          </div>
          <div class="elder-actions">
            <button class="btn-small" data-action="select">
              ❤ Mi piacerebbe aiutare
            </button>
          </div>
        </div>
      </div>

      <div class="matches-box">
        <div class="matches-title">Persone che ti piacerebbe aiutare (esempio):</div>
        <ul class="matches-list" id="matchesList" style="display:none;"></ul>
        <p class="matches-empty" id="matchesEmpty">
          Nessun profilo selezionato ancora. Come volontario, puoi scegliere una o più persone
          in base a ciò che senti più adatto a te.
        </p>
      </div>
    </div>

    <!-- Sezione 3: spiegazione logica per la presentazione -->
    <div class="section">
      <div class="section-header">
        <h2>3. Come funziona nella pratica (da spiegare alla classe)</h2>
      </div>
      <p class="small">
        Nella versione completa, i dati inseriti nei questionari Google Forms verrebbero raccolti
        in un foglio di lavoro. Un algoritmo (o un team di coordinamento) calcolerebbe
        l&#39;affinità tra profili sulla base di:
      </p>
      <ul class="small">
        <li>interessi in comune tra anziano e volontario,</li>
        <li>compatibilità di orari e giorni disponibili,</li>
        <li>vicinanza geografica (stesso quartiere o pochi km),</li>
        <li>lingue parlate in comune.</li>
      </ul>
      <p class="small">
        Ogni volontario riceve quindi una lista di 3–5 profili suggeriti. È possibile che
        <strong>lo stesso anziano sia abbinato a più volontari</strong>; in questo caso il calendario
        degli incontri viene organizzato in modo da distribuire le visite nel tempo
        (es. volontario A il lunedì, volontario B il giovedì).
      </p>
    </div>
  </div>

  <script>
    // Piccolo script per simulare la selezione dei profili che il volontario vuole aiutare
    (function() {
      const cards = document.querySelectorAll(".elder-card");
      const matchesList = document.getElementById("matchesList");
      const matchesEmpty = document.getElementById("matchesEmpty");
      const selected = new Set();

      cards.forEach(card => {
        const btn = card.querySelector("[data-action='select']");
        const nameElem = card.querySelector(".elder-name-age");
        if (!btn || !nameElem) return;

        btn.addEventListener("click", () => {
          const nameText = nameElem.textContent.trim();
          if (!selected.has(nameText)) {
            selected.add(nameText);
            updateMatches();
            btn.textContent = "✓ Aggiunta/o alla tua lista";
            btn.disabled = true;
          }
        });
      });

      function updateMatches() {
        if (selected.size === 0) {
          matchesList.style.display = "none";
          matchesEmpty.style.display = "block";
          return;
        }

        matchesList.innerHTML = "";
        selected.forEach(name => {
          const li = document.createElement("li");
          li.textContent = name;
          matchesList.appendChild(li);
        });
        matchesList.style.display = "block";
        matchesEmpty.style.display = "none";
      }
    })();
  </script>
</body>
</html>