<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>3D Graph with Rankings</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			height: 100vh;
		}

		#container {
			display: flex;
			flex: 1;
			width: 100%;
		}

		#rankTable {
			width: 25%;  /* ランク表の幅を広げる */
			overflow-y: auto;
			padding: 10px;
			background-color: #f0f0f0;
			border-right: 1px solid #ccc;
			height: 100%;  /* 高さを100%に設定 */
		}

		#three {
			flex: 1;
			background-color: aliceblue;
			height: 100%;  /* 高さを100%に設定 */
		}

		#info {
			position: fixed;  /* fixedに変更して、スクロールしても位置が固定されるようにする */
			top: 10px;
			right: 10px;
			background-color: #fff;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			width: 300px;
			max-height: 400px;
			overflow-y: auto;
			z-index: 10;
		}

		/* レスポンシブ対応 */
		@media screen and (max-width: 1200px) {
			#rankTable {
				width: 30%;
			}
		}

		@media screen and (max-width: 768px) {
			#container {
				flex-direction: column;
			}
			#rankTable {
				width: 100%;
				height: 300px;
			}
			#three {
				width: 100%;
				height: 400px;
			}
		}
	</style>
</head>
<body>
	<!-- 左上にランク表 -->
	<div id="container">
		<div id="rankTable">
			<!-- ランク表がここに挿入されます -->
		</div>

		<!-- 真ん中に3Dグラフ -->
		<div id="three"></div>
	</div>

	<!-- 右上にノード情報 -->
	<div id="info">
		<!-- ノードの情報がここに表示されます -->
	</div>

	<!-- JavaScript ライブラリの読み込み -->
	<script type="module" src="https://unpkg.com/three@0.158.0/build/three.js" defer></script>
	<script type="module" src="https://unpkg.com/3d-force-graph@1.73.0/dist/3d-force-graph.min.js" defer></script>
	<script type="module" src="https://unpkg.com/three-spritetext@1.8.1/dist/three-spritetext.min.js" defer></script>
	<script src="./static/main2_ranktable.js" charset="utf-8" defer></script>
</body>
</html>
