<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welkom</title>
<!-- Favicon generated by RealFaviconGenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.svg">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#879a38">
<!-- Enhanced PWA meta tags -->
<meta name="msapplication-TileColor" content="#879a38">
<meta name="theme-color" content="#879a38">
<meta name="application-name" content="Welkom">
<!-- iOS PWA Configuration -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Welkom">
<meta name="format-detection" content="telephone=no">
<!-- Android/PWA Configuration -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-title" content="Welkom">
<!-- PWA splash screen for iOS -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Your existing styles would go here -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');
:root {
--bg: #ededed;
--card: #fff;
--item-bg: #e6e6e6;
--shadow: 8px 8px 24px #d0d0d0, -8px -8px 24px #ffffff;
--shadow-btn: 5px 5px 14px #d4d4d4, -5px -5px 14px #ffffff;
--shadow-hover: 0 15px 35px rgba(135, 154, 56, 0.2), 0 5px 15px rgba(135, 154, 56, 0.1);
--radius: 2rem;
--radius-btn: 16px;
--accent: rgb(135,154,56);
--accent-bg: rgba(135,154,56,0.15);
--accent-hover: rgba(135,154,56,0.12);
--text: #181818;
--text-light: #181818;
--muted: #8c8c8c;
--tag-text: #6a7280;
--border: rgba(135, 154, 56, 0.1);
--btn-pad-x: 1.5rem;
--icon-size: 20px;
--gap: 1.2rem;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
box-sizing: border-box;
}
html, body {
background: var(--bg);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
color: var(--text);
margin: 0;
padding: 0;
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 40px 32px 36px;
max-width: 440px;
width: 100%;
position: relative;
overflow: hidden;
}
.title {
font-size: 32px;
font-weight: 800;
text-align: center;
margin-bottom: 32px;
letter-spacing: -0.02em;
color: rgb(135,154,56);
}
.menu-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.menu-btn {
background: var(--item-bg);
border: none;
border-radius: var(--radius-btn);
padding: 16px var(--btn-pad-x);
font-size: 16px;
font-weight: 500;
color: var(--text);
display: flex;
align-items: center;
gap: var(--gap);
box-shadow: var(--shadow-btn);
transition: var(--transition);
cursor: pointer;
text-decoration: none;
outline: none;
position: relative;
min-height: 64px;
overflow: hidden;
justify-content: space-between;
}
.menu-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s;
}
.menu-btn:hover::before {
left: 100%;
}
.menu-btn-content {
display: flex;
align-items: center;
gap: var(--gap);
flex: 1;
}
.icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: var(--icon-size);
height: var(--icon-size);
flex-shrink: 0;
position: relative;
margin-left: -4px;
}
.menu-btn img, .menu-btn svg {
width: var(--icon-size);
height: var(--icon-size);
object-fit: contain;
filter: brightness(0) saturate(100%) invert(9%) sepia(9%) saturate(378%) hue-rotate(314deg) brightness(97%) contrast(88%);
transition: var(--transition);
}
.menu-btn-title {
flex: 1;
font-weight: 500;
letter-spacing: -0.01em;
font-size: 16px;
}
.menu-btn-tag {
font-family: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 11px;
font-weight: 400;
color: var(--tag-text);
letter-spacing: 0.02em;
opacity: 0.7;
text-transform: lowercase;
margin-right: 2px;
}
.menu-btn:hover, .menu-btn:focus {
background: var(--accent-bg);
color: var(--accent);
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.menu-btn:hover .menu-btn-title, .menu-btn:focus .menu-btn-title {
color: var(--accent);
}
.menu-btn:hover .menu-btn-tag, .menu-btn:focus .menu-btn-tag {
color: var(--accent);
opacity: 0.8;
}
.menu-btn:hover img, .menu-btn:focus img,
.menu-btn:hover svg, .menu-btn:focus svg {
filter: brightness(0) saturate(100%) invert(46%) sepia(26%) saturate(550%) hue-rotate(46deg) brightness(94%) contrast(87%);
transform: scale(1.1);
}
.menu-btn:active {
transform: translateY(0);
box-shadow: var(--shadow-btn);
}
.footer {
font-size: 14px;
color: var(--muted);
margin-top: 32px;
text-align: center;
font-weight: 400;
letter-spacing: 0.01em;
opacity: 0.8;
cursor: default;
user-select: none;
}
.footer .hidden-link {
color: inherit;
text-decoration: none;
border: none;
background: none;
cursor: default;
display: inline;
padding: 0;
margin: 0;
font: inherit;
}
.footer .hidden-link:hover,
.footer .hidden-link:focus {
color: inherit;
text-decoration: none;
outline: none;
}
/* Responsive Design */
@media (max-width: 768px) {
body {
padding: 16px;
}
.container {
padding: 32px 24px 28px;
max-width: 100%;
}
.title {
font-size: 28px;
margin-bottom: 28px;
}
.menu-btn {
padding: 14px var(--btn-pad-x);
min-height: 56px;
}
.menu-btn-title {
font-size: 15px;
}
.menu-btn-tag {
font-size: 10px;
}
:root {
--icon-size: 18px;
--gap: 1rem;
}
.menu-list {
gap: 10px;
}
.footer {
margin-top: 28px;
font-size: 13px;
}
}
@media (max-width: 480px) {
.container {
padding: 28px 20px 24px;
border-radius: 20px;
}
.title {
font-size: 24px;
margin-bottom: 24px;
}
.menu-btn {
padding: 12px var(--btn-pad-x);
min-height: 52px;
border-radius: 14px;
}
.menu-btn-title {
font-size: 14px;
}
.menu-btn-tag {
font-size: 9px;
}
:root {
--icon-size: 16px;
--gap: 0.9rem;
--btn-pad-x: 1.2rem;
}
.menu-list {
gap: 8px;
}
.footer {
margin-top: 24px;
font-size: 12px;
}
}
@media (max-width: 360px) {
.container {
padding: 24px 16px 20px;
}
.menu-btn {
padding: 10px var(--btn-pad-x);
min-height: 48px;
}
.title {
font-size: 22px;
}
.menu-btn-title {
font-size: 13px;
}
.menu-btn-tag {
font-size: 8px;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--card: #2a2a2a;
--item-bg: #3a3a3a;
--text: #e2e8f0;
--text-light: #cbd5e0;
--muted: #a0aec0;
--tag-text: #9ca3af;
--border: rgba(135, 154, 56, 0.2);
--shadow: 4px 4px 12px #0a0a0a, -4px -4px 12px #2a2a2a;
--shadow-btn: 3px 3px 8px #0a0a0a, -3px -3px 8px #2a2a2a;
}
}
/* High contrast mode */
@media (prefers-contrast: high) {
:root {
--shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
--shadow-btn: 0 2px 4px rgba(0, 0, 0, 0.2);
--border: rgba(135, 154, 56, 0.4);
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.menu-btn::before {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="title">Welkom</div>
<div class="menu-list">
<a class="menu-btn" href="https://het-terrarium.com" target="_blank">
<div class="menu-btn-content">
<span class="icon-wrap">
<img src="icons/terrarium.svg" alt="" aria-hidden="true" />
</span>
<span class="menu-btn-title">Het Terrarium</span>
</div>
<span class="menu-btn-tag">blog</span>
</a>
<a class="menu-btn" href="https://movie.lexlorijn.nl" target="_blank">
<div class="menu-btn-content">
<span class="icon-wrap">
<img src="icons/movies.svg" alt="" aria-hidden="true" />
</span>
<span class="menu-btn-title">Streamleaf</span>
</div>
<span class="menu-btn-tag">streaming</span>
</a>
<a class="menu-btn" href="https://music.lexlorijn.nl" target="_blank">
<div class="menu-btn-content">
<span class="icon-wrap">
<img src="icons/music.svg" alt="" aria-hidden="true" />
</span>
<span class="menu-btn-title">Muziek</span>
</div>
<span class="menu-btn-tag">muziek</span>
</a>
<a class="menu-btn" href="https://audio.lexlorijn.nl" target="_blank">
<div class="menu-btn-content">
<span class="icon-wrap">
<img src="icons/audiobooks.svg" alt="" aria-hidden="true" />
</span>
<span class="menu-btn-title">Audioboeken</span>
</div>
<span class="menu-btn-tag">audioboeken</span>
</a>
<a class="menu-btn" href="https://cloud.lexlorijn.nl" target="_blank">
<div class="menu-btn-content">
<span class="icon-wrap">
<img src="icons/clouddrive.svg" alt="" aria-hidden="true" />
</span>
<span class="menu-btn-title">Skycloud</span>
</div>
<span class="menu-btn-tag">opslag</span>
</a>
<a class="menu-btn" href="https://books.lexlorijn.nl" target="_blank">
<div class="menu-btn-content">
<span class="icon-wrap">
<img src="icons/books.svg" alt="" aria-hidden="true" />
</span>
<span class="menu-btn-title">De Leafpress</span>
</div>
<span class="menu-btn-tag">boekenplank</span>
</a>
<a class="menu-btn" href="https://photo.lexlorijn.nl" target="_blank">
<div class="menu-btn-content">
<span class="icon-wrap">
<img src="icons/photos.svg" alt="" aria-hidden="true" />
</span>
<span class="menu-btn-title">Immich</span>
</div>
<span class="menu-btn-tag">gallerij</span>
</a>
<a class="menu-btn" href="#" onclick="return false;">
<div class="menu-btn-content">
<span class="icon-wrap">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 16v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
<path d="M12 8h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</span>
<span class="menu-btn-title">Informatie</span>
</div>
<span class="menu-btn-tag">hulp</span>
</a>
</div>
<div class="footer">© Lexlorijn — <a href="https://beheer.lexlorijn.nl" target="_blank" class="hidden-link">eigen gebruik</a></div>
</div>
</body>
</html>