sauce-finder/index.templ
2025-08-23 19:48:04 -03:00

67 lines
1.7 KiB
Text

package main
import "fmt"
import "sauce/shared"
templ form() {
<marquee behavior="alternate"><h1>sauce guru</h1></marquee>
<p>upload your image:</p>
<form enctype="multipart/form-data" action="/search" method="POST" onsubmit="false">
<div>
<input name="search" type="file"/>
</div>
<div>
<button type="submit">find!</button>
</div>
</form>
}
templ results(originalB64 string, images []shared.Page) {
<div style="display: flex;">
<div>
<h2>searched image:</h2>
<img style="width: 20vw;" src={ originalB64 } crossorigin="anonymous"/>
</div>
<hr style="margin: 10px;">
<div style="margin: 30px;">
<h2>results:</h2>
<div style="
display: flex;
flex-direction: column;
">
for i, img := range images {
<div style="display: flex">
<a href={ templ.SafeURL(img.Url) } target="_blank">
<img
if i == 0 {
style="width: 20vw;"
} else {
style="width: 10vw;"
}
src={ fmt.Sprintf("/src?src=%s", img.Url) }/>
</a>
<div>
<p>{img.Publication.Title}</p>
<p>{fmt.Sprintf("page: %d", img.Order)}</p>
</div>
</div>
}
</div>
</div>
</div>
}
templ layout(body templ.Component) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sauce guru</title>
// <link href="css/style.css" rel="stylesheet">
</head>
<body>
@body
</body>
</html>
}