<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game UI</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
.top-section, .bottom-menu {
display: flex;
align-items: center;
background-color: #2C3E50;
color: #ECF0F1;
padding: 10px;
}
.top-section {
justify-content: space-between;
}
.top-right {
display: flex;
align-items: center;
}
.currency, .avatar {
margin-left: 20px;
}
.main-section {
position: relative;
height: calc(100% - 100px);
background-color: #34495E;
}
.bottom-menu {
justify-content: space-around;
position: absolute;
bottom: 0;
width: 100%;
}
.menu-item {
cursor: pointer;
}
.icon {
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class="top-section">
<div class="realtime-map" style="flex-grow: 1;">
<!-- You can embed a realtime map iframe or canvas here -->
<img src="realtime_map_placeholder.jpg" alt="Realtime Map" style="width: 100%;">
</div>
<div class="top-right">
<div class="currency">
<img src="silver_icon.png" alt="Silver" class="icon"> 1000
<img src="gold_icon.png" alt="Gold" class="icon"> 500
</div>
<div class="avatar">
<img src="user_avatar.png" alt="Avatar" class="icon">
</div>
</div>
</div>
<div class="main-section">
<!-- This can be enhanced with realtime map updates using JavaScript -->
</div>
<div class="bottom-menu">
<div class="menu-item">
<img src="backpack_icon.png" alt="Backpack" class="icon">
<div>Backpack</div>
</div>
<div class="menu-item">
<img src="chat_icon.png" alt="Chat" class="icon">
<div>Chat</div>
</div>
<div class="menu-item">
<img src="quests_icon.png" alt="Quests" class="icon">
<div>Quests</div>
</div>
</div>
</body>
</html>