<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Report Issue Memoria</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .search-container {
            text-align: center;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0);
            display: inline-block;
        }
    </style>
</head>
<body>

    <div class="search-container">
	<h1>Report Issue - 問題を報告</h1>
	<h2>InternetStroller Memoria</h2>
	<br>
        <h3>Discord:abatbeliever</h3>
	<h3>Form(Google):<a href="https://docs.google.com/forms/d/e/1FAIpQLSc37ZHx3MEHSsmxC3TOaJlMDLX-kpG7lr8xPKaDP6_eOyMTDQ/viewform?usp=sf_link">docs.google.com/forms/...</a></h3>
	<h3>Mail:<a href="mailto:ismemoriasupport@duck.com?subject=Report_Issue_ISM">Here(mailto://)</a> or ISMemoriaSupport@duck.com</h3>
	<h4>FreeMail/Duck@com OK!</h4>
    </div>

    <div id="online-status" style="position: fixed; bottom: 10px; right: 10px;"></div>

    <script>
	const onlineStatusDiv = document.getElementById('online-status');

	function updateOnlineStatus() {
	    if (navigator.onLine) {
   	     onlineStatusDiv.textContent = 'ONLINE';
   	     onlineStatusDiv.style.color = 'green';
  	  } else {
  	      onlineStatusDiv.textContent = 'OFFLINE';
  	      onlineStatusDiv.style.color = 'red';
  	  }
	}
	updateOnlineStatus();
	window.addEventListener('online', updateOnlineStatus);
	window.addEventListener('offline', updateOnlineStatus);

    </script>
</body>
</html>