Add web templates and handlers for home, embed card, and admin pages

2025-05-18 12:23:00 +03:30
parent 0854387eb4
commit 7659cca37e
7 changed files with 657 additions and 7 deletions
--- a/internal/web/templates/home/embed.html
+++ b/internal/web/templates/home/embed.html
@@ -0,0 +1,62 @@
+{{ define "home/embed.html" }}
+<html lang='en'>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cat of the Day</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap');
+
+        .card {
+            background-color: #161616;
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+            padding: 20px;
+            width: 90%;
+            max-width: 400px;
+            text-align: center;
+            transition: transform 0.2s ease-in-out;
+            font-family: "Atma", system-ui;
+
+        }
+        .cat-image {
+            width: 100%;
+            border-radius: 5px;
+            margin-bottom: 15px;
+            object-fit: cover;
+            max-height: auto;
+            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+            transition: opacity 0.3s ease;
+        }
+
+
+        .button {
+            background-color: #9e44ae;
+            color: #e0e0e0;
+            border: none;
+            padding: 2px 15px;
+            border-radius: 5px;
+            cursor: pointer;
+            text-decoration: none;
+            box-sizing: border-box;
+            transition: background-color 0.3s ease, transform 0.2s ease-in-out;
+            font-weight: 500;
+        }
+
+        .button:hover {
+            background-color: #6d0e7e;
+            transform: scale(1.01);
+        }
+
+    </style>
+</head>
+<body>
+    <div class="card" style="margin: 0 auto;">
+        <img class="cat-image" id="catImage" src="{{ .imageUrl }}" alt="Cat Photo">
+        <a class="button" id="mastodonLink" href="{{ .postUrl }}" target="_blank" style="display: block;">View on Mastodon</a>
+    </div>
+
+</body>
+
+</html>
+{{ end }}