buttons to switch back and forth between search and image search

This commit is contained in:
abrendan 2024-02-15 16:03:08 +00:00
parent 3c55cd8964
commit f7dfba418f
4 changed files with 37 additions and 2 deletions

View File

@ -139,3 +139,35 @@ h1 {
border-radius: 6px; 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;
}

View File

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

View File

@ -17,7 +17,7 @@
</form> </form>
</div> </div>
<footer class="footer"> <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-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> <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> </footer>

View File

@ -9,9 +9,11 @@
<div class="container"> <div class="container">
<h1>Search Results</h1> <h1>Search Results</h1>
<div class="search-container"> <div class="search-container">
<!-- Search form with added image search button -->
<form action="/search" method="get" class="search-form"> <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" class="search-button">&#x1F50D;</button>
<button type="submit" formaction="/search/images" class="image-search-button">Pictures</button>
</form> </form>
</div> </div>
<ul class="results-list"> <ul class="results-list">