ColorsCode/index.html at main · XTerm/ColorsCode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#FBF7F0">
<title>ColorsCode — Quel feutre utiliser ?</title>
<link rel="manifest" href="manifest.json">
<link rel="icon" href="icons/icon-192.png">
<link rel="apple-touch-icon" href="icons/icon-192.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="app-header">
  <div class="brand">
    <span class="brand-hex" aria-hidden="true"></span>
    <h1>ColorsCode</h1>
  </div>
</header>

<main>

  <!-- ============ VUE SCANNER ============ -->
  <section id="view-scanner" class="view active">

    <div class="set-bar">
      <label for="active-set-select">Jeu de feutres actif</label>
      <select id="active-set-select"></select>
      <p id="set-warning" class="warning" hidden>Aucun jeu de feutres disponible — va dans l’onglet <strong>Feutres</strong> pour en créer un.</p>
    </div>

    <div id="scanner-empty" class="empty-state">
      <p class="empty-illustration" aria-hidden="true">⬡</p>
      <p>Prends en photo (ou importe) la légende numérotée de ton coloriage mystère.</p>
      <div class="capture-buttons">
        <button id="btn-take-photo" class="btn-primary">📷 Prendre une photo</button>
        <button id="btn-choose-file" class="btn-secondary">🖼️ Choisir un fichier (galerie, Téléchargements…)</button>
      </div>
      <input type="file" id="file-input-camera" accept="image/*" capture="environment" hidden>
      <input type="file" id="file-input-gallery" accept="image/*" hidden>
    </div>

    <div id="canvas-wrap" hidden>
      <div class="calibration-bar">
        <button id="btn-calibrate" class="btn-secondary">🎯 Étalonner les couleurs</button>
        <span id="calibration-status" class="muted small">Pas encore étalonné</span>
      </div>
      <div id="fine-tune-panel" class="fine-tune-panel" hidden>
        <div class="slider-row">
          <label for="slider-luminosite">Luminosité</label>
          <input type="range" id="slider-luminosite" min="-50" max="50" value="0">
          <span class="slider-caption"><span>Plus sombre</span><span>Plus clair</span></span>
        </div>
        <div class="slider-row">
          <label for="slider-temperature">Température</label>
          <input type="range" id="slider-temperature" min="-50" max="50" value="0">
          <span class="slider-caption"><span>Plus froid</span><span>Plus chaud</span></span>
        </div>
        <button id="btn-reset-finetune" class="btn-ghost small-btn">↺ Réinitialiser le réglage fin</button>
      </div>
      <p class="hint">Étape 1 (recommandé) : touche une zone <strong>blanche du fond de page</strong> pour corriger la dominante de couleur due à la lumière/au flash.<br>
      Étape 2 : touche <strong>🔎 Détecter les pastilles</strong> pour un repérage automatique, puis corrige les numéros si besoin — ou touche chaque pastille manuellement.<br>
      💡 Pour de meilleurs résultats, cadre la photo sur la légende des couleurs uniquement (évite le numéro de page et le dessin) : plus rapide, plus fiable, et rien d'autre à filtrer.</p>
      <div class="canvas-scroll">
        <canvas id="capture-canvas"></canvas>
      </div>
      <div class="canvas-controls">
        <button id="btn-detect" class="btn-primary">🔎 Détecter les pastilles</button>
      </div>
      <label class="ocr-toggle">
        <input type="checkbox" id="ocr-toggle-input">
        Essayer de lire les numéros automatiquement (OCR — expérimental et <strong>peu fiable en pratique</strong> pour l'instant, testé et non concluant deux fois. La numérotation automatique dans l'ordre de lecture reste plus sûre.)
      </label>
      <div class="canvas-controls">
        <button id="btn-undo" class="btn-secondary">↺ Annuler le dernier point</button>
        <button id="btn-reset" class="btn-ghost">Nouveau scan</button>
      </div>
    </div>

    <section id="results-section" hidden>
      <div class="results-header">
        <h2>Feutres à utiliser</h2>
        <button id="btn-save-scan" class="btn-primary" disabled>Enregistrer ce scan</button>
      </div>
      <div id="results-list"></div>
    </section>

    <section id="fullcolor-section" hidden>
      <div class="results-header">
        <h2>🎨 Aperçu colorié (scan complet, expérimental)</h2>
      </div>
      <p class="hint">Nécessite d'avoir déjà scanné la légende ci-dessus (numéro → feutre connu). Fonctionne mieux sur un <strong>scan</strong> (imprimante/scanner à plat) que sur une photo — chiffres plus nets. Peut prendre plusieurs minutes sur une page complexe.</p>
      <button id="btn-fullcolor" class="btn-secondary">📄 Choisir le scan complet à colorier</button>
      <input type="file" id="fullcolor-file-input" accept="image/*" hidden>
      <div id="fullcolor-progress" class="fullcolor-progress" hidden></div>
      <div id="fullcolor-canvas-wrap" hidden>
        <div class="canvas-scroll"><canvas id="fullcolor-canvas"></canvas></div>
        <p id="fullcolor-summary" class="hint"></p>
      </div>
    </section>

  </section>

  <!-- ============ VUE FEUTRES ============ -->
  <section id="view-feutres" class="view">
    <div class="view-header">
      <h2>Mes jeux de feutres</h2>
      <div class="header-actions">
        <button id="btn-edit-active-set" class="btn-secondary">Modifier le jeu actif</button>
        <button id="btn-new-set" class="btn-secondary">+ Nouveau jeu</button>
        <label class="btn-ghost file-label">
          Importer un JSON
          <input type="file" id="import-set-input" accept="application/json" hidden>
        </label>
      </div>
    </div>
    <div id="sets-list"></div>
  </section>

  <!-- ============ VUE HISTORIQUE ============ -->
  <section id="view-historique" class="view">
    <div class="view-header">
      <h2>Historique des scans</h2>
    </div>
    <div id="history-list"></div>
  </section>

