Skip to content

Instantly share code, notes, and snippets.

@simse
Created September 4, 2019 19:46
Show Gist options
  • Save simse/1448fe18f93765de78e0908f2ea1f7ed to your computer and use it in GitHub Desktop.
Save simse/1448fe18f93765de78e0908f2ea1f7ed to your computer and use it in GitHub Desktop.
Homelab index page
<html>
<head>
<title>fjordvej30.cloud - Search</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<img class="logo" src="assets/f30_logo.png">
<form action="https://google.com/search" method="GET" role="search" name="f" id="tsf">
<input type="text" name="q">
<br />
<button type="submit">Google Search</button>
</form>
<div class="shortcuts">
<h2>App shortcuts</h2>
<div class="break"></div>
<div class="shortcut">
<a href="https://radarr.fjordvej30.cloud/">
<img src="assets/radarr.png">
<p>Radarr</p>
</a>
</div>
<div class="shortcut">
<a href="https://sonarr.fjordvej30.cloud/">
<img src="assets/sonarr.png">
<p>Sonarr</p>
</a>
</div>
<div class="shortcut">
<a href="https://ombi.fjordvej30.cloud/">
<img src="assets/ombi.png">
<p>Ombi</p>
</a>
</div>
<div class="shortcut">
<a href="https://homeassistant.fjordvej30.cloud/">
<img src="assets/homeassistant.png">
<p>Home Assistant</p>
</a>
</div>
<div class="shortcut">
<a href="https://torrent.fjordvej30.cloud/">
<img src="assets/qbittorrent.png">
<p>qBittorrent</p>
</a>
</div>
<div class="shortcut">
<a href="https://tautulli.fjordvej30.cloud/">
<img src="assets/tautulli.png">
<p>Tautulli</p>
</a>
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Roboto';
}
.wrapper {
display: flex;
justify-content: center;
padding-top: 10%;
flex-direction: column;
align-items: center;
}
.logo {
max-width: 500px;
margin-bottom: 50px;
}
form {
display: flex;
flex-direction: column;
margin-bottom: 100px;
}
input {
border: 1px solid #dfe1e5;
padding: 15px;
border-radius: 28px;
outline: 0;
width: 450px;
font-size: 1.2rem;
}
button {
margin: 0 auto;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
color: #5F6368;
cursor: pointer;
font-family: arial,sans-serif;
font-size: 14px;
min-width: 54px;
padding: 12px 16px;
text-align: center;
}
button:hover {
border: 1px solid #c6c6c6;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
color: #222;
}
.shortcuts {
display: flex;
flex-wrap: wrap;
}
.break {
flex-basis: 100%;
height: 0;
}
.shortcuts h2 {
margin-bottom: 25px;
font-size: 1.2rem;
}
.shortcut {
text-align: center;
margin-right: 35px;
}
.shortcut img {
max-width: 70px;
}
a {
text-decoration: none;
color: #111;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment