<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Chat欄</title>
<link rel="stylesheet" href="css/moyou3.css" type="text/css">
<link rel="stylesheet" href="css/chat.css" type="text/css">
<style>
#chat { border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 5px; }
.info { color: gray; }
.message { margin: 5px 0; }
.tarea{
display: inline-block;
width: 100%;
padding: 10px;
border: 1px solid #999;
box-sizing: border-box;
background: #f2f2f2;
margin: 0.5em 0;
line-height: 1.5;
height: 6em;
}
#result {
border: 1px solid #888;
padding: 10px;
margin-top: 15px;
background: #fafafa;
min-height: 50px;
}
</style>
</head>
<body>
<h1>チャット</h1>
<ul class="simplemenu">
<li><a href="start.html">はじめに</a></li>
<li><a href="admin.html">避難場所マップ</a></li>
<li><a href="chat.html">チャット欄</a></li>
<li><a href="rescue/help.html">HELPマップ</a></li>
</ul>
<br><br>
<div id="chat"></div>
<br>
<div>
<input type="text" id="name" placeholder="名前">
</div>
<div>
<textarea id="message" placeholder="メッセージ" class="tarea"></textarea><br>
<button onclick="sendMessage()">送信</button>
</div>
<br>
<div>計測結果</div>
<div id="result"></div>
<!-- 分離した JavaScript を読み込む -->
<script src="js/server2.js"></script>
<script src="js/chat.js"></script>
</body>
</html>
