185 lines
4.6 KiB
HTML
185 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Custom Search Page</title>
|
|
<style>
|
|
/* Reset & Basic Layout */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
color: #333;
|
|
background-color: #fcfcff;
|
|
}
|
|
|
|
/* HEADER BAR */
|
|
.header-bar {
|
|
background-color: #f8f8f8; /* Light gray header background */
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
}
|
|
.header-bar img {
|
|
height: 50px; /* Keeps header image small */
|
|
width: auto;
|
|
}
|
|
|
|
/* MAIN CONTENT WRAPPER */
|
|
.main-content {
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/* MASCOT IMAGE */
|
|
#mascot-img {
|
|
max-width: 200px;
|
|
width: auto;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* TAGLINE TEXT */
|
|
#tagline {
|
|
font-size: 1.1rem;
|
|
color: #555;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* SEARCH FORM LAYOUT */
|
|
.search-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* SEARCH BAR (Single Rounded Box) */
|
|
.search-container {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 300px; /* Adjust width as needed */
|
|
height: 40px; /* Adjust height as needed */
|
|
border: 1px solid #ccc; /* Thin border around entire box */
|
|
border-radius: 25px; /* Large radius for a rounded shape */
|
|
background-color: #fff;
|
|
overflow: hidden; /* Ensures child elements stay clipped to rounded corners */
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Subtle shadow */
|
|
}
|
|
|
|
/* SEARCH TEXT INPUT */
|
|
.search-container input[type="text"] {
|
|
flex: 1; /* Fills remaining space */
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
font-size: 1rem;
|
|
padding: 0 15px; /* Some horizontal padding */
|
|
}
|
|
|
|
/* SEARCH BUTTON */
|
|
.search-container button {
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
color: #333;
|
|
padding: 0 15px;
|
|
height: 100%;
|
|
border-left: 1px solid #ccc; /* Subtle divider line between input & button */
|
|
}
|
|
.search-container button:hover {
|
|
background-color: #f7f7f7; /* Slight hover effect */
|
|
}
|
|
|
|
/* RADIO BUTTONS */
|
|
.radio-options {
|
|
margin-top: 15px;
|
|
font-size: 0.9rem;
|
|
color: #333;
|
|
}
|
|
.radio-options input[type="radio"] {
|
|
transform: scale(0.9);
|
|
margin-right: 3px; /* space between circle and label */
|
|
vertical-align: middle;
|
|
}
|
|
.radio-options label {
|
|
margin-right: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* FOOTER LINKS */
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
.footer a {
|
|
text-decoration: none;
|
|
color: #0066cc;
|
|
margin: 0 5px;
|
|
}
|
|
.footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- HEADER BAR -->
|
|
<div class="header-bar">
|
|
<img src="header.png" alt="Header Image" />
|
|
</div>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<div class="main-content">
|
|
<img id="mascot-img" src="main.png" alt="Mascot Image" />
|
|
|
|
<!-- Tagline -->
|
|
<div id="tagline">a search engine for the rest of us</div>
|
|
|
|
<!-- Search Form -->
|
|
<form class="search-form" action="https://science.tsugutsugugo.com/yacysearch.html?query={}" method="get">
|
|
<div class="search-container">
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
placeholder="Search..."
|
|
/>
|
|
<button type="submit">Search</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Radio Buttons -->
|
|
<!-- Should change depending on category -->
|
|
<div class="radio-options">
|
|
<input type="radio" name="category" id="science" value="science" checked />
|
|
<label for="science">Science</label>
|
|
|
|
<input type="radio" name="category" id="philosophy" value="philosophy" />
|
|
<label for="philosophy">Philosophy</label>
|
|
|
|
<input type="radio" name="category" id="tech" value="tech" />
|
|
<label for="tech">Tech</label>
|
|
|
|
<input type="radio" name="category" id="discover" value="discover" />
|
|
<label for="discover">Discover the Web</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<div class="footer">
|
|
<a href="https://git.tsugutsugugo.com/explore/repos">Source</a> | <a href="https://docs.tsugutsugugo.com/">Docs</a>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|