Spaces:

jbrinkma
/

deepmind-pushworld

Running

App Files Files Community

deepmind-pushworld / index.html

jbrinkma

Update index.html

5d04857 over 1 year ago

raw history blame contribute delete

No virus

11.1 kB

	<!DOCTYPE html>
	<html>
	<!--source code copied from https://deepmind-pushworld.github.io/play/-->

	<head>
	<meta charset="UTF-8">
	<title>PushWorld</title>

	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

	<!-- Stylesheets -->
	<link rel="stylesheet" type="text/css" href="./demo/photon.min.css">
	<link rel="stylesheet" type="text/css" href="./demo/index.css">
	<link rel="stylesheet" type="text/css" href="./demo/puzzle_player.css">
	</head>

	<body>
	<div id="header">
	<div class="content">
	<div class="title">PushWorld</div>
	<div class="subtitle">A benchmark for manipulation planning with tools and movable obstacles</div>
	<img class="banner" src="./demo/images/sample-puzzles.png" alt="Example PushWorld Puzzles"/>
	</div>
	</div>
	<div id="content">

	<div class="section first-section">
	<div class="main-links">
	<a class="btn btn-large btn-default" href="https://arxiv.org/abs/2301.10289">
	<span class="icon icon-doc-text-inv icon-text"></span>
	Read Paper
	</a>
	<a class="btn btn-large btn-default" href="https://github.com/deepmind/pushworld">
	<span class="icon icon-github icon-text"></span>
	View Github
	</a>
	<a class="btn btn-large btn-default" style="margin-right: 0px;" href="mailto:pushworld@deepmind.com">
	<span class="icon icon-mail icon-text"></span>
	Contact DeepMind
	</a>
	</div>
	</div>
	<div id="content">

	<div class="section">
	<div class="pushworld_puzzles">
	<div class="select_puzzle_group panel">
	<div class="toolbar toolbar-header title-toolbar">
	<div class="title vcenter">Select a Puzzle Difficulty</div>
	</div>
	<div class="select-difficulty">
	<div style="text-align: center;">
	<div><div style="font-size:20px; padding:10px 20px;" class="btn btn-form btn-large btn-primary" puzzle_group="level1">Level 1</div></div>
	<div style="margin-top:20px;"><div style="font-size:20px; padding:10px 20px;" class="btn btn-form btn-large btn-primary" puzzle_group="level2">Level 2</div></div>
	<div style="margin-top:20px;"><div style="font-size:20px; padding:10px 20px;" class="btn btn-form btn-large btn-primary" puzzle_group="level3">Level 3</div></div>
	<div style="margin-top:20px;"><div style="font-size:20px; padding:10px 20px;" class="btn btn-form btn-large btn-primary" puzzle_group="level4">Level 4</div></div>
	</div>
	</div>
	</div>

	<div id="pw-preview-template" class="pushworld_preview">
	<img src="images/loading.gif" class="pw-puzzle-loading" alt="Loading" width="25px" height="25px"/>
	<div class="puzzle-index"></div>
	<canvas class="vcenter" height="138px" width="138px"></canvas>
	</div>

	<div class="preview_panel panel" puzzle_group="level1" style="display:none;">

	<div class="toolbar toolbar-header title-toolbar">
	<div class="title puzzle_title vcenter">Level 1 Puzzles</div>
	</div>
	<div class="toolbar toolbar-header">
	<div class="toolbar-actions">
	<div class="left-buttons">
	<button class="return_select_puzzle_group btn btn-large btn-default">
	<span class="icon icon-left icon-text"></span>
	Select Difficulty
	</button>
	</div>
	</div>
	</div>

	<div class="preview_list">
	<img src="images/loading.gif" class="pw-puzzle-list-loading" alt="Loading" width="25px" height="25px"/>
	<div class="previews"></div>
	</div>
	</div>

	<div class="preview_panel panel" puzzle_group="level2" style="display:none;">

	<div class="toolbar toolbar-header title-toolbar">
	<div class="title puzzle_title vcenter">Level 2 Puzzles</div>
	</div>
	<div class="toolbar toolbar-header">
	<div class="toolbar-actions">
	<div class="left-buttons">
	<button class="return_select_puzzle_group btn btn-large btn-default">
	<span class="icon icon-left icon-text"></span>
	Select Difficulty
	</button>
	</div>
	</div>
	</div>

	<div class="preview_list">
	<img src="images/loading.gif" class="pw-puzzle-list-loading" alt="Loading" width="25px" height="25px"/>
	<div class="previews"></div>
	</div>
	</div>

	<div class="preview_panel panel" puzzle_group="level3" style="display:none;">

	<div class="toolbar toolbar-header title-toolbar">
	<div class="title puzzle_title vcenter">Level 3 Puzzles</div>
	</div>
	<div class="toolbar toolbar-header">
	<div class="toolbar-actions">
	<div class="left-buttons">
	<button class="return_select_puzzle_group btn btn-large btn-default">
	<span class="icon icon-left icon-text"></span>
	Select Difficulty
	</button>
	</div>
	</div>
	</div>

	<div class="preview_list">
	<img src="images/loading.gif" class="pw-puzzle-list-loading" alt="Loading" width="25px" height="25px"/>
	<div class="previews"></div>
	</div>
	</div>

	<div class="preview_panel panel" puzzle_group="level4" style="display:none;">

	<div class="toolbar toolbar-header title-toolbar">
	<div class="title puzzle_title vcenter">Level 4 Puzzles</div>
	</div>
	<div class="toolbar toolbar-header">
	<div class="toolbar-actions">
	<div class="left-buttons">
	<button class="return_select_puzzle_group btn btn-large btn-default">
	<span class="icon icon-left icon-text"></span>
	Select Difficulty
	</button>
	</div>
	</div>
	</div>

	<div class="preview_list">
	<img src="images/loading.gif" class="pw-puzzle-list-loading" alt="Loading" width="25px" height="25px"/>
	<div class="previews"></div>
	</div>
	</div>

	<div class="puzzle_panel panel">
	<div class="toolbar toolbar-header title-toolbar">
	<div class="title puzzle_title vcenter">Puzzle Name</div>
	</div>
	<div class="toolbar toolbar-header">
	<div class="toolbar-actions">
	<div class="left-buttons">
	<button class="all_puzzles btn btn-large btn-default">
	<span class="icon icon-layout icon-text"></span>
	Puzzle List
	</button>
	</div>
	<div class="right-buttons">
	<button class="reset_button btn btn-large btn-default pull-right">
	<span class="icon icon-to-start icon-text"></span>
	Reset
	</button>

	<button class="undo_button btn btn-large btn-default pull-right">
	<span class="icon icon-left icon-text"></span>
	Undo
	</button>
	</div>
	</div>
	</div>

	<div class="puzzle">
	<div id="instructions_modal" class="modal" style="display:block;">
	<div class="modal-content">
	<div class="arrow-keys">
	<div class="key hidden"></div>
	<div class="key"><span class="icon icon-up-bold"></span></div>
	<div class="key hidden"></div>
	<div class="key"><span class="icon icon-left-bold"></span></div>
	<div class="key"><span class="icon icon-down-bold"></span></div>
	<div class="key"><span class="icon icon-right-bold"></span></div>
	</div>
	<div class="text">Use the arrow keys to push the <a>red shapes</a> into their outlines. Use the
	<span class="icon icon-left icon-text" style="margin: 0px 5px;"></span><b>Undo</b>
	and
	<span class="icon icon-to-start icon-text" style="margin: 0px 5px;"></span><b>Reset</b>
	buttons above to retry a puzzle.
	</div>
	<button type="submit" class="btn btn-form btn-large btn-primary">OK, got it!</button>
	</div>
	</div>

	<div id="solved_modal" class="modal">
	<div class="modal-content">
	Solved!
	</div>
	</div>

	<canvas id="play_canvas"></canvas>

	<div id="touch-keypad-container">
	<div id="touch-keypad" class="arrow-keys">
	<div class="key left"><span class="icon icon-left-bold"></span></div>
	<div class="up-down-group">
	<div class="key up"><span class="icon icon-up-bold"></span></div>
	<div class="key down"><span class="icon icon-down-bold"></span></div>
	</div>
	<div class="key right"><span class="icon icon-right-bold"></span></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	</div>

	<script src="./demo/jquery-3.6.0.min.js" charset="utf-8"></script>
	<script src="./demo/index.js" charset="utf-8"></script>

	</body>
	</html>