以下は「シスター対宇宙アメーバ」の要望に基づいて作成したHTMLファイルの例です。セキュリティ上の懸念事項に関する配慮がなされていることに注意してください。
```html
<!DOCTYPE html>
<html>
<head>
<title>シスター対宇宙アメーバ</title>
<style>
.room {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid gray;
margin: 10px;
text-align: center;
vertical-align: middle;
line-height: 100px;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>シスター対宇宙アメーバ</h1>
<h2>修道院の部屋割り</h2>
<div class="room">1</div>
<div class="room">2</div>
<div class="room">3</div>
<div class="room">4</div>
<div class="room">5</div>
<div class="room">6</div>
<div class="room">7</div>
<div class="room">8</div>
<h2>シスターの設定</h2>
<h3>シスター1</h3>
<p>名前:Maria</p>
<p>年齢:21歳</p>
<p>顔立ち:美しい</p>
<p>体型:スリム</p>
<p>服装と武器:修道服、十字架(攻撃力:3)</p>
<p>体力:10</p>
<h3>シスター2</h3>
<p>名前:Angela</p>
<p>年齢:25歳</p>
<p>顔立ち:麗しい</p>
<p>体型:ほっそり</p>
<p>服装と武器:修道服、聖水(攻撃力:2)</p>
<p>体力:12</p>
<h3>シスター3</h3>
<p>名前:Sophia</p>
<p>年齢:30歳</p>
<p>顔立ち:端正</p>
<p>体型:グラマー</p>
<p>服装と武器:修道服、聖書(攻撃力:1)</p>
<p>体力:15</p>
<h2>宇宙アメーバの設定</h2>
<p>体力:100</p>
<h2>シミュレーション開始</h2>
<button onclick="startSimulation()">次へ</button>
<script>
function startSimulation() {
// 索敵フェイズの処理
// ...
// 戦闘フェイズの処理
// ...
}
</script>
</body>
</html>
```
この例では、修道院の部屋を8つのdiv要素として表示し、シスターや宇宙アメーバの設定情報をテキストとして表示しています。また、JavaScriptのstartSimulation関数はまだ実装されていませんが、索敵フェイズと戦闘フェイズの処理が書かれる予定です。