44r0n7/vidflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add GET API KEY button to setup screen, enlarge demo mode link

Browse Source 
- Add secondary .btn-s (cyan outline) button above ENTER VIDFLOW that opens the API key guide modal
- Simplify the hint text — the button makes the action self-evident
- Increase .sp-skip font-size 11px → 13px, brighten demo mode link color
- Wire #get-key-btn in initApiGuide() alongside existing #api-guide-btn

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Aaron
2026-05-23 12:07:47 -04:00
parent b0582bab9f
commit df0399bb3b
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vidflow.html
+9 -8
View File
@@ -36,13 +36,15 @@ html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-famil
.sp-hint a{color:var(--accent2);text-decoration:none}
.sp-hint a:hover{text-decoration:underline}
.btn-p{width:100%;background:var(--accent);color:#fff;border:none;font-family:var(--font-d);font-size:22px;letter-spacing:3px;padding:14px;cursor:pointer;transition:.15s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.btn-s{width:100%;background:transparent;color:var(--accent2);border:1px solid rgba(0,212,255,.35);font-family:var(--font-d);font-size:18px;letter-spacing:3px;padding:11px;cursor:pointer;transition:.15s;margin-bottom:10px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.btn-s:hover{background:rgba(0,212,255,.09);border-color:var(--accent2)}
.btn-p:hover{background:#ff4422;transform:translateY(-1px)}
.btn-p:active{transform:translateY(0)}
.btn-p:disabled{opacity:.5;cursor:default;transform:none}
.sp-err{color:#ff6644;font-size:11px;margin-top:10px;min-height:16px;text-align:center;letter-spacing:1px}
.sp-skip{text-align:center;margin-top:14px;font-size:11px;color:var(--dim);letter-spacing:.5px}
.sp-skip a{color:rgba(255,255,255,.28);cursor:pointer;text-decoration:underline}
.sp-skip a:hover{color:var(--dim)}
.sp-skip{text-align:center;margin-top:16px;font-size:13px;color:var(--dim);letter-spacing:.3px}
.sp-skip a{color:rgba(255,255,255,.45);cursor:pointer;text-decoration:underline}
.sp-skip a:hover{color:var(--text)}
/* ── APP ── */
#app{position:fixed;inset:0;display:none;flex-direction:column}
@@ -283,11 +285,8 @@ body.idle .gt,body.idle .gb,body.idle .gr,body.idle .gl{opacity:0;transition:opa
<div class="sp-sub">Music Video Television</div>
<div class="sp-label">YouTube Data API v3 Key</div>
<input id="api-in" class="sp-input" type="text" placeholder="AIzaSy..." autocomplete="off" spellcheck="false">
<div class="sp-hint">
A free YouTube API key lets VidFlow search playlists.<br>
<a href="https://console.cloud.google.com/marketplace/product/google/youtube.googleapis.com" target="_blank" rel="noopener">Get your key here</a> &mdash;
<a id="api-guide-btn" style="cursor:pointer;color:var(--accent2);text-decoration:underline">What's an API key?</a>
</div>
<div class="sp-hint">A free YouTube API key lets VidFlow search playlists. Takes about 60 seconds to get.</div>
<button class="btn-s" id="get-key-btn">&#128273; GET API KEY</button>
<button class="btn-p" id="setup-btn">ENTER VIDFLOW</button>
<div class="sp-err" id="sp-err"></div>
<div class="sp-skip">No key? <a id="skip-btn">Demo mode</a> (search disabled, add by URL works)</div>
@@ -914,6 +913,8 @@ function initApiGuide(){
const hide=()=>{ guide.style.display='none'; };
const btn=qs('#api-guide-btn');
if(btn) btn.onclick=show;
const getKeyBtn=qs('#get-key-btn');
if(getKeyBtn) getKeyBtn.onclick=show;
qs('#api-guide-close').onclick=hide;
qs('#api-guide-close2').onclick=hide;
guide.onclick=e=>{ if(e.target===guide) hide(); };