190 lines
6.8 KiB
HTML
190 lines
6.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
<title>Ready Set Golas! - Family Intranet</title>
|
||
|
<style>
|
||
|
body {
|
||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
background-color: #f5f7fa;
|
||
|
color: #333;
|
||
|
}
|
||
|
.container {
|
||
|
max-width: 1000px;
|
||
|
margin: 0 auto;
|
||
|
padding: 20px;
|
||
|
}
|
||
|
header {
|
||
|
background-color: #4a6fa5;
|
||
|
color: white;
|
||
|
padding: 1rem;
|
||
|
text-align: center;
|
||
|
border-radius: 8px;
|
||
|
margin-bottom: 30px;
|
||
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
h1 {
|
||
|
margin: 0;
|
||
|
font-size: 2.5rem;
|
||
|
}
|
||
|
.services-grid {
|
||
|
display: grid;
|
||
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
|
gap: 20px;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
.service-card {
|
||
|
background-color: white;
|
||
|
border-radius: 8px;
|
||
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
|
padding: 20px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
.service-card:hover {
|
||
|
transform: translateY(-5px);
|
||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
|
}
|
||
|
.service-icon {
|
||
|
font-size: 40px;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
.service-name {
|
||
|
font-weight: bold;
|
||
|
margin-bottom: 10px;
|
||
|
font-size: 1.2rem;
|
||
|
}
|
||
|
.service-description {
|
||
|
font-size: 0.9rem;
|
||
|
color: #666;
|
||
|
margin-bottom: 15px;
|
||
|
}
|
||
|
.service-link {
|
||
|
display: inline-block;
|
||
|
background-color: #4a6fa5;
|
||
|
color: white;
|
||
|
text-decoration: none;
|
||
|
padding: 8px 16px;
|
||
|
border-radius: 4px;
|
||
|
transition: background-color 0.3s ease;
|
||
|
}
|
||
|
.service-link:hover {
|
||
|
background-color: #3a5985;
|
||
|
}
|
||
|
footer {
|
||
|
margin-top: 40px;
|
||
|
text-align: center;
|
||
|
color: #888;
|
||
|
padding: 20px;
|
||
|
font-size: 0.9rem;
|
||
|
}
|
||
|
@media (max-width: 768px) {
|
||
|
.services-grid {
|
||
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
<div class="container">
|
||
|
<header>
|
||
|
<h1>Ready Set Golas!</h1>
|
||
|
<p>Family Intranet Services</p>
|
||
|
</header>
|
||
|
|
||
|
<div class="services-grid">
|
||
|
<!-- Actual services based on the list provided -->
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">🏠</div>
|
||
|
<div class="service-name">Coolify</div>
|
||
|
<div class="service-description">Server management</div>
|
||
|
<a href="https://home.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">📁</div>
|
||
|
<div class="service-name">Filestash</div>
|
||
|
<div class="service-description">File storage and sharing</div>
|
||
|
<a href="https://files.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">💰</div>
|
||
|
<div class="service-name">Actual Budget</div>
|
||
|
<div class="service-description">Family budgeting</div>
|
||
|
<a href="https://budget.golasfmily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">🔐</div>
|
||
|
<div class="service-name">Vaultwarden</div>
|
||
|
<div class="service-description">Password management</div>
|
||
|
<a href="https://passwords.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">🤖</div>
|
||
|
<div class="service-name">AnythingLLM</div>
|
||
|
<div class="service-description">AI assistant</div>
|
||
|
<a href="https://anything.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">📷</div>
|
||
|
<div class="service-name">Immich</div>
|
||
|
<div class="service-description">Photo management</div>
|
||
|
<a href="https://photos.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">🌐</div>
|
||
|
<div class="service-name">Open Web UI</div>
|
||
|
<div class="service-description">Web interface</div>
|
||
|
<a href="https://openwebui.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">📑</div>
|
||
|
<div class="service-name">Stirling PDF</div>
|
||
|
<div class="service-description">PDF management</div>
|
||
|
<a href="https://pdf.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">📝</div>
|
||
|
<div class="service-name">Affine Notes</div>
|
||
|
<div class="service-description">Family notes</div>
|
||
|
<a href="https://affine.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">🔑</div>
|
||
|
<div class="service-name">Authentik</div>
|
||
|
<div class="service-description">Authentication</div>
|
||
|
<a href="https://authentik.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">💻</div>
|
||
|
<div class="service-name">Code Server</div>
|
||
|
<div class="service-description">Web-based code editor</div>
|
||
|
<a href="https://code.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
|
||
|
<div class="service-card">
|
||
|
<div class="service-icon">🔄</div>
|
||
|
<div class="service-name">Gitea</div>
|
||
|
<div class="service-description">Git repository hosting</div>
|
||
|
<a href="https://gitea.golasfamily.com" class="service-link">Open</a>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<footer>
|
||
|
<p>© 2025 Golas Family - Ready Set Golas!</p>
|
||
|
</footer>
|
||
|
</div>
|
||
|
</body>
|
||
|
</html>
|