ninja_hippo/card-grader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a dedicated Take Photo button alongside the library picker

Browse source
This commit is contained in:
Barely Removable 2026-08-22 09:32:10 -07:00
parent e74bcee35f
commit 6b247794db
2 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

11
static/index.html
View file

@ -44,10 +44,19 @@
back centering, and it can only tell a print line from a crease — about five PSA
grades apart — if it can check both sides.</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
<button id="btn-grade" class="btn">Choose photo(s)…</button>
<button id="btn-camera" class="btn">Take photo…</button>
<button id="btn-grade" class="btn btn-quiet">Choose from library…</button>
<input id="grade-label" class="input" placeholder="Card name (optional, for your history)" style="flex:1 1 220px">
</div>
<input id="grade-file" type="file" accept="image/*" multiple hidden>
<!-- capture="environment" is what skips straight to the rear camera
instead of showing the OS's photo-library picker — the library
input above already offers a camera option buried in that picker
on most phones, but a dedicated button is one tap instead of two,
and makes "take a fresh photo" the obvious default rather than
something you have to notice. Desktop browsers just ignore
`capture` and fall back to a normal file picker. -->
<input id="grade-camera" type="file" accept="image/*" capture="environment" hidden>
<div id="grade-status" class="search-status" hidden></div>
<div id="grade-review"></div>
</section>