41 lines
1.3 KiB
HTML
41 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GTA:SA model viewer</title>
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0; height: 100vh; overflow: hidden;
|
|
background: #171a1f; color: #e6e9ef;
|
|
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
}
|
|
#view { display: block; width: 100vw; height: 100vh; }
|
|
|
|
body.dragging::after {
|
|
content: 'drop .dff + .txd';
|
|
position: fixed; inset: 12px; border: 2px dashed #5b9dd9; border-radius: 8px;
|
|
display: grid; place-items: center; font-size: 18px; color: #5b9dd9;
|
|
background: rgba(23, 26, 31, .7); pointer-events: none;
|
|
}
|
|
|
|
/* Only ever shown when something failed to load. */
|
|
#status {
|
|
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
|
padding: 10px 14px; border-radius: 6px; text-align: center;
|
|
background: rgba(20, 23, 28, .88); border: 1px solid #5a3030; color: #e06c6c;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{ "imports": { "three": "/vendor/three.module.js" } }
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id="view"></canvas>
|
|
<div id="status" style="display: none"></div>
|
|
<script type="module" src="/js/main.js"></script>
|
|
</body>
|
|
</html>
|