search stops

web/templates/index.html

@@ -3,11 +3,15 @@
     <i>A fantastic way to ride SEPTA</i>
 </p>
 <p style="margin-top: 25px;">
-    SEPTASTIC is a website and (a soon to be) mobile app. Its purpose is to provide
-    information about how to ride SEPTA (and connecting transit authorities) in a
-    quick and information-rich manner.
+    SEPTASTIC is a website which provides information about riding SEPTA. It's 
+    source code is available at 
+    <a href="https://git.nickorlow.com/nickorlow/septastic">git.nickorlow.com</a>
 </p>
+
 <p style="margin-top: 25px; margin-bottom: 25px;">
-    Currently, all this website has is <a href="/routes">timetables for every
-    SEPTA route</a>. More to come soon!
+    This website is mostly for personal use, and thus the interface and data 
+    is tailored to my SEPTA riding experience. This manifests in a couple of 
+    weird things, such as the non-existent 'Susquehanna Transit Center'.
 </p>
+
+

web/templates/stop_search_results.html

@@ -0,0 +1,12 @@
+{% for stop in results %}
+<a href="/stop/{{ stop.id }}"
+   style="display: flex;
+          justify-content: space-between">
+    <p class="line-link">[ {{ stop.name }}</p>
+    <p>]</p>
+</a>
+{% endfor %}
+
+{% if results.len() == 0 %}
+<p>No results found</p>
+{% endif %}

web/templates/stops.html

@@ -14,6 +14,19 @@
         </a>
     {% endfor %}
 </fieldset>
+<fieldset>
+    <legend>
+        <h2>Other Stops</h2>
+    </legend>
+    <p style="margin-top: 10px; margin-bottom: 10px;">SEPTA has 13,000+ stops, search for yours here</p>
+    <input style="width: 100%;" type="search"
+           name="search" placeholder="Begin Typing To Search Stops..."
+           hx-post="/stops/search"
+           hx-trigger="input changed delay:500ms, keyup[key=='Enter'], load"
+           hx-target="#stop-list">
+    <div id="stop-list">
+    </div>
+</fieldset>
 <style>
     .line-link, .lines-label {
         white-space: pre;