index.html

<!doctype html>
<html lang="it" data-theme="acid">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1">
  <meta name="theme-color" content="#ffffff">
  <meta name="description" content="Progetti, web app e utility client-side. Motore mobile-first a card swipabili o linktree Swiss minimal per i repository pubblici di GitHub.">
  <title id="pageTitle">Progetti &amp; Strumenti — Emanuele BDC</title>
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="canonical" href="https://emaf205.com/github/">
  <link rel="stylesheet" href="style.css?v=2.2">
</head>
<body>
  <!-- Header with Brand & View Switcher -->
  <header class="header">
    <div class="wrap header-inner">
      <a class="brand" href="https://emaf205.com" id="brandLink">
        <span id="brandName">Emanuele BDC</span>
        <span class="brand-tag">PROGETTI</span>
      </a>
      <div class="header-nav">
        <div class="view-switcher" role="tablist" aria-label="Visualizzazione">
          <button type="button" class="view-btn active" id="viewCardsBtn" role="tab" aria-selected="true" title="Visualizzazione Schede Masonry">🗂 Schede</button>
          <button type="button" class="view-btn" id="viewDeckBtn" role="tab" aria-selected="false" title="Visualizzazione Carte Swipabili">🃏 Swipe</button>
          <button type="button" class="view-btn" id="viewListBtn" role="tab" aria-selected="false" title="Visualizzazione Elenco Compatto">📋 Compatto</button>
        </div>
        <button type="button" class="nav-btn-config" id="openConfigBtn" title="Configura" aria-label="Configuratore">⚙️</button>
        <a class="nav-link" id="homeLink" href="https://emaf205.com">Home ↗</a>
      </div>
    </div>
  </header>

  <main class="wrap main" id="mainContainer">
    <!-- SEARCH & CATEGORY CONTROLS (Visible in Schede & Compatto) -->
    <div id="controlsBox" class="controls">
      <div class="search-box">
        <input type="search" id="search" placeholder="Cerca progetto..." autocomplete="off" spellcheck="false">
        <button id="clearBtn" class="clear-btn" type="button" aria-label="Cancella" hidden>&times;</button>
      </div>

      <nav class="chips" aria-label="Filtri">
        <button type="button" class="chip active" data-filter="all">Tutti (<span id="count">24</span>)</button>
        <button type="button" class="chip" data-filter="pwa">Web Apps</button>
        <button type="button" class="chip" data-filter="tools">Tools</button>
        <button type="button" class="chip" data-filter="visual">Visual</button>
        <button type="button" class="chip" data-filter="editorial">Editoriale</button>
      </nav>
    </div>

    <!-- VIEW 1: MASONRY SCHEDE (DEFAULT) - VERTICAL STACK ON MOBILE, GRID SIDE-BY-SIDE ON DESKTOP -->
    <section id="cardsSection" class="cards-section" aria-label="Schede Progetti">
      <div id="cardsGrid" class="cards-grid">
        <!-- Schede populated by app.js -->
      </div>
      <div id="cardsEmpty" class="empty" hidden>
        <p>Nessun risultato trovato.</p>
      </div>
    </section>

    <!-- VIEW 2: TINDER-STYLE SWIPABLE CARD DECK (ALTERNATIVE) -->
    <section id="deckSection" class="deck-section" hidden aria-label="Deck Progetti">
      <div class="deck-wrapper">
        <div id="deckStage" class="deck-stage">
          <!-- Stack of swipable cards populated here by app.js -->
        </div>
      </div>

      <div class="deck-controls">
        <button type="button" id="prevCardBtn" class="deck-arrow-btn" aria-label="Progetto precedente" title="Precedente">
          ←
        </button>
        <div class="deck-status">
          <span id="deckCounter" class="deck-counter">01 / 24</span>
          <span class="deck-hint">Trascina per sfogliare</span>
        </div>
        <button type="button" id="nextCardBtn" class="deck-arrow-btn" aria-label="Progetto successivo" title="Successivo">
          →
        </button>
      </div>
    </section>

    <!-- VIEW 3: SCROLLABLE COMPACT LIST VIEW -->
    <section id="listSection" class="list-section" hidden aria-label="Elenco Compatto">
      <div id="list" class="list"></div>
      <div id="empty" class="empty" hidden>
        <p>Nessun risultato trovato.</p>
      </div>
    </section>
  </main>

  <!-- Modal Configurator Drawer -->
  <div id="modalBackdrop" class="modal-backdrop">
    <div class="modal-drawer">
      <div class="modal-header">
        <h3 class="modal-title">Configura GitHub Engine</h3>
        <button id="closeConfigBtn" class="modal-close" type="button" aria-label="Chiudi">&times;</button>
      </div>

      <!-- Change GitHub Username -->
      <div class="modal-section">
        <label class="modal-label" for="usernameInput">GitHub Username</label>
        <div class="input-row">
          <input type="text" id="usernameInput" placeholder="es. torvalds o tuo username" spellcheck="false" autocomplete="off">
          <button id="fetchUserBtn" class="btn-apply" type="button">Carica</button>
        </div>
      </div>

      <!-- Layout Template Picker -->
      <div class="modal-section">
        <span class="modal-label">Visualizzazione di Default</span>
        <div class="pill-group" id="layoutPicker">
          <button type="button" class="pill-btn selected" data-val="cards">🗂 Schede (Masonry)</button>
          <button type="button" class="pill-btn" data-val="deck">🃏 Swipe (Deck)</button>
          <button type="button" class="pill-btn" data-val="list">📋 Compatto (Elenco)</button>
        </div>
      </div>

      <!-- Color Theme Picker -->
      <div class="modal-section">
        <span class="modal-label">Tema Colori</span>
        <div class="pill-group" id="themePicker">
          <button type="button" class="pill-btn selected" data-val="acid">Acid Swiss</button>
          <button type="button" class="pill-btn" data-val="dark">Dark Minimal</button>
          <button type="button" class="pill-btn" data-val="warm">Warm Editorial</button>
        </div>
      </div>

      <!-- Repository Visibility Management -->
      <div class="modal-section">
        <span class="modal-label">Visibilità Repository (Deseleziona per nascondere)</span>
        <div id="repoManager" class="repo-manager-box">
          <!-- Dynamic checkboxes -->
        </div>
      </div>

      <!-- Export & Share -->
      <div class="modal-section">
        <span class="modal-label">Condividi o Esporta</span>
        <div class="export-row">
          <button id="copyShareLinkBtn" class="btn-export" type="button">🔗 Copia Link Condivisibile</button>
          <button id="downloadConfigBtn" class="btn-export" type="button">⬇ Scarica config.json</button>
        </div>
      </div>
    </div>
  </div>

  <footer class="footer wrap">
    <div class="footer-links">
      <a href="https://emaf205.com" id="footHome">emaf205.com</a>
      <a href="https://emaf205.com/blog/" id="footBlog">Blog</a>
      <a href="https://github.com/emaf205/github" id="footGh" target="_blank" rel="noopener">GitHub Engine</a>
      <a href="https://linktr.ee/emaf205" id="footLinktree" target="_blank" rel="noopener">Linktree</a>
    </div>
  </footer>

  <script src="app.js?v=2.2"></script>
</body>
</html>