36 lines
1.7 KiB
HTML
36 lines
1.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>崩坏童话：蜜糖村</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #1a1a22; height: 100%; overflow: hidden; }
|
|
#game { display: flex; align-items: center; justify-content: center; height: 100%; }
|
|
#game canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
|
|
#debug-panel {
|
|
display: none; position: fixed; top: 8px; right: 8px; z-index: 100;
|
|
background: rgba(20,20,30,.92); color: #cfe; font: 12px monospace;
|
|
padding: 10px; border: 1px solid #5a7; border-radius: 4px; width: 230px;
|
|
}
|
|
#debug-panel h3 { margin: 0 0 6px; font-size: 12px; color: #8f8; }
|
|
#debug-panel .row { margin: 4px 0; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
|
|
#debug-panel button { font: 11px monospace; background: #2a3a4a; color: #cfe; border: 1px solid #567; border-radius: 3px; padding: 2px 6px; cursor: pointer; }
|
|
#debug-panel input { width: 48px; font: 11px monospace; background: #111; color: #cfe; border: 1px solid #567; }
|
|
#name-entry {
|
|
display: none; position: fixed; z-index: 90; left: 50%; top: 62%; transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
}
|
|
#name-entry input {
|
|
font: 16px monospace; padding: 6px 10px; background: #fff8e8; color: #5a4632;
|
|
border: 3px solid #e8a04c; border-radius: 2px; outline: none; text-align: center; width: 180px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="game"></div>
|
|
<div id="name-entry"><input id="name-input" maxlength="8" placeholder="小满" autocomplete="off" /></div>
|
|
<div id="debug-panel"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|