index.html

<!doctype html>
<!--
  ============================================================================
  PROPRIETÁRIO: Maurício Spark
  MARCA: Spark
  PROJETO: CoreIcons
  VERSÃO: 1.0.0
  LINHAGEM: SPARK
  ============================================================================
  Documento de Planejamento de Escopo
  COPYRIGHT: © 2026 / Maurício Spark.
  ============================================================================
-->
<!--
  ═══════════════════════════════════════════════════════════════════════════
  CoreIcons Library — catálogo público de ícones para stacks e ferramentas dev.
  Marca: logotipo oficial em favicon/coreicons.png (identidade visual neon / 3D).
  ═══════════════════════════════════════════════════════════════════════════
-->
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="CoreIcons Library — biblioteca profissional de ícones 
      para linguagens, frameworks e ferramentas de desenvolvimento. Pesquisa, pré-visualização 3D e URLs para uso em documentação e projetos."/>
    <meta name="theme-color" content="#0a0f1a" />
    <meta name="application-name" content="CoreIcons Library" />
    <meta name="keywords" content="ícones, icons, desenvolvimento, programação, linguagens, frameworks, ferramentas, dev, tech"/>
    <meta name="author" content="Maurício Spark" />
    <meta name="robots" content="index, follow" />
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content="https://mauriciospark.github.io/coreIcons/"
    />
    <meta
      property="og:title"
      content="CoreIcons Library - Ícones para Desenvolvedores"
    />
    <meta
      property="og:description"
      content="Biblioteca profissional de ícones para linguagens, frameworks e ferramentas de desenvolvimento."
    />
    <meta
      property="og:image"
      content="https://mauriciospark.github.io/coreIcons/favicon/coreicons.png"
    />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:url"
      content="https://mauriciospark.github.io/coreIcons/"
    />
    <meta
      name="twitter:title"
      content="CoreIcons Library - Ícones para Desenvolvedores"
    />
    <meta
      name="twitter:description"
      content="Biblioteca profissional de ícones para linguagens, frameworks e ferramentas de desenvolvimento."
    />
    <meta
      name="twitter:image"
      content="https://mauriciospark.github.io/coreIcons/favicon/coreicons.png"
    />

    <title>CoreIcons</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="favicon/coreicons.png"
    />
    <link rel="apple-touch-icon" href="favicon/coreicons.png" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="manifest" href="favicon/manifest.json" />
    <link rel="canonical" href="https://mauriciospark.github.io/coreIcons/" />
  </head>

  <body>
    <a href="#main-content" class="skip-link"
      >Pular para o conteúdo principal</a
    >

    <header class="header">
      <div class="container header-inner">
        <div class="header-glow" aria-hidden="true"></div>
        <button
          id="github-stars-btn"
          class="github-stars-btn header-stars"
          title="Ver estrelas no GitHub"
        >
          <svg
            class="github-icon"
            width="16"
            height="16"
            viewBox="0 0 16 16"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
            />
          </svg>
          <svg
            class="star-icon"
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
            />
          </svg>
          <span id="github-stars-count">Carregando...</span>
        </button>
        <h1 class="brand-heading">
          <img
            class="brand-logo"
            src="favicon/coreicons.png"
            width="200"
            height="80"
            alt="CoreIcons Library"
            decoding="async"
            fetchpriority="high"
          />
        </h1>
      </div>
    </header>
    <div class="controls-bar">
      <div class="container controls-container">
        <div class="view-toggle">
          <button
            type="button"
            id="grid-view"
            class="active"
            title="Visualização em grade"
            aria-label="Visualização em grade"
          >
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              aria-hidden="true"
            >
              <rect
                x="1"
                y="1"
                width="6"
                height="6"
                rx="1"
                stroke="currentColor"
                stroke-width="2"
              />
              <rect
                x="11"
                y="1"
                width="6"
                height="6"
                rx="1"
                stroke="currentColor"
                stroke-width="2"
              />
              <rect
                x="1"
                y="11"
                width="6"
                height="6"
                rx="1"
                stroke="currentColor"
                stroke-width="2"
              />
              <rect
                x="11"
                y="11"
                width="6"
                height="6"
                rx="1"
                stroke="currentColor"
                stroke-width="2"
              />
            </svg>
          </button>
        </div>

        <div class="search-section">
          <div class="search-box">
            <svg
              class="search-icon"
              width="20"
              height="20"
              viewBox="0 0 20 20"
              fill="none"
              aria-hidden="true"
            >
              <path
                d="M9 17A8 8 0 1 0 9 1a8 8 0 0 0 0 16z"
                stroke="currentColor"
                stroke-width="2"
              />
              <path
                d="M19 19l-4.35-4.35"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            <input
              type="text"
              id="search-input"
              placeholder="Buscar ícones… (ex: react, docker, python)"
              autocomplete="off"
            />
            <kbd class="shortcut">Ctrl + K</kbd>
          </div>
        </div>

        <span class="results-count" id="results-count">Carregando...</span>
      </div>
    </div>
    <main class="container main-content" id="main-content">
      <div id="icons-grid" class="icons-grid"></div>

      <div id="no-results" class="no-results hidden">
        <svg
          width="64"
          height="64"
          viewBox="0 0 64 64"
          fill="none"
          aria-hidden="true"
        >
          <circle cx="32" cy="32" r="28" stroke="#CBD5E1" stroke-width="2" />
          <path
            d="M22 22L42 42"
            stroke="#CBD5E1"
            stroke-width="2"
            stroke-linecap="round"
          />
          <path
            d="M42 22L22 42"
            stroke="#CBD5E1"
            stroke-width="2"
            stroke-linecap="round"
          />
        </svg>
        <p>Nenhum ícone encontrado para «<span id="search-term"></span>»</p>
      </div>
    </main>

    <div id="toast" class="toast" role="status" aria-live="polite"></div>

    <div
      id="icon-modal"
      class="modal"
      aria-hidden="true"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
    >
      <div class="modal-backdrop" data-close-modal tabindex="-1"></div>
      <div class="modal-panel">
        <button
          type="button"
          class="modal-close"
          id="modal-close-btn"
          aria-label="Fechar"
        >
          ×
        </button>
        <div class="modal-icon-wrap">
          <img
            id="modal-icon-img"
            class="modal-icon-img"
            src=""
            alt=""
            width="80"
            height="80"
          />
        </div>
        <h2 id="modal-title" class="modal-title"></h2>

        <div class="modal-field">
          <label class="modal-label" for="modal-url">URL da imagem (PNG):</label>
          <div class="modal-row">
            <input
              id="modal-url"
              class="modal-input"
              type="text"
              readonly
              autocomplete="off"
              spellcheck="false"
            />
            <button
              type="button"
              class="modal-copy-btn"
              id="modal-copy-url"
              aria-label="Copiar URL PNG"
            >
              <svg
                class="modal-copy-ico"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M8 4v12a2 2 0 002 2h8a2 2 0 002-2V7.242a2 2 0 00-.602-1.43L16.083 2.57A2 2 0 0014.685 2H10a2 2 0 00-2 2z"
                  stroke="currentColor"
                  stroke-width="2"
                />
                <path
                  d="M16 18v2a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h2"
                  stroke="currentColor"
                  stroke-width="2"
                />
              </svg>
              Copiar URL
            </button>
          </div>
        </div>

        <div class="modal-field">
          <label class="modal-label" for="modal-url-svg">URL da imagem (SVG):</label>
          <div class="modal-row">
            <input
              id="modal-url-svg"
              class="modal-input"
              type="text"
              readonly
              autocomplete="off"
              spellcheck="false"
            />
            <button
              type="button"
              class="modal-copy-btn"
              id="modal-copy-url-svg"
              aria-label="Copiar URL SVG"
            >
              <svg
                class="modal-copy-ico"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M8 4v12a2 2 0 002 2h8a2 2 0 002-2V7.242a2 2 0 00-.602-1.43L16.083 2.57A2 2 0 0014.685 2H10a2 2 0 00-2 2z"
                  stroke="currentColor"
                  stroke-width="2"
                />
                <path
                  d="M16 18v2a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h2"
                  stroke="currentColor"
                  stroke-width="2"
                />
              </svg>
              Copiar URL
            </button>
          </div>
        </div>

        <div class="modal-field">
          <label class="modal-label" for="modal-slug">Nome do ícone:</label>
          <div class="modal-row">
            <input
              id="modal-slug"
              class="modal-input"
              type="text"
              readonly
              autocomplete="off"
              spellcheck="false"
            />
            <button type="button" class="modal-copy-btn" id="modal-copy-name">
              <svg
                class="modal-copy-ico"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M8 4v12a2 2 0 002 2h8a2 2 0 002-2V7.242a2 2 0 00-.602-1.43L16.083 2.57A2 2 0 0014.685 2H10a2 2 0 00-2 2z"
                  stroke="currentColor"
                  stroke-width="2"
                />
                <path
                  d="M16 18v2a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2h2"
                  stroke="currentColor"
                  stroke-width="2"
                />
              </svg>
              Copiar Nome
            </button>
          </div>
        </div>

        <div class="modal-hint">
          <strong>Como usar:</strong> Hospede os arquivos no GitHub Pages,
          Netlify ou Vercel. A URL será:
          <code id="modal-hint-sample" class="modal-hint-code"></code>
        </div>
      </div>
    </div>

    <!-- Opcional: URL pública ao publicar (GitHub Pages). Ex.: window.CORE_ICONS_PUBLIC_BASE = 'https://mauriciospark.github.io/coreicons'; -->
    <script src="javascript/data.js"></script>
    <script src="javascript/datasvg.js"></script>
    <script src="javascript/core-icons.js"></script>
    <script src="javascript/script.js"></script>
  </body>
</html>