diff --git a/mobile.html b/mobile.html index 6bf1bca..7af8ccc 100644 --- a/mobile.html +++ b/mobile.html @@ -68,7 +68,7 @@ .brandlogo{ height:clamp(21px,4.2vmin,30px); width:auto; display:block; } .hicons{ display:flex; align-items:center; gap:8px; margin-left:auto; } .hicons .icon{ width:36px; height:36px; font-size:16px; } - .sels{ display:flex; gap:8px; align-items:flex-end; } + .sels{ width:100%; display:flex; gap:8px; align-items:flex-end; } .sel{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; } .sel > span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-left:3px; } .sel select{ width:100%; background:var(--field-bg); color:var(--txt); border:1px solid var(--field-bd); border-radius:10px; padding:10px 8px; font-size:15px; } @@ -196,19 +196,17 @@ .tbtn.prac{ background:linear-gradient(180deg,#1c87b8,#136488); border-color:#1f9bd0; color:#eaf8ff; } .tbtn.prac.on{ background:linear-gradient(180deg,#c8922a,#9c6f12); border-color:#e0a93a; color:#fff; } - /* landscape (phone AND tablet — same layout, just scaled): 2-column grid — - pulse + transport on the left, panel + lanes on the right */ + /* landscape (phone AND tablet): header stays a full-width column (logo+icons + row, then volume row); the body becomes a 2-column grid — tempo + transport + on the left, selector + settings + lanes on the right */ @media (orientation:landscape){ #app{ --maxw:1060px; } - #top{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:8px 14px; } - #brandrow{ flex:1 1 100%; } - #top .vol{ flex:1 1 220px; width:auto; min-width:0; } - #top .sels{ flex:2 1 320px; min-width:0; } #mid{ display:grid; align-items:stretch; gap:8px 4vw; padding-top:0; - grid-template-columns:40% 60%; grid-template-rows:auto 1fr auto; - grid-template-areas:"stage panel" "stage detail" "transport detail"; } - #trackpanel{ grid-area:panel; align-self:start; } + grid-template-columns:40% 60%; grid-template-rows:auto auto 1fr auto; + grid-template-areas:"stage sels" "stage panel" "stage detail" "transport detail"; } #stage{ grid-area:stage; align-self:center; justify-content:center; } + .sels{ grid-area:sels; align-self:start; } + #trackpanel{ grid-area:panel; align-self:start; } #detail{ grid-area:detail; align-self:stretch; width:auto; max-width:none; max-height:none; min-height:0; overflow-y:auto; } #transport{ grid-area:transport; align-self:end; max-height:none; margin-top:0; } .tbtn{ min-height:0; height:clamp(34px,10vmin,54px); } @@ -276,14 +274,23 @@
+ + +
+
+
+ +
120BPM
+ +
+
+
+
-
- -
@@ -294,15 +301,6 @@
→ + bpm / bars
play / mute bars
-
-
- -
120BPM
- -
-
-
-
@@ -844,10 +842,10 @@ function loadFromHash(text){ /* ========================= HELP TOUR ========================================= */ const TOUR=[ {sel:"#brandrow,#volrow", title:"Controls", text:"The ↑ share menu, ? to replay this tour, ◐ light/dark theme, ⛶ full screen, and the full-width volume slider (soft p → loud f)."}, + {sel:"#pulse", title:"Tempo", text:"Tap the BPM to tap-tempo, press-and-hold to type an exact value, the TAP button to tap it out, or drag the wheel up/down to scrub."}, {sel:".sels", title:"Pick what to play", text:"Choose a set list and the track within it. Tracks are your practice items — name them for whatever you're working on, even if two share the same beat."}, {sel:"#saveBtn", title:"Save & library", text:"Save the current track — “Save as new”, or “Update” one of yours. The same sheet is your library: make set lists and rename / reorder / delete tracks. It all lives with the full editor too."}, - {sel:"#trackpanel", title:"Track settings", text:"Optional per-track extras (above the tempo): Repeat for N bars then stop / next / prev track, a tempo ramp, and practice gaps."}, - {sel:"#pulse", title:"Tempo", text:"Tap the BPM to tap-tempo, press-and-hold to type an exact value, the TAP button to tap it out, or drag the wheel up/down to scrub."}, + {sel:"#trackpanel", title:"Track settings", text:"Optional per-track extras: Repeat for N bars then stop / next / prev track, a tempo ramp, and practice gaps."}, {sel:"#lanes", title:"Edit the beat", text:"Each lane is a row of pads that blink on the beat — tap a pad to cycle rest → beat → accent → ghost. Tap a lane's label to set its note value (eighths, triplets, sixteenths…), sound, grouping, mute or polymeter. “+ Add lane” for more."}, {sel:"#bDn10,#bDown,#bUp,#bUp10", title:"Nudge the tempo", text:"Step the BPM up or down while it keeps playing: −10 / −1 / +1 / +10. Great for settling on a comfortable speed or pushing it faster as you improve."}, {sel:"#bPrev,#bNext", title:"Previous / next track", text:"⏮ and ⏭ move to the previous or next track in the current set list. If the metronome is running it carries straight on into the new track."},