Files
internetx-ddns-updater/public/index.html

194 lines
4.7 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DDNS Updater - Netstack GmbH</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #ff694a 0%, #87120d 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 60px 40px;
max-width: 600px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.logo {
max-width: 200px;
height: auto;
margin-bottom: 30px;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
h1 {
color: #333;
font-size: 2.5em;
margin-bottom: 20px;
font-weight: 700;
}
.emoji {
font-size: 3em;
margin-bottom: 20px;
display: inline-block;
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0%,
100% {
transform: rotate(0deg);
}
25% {
transform: rotate(20deg);
}
75% {
transform: rotate(-20deg);
}
}
p {
color: #555;
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 15px;
}
.highlight {
color: #ff694a;
font-weight: 600;
}
.cta {
margin-top: 40px;
padding: 30px;
background: linear-gradient(135deg, #ff694a 0%, #87120d 100%);
border-radius: 15px;
color: white;
}
.cta h2 {
font-size: 1.8em;
margin-bottom: 15px;
}
.cta p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1em;
margin-bottom: 20px;
}
.cta a {
display: inline-block;
padding: 15px 40px;
background: white;
color: #ff694a;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.1em;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta a:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.info {
margin-top: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
font-size: 0.9em;
color: #666;
}
.info code {
background: #e9ecef;
padding: 2px 8px;
border-radius: 4px;
font-family: 'Courier New', monospace;
color: #d63384;
}
@media (max-width: 768px) {
.container {
padding: 40px 20px;
}
h1 {
font-size: 2em;
}
.emoji {
font-size: 2.5em;
}
}
</style>
</head>
<body>
<div class="container">
<img src="/logo.svg" alt="Netstack GmbH Logo" class="logo">
<h1>Hey, DDNS Updater am Start!</h1>
<p>
<strong class="highlight">Krass, dass du das gefunden hast! 🚀</strong>
</p>
<p>
Dieser Service ist ein DDNS-Updater für unsere Standorte<br>
Er ermöglicht Routern wie DrayTek Vigor automatische DNS-Updates.
</p>
<div class="cta">
<h2>Bock bei uns zu arbeiten? 🤝</h2>
<p>
Die <strong>Netstack GmbH</strong> sucht talentierte Administratoren,<br>
die Lust auf coole Projekte wie diesen haben!
</p>
<a href="https://www.netstack.de/karriere" target="_blank" rel="noopener">
Jetzt bewerben! →
</a>
</div>
</div>
</body>
</html>