ReiMerc/temperature-alarm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create front page

Browse Source
This commit is contained in:
Reimar 2025-03-20 12:38:27 +01:00
parent 166a6aa8c8
commit 998ce39d2d
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
4 changed files with 85 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/img/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 KiB

BIN
frontend/img/background2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 KiB

26
frontend/index.html
View File

@ -1 +1,25 @@
<meta http-equiv="refresh" content="0; url=/login" /> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Temperature Alarm</title>
<link rel="stylesheet" href="/styles/frontpage.css">
</head>
<body>
<main>
<div id="title">
<h1>Temperature Alarm</h1>
<div id="buttons-wrapper">
<a href="/login">
<button class="secondary">Login</button>
</a>
<a href="/register">
<button class="primary">Sign up</button>
</a>
</div>
</div>
</main>
</body>
</html>

60
frontend/styles/frontpage.css Normal file
View File

@ -0,0 +1,60 @@
body {
margin: 0;
font-family: sans-serif;
}
main {
width: 100vw;
height: 100vh;
background-image: url("/img/background2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(255, 255, 255, 0.5);
}
h1 {
margin: 0;
font-size: 4rem;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}
#title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#buttons-wrapper {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
button {
border-radius: 4px;
padding: 1rem 2rem;
cursor: pointer;
transition-duration: 100ms;
}
button:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
}
button:active {
filter: brightness(0.9);
}
button.secondary {
background-color: white;
border: 1px solid #04aa6d;
}
button.primary {
background-color: #04aa6d;
border: none;
}