add html page w/ list of podcasts

2026-02-13 17:04:32 +03:00
parent 76b550d628
commit e4c22dbe47
2 changed files with 134 additions and 6 deletions
--- a/views/index.html
+++ b/views/index.html
@@ -0,0 +1,94 @@
+<!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>