Make it better

2025-11-14 16:55:23 -07:00
parent b5d9e10786
commit 32c2e25fb6
1 changed files with 49 additions and 3 deletions
--- a/main.go
+++ b/main.go
@@ -2,9 +2,9 @@ package main

 import (
    "encoding/json"
+    "html/template"
    "log"
    "net/http"
-    "html/template"
 )

 type CatAPIResponse []struct {
@@ -17,17 +17,63 @@ var tpl = template.Must(template.New("index").Parse(`
 <head>
 <meta charset="UTF-8">
 <title>Random Cat Meme</title>
+<style>
+    body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background: #f2f2f2;
+        font-family: Arial, sans-serif;
+    }
+
+    h1 {
+        margin-bottom: 20px;
+        color: #333;
+    }
+
+    img {
+        max-width: 500px;
+        max-height: 500px;
+        margin-bottom: 20px;
+        border-radius: 12px;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        transition: transform 0.2s;
+    }
+
+    img:hover {
+        transform: scale(1.05);
+    }
+
+    button {
+        padding: 10px 20px;
+        font-size: 16px;
+        border: none;
+        border-radius: 8px;
+        background-color: #ff6f61;
+        color: white;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+
+    button:hover {
+        background-color: #ff3b2f;
+    }
+</style>
 <script>
 async function getCat() {
    const res = await fetch('/cat');
    const data = await res.json();
-    document.getElementById('catImage').src = data.url;
+    const img = document.getElementById('catImage');
+    img.src = data.url;
 }
+window.onload = getCat; // Load a cat immediately
 </script>
 </head>
 <body>
 <h1>Random Cat Meme</h1>
-<img id="catImage" src="" style="max-width:500px; display:block; margin-bottom:10px;">
+<img id="catImage" src="" alt="Random Cat Meme">
 <button onclick="getCat()">Get a new cat</button>
 </body>
 </html>