Compare commits
5 Commits
e6c65689ab
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 4c41f06b71 | |||
| 3e3f0affc4 | |||
| 32c2e25fb6 | |||
| b5d9e10786 | |||
| cd11a4113f |
65
main.go
65
main.go
@@ -2,9 +2,9 @@ package main
|
|||||||
|
|
||||||
import (
|
import (
|
||||||
"encoding/json"
|
"encoding/json"
|
||||||
|
"html/template"
|
||||||
"log"
|
"log"
|
||||||
"net/http"
|
"net/http"
|
||||||
"html/template"
|
|
||||||
)
|
)
|
||||||
|
|
||||||
type CatAPIResponse []struct {
|
type CatAPIResponse []struct {
|
||||||
@@ -17,22 +17,81 @@ var tpl = template.Must(template.New("index").Parse(`
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Random Cat Meme</title>
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cat-container {
|
||||||
|
width: 1000px;
|
||||||
|
height: 1000px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#catImage {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#catImage: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>
|
<script>
|
||||||
async function getCat() {
|
async function getCat() {
|
||||||
const res = await fetch('/cat');
|
const res = await fetch('/cat');
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
document.getElementById('catImage').src = data.url;
|
const img = document.getElementById('catImage');
|
||||||
|
img.src = data.url;
|
||||||
}
|
}
|
||||||
|
window.onload = getCat;
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Random Cat Meme</h1>
|
<h1>Random Cat Meme</h1>
|
||||||
<img id="catImage" src="" style="max-width:500px; display:block; margin-bottom:10px;">
|
<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)
|
||||||
|
|||||||
Reference in New Issue
Block a user