feat: mobile UI card layout for players and courses (#16)

views/pages/courses.ejs

@@ -19,6 +19,12 @@
             </div>
         </div>
 
+        <!-- Mobile tab pill (visible only on mobile via CSS) -->
+        <div class="m-tab-pill">
+            <button class="m-tab-pill__btn m-tab-pill__btn--active" type="button">Find courses</button>
+            <button class="m-tab-pill__btn m-tab-pill__btn--disabled" type="button" disabled>Import from Tjing</button>
+        </div>
+
         <div id="courses-table" hx-get="/partials/course-table" hx-trigger="load"></div>
 `; %>
 

views/pages/index.ejs

@@ -78,6 +78,20 @@
 
         <!-- Footnote -->
         <p class="footnote">Unofficial PDGA rating tracker. Ratings scraped from pdga.com on each refresh.</p>
+
+        <!-- Mobile sticky add-bar (visible only on mobile via CSS) -->
+        <form class="mobile-add-bar" onsubmit="searchAndAddPlayerMobile(event)">
+            <input
+                id="pdga-number-input-mobile"
+                name="pdga"
+                type="text"
+                inputmode="numeric"
+                placeholder="PDGA #"
+                oninput="this.value = this.value.replace(/\\D/g,'')"
+                aria-label="PDGA number"
+            />
+            <button type="submit" class="btn-primary">Add</button>
+        </form>
 `; %>
 
 <% var modals = `