93 lines
2.7 KiB
HTML
Executable File
93 lines
2.7 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
|
<title>Face</title>
|
|
<link rel="stylesheet" href="/face.css" />
|
|
</head>
|
|
<body>
|
|
<div class="stage" id="stage" aria-label="robot face">
|
|
<svg class="face" viewBox="0 0 1000 600" role="img" aria-label="face">
|
|
<defs>
|
|
<filter id="glow" x="-60%" y="-60%" width="220%" height="220%">
|
|
<feGaussianBlur stdDeviation="7" result="b"/>
|
|
<feMerge>
|
|
<feMergeNode in="b"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<filter id="glowStrong" x="-90%" y="-90%" width="280%" height="280%">
|
|
<feGaussianBlur stdDeviation="12" result="b2"/>
|
|
<feMerge>
|
|
<feMergeNode in="b2"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<linearGradient id="shine" x1="0" x2="1">
|
|
<stop offset="0" stop-color="rgba(255,255,255,0.22)"/>
|
|
<stop offset="1" stop-color="rgba(255,255,255,0.00)"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- subtle gloss sweep (like your sticker reference) -->
|
|
<path
|
|
d="M120,140 C260,90 520,90 820,150
|
|
C760,220 520,240 300,220
|
|
C200,210 140,185 120,140Z"
|
|
fill="url(#shine)" opacity="0.35"
|
|
/>
|
|
|
|
<!-- top neon bar -->
|
|
<g id="topbar" filter="url(#glow)">
|
|
<path
|
|
d="M340,120
|
|
Q500,70 660,120
|
|
Q680,130 670,150
|
|
Q650,190 500,190
|
|
Q350,190 330,150
|
|
Q320,130 340,120Z"
|
|
fill="none"
|
|
stroke="rgba(120,255,235,0.55)"
|
|
stroke-width="18"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path id="topbarLit"
|
|
d="M360,128
|
|
Q500,90 640,128
|
|
Q655,136 648,148
|
|
Q630,176 500,176
|
|
Q370,176 352,148
|
|
Q345,136 360,128Z"
|
|
fill="none"
|
|
stroke="rgba(120,255,235,0.95)"
|
|
stroke-width="14"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
opacity="0.85"
|
|
/>
|
|
</g>
|
|
|
|
<!-- face line art -->
|
|
<g id="faceGroup" filter="url(#glow)">
|
|
<g id="eyesGroup">
|
|
<path id="eyeL" d="" />
|
|
<path id="eyeR" d="" />
|
|
</g>
|
|
<path id="mouth" d="" />
|
|
</g>
|
|
</svg>
|
|
|
|
<!-- Touch-only overlay (ONLY TWO LINKS) -->
|
|
<div class="overlay" id="overlay" aria-hidden="true">
|
|
<a class="btn" href="/drive">🚗 Drive</a>
|
|
<a class="btn" id="controlLink" href="/control">🎛️ Control: <span id="emotionLabel">neutral</span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/face.js"></script>
|
|
</body>
|
|
</html>
|
|
|