ozai-webui/templates/home.html

54 lines
1.6 KiB
HTML
Raw Normal View History

2024-02-14 21:52:29 +01:00
<!DOCTYPE html>
<html>
<head>
<title>Ozai:home</title>
<link rel="icon" type="image/png" href="/azul-flake.png">
2024-02-14 21:52:29 +01:00
<style>
body {
2024-03-21 23:32:44 +01:00
background-color: black;
}
div {
2024-02-14 21:52:29 +01:00
display: flex;
2024-03-21 23:32:44 +01:00
flex-direction: row;
2024-02-14 21:52:29 +01:00
justify-content: center;
align-items: center;
2024-03-21 23:32:44 +01:00
flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
width: 90%;
position: relative;
left: 5%;
}
img {
position: relative;
left: 40%;
width: 20%;
2024-02-14 21:52:29 +01:00
}
2024-02-24 21:33:28 +01:00
2024-02-14 21:52:29 +01:00
a {
display: inline-block;
2024-03-21 23:32:44 +01:00
margin: 5%;
padding: 5vh 5vw; /* increase padding to make buttons larger */
2024-02-14 21:52:29 +01:00
text-decoration: none;
color: white;
2024-03-21 23:32:44 +01:00
background-color: rgb(0, 120, 247); /* Semi-transparent blue color to mimic the tiles */
border-radius: 1em;
2024-02-14 21:52:29 +01:00
font-weight: bold;
font-size: 3em; /* increase font size */
2024-03-21 23:32:44 +01:00
box-shadow: 0px 0.5em 1em rgba(255, 255, 255, 0.333); /* Add some shadow for depth */
transition: background-color 0.3s ease; /* Smooth transition for hover and focus */
2024-02-14 21:52:29 +01:00
}
2024-03-21 23:32:44 +01:00
a:hover, a:focus {
background-color: rgba(0, 120, 247, 0.7); /* Darker blue on hover and focus */
outline: none; /* Remove default focus outline */
2024-02-14 21:52:29 +01:00
}
</style>
</head>
<body>
2024-03-21 23:32:44 +01:00
<img src="azul-flake.png" alt="">
<div>
<a href="/create">Create Game</a>
<a href="/join">Join Game</a>
</div>
2024-02-14 21:52:29 +01:00
</body>
</html>