From 32c2e25fb645d20de1ef34aa11a0691906aa8710 Mon Sep 17 00:00:00 2001
From: Adam Montgomery <adam.montgomery17@gmail.com>
Date: Fri, 14 Nov 2025 16:55:23 -0700
Subject: [PATCH] Make it better

---
 main.go | 52 +++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 3 deletions(-)
diff --git a/main.go b/main.go
index 433df9f..588428b 100644
--- 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>
