andrew
7c1346c95d
Remove SVG icons from all pause menu items and their associated styles. Change default menu selection from MAP to none, and remove mouseenter selection behavior. Add Futura PT Demibold font and update typography. Remove HUD circle gradient effect from background.
112 lines
4.2 KiB
HTML
112 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Commonwealth Online — Pause Menu</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="pause-screen" id="pauseScreen">
|
|
<!-- Map background -->
|
|
<div class="map-layer" aria-hidden="true"></div>
|
|
<div class="map-overlay" aria-hidden="true"></div>
|
|
|
|
<!-- Subtle multiplayer markers on the map -->
|
|
<div class="map-markers" aria-hidden="true">
|
|
<span class="marker marker--player" style="left: 58%; top: 42%;"></span>
|
|
<span class="marker marker--ally" style="left: 64%; top: 38%;"></span>
|
|
<span class="marker marker--ally" style="left: 52%; top: 48%;"></span>
|
|
<span class="marker marker--ally" style="left: 71%; top: 55%;"></span>
|
|
<span class="marker marker--ally" style="left: 45%; top: 36%;"></span>
|
|
</div>
|
|
|
|
<!-- CRT / HUD texture overlays -->
|
|
<div class="screen-effects" aria-hidden="true"></div>
|
|
|
|
<!-- Left pause menu panel -->
|
|
<aside class="left-panel">
|
|
<img
|
|
class="brand-logo"
|
|
src="assets/logo.svg"
|
|
alt="Commonwealth Online"
|
|
width="220"
|
|
height="54"
|
|
>
|
|
|
|
<nav class="menu" id="menu" aria-label="Pause menu">
|
|
<button type="button" class="menu-item" data-index="0" data-action="resume">
|
|
<span class="menu-item__label">RESUME</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="1" data-action="map">
|
|
<span class="menu-item__label">MAP</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="2" data-action="social">
|
|
<span class="menu-item__label">SOCIAL</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="3" data-action="server">
|
|
<span class="menu-item__label">SERVER</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="4" data-action="settings">
|
|
<span class="menu-item__label">SETTINGS</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="5" data-action="help">
|
|
<span class="menu-item__label">HELP</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<button type="button" class="menu-item" data-index="6" data-action="quit">
|
|
<span class="menu-item__label">QUIT</span>
|
|
<span class="menu-item__bar" aria-hidden="true"></span>
|
|
</button>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Top-right server info -->
|
|
<section class="server-panel" aria-label="Current server">
|
|
<h2 class="server-panel__heading">CURRENT SERVER</h2>
|
|
<div class="server-panel__row">
|
|
<span class="signal-bars" aria-hidden="true">
|
|
<span></span><span></span><span></span><span></span>
|
|
</span>
|
|
<p class="server-panel__name">Commonwealth Online #47</p>
|
|
</div>
|
|
<h2 class="server-panel__heading">PLAYERS ONLINE</h2>
|
|
<p class="server-panel__players">12 / 24</p>
|
|
</section>
|
|
|
|
<!-- Bottom controller prompts -->
|
|
<footer class="prompt-bar" aria-label="Controller prompts">
|
|
<div class="prompt">
|
|
<span class="prompt__glyph" aria-hidden="true">☰</span>
|
|
<span class="prompt__label">MOVE</span>
|
|
</div>
|
|
<div class="prompt">
|
|
<span class="prompt__glyph prompt__glyph--rs" aria-hidden="true">RS</span>
|
|
<span class="prompt__label">ZOOM</span>
|
|
</div>
|
|
<div class="prompt">
|
|
<span class="prompt__glyph prompt__glyph--round" aria-hidden="true">A</span>
|
|
<span class="prompt__label">SELECT</span>
|
|
</div>
|
|
<div class="prompt">
|
|
<span class="prompt__glyph prompt__glyph--round" aria-hidden="true">B</span>
|
|
<span class="prompt__label">BACK</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|