<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Projekt Auswahl</title>
		<style>
:root{
	--bg:#fdf6e3;
	--fg:#002b36;
	--muted:#586e75;
	--accent:#268bd2;
	--card:#fffdf2;
	--border:#eee8d5;
	--shadow:rgba(0,0,0,.06);
	--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
	--sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

    html,body{height:100%}
    body{
	    margin:0;
	    background:var(--bg);
	    color:var(--fg);
	    font:16px/1.55 var(--sans);
    }

    .page{
	    max-width: 920px;
	    margin: 0 auto;
	    padding: 24px 18px 64px;
    }

    .topline{
	    display:flex;
	    align-items:baseline;
	    gap:12px;
	    padding: 6px 0 14px;
	    border-bottom: 1px solid var(--border);
	    color:var(--muted);
	    font-family:var(--mono);
	    font-size: 13px;
	    letter-spacing: .2px;
    }
    .topline .crumb{
	    color:var(--muted);
	    text-decoration:none;
    }
    .topline .sep{opacity:.6}
    .topline .hint{margin-left:auto; opacity:.85}

    h1{
	    margin: 22px 0 10px;
	    font-family:var(--mono);
	    font-size: 22px;
	    font-weight: 700;
	    letter-spacing: .2px;
    }
    .lead{
	    margin: 0 0 18px;
	    color: var(--muted);
	    font-family: var(--mono);
	    font-size: 14px;
    }

    .box{
	    background: var(--card);
	    border: 1px solid var(--border);
	    border-radius: 10px;
	    box-shadow: 0 6px 22px var(--shadow);
	    padding: 16px 16px 6px;
    }

    ul.menu{
	    list-style: none;
	    padding: 0;
	    margin: 0;
    }
    ul.menu li{
	    margin: 10px 0;
	    display:flex;
	    align-items:center;
	    gap: 10px;
	    padding: 10px 10px;
	    border-radius: 8px;
    }
    ul.menu li:hover{
	    background: rgba(38,139,210,.06);
    }

    .tag{
	    font-family: var(--mono);
	    font-size: 12px;
	    color: var(--muted);
	    border: 1px solid var(--border);
	    background: #ffffffa8;
	    padding: 2px 8px;
	    border-radius: 999px;
	    white-space: nowrap;
    }

    a{
	    color: var(--accent);
	    text-decoration: none;
	    font-family: var(--mono);
	    font-size: 15px;
    }
    a:hover{ text-decoration: underline; }

    .footer{
	    margin-top: 18px;
	    color: var(--muted);
	    font-family: var(--mono);
	    font-size: 12px;
    }

    @media (max-width:520px){
	    .topline{flex-wrap:wrap}
	    .topline .hint{margin-left:0}
    }
		</style>
	</head>
	<body>
		<div class="page">
			<div class="topline">
				<a class="crumb" href="/">Home</a>
				<span class="sep">::</span>
				<span>Projekt Auswahl</span>
				<span class="hint">Raspberry Pi / Apache</span>
			</div>

			<h1>Projekt Auswahl</h1>
			<p class="lead">
			Wähle ein Projekt aus. Die Links öffnen die jeweiligen Seiten im Browser.
			</p>

			<div class="box">
				<ul class="menu">
					<li>
						<span class="tag">/wiki</span>
						<a href="/wiki">DokuWiki</a>
					</li>
					<li>
						<span class="tag">/led</span>
						<a href="/led">LED Ampel</a>
					</li>
					<li>
						<span class="tag">/temp</span>
						<a href="/temp">Temperatur</a>
					</li>
					<li>
						<span class="tag">/temp_curve</span>
						<a href="/temp_curve/temperature.html">Temperaturverlauf</a>
					</li>
				</ul>

				<div class="footer">
					Raspberry Pi - Server
				</div>
			</div>
		</div>
	</body>
</html>
