diff options
| author | Tor Andersson <tor@ccxvii.net> | 2023-10-19 01:58:07 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-10-20 19:03:27 +0200 |
| commit | 92233e0f8d7334f6d1b8df921fd16bfc5e6324fc (patch) | |
| tree | fd0442a9e179f5f6e0356b9c4dccda67c2d6c631 /play.html | |
| parent | 467a0502f9c7dd44002ddb75277447971eaf965e (diff) | |
| download | red-flag-over-paris-92233e0f8d7334f6d1b8df921fd16bfc5e6324fc.tar.gz | |
Mobile layout.
Diffstat (limited to 'play.html')
| -rw-r--r-- | play.html | 115 |
1 files changed, 59 insertions, 56 deletions
@@ -2,14 +2,15 @@ <!-- vim:set nowrap: --> <html lang="en"> <head> -<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> +<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, interactive-widget=resizes-content, viewport-fit=cover"> +<meta name="theme-color" content="#444"> <meta charset="UTF-8"> <title>RED FLAG OVER PARIS</title> <link rel="icon" href="favicon.svg"> <link rel="stylesheet" href="/fonts/fonts.css"> -<link rel="stylesheet" href="/common/play.css"> +<link rel="stylesheet" href="/common/client.css"> <link rel="stylesheet" href="play.css"> -<script defer src="/common/play.js"></script> +<script defer src="/common/client.js"></script> <script defer src="play.js"></script> </head> <body> @@ -18,21 +19,17 @@ <header> <div id="toolbar"> - <div class="menu"> - <div class="menu_title"><img src="/images/cog.svg"></div> - <div class="menu_popup"> - <a class="menu_item" href="info/rules.html" target="_blank">Rules</a> - <a class="menu_item" href="info/censorship.html" target="_blank">Reference</a> - <a class="menu_item" href="info/cards.html" target="_blank">Cards</a> - <div class="resign menu_separator"></div> - <div class="resign menu_item" onclick="confirm_resign()">Resign</div> - </div> - </div> - <div class="icon_button" onclick="toggle_zoom()"><img src="/images/magnifying-glass.svg"></div> - <div class="icon_button" onclick="toggle_log()"><img src="/images/scroll-quill.svg"></div> + <details> + <summary><img src="/images/cog.svg"></summary> + <menu> + <li><a href="info/rules.html" target="_blank">Rules</a> + <li><a href="info/censorship.html" target="_blank">Reference</a> + <li><a href="info/cards.html" target="_blank">Cards</a> + <li class="resign separator"> + <li class="resign" onclick="confirm_resign()">Resign + </menu> + </details> </div> - <div id="prompt"></div> - <div id="actions"></div> </header> <aside> @@ -55,56 +52,62 @@ <div id="log"></div> </aside> -<main> +<main data-min-zoom="1" data-max-zoom="1"> + + <div id="mapwrap"> + <div id="map"> + <div id="spaces"></div> + <div id="pieces"> + <div id="round_marker" class="piece pawn round1"></div> + <div id="political_vp" class="piece cylinder orange vp5"></div> + <div id="military_vp" class="piece cylinder purple vp5"></div> + <div id="red_momentum" class="piece cylinder red m0"></div> + <div id="blue_momentum" class="piece cylinder blue m0"></div> + </div> + </div> + </div> -<div id="mapwrap"> -<div id="map"> -<div id="spaces"></div> -<div id="pieces"> -<div id="round_marker" class="piece pawn round1"></div> -<div id="political_vp" class="piece cylinder orange vp5"></div> -<div id="military_vp" class="piece cylinder purple vp5"></div> -<div id="red_momentum" class="piece cylinder red m0"></div> -<div id="blue_momentum" class="piece cylinder blue m0"></div> -</div> -</div> -</div> + <div class="panel_grid"> -<div class="panel_grid"> + <div id="hand_panel" class="panel hide"> + <div id="hand_header" class="panel_header">Hand</div> + <div id="hand" class="panel_body"></div> + </div> -<div id="hand_panel" class="panel hide"> -<div id="hand_header" class="panel_header">Hand</div> -<div id="hand" class="panel_body"></div> -</div> + <div id="discard_panel" class="panel"> + <div id="discard_header" class="panel_header">Discard</div> + <div id="discard" class="panel_body"></div> + </div> + </div> -<div id="discard_panel" class="panel"> -<div id="discard_header" class="panel_header">Discard</div> -<div id="discard" class="panel_body"></div> -</div> + <div class="panel_grid"> -<div id="final_panel" class="panel"> -<div id="final_header" class="panel_header">Final Cards</div> -<div id="final" class="panel_body"></div> -</div> + <div id="final_panel" class="panel"> + <div id="final_header" class="panel_header">Final Cards</div> + <div id="final" class="panel_body"></div> + </div> + <div id="blue_objective_panel" class="panel"> + <div id="blue_objective_header" class="panel_header">Versailles Objective</div> + <div id="blue_objective" class="panel_body"></div> + </div> -<div id="blue_objective_panel" class="panel"> -<div id="blue_objective_header" class="panel_header">Versailles Objective</div> -<div id="blue_objective" class="panel_body"></div> -</div> + <div id="red_objective_panel" class="panel"> + <div id="red_objective_header" class="panel_header">Commune Objective</div> + <div id="red_objective" class="panel_body"></div> + </div> -<div id="red_objective_panel" class="panel"> -<div id="red_objective_header" class="panel_header">Commune Objective</div> -<div id="red_objective" class="panel_body"></div> -</div> + </div> -<div id="set_aside_panel" class="panel hide"> -<div id="set_aside_header" class="panel_header">Set-aside cards</div> -<div id="set_aside" class="panel_body"></div> -</div> + <div class="panel_grid"> -</div> + <div id="set_aside_panel" class="panel hide"> + <div id="set_aside_header" class="panel_header">Set-aside cards</div> + <div id="set_aside" class="panel_body"></div> + </div> + + </div> </main> |