Elder & Volunteer Matching by @Sussel - Codewith.it

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

References

<video>Integra e controlla video in una pagina HTML
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
<embed>Tag per l'incorporamento di contenuti multimediali
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<div>Crea contenitori generici o sezioni in una pagina
formmethodDefinisce il metodo di invio dei dati oltre a method

Users

Log in to search for users

Explore

Find inspiration

5/10/24 es. 3 - inverti stringa

La Storia di Cappuccetto Rosso

Scheda Tecnica Honor Magic 6 Pro

congettura di Golbach

Le Meraviglie d\\\\\\\\

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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>