</main>

<nav class="bottom-nav">
  <button class="nav-btn active" data-view="scanner">
    <span class="nav-icon">⬡</span><span>Scanner</span>
  </button>
  <button class="nav-btn" data-view="feutres">
    <span class="nav-icon">▤</span><span>Feutres</span>
  </button>
  <button class="nav-btn" data-view="historique">
    <span class="nav-icon">⟲</span><span>Historique</span>
  </button>
</nav>

<!-- Éditeur d'un jeu de feutres -->
<dialog id="set-editor-dialog">
  <h2 id="editor-set-name">Jeu</h2>
  <div class="editor-add-row">
    <input type="color" id="editor-color-input" value="#e4543f">
    <input type="text" id="editor-ref-input" placeholder="Référence (ex : 730)">
    <button id="editor-add-feutre" class="btn-primary">Ajouter</button>
  </div>
  <button id="editor-cancel-edit" class="btn-ghost small-btn" hidden>Annuler la modification</button>
  <input type="text" id="editor-search" class="editor-search" placeholder="🔍 Rechercher un code…">
  <div id="editor-feutres-list" class="editor-list"></div>
  <button id="editor-close" class="btn-secondary">Fermer</button>
</dialog>

<!-- Détail d'un scan de l'historique -->
<dialog id="scan-detail-dialog">
  <h2 id="detail-title">Scan</h2>
  <p id="detail-meta" class="muted small"></p>
  <div id="detail-list"></div>
  <div class="dialog-actions">
    <button id="detail-delete" class="btn-ghost danger-text">Supprimer ce scan</button>
    <button id="detail-close" class="btn-secondary">Fermer</button>
  </div>
</dialog>

<!-- Modale de saisie générique (remplace prompt()) -->
<dialog id="input-dialog">
  <h2 id="input-dialog-title">Titre</h2>
  <div id="input-dialog-fields" class="input-dialog-fields"></div>
  <div class="dialog-actions">
    <button id="input-dialog-cancel" class="btn-ghost">Annuler</button>
    <button id="input-dialog-ok" class="btn-primary">Valider</button>
  </div>
</dialog>

<!-- Recoloriage manuel d'une zone du coloriage complet -->
<dialog id="zone-recolor-dialog">
  <h2>Recolorier cette zone</h2>
  <input type="text" id="recolor-search" class="editor-search" placeholder="🔍 Rechercher un code…">
  <div id="recolor-grid" class="recolor-grid"></div>
  <div class="dialog-actions">
    <button id="recolor-clear-zone" class="btn-ghost danger-text">Vider cette zone</button>
    <button id="recolor-close" class="btn-secondary">Fermer</button>
  </div>
</dialog>

<div id="toast" class="toast"></div>

<script src="js/colorMath.js"></script>
<script src="js/db.js"></script>
<script src="js/app.js"></script>
</body>
</html>