63 lines
2.5 KiB
HTML
63 lines
2.5 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>AppRobot_Room – 3D Viewer</title>
|
||
data:,
|
||
|
||
<style>
|
||
html, body { height: 100%; margin: 0; background: #ffffff; color: #111; font-family: system-ui, Segoe UI, Arial, sans-serif; }
|
||
#app { display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; height: 100%; }
|
||
header { grid-column: 1 / span 2; padding: 8px 12px; background: #f4f6f8; border-bottom: 1px solid #d9dee3; }
|
||
#canvas-wrap { position: relative; }
|
||
#hud { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,0.5); color:#fff; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
|
||
aside { border-left: 1px solid #d9dee3; padding: 10px; background: #f9fbfc; }
|
||
.row { margin-bottom: 8px; }
|
||
label { font-size: 12px; color: #4b5563; }
|
||
input[type="number"], input[type="text"] { width: 100%; padding: 6px; background: #fff; border: 1px solid #cbd5e1; color: #111; border-radius: 4px; }
|
||
button { padding: 6px 10px; background: #2563eb; border: 0; color: #fff; border-radius: 4px; cursor: pointer; }
|
||
a { color: #1d4ed8; }
|
||
canvas { display:block; }
|
||
</style>
|
||
|
||
<!-- Import-Map: three & addons von /vendor/three (server.js mappt node_modules) -->
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "/vendor/three/build/three.module.js",
|
||
"three/addons/": "/vendor/three/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<header>
|
||
<strong>AppRobot_Room</strong> · <span id="status">Verbinde …</span>
|
||
</header>
|
||
|
||
<div id="canvas-wrap">
|
||
<div id="hud">
|
||
<div>FPS: <span id="fps">–</span></div>
|
||
<div>Frame: <span id="frameInfo">–</span></div>
|
||
<div>Frames (10s): <span id="frames10s">0</span></div>
|
||
</div>
|
||
<canvas id="three"></canvas>
|
||
</div>
|
||
|
||
<!--
|
||
<aside>
|
||
<div class="row"><label>Server-Config:</label>
|
||
<pre id="cfg" style="white-space: pre-wrap; word-break: break-word; font-size: 12px; background: #fff; padding: 8px; border-radius: 6px; max-height: 40vh; overflow:auto;"></pre>
|
||
</div>
|
||
<div class="row"><button id="btnReset">Ansicht zurücksetzen</button></div>
|
||
<p style="font-size:12px; color:#4b5563;">WASD/Mouse: Kamera · Spheres: ~5 cm Ø · Farben: Distanz</p>
|
||
</aside>
|
||
-->
|
||
</div>
|
||
|
||
<!-- App als ES-Modul -->
|
||
<script type="module" src="./app.js"></script>
|
||
</body>
|
||
</html> |