adam/cat-memes
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Make it better again
All checks were successful
Build Cat Web App Container / build (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Adam Montgomery
2025-11-14 16:57:56 -07:00
parent 32c2e25fb6
commit 3e3f0affc4
1 changed files with 52 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
main.go
View File

@@ -18,7 +18,7 @@ var tpl = template.Must(template.New("index").Parse(`
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Random Cat Meme</title> <title>Random Cat Meme</title>
<style> <style>
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -26,27 +26,37 @@ var tpl = template.Must(template.New("index").Parse(`
min-height: 100vh; min-height: 100vh;
background: #f2f2f2; background: #f2f2f2;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
h1 { h1 {
margin-bottom: 20px; margin-bottom: 20px;
color: #333; color: #333;
} }
img { #cat-container {
max-width: 500px; width: 500px;
max-height: 500px; height: 500px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
background: white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2); box-shadow: 0 4px 10px rgba(0,0,0,0.2);
overflow: hidden;
}
#catImage {
max-width: 100%;
max-height: 100%;
transition: transform 0.2s; transition: transform 0.2s;
} }
img:hover { #catImage:hover {
transform: scale(1.05); transform: scale(1.05);
} }
button { button {
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
border: none; border: none;
@@ -55,11 +65,11 @@ var tpl = template.Must(template.New("index").Parse(`
color: white; color: white;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
button:hover { button:hover {
background-color: #ff3b2f; background-color: #ff3b2f;
} }
</style> </style>
<script> <script>
async function getCat() { async function getCat() {
@@ -68,17 +78,20 @@ async function getCat() {
const img = document.getElementById('catImage'); const img = document.getElementById('catImage');
img.src = data.url; img.src = data.url;
} }
window.onload = getCat; // Load a cat immediately window.onload = getCat;
</script> </script>
</head> </head>
<body> <body>
<h1>Random Cat Meme</h1> <h1>Random Cat Meme</h1>
<img id="catImage" src="" alt="Random Cat Meme"> <div id="cat-container">
<img id="catImage" src="" alt="Random Cat Meme">
</div>
<button onclick="getCat()">Get a new cat</button> <button onclick="getCat()">Get a new cat</button>
</body> </body>
</html> </html>
`)) `))
func main() { func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
tpl.Execute(w, nil) tpl.Execute(w, nil)