128 lines
No EOL
13 KiB
PHP
128 lines
No EOL
13 KiB
PHP
<?php require_once __DIR__ . '/inc/header.php'; ?>
|
||
<style>
|
||
@keyframes colorCycle {
|
||
0%, 100% { color: #22d3ee; opacity: 1; text-shadow: 0 0 8px rgba(34, 211, 238, 0.5); }
|
||
20% { color: #34d399; opacity: 0.4; text-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
|
||
40% { color: #fbbf24; opacity: 1; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
|
||
60% { color: #fb7185; opacity: 0.4; text-shadow: 0 0 8px rgba(251, 113, 133, 0.5); }
|
||
80% { color: #818cf8; opacity: 1; text-shadow: 0 0 8px rgba(129, 140, 248, 0.5); }
|
||
}
|
||
.animate-color-cycle { animation: colorCycle 4s ease-in-out infinite; }
|
||
</style>
|
||
<div class="max-w-4xl w-full mx-auto mt-4 md:mt-12 px-4 sm:px-6 relative z-10">
|
||
<div class="mb-8 sm:mb-10 flex justify-center md:justify-start">
|
||
<h1 class="text-2xl sm:text-3xl font-bold text-slate-100 font-mono tracking-tight">
|
||
<span class="sr-only">Philipp Urbschat – Webentwickler für Individualsoftware, Webdesign, SEO, Datenanalyse und KI-Lösungen in Detmold. Fullstack-Entwicklung für Frontend und Backend.</span>
|
||
<span class="animate-color-cycle" aria-hidden="true">_</span>PhilippUrbschat
|
||
</h1>
|
||
</div>
|
||
<div class="flex flex-col md:flex-row items-center md:items-start gap-6 sm:gap-10 mb-16 sm:mb-20">
|
||
<div class="relative group cursor-pointer" onclick="triggerGimmick(event)">
|
||
<div class="absolute -inset-4 bg-linear-to-r from-emerald-500/20 via-purple-500/20 to-cyan-500/20 rounded-full blur-2xl opacity-50 group-hover:opacity-100 animate-pulse transition-opacity duration-700"></div>
|
||
<div class="relative w-24 h-24 md:w-32 md:h-32 shrink-0 bg-slate-900/80 border border-slate-700/60 rounded-3xl shadow-2xl hover:scale-105 transition-all duration-500 flex items-center justify-center text-4xl md:text-5xl backdrop-blur-md overflow-hidden">
|
||
<span id="invader-icon" role="img" aria-label="Philipp Urbschat - Digital Developer Icon" class="drop-shadow-[0_0_15px_rgba(168,85,247,0.8)] animate-invader inline-block select-none">👾</span>
|
||
</div>
|
||
</div>
|
||
<div class="text-center md:text-left mt-2 md:mt-0">
|
||
<div class="text-base md:text-lg text-slate-400 font-light leading-normal max-w-2xl space-y-4">
|
||
<p><strong class="text-slate-200">Developer, Designer, Punkrocker, Problem Solver.</strong></p>
|
||
<p>Digital with <strong class="text-fuchsia-400 font-bold drop-shadow-[0_0_12px_rgba(232,121,249,0.6)]">zero Bullshit</strong>. Whether it's a <strong class="text-cyan-400 font-semibold drop-shadow-[0_0_8px_rgba(34,211,238,0.3)]">thoughtful frontend</strong>, a <strong class="text-emerald-400 font-semibold drop-shadow-[0_0_8px_rgba(52,211,153,0.3)]">solid backend</strong>, <strong class="text-amber-400 font-semibold drop-shadow-[0_0_8px_rgba(251,191,36,0.3)]">hands-on SEO</strong>, <strong class="text-rose-400 font-semibold drop-shadow-[0_0_8px_rgba(251,113,133,0.3)]">deep data analysis</strong>, <strong class="text-indigo-400 font-semibold drop-shadow-[0_0_8px_rgba(129,140,248,0.3)]">smart AI integrations</strong>, or a <strong class="text-purple-400 font-bold drop-shadow-[0_0_8px_rgba(192,132,252,0.3)]">sharp concept tying it all together</strong> – I build systems that just work.</p>
|
||
<p>Active staging ground for <strong class="text-slate-300">raw code experiments</strong> and <strong class="text-slate-300">live test environments</strong>.</p>
|
||
</div>
|
||
<div class="mt-6 sm:mt-8 flex gap-6 justify-center md:justify-start items-center">
|
||
<a href="mailto:hi@philippurbschat.de" class="group font-mono text-sm text-slate-500 hover:text-fuchsia-400 transition-all flex items-center gap-2">
|
||
<span class="text-fuchsia-500/50 group-hover:scale-125 transition-transform inline-block">#</span>
|
||
<span class="relative">hi@philippurbschat.de<span class="absolute bottom-0 left-0 w-0 h-px bg-fuchsia-500 group-hover:w-full transition-all duration-300"></span></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-10 mb-16">
|
||
<?php if (isset($_SESSION['user_email'])):
|
||
$isAdmin = !empty($_SESSION['is_admin']);
|
||
$userProjects = $_SESSION['user_projects'] ?? [];
|
||
$accessibleModules = ModuleService::getAccessibleForUser($userProjects, $isAdmin);
|
||
?>
|
||
<div class="p-5 sm:p-8 bg-slate-900/80 border border-emerald-500/20 rounded-3xl sm:rounded-[2.5rem] backdrop-blur-xl shadow-[0_0_30px_rgba(16,185,129,0.15)] relative group overflow-hidden">
|
||
<div class="absolute top-0 left-0 w-full h-1 bg-linear-to-r from-transparent via-emerald-500/40 to-transparent"></div>
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div>
|
||
<h2 class="text-slate-300 text-xs font-bold uppercase tracking-[0.2em] font-mono">Module & Projekte</h2>
|
||
<p class="text-[11px] font-mono text-slate-400 mt-0.5">
|
||
<?= htmlspecialchars($_SESSION['user_email']) ?>
|
||
<?php if ($isAdmin): ?>
|
||
<a href="<?= Config::get('BASE_URL', '/') ?>admin" class="ml-1 text-[10px] px-1.5 py-0.5 bg-fuchsia-500/10 hover:bg-fuchsia-500/20 text-fuchsia-400 hover:text-fuchsia-300 border border-fuchsia-500/30 rounded transition-colors inline-block" title="Zum Admin-Bereich">ADMIN</a>
|
||
<?php endif; ?>
|
||
</p>
|
||
</div>
|
||
<a href="<?= Config::get('BASE_URL', '/') ?>login/logout" class="text-xs font-mono text-rose-400 hover:text-rose-300 transition-colors uppercase tracking-wider">Logout</a>
|
||
</div>
|
||
<p class="text-slate-400 text-xs mb-4 font-mono"><span class="text-emerald-500 animate-pulse">/</span> access_granted – Freigeschaltete Systeme:</p>
|
||
<div class="space-y-3 relative z-10">
|
||
<?php if ($isAdmin): ?>
|
||
<a href="<?= Config::get('BASE_URL', '/') ?>admin" class="flex items-center justify-between w-full bg-slate-950/80 border border-fuchsia-500/40 hover:border-fuchsia-500/80 rounded-2xl p-4 text-slate-200 text-sm transition-all shadow-lg hover:shadow-fuchsia-500/20 group/btn">
|
||
<span class="font-mono font-bold uppercase tracking-wider text-fuchsia-400 group-hover/btn:text-fuchsia-300 transition-colors flex items-center gap-2">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-fuchsia-500 animate-pulse shadow-[0_0_6px_rgba(217,70,239,0.8)]"></span>
|
||
Admin Bereich
|
||
</span>
|
||
<span class="text-fuchsia-400 group-hover/btn:translate-x-1 transition-all">→</span>
|
||
</a>
|
||
<?php endif; ?>
|
||
<?php if (empty($accessibleModules)): ?>
|
||
<div class="p-4 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
|
||
<p class="text-slate-400 font-mono text-xs">Aktuell sind keine Module für deinen Account freigeschaltet.</p>
|
||
<p class="text-slate-600 font-mono text-[10px] mt-1">Wende dich an Philipp, um Zugriff auf Tools zu erhalten.</p>
|
||
</div>
|
||
<?php else: foreach ($accessibleModules as $mod): ?>
|
||
<a href="<?= Config::get('BASE_URL', '/') ?><?= ltrim($mod['path'], '/') ?>" class="flex items-center justify-between w-full bg-slate-950/80 border border-slate-700/60 hover:border-emerald-500/50 rounded-2xl p-4 text-slate-200 text-sm transition-all shadow-lg hover:shadow-emerald-500/20 group/btn">
|
||
<span class="font-mono font-bold uppercase tracking-wider text-slate-200 group-hover/btn:text-emerald-400 transition-colors"><?= htmlspecialchars($mod['name']) ?></span>
|
||
<span class="text-slate-500 group-hover/btn:text-emerald-400 group-hover/btn:translate-x-1 transition-all">→</span>
|
||
</a>
|
||
<?php endforeach; endif; ?>
|
||
</div>
|
||
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-emerald-500/5 rounded-full blur-3xl"></div>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="p-5 sm:p-8 bg-slate-900/80 border border-fuchsia-500/20 rounded-3xl sm:rounded-[2.5rem] backdrop-blur-xl shadow-[0_0_30px_rgba(217,70,239,0.15)] relative group overflow-hidden">
|
||
<div class="absolute top-0 left-0 w-full h-1 bg-linear-to-r from-transparent via-fuchsia-500/40 to-transparent"></div>
|
||
<h2 class="text-slate-300 text-xs font-bold uppercase tracking-[0.2em] font-mono mb-6">Login</h2>
|
||
<p class="text-slate-400 text-sm mb-6 sm:mb-8 font-mono"><span class="text-rose-500 animate-pulse">/</span> access_restricted</p>
|
||
<form action="<?= Config::get('BASE_URL', '/') ?>login" method="POST" class="space-y-4 relative z-10">
|
||
<input type="hidden" name="csrf_token" value="<?= Security::csrf() ?>">
|
||
<input type="email" name="email" placeholder="Email" autocomplete="username" required class="w-full bg-slate-950/80 border border-slate-700/80 rounded-2xl p-4 text-slate-200 text-sm focus:outline-none focus:border-fuchsia-500/50 focus:ring-1 focus:ring-fuchsia-500/50 transition-all placeholder:text-slate-500">
|
||
<div class="space-y-1.5">
|
||
<input type="password" name="password" placeholder="Password" autocomplete="current-password" required class="w-full bg-slate-950/80 border border-slate-700/80 rounded-2xl p-4 text-slate-200 text-sm focus:outline-none focus:border-fuchsia-500/50 focus:ring-1 focus:ring-fuchsia-500/50 transition-all placeholder:text-slate-500">
|
||
<div class="text-right px-1">
|
||
<a href="<?= Config::get('BASE_URL', '/') ?>forgot-password" class="text-[11px] font-mono text-slate-500 hover:text-fuchsia-400 transition-colors">Passwort vergessen?</a>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="w-full cursor-pointer bg-slate-900/50 border border-fuchsia-500/40 hover:bg-fuchsia-500/10 text-fuchsia-400 hover:text-fuchsia-300 font-bold font-mono uppercase tracking-wider py-4 rounded-2xl transition-all duration-300 transform active:scale-95 shadow-[0_0_10px_rgba(217,70,239,0.05)] hover:shadow-[0_0_15px_rgba(217,70,239,0.2)]">Authenticate</button>
|
||
</form>
|
||
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-fuchsia-500/5 rounded-full blur-3xl"></div>
|
||
</div>
|
||
<?php endif; ?>
|
||
<div class="p-5 sm:p-8 bg-slate-900/80 border border-cyan-500/20 rounded-3xl sm:rounded-[2.5rem] backdrop-blur-xl shadow-[0_0_30px_rgba(6,182,212,0.15)] relative group overflow-hidden flex flex-col justify-between transition-colors duration-500">
|
||
<div class="absolute top-0 left-0 w-full h-1 bg-linear-to-r from-transparent via-cyan-500/40 to-transparent"></div>
|
||
<div class="relative z-10">
|
||
<h3 class="text-slate-300 text-xs font-bold uppercase tracking-[0.2em] mb-6 font-mono">Directory</h3>
|
||
<ul class="space-y-4 font-mono text-sm">
|
||
<li><a href="<?= Config::get('BASE_URL', '/') ?>about" class="group/link font-mono text-slate-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><span class="text-cyan-500 animate-pulse">/</span>about</a></li>
|
||
<li><a href="<?= Config::get('BASE_URL', '/') ?>imprint" class="group/link font-mono text-slate-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><span class="text-cyan-500 animate-pulse">/</span>imprint</a></li>
|
||
<li><a href="<?= Config::get('BASE_URL', '/') ?>privacy" class="group/link font-mono text-slate-400 hover:text-cyan-400 transition-colors flex items-center gap-2"><span class="text-cyan-500 animate-pulse">/</span>privacy</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="mt-10 sm:mt-12 pt-6 border-t border-slate-700/50 relative z-10">
|
||
<?php if (isset($_SESSION['is_admin']) && $_SESSION['is_admin'] === true): ?>
|
||
<a href="<?= Config::get('BASE_URL', '/') ?>admin" class="group/admin text-[10px] font-mono text-slate-400 hover:text-cyan-400 transition-colors tracking-widest uppercase flex items-center gap-2">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-cyan-500 group-hover:bg-cyan-400 animate-pulse shadow-[0_0_5px_rgba(6,182,212,0.8)]"></span>Kernel Access</a>
|
||
<?php else: ?>
|
||
<span class="group/admin text-[10px] font-mono text-slate-500 cursor-not-allowed tracking-widest uppercase flex items-center gap-2" title="Access Denied">
|
||
<span class="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse shadow-[0_0_5px_rgba(244,63,94,0.8)]"></span>Kernel Access (Locked)</span>
|
||
<?php endif; ?>
|
||
</div>
|
||
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-cyan-500/5 rounded-full blur-3xl pointer-events-none"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/js/main.js" defer></script>
|
||
<?php require_once __DIR__ . '/inc/footer.php'; ?>
|