Add API explorer section to the page

Lists every /api endpoint, fetches the picked one live with highlighted
output and a copy-curl button; nav API link now scrolls to it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-19 21:51:24 +00:00
co-authored by Claude Opus 5.5
parent 6040e3c2a5
commit ae08800643
4 changed files with 62 additions and 3 deletions
+20 -1
View File
@@ -99,6 +99,24 @@ dt { color: var(--cyan); text-align: right }
dd { overflow-wrap: anywhere }
.err { color: #ff9db0 }
.api { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; margin-top: 16px }
#eps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px }
#eps button { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; text-align: left; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; transition: background .2s, border-color .2s }
#eps button:hover { background: rgba(60, 120, 255, .08) }
#eps .on { border-color: rgba(127, 214, 255, .35); background: rgba(60, 120, 255, .1) }
#eps code { font: 14px var(--mono) }
#eps code em { font-style: normal; color: var(--cyan) }
#eps span { font-size: 13px; color: var(--mute) }
.res { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(2, 8, 22, .7); overflow: hidden }
.rq { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); font: 13px var(--mono); color: var(--mute) }
.rq code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rq code b { font-weight: 400; color: var(--cyan) }
.rq button { flex-shrink: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: none; font: 12px var(--mono); color: var(--cyan); cursor: copy }
#rs { flex: 1; min-height: 230px; margin: 0; padding: 14px; overflow: auto; font: 13px/1.65 var(--mono); color: var(--ink) }
#rs b { font-weight: 400; color: #8fb4ff }
#rs em { font-style: normal; color: #cfe9ff }
#rs i { font-style: normal; color: var(--cyan) }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 0 44px; color: var(--dim); font-size: 13px }
.npm { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 12, 32, .6); font: 13px var(--mono); color: var(--cyan); cursor: copy }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 9px 16px; border-radius: 10px; background: rgba(10, 30, 80, .92); border: 1px solid rgba(127, 214, 255, .35); font: 13px var(--mono); box-shadow: 0 10px 40px rgba(0, 0, 0, .5) }
@@ -115,9 +133,10 @@ footer { display: flex; align-items: center; justify-content: space-between; gap
.units { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px }
.unit, .unit:nth-child(n+4) { grid-column: auto }
.unit:last-child { grid-column: span 2 }
.grid, .cv, #miles { grid-template-columns: minmax(0, 1fr) }
.grid, .cv, #miles, .api { grid-template-columns: minmax(0, 1fr) }
.wide { grid-column: auto }
.v { font-size: 16px }
#rs { min-height: 120px }
.map { margin: 22px -20px 0 }
footer { flex-direction: column; align-items: flex-start }
}