<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MU Online Launcher</title>
  <link rel="stylesheet" href="style-home.css" />
  <script src="qwebchannel.js"></script>
  <script defer src="script-home.js"></script>
</head>
<body>
  <div class="content">
	<div class="top-bar">
	<div class="status">
		<img id="status-icon" src="../images/icon_on0.png" alt="Status Icon" />
		<div class="status-container">
		<span id="online-label">Online: <span id="online-count">?</span>/500</span>
		<div class="online-bar">
			<div id="online-fill" style="width: 0%"></div>
		</div>
		</div>
	</div>
	
	<div class="updating">
		<img id="update-icon" src="../images/icon_uploaddone.png" alt="Update Icon" />
		<div class="progress-container">
		<span class="update-progress">Launcher is up to date.</span>
		<div class="progress-bar">
			<div id="progress-fill" style="width: 0%"></div>
		</div>
		</div>
	</div>
	</div>

    <div class="center">
      <h1>GGMU ONLINE</h1>
      <p>
        On this server, you can feel like a powerful wizard and master warrior thanks to a unique GGMU Online experience.
        You'll face countless new monsters, discover powerful weapons and armor...
      </p>
	  <div class="buttons">
	  <button class="start">
	 	 <img src="../images/icon_start.png" alt="Start" style="width: 16px; vertical-align: middle; margin-right: 4px;" />
	 	 START GAME
	  </button>
	  <button class="settings">
	 	 <img src="../images/icon_settings.png" alt="Settings" style="width: 16px; vertical-align: middle; margin-right: 4px; margin-left: 4px;" />
	 	 SETTINGS
	  </button>
	  <a href="https://ggmuonline.com/guides" class="guides" rel="noopener noreferrer">
	<img src="../images/icon_guides.png" alt="Guides" style="width: 16px; vertical-align: middle; margin-right: 4px;" />
		GUIDES
	</a>

	  </div>
    </div>

	</style>
	<!-- SETTINGS DIALOG -->
	<div id="settings-dialog" class="settings-dialog" style="display: none;">
	<div class="dialog-box">
		<h2>Settings</h2>
	
		<label for="resolution-select">Resolution:</label>
		<select id="resolution-select">
		<option value="1024x768">1024x768</option>
		<option value="1280x720">1280x720</option>
		<option value="1366x768">1366x768</option>
		<option value="1920x1080">1920x1080</option>
		</select>
	
		<label><input type="checkbox" id="toggle-sound" /><span>Enable Background Music</span></label>
		<label><input type="checkbox" id="toggle-sfx" /><span>Enable Sound Effects</span></label>
		<label><input type="checkbox" id="toggle-embed" /><span>Embed game window</span></label>

	
		<label for="language-select">GUI Language:</label>
		<select id="language-select">
		<option value="en">English</option>
		<option value="ru">Русский</option>
		<option value="lt">Lietuvių</option>
		<option value="es">Español</option>
		<option value="pt">Português (BR)</option>
		<option value="de">Deutsch</option>
		<option value="fr">Français</option>
		<option value="pl">Polski</option>
		<option value="ko">한국어 (Korean)</option>
		</select>

		<div class="dialog-buttons">
		<button id="save-settings">Save</button>
		<button id="cancel-settings">Cancel</button>
		</div>
	</div>
	</div>

	<div class="news-sections">
	<div class="panel">
		<h3>
		<img src="../images/icon_news.png" alt="News" style="width: 22px; vertical-align: middle; margin-right: 6px;" />
		LATEST NEWS
		</h3>
		<ul></ul>
		<div class="pagination news-pagination"></div> <!-- 👈 добавь это -->
	</div>
	
	<div class="panel">
		<h3>
		<img src="../images/icon_changelogs.png" alt="Changelogs" style="width: 22px; vertical-align: middle; margin-right: 6px;" />
		CHANGELOGS
		</h3>
		<ul></ul>
		<div class="pagination changelogs-pagination"></div>
	</div>
	
	<div class="panel">
		<h3>
		<img src="../images/icon_events.png" alt="Events" style="width: 22px; vertical-align: middle; margin-right: 6px;" />
		EVENTS
		</h3>
		<ul></ul>
		<div class="pagination events-pagination"></div>
	</div>
	</div>
	
  </div>
</body>
</html>
