95 lines
1.8 KiB
HTML
95 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>podcaster</title>
|
|
|
|
<style>
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
max-width: 1440px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
.podcast-form {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.podcast-form__input {
|
|
width: 100%;
|
|
}
|
|
|
|
.podcast-form__btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.podcasts {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, 250px);
|
|
gap: 12px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.podcast {
|
|
display: block;
|
|
}
|
|
|
|
.podcast__cover {
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
.podcast-form {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.podcast-form__btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 528px) {
|
|
.podcasts {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>podcaster</h1>
|
|
|
|
<form method="POST" action="/podcasts" class="podcast-form">
|
|
<input
|
|
type="text"
|
|
inputmode="url"
|
|
placeholder="rss feed"
|
|
name="feed"
|
|
class="podcast-form__input"
|
|
/>
|
|
<button type="submit" class="podcast-form__btn">Add podcast</button>
|
|
</form>
|
|
|
|
<div class="podcasts">
|
|
{{range .Podcasts}}
|
|
<a href="/podcasts/{{.ID}}" class="podcast">
|
|
<img src="{{.Image}}" alt="" class="podcast__cover" />
|
|
<span>{{.Name}}</span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
</body>
|
|
</html>
|