301 lines
12 KiB
HTML
301 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>presseportale.com — Anmelden</title>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: "#F6F4EF",
|
|
"bg-elev": "#FBFAF6",
|
|
"bg-rule": "#E2DDD0",
|
|
"bg-rule-2": "#CFC8B5",
|
|
card: "#FFFFFF",
|
|
hub: "#1A2540",
|
|
"hub-2": "#243152",
|
|
"hub-soft": "#E5E9F1",
|
|
accent: "#B07A3A",
|
|
"accent-deep":"#8A5E27",
|
|
ink: "#1A1F1C",
|
|
"ink-2":"#3A413D",
|
|
"ink-3":"#5A6360",
|
|
"ink-4":"#8A918D",
|
|
},
|
|
fontFamily: {
|
|
sans: ['"Inter Tight"','Inter','system-ui','sans-serif'],
|
|
mono: ['"JetBrains Mono"','"SF Mono"','ui-monospace','monospace'],
|
|
},
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer components {
|
|
/* Field */
|
|
.field-input {
|
|
@apply w-full bg-white border border-bg-rule rounded-md
|
|
px-[13px] py-[11px] text-[14px] text-ink
|
|
outline-none transition-[border-color,box-shadow,background] duration-150;
|
|
}
|
|
.field-input::placeholder { color:#8A918D; }
|
|
.field-input:hover { @apply border-bg-rule-2; }
|
|
.field-input:focus {
|
|
@apply border-hub;
|
|
box-shadow: 0 0 0 3px rgba(26,37,64,0.10);
|
|
}
|
|
.field-label { @apply block text-[12.5px] font-semibold text-ink mb-1.5; }
|
|
|
|
/* Checkbox */
|
|
.check {
|
|
appearance:none; -webkit-appearance:none;
|
|
width:16px; height:16px;
|
|
border:1.5px solid #CFC8B5; border-radius:3px;
|
|
background:#FFFFFF; cursor:pointer; position:relative;
|
|
flex-shrink:0; transition: border-color .12s, background .12s;
|
|
margin:0;
|
|
}
|
|
.check:hover { border-color:#1A2540; }
|
|
.check:checked { background:#1A2540; border-color:#1A2540; }
|
|
.check:checked::before {
|
|
content:""; position:absolute;
|
|
left:4px; top:1px; width:5px; height:9px;
|
|
border:solid #fff; border-width:0 1.8px 1.8px 0;
|
|
transform:rotate(42deg);
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
@apply w-full inline-flex items-center justify-center gap-2
|
|
px-4 py-[11px] bg-hub text-white rounded-md
|
|
text-[14px] font-semibold transition-colors hover:bg-hub-2;
|
|
}
|
|
.btn-outline {
|
|
@apply w-full inline-flex items-center justify-center gap-2
|
|
px-4 py-[10px] bg-white text-ink rounded-md
|
|
border border-bg-rule text-[13px] font-semibold
|
|
transition-colors hover:bg-bg-elev hover:border-bg-rule-2;
|
|
}
|
|
.btn-sso {
|
|
@apply inline-flex items-center justify-center gap-2
|
|
px-3 py-[9px] bg-white text-ink rounded-md
|
|
border border-bg-rule text-[13px] font-semibold
|
|
transition-colors hover:bg-bg-elev hover:border-bg-rule-2;
|
|
}
|
|
|
|
/* Eyebrow */
|
|
.eyebrow-hub {
|
|
@apply text-[10.5px] font-bold tracking-[0.22em] uppercase text-hub;
|
|
}
|
|
|
|
/* Hub link */
|
|
.link-hub { @apply text-hub font-semibold no-underline hover:underline; text-underline-offset:3px; }
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
html, body { margin:0; padding:0; }
|
|
body { background:#F6F4EF; }
|
|
|
|
/* Atmosphäre: Raster + konzentrische Kreise */
|
|
.hub-grid {
|
|
position:absolute; inset:0;
|
|
background-image:
|
|
linear-gradient(to right, rgba(26,37,64,0.045) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(26,37,64,0.045) 1px, transparent 1px);
|
|
background-size: 56px 56px;
|
|
pointer-events:none;
|
|
}
|
|
.from-banner {
|
|
background:#FFFFFF;
|
|
border:1px solid #E2DDD0;
|
|
border-left:2px solid #1A2540;
|
|
border-radius:4px;
|
|
padding:8px 14px;
|
|
font-size:12px; color:#3A413D;
|
|
}
|
|
.field-pw-wrap { position:relative; }
|
|
.field-affix {
|
|
position:absolute; top:50%; right:10px; transform:translateY(-50%);
|
|
color:#5A6360; font-size:11.5px; font-weight:600;
|
|
background:transparent; border:0; cursor:pointer;
|
|
padding:4px 6px; border-radius:3px;
|
|
font-family:inherit;
|
|
}
|
|
.field-affix:hover { color:#1A2540; background:#F6F4EF; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans text-ink antialiased">
|
|
|
|
<!-- Vollflächiger Screen 100vh; Atmosphäre liegt hinter allem -->
|
|
<div class="relative min-h-screen flex flex-col overflow-hidden bg-bg">
|
|
|
|
<!-- Atmosphäre: Raster -->
|
|
<div class="hub-grid" aria-hidden="true"></div>
|
|
<!-- Atmosphäre: konzentrische Kreise um die Bildmitte -->
|
|
<svg class="absolute inset-0 w-full h-full pointer-events-none" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1280 880" aria-hidden="true">
|
|
<g opacity="0.09" stroke="#1A2540" fill="none" stroke-width="1">
|
|
<circle cx="640" cy="470" r="160"/>
|
|
<circle cx="640" cy="470" r="260"/>
|
|
<circle cx="640" cy="470" r="380"/>
|
|
<circle cx="640" cy="470" r="510"/>
|
|
<circle cx="640" cy="470" r="660"/>
|
|
</g>
|
|
</svg>
|
|
|
|
<!-- 3px Hub-Blau-Streifen ganz oben -->
|
|
<div class="relative h-[3px] bg-hub z-10"></div>
|
|
|
|
<!-- Header -->
|
|
<header class="relative z-10 px-10 py-[22px] flex items-center justify-between">
|
|
<a href="#" class="flex items-baseline gap-2.5 no-underline">
|
|
<span class="text-[19px] font-bold tracking-[-0.4px] text-hub leading-none">
|
|
presseportale<span class="text-accent">.com</span>
|
|
</span>
|
|
<span class="inline-block w-px h-[14px] bg-bg-rule"></span>
|
|
<span class="text-[9.5px] font-bold tracking-[0.22em] uppercase text-ink-3">
|
|
Publisher · Hub
|
|
</span>
|
|
</a>
|
|
<span class="text-[13px] text-ink-3">
|
|
Noch kein Konto? <a href="#" class="link-hub">Konto erstellen</a>
|
|
</span>
|
|
</header>
|
|
|
|
<!-- Center: Auth card -->
|
|
<main class="relative z-10 flex-1 flex items-center justify-center px-10 py-5">
|
|
<div class="w-full max-w-[440px]">
|
|
|
|
<!-- from=presseecho Banner -->
|
|
<div class="from-banner mb-3.5">
|
|
Ihr Konto funktioniert auch für <strong class="font-semibold text-ink">presseecho.de</strong>
|
|
und <strong class="font-semibold text-ink">businessportal24.com</strong>.
|
|
</div>
|
|
|
|
<!-- Card -->
|
|
<div class="bg-card border border-bg-rule rounded-lg px-9 pt-[34px] pb-8"
|
|
style="box-shadow:0 1px 0 rgba(26,31,28,0.03), 0 20px 50px -32px rgba(26,37,64,0.28);">
|
|
|
|
<div class="eyebrow-hub mb-2.5">Anmeldung im Publisher-Hub</div>
|
|
<h1 class="text-[26px] font-bold tracking-[-0.5px] leading-[1.2] m-0 mb-7 text-ink">
|
|
Willkommen zurück
|
|
</h1>
|
|
|
|
<form onsubmit="event.preventDefault();" class="space-y-[18px]">
|
|
|
|
<!-- Email -->
|
|
<div>
|
|
<label class="field-label" for="email">E-Mail-Adresse</label>
|
|
<input id="email" type="email" autocomplete="username"
|
|
class="field-input"
|
|
placeholder="redaktion@ihr-unternehmen.de" />
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div>
|
|
<div class="flex items-baseline justify-between mb-1.5">
|
|
<label class="field-label !mb-0" for="pw">Passwort</label>
|
|
<a href="#" class="link-hub text-[12px]">Passwort vergessen?</a>
|
|
</div>
|
|
<div class="field-pw-wrap">
|
|
<input id="pw" type="password" autocomplete="current-password"
|
|
class="field-input pr-[72px]"
|
|
placeholder="••••••••••" />
|
|
<button type="button" class="field-affix" data-toggle-pw="pw">Anzeigen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remember -->
|
|
<label class="flex items-center gap-2.5 text-[12.5px] text-ink-2 cursor-pointer select-none">
|
|
<input type="checkbox" class="check" checked />
|
|
Angemeldet bleiben
|
|
</label>
|
|
|
|
<!-- Primary -->
|
|
<button type="submit" class="btn-primary !mt-[22px]">Anmelden</button>
|
|
|
|
<!-- oder -->
|
|
<div class="flex items-center gap-3 !mt-[22px] !mb-[14px]">
|
|
<span class="flex-1 h-px bg-bg-rule"></span>
|
|
<span class="text-[11px] font-semibold tracking-[0.18em] uppercase text-ink-3">oder</span>
|
|
<span class="flex-1 h-px bg-bg-rule"></span>
|
|
</div>
|
|
|
|
<!-- Magic-Link -->
|
|
<button type="button" class="btn-outline !mt-0">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<rect x="2" y="3" width="12" height="10" stroke="currentColor" stroke-width="1.4"/>
|
|
<path d="M2.5 4l5.5 5 5.5-5" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
|
|
</svg>
|
|
Magic-Link senden
|
|
</button>
|
|
|
|
<!-- SSO -->
|
|
<div class="grid grid-cols-2 gap-2.5 !mt-2.5">
|
|
<button type="button" class="btn-sso">
|
|
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
|
|
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.99.66-2.25 1.06-3.72 1.06-2.86 0-5.29-1.93-6.15-4.53H2.18v2.84A11 11 0 0012 23z" fill="#34A853"/>
|
|
<path d="M5.85 14.11A6.6 6.6 0 015.5 12c0-.73.13-1.44.35-2.11V7.05H2.18A11 11 0 001 12c0 1.78.43 3.46 1.18 4.95l3.67-2.84z" fill="#FBBC05"/>
|
|
<path d="M12 5.38c1.62 0 3.07.56 4.21 1.65l3.16-3.16C17.45 2.09 14.96 1 12 1 7.7 1 3.99 3.47 2.18 7.05l3.67 2.84C6.71 7.3 9.14 5.38 12 5.38z" fill="#EA4335"/>
|
|
</svg>
|
|
Google
|
|
</button>
|
|
<button type="button" class="btn-sso">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<rect x="2" y="2" width="9" height="9" fill="#F25022"/>
|
|
<rect x="13" y="2" width="9" height="9" fill="#7FBA00"/>
|
|
<rect x="2" y="13" width="9" height="9" fill="#00A4EF"/>
|
|
<rect x="13" y="13" width="9" height="9" fill="#FFB900"/>
|
|
</svg>
|
|
Microsoft
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Micro-Footer -->
|
|
<footer class="relative z-10 px-10 pt-[18px] pb-[26px] flex items-center justify-between text-[11.5px] text-ink-3">
|
|
<span>
|
|
SSL <span class="text-ink-4 mx-2">·</span>
|
|
Daten in DE <span class="text-ink-4 mx-2">·</span>
|
|
2-Faktor verfügbar
|
|
</span>
|
|
<span>
|
|
<a href="#" class="text-ink-3 no-underline hover:text-ink">Impressum</a>
|
|
<span class="text-ink-4 mx-2">·</span>
|
|
<a href="#" class="text-ink-3 no-underline hover:text-ink">Datenschutz</a>
|
|
<span class="text-ink-4 mx-2">·</span>
|
|
<a href="#" class="text-ink-3 no-underline hover:text-ink">AGB</a>
|
|
<span class="text-ink-4 mx-2">·</span>
|
|
<a href="#" class="text-ink-3 no-underline hover:text-ink">Support</a>
|
|
</span>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Password show/hide
|
|
document.querySelectorAll('[data-toggle-pw]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const input = document.getElementById(btn.dataset.togglePw);
|
|
const isPw = input.type === 'password';
|
|
input.type = isPw ? 'text' : 'password';
|
|
btn.textContent = isPw ? 'Verbergen' : 'Anzeigen';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|