buttons to switch back and forth between search and image search

static/styles_results.css

@@ -139,3 +139,35 @@ h1 {
   border-radius: 6px;
 }
 
+.image-search-button {
+  padding: 0.5rem 1rem;
+  background-color: #000000;
+  color: #fff;
+  border: 1px solid #000000;
+  margin-left: 8px; /* Spacing between buttons */
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 1rem;
+  text-align: center;
+}
+.image-search-button:hover {
+  background-color: #6e6e6e;
+  border: 1px solid #8a8a8a;
+}
+
+.text-search-button {
+  padding: 0.5rem 1rem;
+  background-color: #000000;
+  color: #fff;
+  border: 1px solid #000000;
+  margin-left: 8px; /* Spacing between buttons */
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 1rem;
+  text-align: center;
+}
+.text-search-button:hover {
+  background-color: #6e6e6e;
+  border: 1px solid #8a8a8a;
+}
+

templates/image_results.html

@@ -12,6 +12,7 @@
       <form action="/search/images" method="get" class="search-form">
         <input type="text" name="query" class="search-input" placeholder="Search for images..." value="{{ query }}">
         <button type="submit" class="search-button">&#128269;</button>
+        <button type="submit" formaction="/search" class="search-button text-search-button">Back</button>
       </form>
     </div>
     <div class="image-results">

templates/index.html

@@ -17,7 +17,7 @@
     </form>
   </div>
   <footer class="footer">
-    <p class="footer-text-left">&copy; 2023 Nochu Search by abrendan</p>
+    <p class="footer-text-left">&copy; 2024 Nochu Search by abrendan</p>
     <p class="footer-text-middle"><a href="https://www.abrendan.dev" class="footer-link">abrendan.dev</a></p>
     <p class="footer-text-right"><a href="https://www.pexels.com/de-de/foto/kalt-schnee-strasse-dammerung-6469507/" class="footer-link">Background image by Karolina Kot</a></p>
   </footer>

templates/results.html

@@ -9,9 +9,11 @@
   <div class="container">
     <h1>Search Results</h1>
     <div class="search-container">
+      <!-- Search form with added image search button -->
       <form action="/search" method="get" class="search-form">
-        <input type="text" name="query" required class="search-input" placeholder="Search again...">
+        <input type="text" name="query" value="{{ query }}" required class="search-input" placeholder="Search again...">
         <button type="submit" class="search-button">&#x1F50D;</button>
+        <button type="submit" formaction="/search/images" class="image-search-button">Pictures</button>
       </form>
     </div>
     <ul class="results-list">