godotengine
/
godot-demo-projects
mirror of https://github.com/godotengine/godot-demo-projects


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Godot demos exported to HTML5</title>
	<style>
		:root {
			--background-color: #fff;
			--text-color: #222;
			--link-color: hsl(220, 100%, 45%);
			--link-underline-color: hsla(220, 100%, 45%, 0.3);
		}

		@media (prefers-color-scheme: dark) {
			:root {
				--background-color: #222;
				--text-color: #eee;
				--link-color: hsl(200, 100%, 70%);
				--link-underline-color: hsla(200, 100%, 70%, 0.3);
			}
		}

		*:focus {
			/* More visible outline for better keyboard navigation. */
			outline: 0.125rem solid hsl(220, 100%, 62.5%);
			/* Make the outline always appear above other elements. */
			position: relative;
		}

		html {
			background-color: var(--background-color);
			color: var(--text-color);
		}

		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
			max-width: 50rem;
			margin: 0 auto;
			padding: 0.75rem;
			line-height: 1.618rem;
		}

		h2 {
			margin-top: 2.5rem;
		}

		a {
			color: var(--link-color);
			text-decoration-color: var(--link-underline-color);
			text-decoration-thickness: 0.125rem;
		}

		a:hover {
			filter: brightness(117.5%);
		}

		a:active {
			filter: brightness(82.5%);
		}

		ul {
			padding-left: 0;
		}

		li {
			display: block;
		}

		li a {
			display: inline-block;
			width: 100%;
			height: 4rem;
			margin-left: 0.5rem;
		}

		li a:hover {
			background-color: hsla(0, 0%, 50%, 0.1);
		}

		li a * {
			float: left;
		}

		li a p {
			height: 24px;
			margin: 20px 10px;
		}

	</style>
</head>

<body>
	<h1>Godot demo projects</h1>
	<p>
		This page lists
		<a href="https://github.com/godotengine/godot-demo-projects">official Godot demo projects</a>
		exported to HTML5 for testing purposes. These projects are deployed automatically
		on every commit on the <code>master</code> branch of the repository.
	</p>
	<p>
		The HTML5 exports on this page are provided for demonstration purposes only.
		Some of these demos may not function or render correctly on HTML5,
		especially on mobile devices.
		For best performance, it's recommended to
		<a href="https://godotengine.org/download">download</a> a native editor
		and run the demo project by importing its files in the project manager.
	</p>
	<p>
		See the
		<a href="https://docs.godotengine.org/en/stable/getting_started/workflow/export/exporting_for_web.html">Exporting for the Web</a>
		documentation for information on exporting your own projects to HTML5.
	</p>

	<h2>List of demos</h2>
	<ul>
		<!-- The list of demos will be inserted below by the CI process. -->