mirror of
https://github.com/giongto35/cloud-game.git
synced 2026-01-23 18:46:11 +00:00
145 lines
5.1 KiB
HTML
145 lines
5.1 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">
|
||
<video id="stream" class="game-screen" hidden muted playsinline preload="none"></video>
|
||
<canvas id="mirror-stream" class="game-screen" hidden></canvas>
|
||
<div id="menu-screen">
|
||
<div id="menu-container"></div>
|
||
<div id="menu-item-choice" class="hidden"></div>
|
||
</div>
|
||
<div class="screen__footer hover hidden">
|
||
<div>cloudretro</div>
|
||
<div class="app-button fs kbm-button-fs hidden" id="kbm2"
|
||
title="Switch from keyboard/mouse to retropad">🎮+⌨️+🖱️
|
||
</div>
|
||
<div id="stats-overlay"></div>
|
||
</div>
|
||
<div id="play-stream" hidden>
|
||
<span>⏵</span>
|
||
<span>Click to play</span>
|
||
</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>Shift/Enter/K/L</b> (select/start/save/load), <b>F</b> (fullscreen), <b>share</b> (copy the link)
|
||
</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 class="app-button kbm-button hidden" id="kbm" title="Switch from keyboard/mouse to retropad">
|
||
C🎮+K⌨️+M🖱️</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>Cloudretro (ɔ) 2024</span>
|
||
<a rel="noopener noreferrer" target="_blank" href="https://github.com/giongto35/cloud-game">
|
||
<span id="v">69ff8ae</span>
|
||
</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>
|