Elder & Volunteer Matching by @Sussel - Codewith.it

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

Referenze

postDefinisce un metodo di invio di dati al server
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
disabledImpedisce la modifica di un input
<object>Incorpora risorse varie nella pagina web.
<a>Inserisce link e collegamenti ipertestuali
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Form per il torneo misto dis

ex informatica 2

lezione 9 informatica

prova museo (2)

Noleggio Auto es esame

meraviglieItalia.html

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>