cloud-game/web/index.html
Sergey Stepanov d922e58278 Fix UI
2024-04-22 11:43:38 +03:00

133 lines
4.6 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta property="og:type" content="cloud-game"/>
<meta property="og:title" content="Web-based Cloud Gaming for Retro Games"/>
<meta property="og:description" content="Play and share cloud gaming experience with your friends"/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content="Cloud Retro"/>
<meta property="og:author" content="giongto35 trichimtrich"/>
<link rel="icon" href="data:,">
<link href="css/main.css?v=3" rel="stylesheet">
<link href="css/ui.css?v=3" rel="stylesheet">
<title>Cloud Retro</title>
</head>
<body>
<div id="gamebody">
<div class="app-button" id="w" title="Workers">W</div>
<div id="circle-pad-holder">
<div id="btn-up" class="dpad" data-key="up"></div>
<div id="btn-down" class="dpad" data-key="down"></div>
<div id="btn-left" class="dpad" data-key="left"></div>
<div id="btn-right" class="dpad" data-key="right"></div>
<div id="circle-pad"></div>
</div>
<div id="screen">
<div id="stats-overlay"></div>
<video id="stream" class="game-screen" hidden muted preload="none"></video>
<div id="menu-screen">
<div id="menu-container"></div>
<div id="menu-item-choice" class="hidden"></div>
</div>
</div>
<div id="servers"></div>
<div id="settings"></div>
<div id="guide-txt">
<b>Arrows</b> (move), <b>ZXCVAS;'./</b> (game ABXYL1-L3R1-R3), <b>1/2</b> (1st/2nd player),
<b>Shift/Enter/K/L</b> (select/start/save/load), <b>F</b> (fullscreen), <b>share</b> (copy the link to the
clipboard)
</div>
<div id="btn-join" class="btn big" data-key="join"></div>
<div id="slider-playeridx" class="slidecontainer">
<span>player choice</span>
<input type="range" aria-label="" min="1" max="4" value="1" class="slider" id="playeridx">
</div>
<div id="btn-quit" class="btn big" data-key="quit"></div>
<div id="controls-right">
<div id="btn-load" class="btn big hidden" data-key="load"></div>
<div id="btn-save" class="btn big hidden" data-key="save"></div>
<div id="btn-select" class="btn big" data-key="select"></div>
<div id="btn-start" class="btn big" data-key="start"></div>
<div id="color-button-holder">
<div id="btn-a" class="btn" data-key="a"></div>
<div id="btn-b" class="btn" data-key="b"></div>
<div id="btn-x" class="btn" data-key="x"></div>
<div id="btn-y" class="btn" data-key="y"></div>
</div>
</div>
<div id="btn-settings" class="btn" data-key="settings"></div>
<input id="room-txt" type="text" aria-label="" placeholder="room id..." disabled>
<label class="dpad-toggle-label" title="D-pad toggle">
<input type="checkbox" id="dpad-toggle" checked>
<span class="dpad-toggle-slider"></span>
</label>
<div id="noti-box">Oh my god</div>
<div id="help-overlay" class="hidden">
<div id="help-overlay-background"></div>
<div id="help-overlay-detail"></div>
</div>
<div id="btn-help" class="btn" data-key="help"></div>
{{if .Recording.Enabled}}
<input id="user-name" type="text" data-lpignore="true" spellcheck="false" placeholder="user"
class="record-user" aria-label="">
<div id="btn-rec" class="btn" data-key="rec"></div>
{{end}}
</div>
<div class="source">
<span id="v">69ff8ae</span>
<a rel="noopener noreferrer" target="_blank" href="https://github.com/giongto35/cloud-game">
Source code on GitHub
</a>
</div>
<script type="importmap">
{
"imports": {
"api": "./js/api.js?v=3",
"env": "./js/env.js?v=3",
"event": "./js/event.js?v=3",
"gui": "./js/gui.js?v=3",
"input": "./js/input/input.js?v=3",
"log": "./js/log.js?v=3",
"network": "./js/network/network.js?v=3",
"settings": "./js/settings.js?v=3",
"utils": "./js/utils.js?v=3"
}
}
</script>
<script type="module" src="js/app.js?v=3"></script>
{{if .Analytics.Inject}}
<script async src="https://www.googletagmanager.com/gtag/js?id={{.Analytics.Gtag}}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', '{{.Analytics.Gtag}}');
</script>
{{end}}
</body>
</html>