wip restyling

This commit is contained in:
admin 2024-03-30 18:00:43 +01:00
parent 17643950b1
commit 8352e65b22
13 changed files with 1714 additions and 505 deletions

2
go.mod
View file

@ -1,6 +1,6 @@
module searchengine module searchengine
go 1.21.6 go 1.23
require ( require (
github.com/PuerkitoBio/goquery v1.9.1 // indirect github.com/PuerkitoBio/goquery v1.9.1 // indirect

View file

@ -32,6 +32,9 @@ var funcs = template.FuncMap{
var templates = template.Must(template.New("").Funcs(funcs).ParseFiles("templates/results.html")) var templates = template.Must(template.New("").Funcs(funcs).ParseFiles("templates/results.html"))
func main() { func main() {
// Serve static files from the 'static' directory
http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
http.HandleFunc("/", handleSearch) http.HandleFunc("/", handleSearch)
http.HandleFunc("/search", handleSearch) http.HandleFunc("/search", handleSearch)
fmt.Println("Server is listening on http://localhost:5000") fmt.Println("Server is listening on http://localhost:5000")

1675
static/css/style.css Normal file

File diff suppressed because it is too large Load diff

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,79 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TailsGo</title> <title>Search with TailsGo</title>
<link rel="stylesheet" type="text/css" href="./style.css"> <link rel="stylesheet" href="/static/css/style.css">
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5; /* Change the background color to your preference */
font-family: Arial, sans-serif; /* Change the font family to your preference */
}
.search-container {
text-align: center;
background-color: #fff; /* Change the background color to your preference */
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
}
.search-container h1 {
font-size: 36px;
color: #333; /* Change the title color to your preference */
margin-bottom: 20px;
}
.search-container input[type="text"] {
width: 80%;
padding: 10px;
border: 1px solid #ccc; /* Add a border */
border-radius: 4px;
font-size: 16px;
margin-bottom: 20px;
}
.search-container .search-button-wrapper {
display: flex;
justify-content: center;
}
.search-container .search-button-wrapper button {
padding: 10px 20px;
margin: 0 10px;
font-size: 16px;
background-color: #007bff; /* Change the button background color to your preference */
color: #fff; /* Change the button text color to your preference */
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.search-container .search-button-wrapper button:hover {
background-color: #0056b3; /* Change the button hover background color to your preference */
}
</style>
</head> </head>
<body> <body>
<div class="settings-search-div settings-search-div-search">
<!-- Assuming you have specific styles for this in your CSS -->
</div>
<form action="/search" class="search-container" method="post" autocomplete="off"> <form action="/search" class="search-container" method="post" autocomplete="off">
<h1>Tails<span class="X">Go</span></h1> <h1>TailsGo</h1>
<input type="text" name="q" autofocus /> <div class="wrapper">
<input type="text" name="q" autofocus id="search-input" placeholder="Type to search..." />
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="text" type="submit">search</button>
<a id="clearSearch" class="material-icons-round">close</a>
</div>
<div class="search-button-wrapper"> <div class="search-button-wrapper">
<button name="t" type="submit">Search with TailsGo</button> <button name="t" value="text" type="submit">Search Text</button>
<button name="t" type="submit">Search images with TailsGo</button> <button name="t" value="image" type="submit">Search Images</button>
</div> </div>
</form> </form>
</body> </body>
</html> </html>

View file

@ -1,341 +0,0 @@
body {
margin: 0;
}
html {
background-color: #1c1c1c;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.hide {
display: none;
}
input,
button {
outline: none;
}
.search-container {
text-align: center;
margin-top: 10%;
}
.search-container h1 {
font-size: 70px;
color: #F1F3F4;
}
.X {
color: #8ab4f8;
}
.search-container input {
width: 500px;
color: #F1F3F4;
background-color: #333333;
padding: 10px;
font-size: inherit;
font-family: sans-serif;
border: 1px solid #3C4043;
border-radius: 25px;
}
h3 {
color: #8ab4f8;
text-decoration: none;
}
h3:hover {
text-decoration: underline;
}
p {
color: #F1F3F4;
}
.results-search-container {
background-color: #161616;
width: 100%;
border-bottom: 1px solid #303134;
margin-bottom: 24px;
}
.results-search-container input {
width: 580px;
color: #fff;
position: relative;
left: 170px;
background-color: #333333;
padding: 10px;
font-size: inherit;
font-family: sans-serif;
border: 1px solid #3C4043;
border-radius: 25px;
margin-top: 14px;
margin-bottom: 16px;
}
.results {
position: relative;
left: 175px;
margin-top: 18px;
max-width: 581px;
word-wrap: break-word;
margin-bottom: 35px;
}
.search-button-wrapper button:hover {
border: 1px solid #5f6368;
cursor: pointer;
}
.search-button-wrapper button {
color: #F1F3F4;
background-color: #333333;
font-size: 14px;
border: 1px solid #333333;
border-radius: 4px;
padding: 13px 10px 13px 10px;
margin: 30px 60px 0px 60px;
}
.no-decoration {
text-decoration: none;
color: #F1F3F4;
}
.no-decoration:hover {
text-decoration: none;
}
.logomobile {
position: absolute;
margin-top: 0px;
top: 20px;
left: 38px;
}
.sub-search-button-wrapper button {
border: none;
background-color: inherit;
font-size: 15px;
margin-right: 14px;
color: #8ab4f8;
}
.sub-search-button-wrapper img {
vertical-align: middle;
margin-right: 5px;
width: 20px;
}
.sub-search-button-wrapper {
margin-left: 175px;
margin-bottom: 10px;
}
:root {
color-scheme: dark;
}
.fetched {
color: #999da2;
left: 175px;
position: relative;
font-size: 18px;
max-width: 580px;
}
.results a:visited h3 {
color: #bd93f9;
}
.results h3 {
font-size: 20px;
margin-top: 4px;
}
.results a,
.results a:hover,
.results a:visited {
text-decoration: none;
color: #999da2;
font-size: 14px;
}
.snip {
padding: 10px;
border: opacity 0;
width: 500px;
border-radius: 8px;
background: #282828;
color: #F1F3F4;
margin-left: 840px;
margin-top: 0px;
position: absolute;
font-size: 18px;
}
.snip a {
display: flex;
margin-top: 10px;
font-size: 14px;
color: #8ab4f8;
text-decoration: none;
}
.snip a:hover {
text-decoration: underline;
}
.snipp {
padding: 10px;
border-bottom: 1px solid #3C4043;
width: 500px;
background: inherit;
color: #F1F3F4;
margin-left: 170px;
margin-top: 0px;
position: relative;
font-size: 18px;
float: none;
}
.snipp a {
display: flex;
margin-top: 10px;
font-size: 14px;
color: #8ab4f8;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 500px;
}
.snipp a:hover {
text-decoration: underline;
}
@media only screen and (max-width: 1320px) {
.snip {
position: relative;
float: none;
margin-left: 170px;
}
}
@media only screen and (max-width: 750px) {
.snip {
position: relative;
float: none;
max-width: 90%;
margin-left: 10px;
width: auto;
font-size: 16px;
}
.snipp {
position: relative;
float: none;
max-width: 90%;
margin-left: 10px;
width: auto;
font-size: 16px;
}
p {
font-size: 14px;
}
html {
font-size: 14px;
}
h3 {
font-size: 18px;
}
.results-search-container {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.results-search-container input {
width: 80%;
position: relative;
left: 0px;
margin-top: 0px;
height: 20px;
}
.logomobile {
position: relative;
float: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px;
font-size: 28px;
display: block;
margin-top: 0px;
top: 0px;
left: 0px;
}
.sub-search-button-wrapper {
margin: 0;
padding: 0;
display: flex;
align-items: baseline;
margin-bottom: 10px;
}
.sub-search-button-wrapper img {
margin: 0;
padding: 0;
}
.sub-search-button-wrapper button {
margin-left: 30px;
margin-right: auto;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.results {
left: 20px;
max-width: 90%;
}
.fetched {
left: 20px;
max-width: 90%;
font-size: 16px;
}
.search-container h1 {
font-size: 55px;
}
.search-container {
margin-top: 10%;
text-align: center;
}
.search-container input {
width: 80%;
}
.search-button-wrapper button {
display: table-row;
margin: 30px 0px 0px 0px;
width: 80%;
}
}

View file

@ -2,107 +2,32 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Query}} - Search Results</title> <title>{{.Query}} - Search Results</title>
<style> <link rel="stylesheet" type="text/css" href="/static/css/style.css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif; /* Change the font family to your preference */
background-color: #f5f5f5; /* Change the background color to your preference */
}
.results-search-container {
text-align: center;
background-color: #fff; /* Change the background color to your preference */
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
margin: 20px auto;
max-width: 600px; /* Adjust the max-width to your preference */
}
.results-search-container h1 {
font-size: 24px;
color: #333; /* Change the title color to your preference */
margin-bottom: 20px;
}
.results-search-container input[type="text"] {
width: calc(100% - 120px); /* Adjust the width to leave space for the button */
padding: 10px;
border: 1px solid #ccc; /* Add a border */
border-radius: 4px;
font-size: 16px;
margin-bottom: 20px;
}
.results-search-container .sub-search-button-wrapper {
display: flex;
justify-content: center;
}
.results-search-container .sub-search-button-wrapper button {
padding: 10px 20px;
margin: 0 10px;
font-size: 16px;
background-color: #007bff; /* Change the button background color to your preference */
color: #fff; /* Change the button text color to your preference */
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.results-search-container .sub-search-button-wrapper button:hover {
background-color: #0056b3; /* Change the button hover background color to your preference */
}
.fetched, .snip, .snipp, .results {
text-align: center;
margin-top: 20px;
}
.results a {
text-decoration: none;
color: #007bff; /* Change the link color to your preference */
font-weight: bold;
}
.results h3 {
font-size: 20px;
margin-top: 10px;
margin-bottom: 5px;
}
.results p {
font-size: 16px;
margin-bottom: 0;
}
</style>
</head> </head>
<body> <body>
<form action="/search" class="results-search-container" method="post" autocomplete="off"> <div class="search-container">
<h1 class="logomobile"><a class="no-decoration" href="./">Tails<span class="X">Go</span></a></h1> <form action="/search" method="post" autocomplete="off">
<input type="text" name="q" value="{{ .Query }}" /> <h1>TailsGo</h1>
<div class="sub-search-button-wrapper"> <div class="wrapper">
<button name="t"><img src="/static/searchicon.png" alt="text result" />General</button> <input type="text" name="q" value="{{ .Query }}" autofocus id="search-input" placeholder="Type to search..." />
<button id="search-wrapper-ico" class="material-icons-round" name="t" type="submit">search</button>
<!-- Include clear search icon if functionality is supported -->
</div>
<div class="search-button-wrapper">
<!-- Additional search options buttons if needed -->
</div> </div>
</form> </form>
<!-- <h1>Search Results for "{{.Query}}"</h1> -->
{{range .Results}}
<div>
<a href="{{.URL}}">{{.Header}}</a><br>
<span>{{.Description}}</span>
</div> </div>
<br> <div class="results">
{{range .Results}}
<div class="result_item">
<a href="{{.URL}}"><h3>{{.Header}}</h3></a>
<p>{{.Description}}</p>
</div>
{{end}} {{end}}
<!-- <p>{{.Fetched}}</p> </div>
<p>{{.Snippet}}</p> <!-- Additional content and structured elements go here -->
<p>{{.KnoRdesc}}</p>
<p>{{.ElapsedTime}}</p>
<p>{{.RdescLink}}</p> -->
</body> </body>
</html> </html>