add search button

This commit is contained in:
2023-10-30 18:37:05 -04:00
parent 662df0d550
commit c75861db6a
3 changed files with 27 additions and 2 deletions

View File

@ -12,7 +12,7 @@
<h1 id="header" style="font-size: 5em;">Wall<span id="heaven">Heaven</span></h1> <h1 id="header" style="font-size: 5em;">Wall<span id="heaven">Heaven</span></h1>
<div id="searchbox"> <div id="searchbox">
<form action="/query.php" method="GET"> <form action="/query.php" method="GET">
<input type="text" placeholder="Search..." name="q"> <input type="text" placeholder="Search..." name="q"><input type='submit' value='Go'>
<br> <br>
<br> <br>
<div id="options"> <div id="options">

View File

@ -31,7 +31,8 @@
<div id="searchbox"> <div id="searchbox">
<form action="/query.php" method="GET"> <form action="/query.php" method="GET">
<?php <?php
printf("<input type='text' placeholder='Search...' name='q' value='%s'>\n", $_GET["q"]); printf("<input type='text' placeholder='Search...' name='q' value='%s'>", $_GET["q"]);
printf("<input type='submit' value='Go'>");
printf("<div id='options'>\n"); printf("<div id='options'>\n");
printf(" <input type='checkbox' name='SFW' id='SFW' %s>\n", $SFW); printf(" <input type='checkbox' name='SFW' id='SFW' %s>\n", $SFW);
printf(" <label for='SFW'>SFW</label>\n"); printf(" <label for='SFW'>SFW</label>\n");

View File

@ -29,10 +29,34 @@ h1, #header {
text-align: center; text-align: center;
} }
@media only screen and (max-width: 75em) {
#searchbox input[type=text] { width: 45vw !important; }
}
#searchbox { #searchbox {
text-align: center; text-align: center;
font-size: 1em; font-size: 1em;
} }
#searchbox input[type=text] {
width: 50em;
height: 2.5em;
box-sizing: border-box;
border: 3px solid #ccc;
border-right: none;
outline: none;
}
#searchbox input[type=text]:focus { background: #aaa; }
#searchbox input[type=submit]:hover { background: #aaa; }
#searchbox input[type=submit] {
width: 2.5em;
height: 2.5em;
font-weight: bold;
cursor: pointer;
margin: 0 1em 0 0;
background: #ccc;
border: 3px solid #ccc;
border-left: none;
}
#options { display: inline-block; } #options { display: inline-block; }