115 lines
4.2 KiB
HTML
Executable File
115 lines
4.2 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>Helva Face Display</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="stage" id="stage">
|
|
<div class="hint">Tippe, um Drive & Control zu sehen</div>
|
|
|
|
<div class="wrap">
|
|
<!-- ONLY the screen / display -->
|
|
<svg id="faceSvg" class="screen" viewBox="0 0 800 460" role="img" aria-label="Robot face display">
|
|
<defs>
|
|
<!-- screen glass gradient -->
|
|
<linearGradient id="glass" x1="0" x2="1" y1="0" y2="1">
|
|
<stop offset="0" stop-color="#0b0f1a" />
|
|
<stop offset="1" stop-color="#03050a" />
|
|
</linearGradient>
|
|
|
|
<!-- glossy highlight -->
|
|
<linearGradient id="gloss" x1="0" x2="1">
|
|
<stop offset="0" stop-color="rgba(255,255,255,0.18)" />
|
|
<stop offset="1" stop-color="rgba(255,255,255,0.00)" />
|
|
</linearGradient>
|
|
|
|
<!-- neon glow -->
|
|
<filter id="neonGlow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="6" result="b"/>
|
|
<feMerge>
|
|
<feMergeNode in="b"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<!-- stronger glow (intensity) -->
|
|
<filter id="neonGlowStrong" x="-80%" y="-80%" width="260%" height="260%">
|
|
<feGaussianBlur stdDeviation="10" result="b2"/>
|
|
<feMerge>
|
|
<feMergeNode in="b2"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- outer screen frame -->
|
|
<rect x="35" y="35" width="730" height="390" rx="70"
|
|
fill="#05070c" stroke="rgba(255,255,255,0.10)" stroke-width="6"/>
|
|
|
|
<!-- inner glass -->
|
|
<rect x="75" y="75" width="650" height="310" rx="52"
|
|
fill="url(#glass)" stroke="rgba(255,255,255,0.06)" stroke-width="4"/>
|
|
|
|
<!-- big gloss sweep (like the sticker example) -->
|
|
<path d="M115,110 C220,85 420,85 620,125
|
|
C590,160 430,180 250,165
|
|
C170,158 125,142 115,110Z"
|
|
fill="url(#gloss)" opacity="0.55"/>
|
|
|
|
<!-- top light bar -->
|
|
<g id="topbar">
|
|
<rect x="260" y="92" width="280" height="34" rx="17"
|
|
fill="rgba(120,255,235,0.20)"/>
|
|
<rect id="topbarLit" x="275" y="98" width="250" height="22" rx="11"
|
|
fill="rgba(120,255,235,0.95)" filter="url(#neonGlow)"/>
|
|
</g>
|
|
|
|
<!-- FACE LAYER (cyan line art) -->
|
|
<g id="face" filter="url(#neonGlow)">
|
|
<!-- eyes container (we move this for look.x/y) -->
|
|
<g id="eyesGroup">
|
|
<!-- Left eye -->
|
|
<path id="eyeL" d="" />
|
|
<!-- Right eye -->
|
|
<path id="eyeR" d="" />
|
|
</g>
|
|
|
|
<!-- mouth -->
|
|
<path id="mouth" d="" />
|
|
</g>
|
|
|
|
<!-- subtle sparkle dots (optional, like the ref image) -->
|
|
<g id="sparkles" opacity="0.45" filter="url(#neonGlow)">
|
|
<circle cx="150" cy="210" r="3" fill="rgba(120,255,235,0.9)"/>
|
|
<circle cx="165" cy="240" r="2" fill="rgba(120,255,235,0.8)"/>
|
|
<circle cx="650" cy="215" r="3" fill="rgba(120,255,235,0.9)"/>
|
|
<circle cx="635" cy="245" r="2" fill="rgba(120,255,235,0.8)"/>
|
|
</g>
|
|
</svg>
|
|
|
|
<!-- Touch-only overlay -->
|
|
<div class="overlay" id="overlay">
|
|
<div class="left">
|
|
<a class="btn" href="/drive">🚗 Drive</a>
|
|
<a class="btn" href="/control" id="controlLink">🎛️ Control: <span id="emotionLabel">neutral</span></a>
|
|
<span class="pill">
|
|
<span class="dot on" id="dotConn"></span>
|
|
<span id="pillText">ready</span>
|
|
</span>
|
|
</div>
|
|
<div class="right">
|
|
<button class="btn" id="btnSpeak" type="button">🗣️ Sprechen: <strong id="speakState">aus</strong></button>
|
|
<button class="btn" id="btnEyes" type="button">👀 Augen: <strong id="eyesState">an</strong></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/face.js"></script>
|
|
</body>
|
|
</html>
|
|
|