summaryrefslogtreecommitdiff
path: root/misc/dist/html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/dist/html')
-rw-r--r--misc/dist/html/editor.html666
-rw-r--r--misc/dist/html/fixed-size.html393
-rw-r--r--misc/dist/html/full-size.html81
-rw-r--r--misc/dist/html/logo.svg219
-rw-r--r--misc/dist/html/manifest.json18
-rw-r--r--misc/dist/html/offline-export.html42
-rw-r--r--misc/dist/html/offline.html42
-rw-r--r--misc/dist/html/service-worker.js73
8 files changed, 1083 insertions, 451 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
new file mode 100644
index 0000000000..2cae215951
--- /dev/null
+++ b/misc/dist/html/editor.html
@@ -0,0 +1,666 @@
+<!DOCTYPE html>
+<html xmlns="https://www.w3.org/1999/xhtml" lang="en">
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
+ <meta name="author" content="Godot Engine" />
+ <meta name="description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." />
+ <meta name="mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="application-name" content="Godot" />
+ <meta name="apple-mobile-web-app-title" content="Godot" />
+ <meta name="theme-color" content="#478cbf" />
+ <meta name="msapplication-navbutton-color" content="#478cbf" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+ <meta name="msapplication-starturl" content="/latest" />
+ <meta property="og:site_name" content="Godot Engine Web Editor" />
+ <meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/" />
+ <meta property="og:title" name="twitter:title" content="Free and open source 2D and 3D game engine" />
+ <meta property="og:description" name="twitter:description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." />
+ <meta property="og:image" name="twitter:image" content="https://godotengine.org/themes/godotengine/assets/og_image.png" />
+ <meta property="og:type" content="website" />
+ <meta name="twitter:card" content="summary" />
+ <link id="-gd-engine-icon" rel="icon" type="image/png" href="favicon.png" />
+ <link rel="apple-touch-icon" type="image/png" href="favicon.png" />
+ <link rel="manifest" href="manifest.json" />
+ <title>Godot Engine Web Editor (@GODOT_VERSION@)</title>
+ <style>
+ *: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. */
+ /* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
+ position: relative;
+ }
+
+ body {
+ touch-action: none;
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ margin: 0;
+ border: 0 none;
+ padding: 0;
+ text-align: center;
+ background-color: #333b4f;
+ overflow: hidden;
+ }
+
+ a {
+ color: hsl(205, 100%, 75%);
+ text-decoration-color: hsla(205, 100%, 75%, 0.3);
+ text-decoration-thickness: 0.125rem;
+ }
+
+ a:hover {
+ filter: brightness(117.5%);
+ }
+
+ a:active {
+ filter: brightness(82.5%);
+ }
+
+ .welcome-modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: hsla(0, 0%, 0%, 0.5);
+ }
+
+ .welcome-modal-content {
+ background-color: #333b4f;
+ box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5);
+ line-height: 1.5;
+ max-width: 38rem;
+ margin: 4rem auto 0 auto;
+ color: white;
+ border-radius: 0.5rem;
+ padding: 1rem 1rem 2rem 1rem;
+ }
+
+ #tabs-buttons {
+ /* Match the default background color of the editor window for a seamless appearance. */
+ background-color: #202531;
+ }
+
+ #tab-game {
+ /* Use a pure black background to better distinguish the running project */
+ /* from the editor window, and to use a more neutral background color (no tint). */
+ background-color: black;
+ /* Make the background span the entire page height. */
+ min-height: 100vh;
+ }
+
+ #canvas, #gameCanvas {
+ display: block;
+ margin: 0;
+ color: white;
+ }
+
+ /* Don't show distracting focus outlines for the main tabs' contents. */
+ #tab-editor canvas:focus,
+ #tab-game canvas:focus,
+ #canvas:focus,
+ #gameCanvas:focus {
+ outline: none;
+ }
+
+ .godot {
+ color: #e0e0e0;
+ background-color: #3b3943;
+ background-image: linear-gradient(to bottom, #403e48, #35333c);
+ border: 1px solid #45434e;
+ box-shadow: 0 0 1px 1px #2f2d35;
+ }
+
+ .btn {
+ appearance: none;
+ color: #e0e0e0;
+ background-color: #262c3b;
+ border: 1px solid #202531;
+ padding: 0.5rem 1rem;
+ margin: 0 0.5rem;
+ }
+
+ .btn:not(:disabled):hover {
+ color: #e0e1e5;
+ border-color: #666c7b;
+ }
+
+ .btn:active {
+ border-color: #699ce8;
+ color: #699ce8;
+ }
+
+ .btn:disabled {
+ color: #aaa;
+ border-color: #242937;
+ }
+
+ .btn.tab-btn {
+ padding: 0.3rem 1rem;
+ }
+
+ .btn.close-btn {
+ padding: 0.3rem 1rem;
+ margin-left: -0.75rem;
+ font-weight: 700;
+ }
+
+
+ /* Status display
+ * ============== */
+
+ #status {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* don't consume click events - make children visible explicitly */
+ visibility: hidden;
+ }
+
+ #status-progress {
+ width: 366px;
+ height: 7px;
+ background-color: #38363A;
+ border: 1px solid #444246;
+ padding: 1px;
+ box-shadow: 0 0 2px 1px #1B1C22;
+ border-radius: 2px;
+ visibility: visible;
+ }
+
+ @media only screen and (orientation:portrait) {
+ #status-progress {
+ width: 61.8%;
+ }
+ }
+
+ #status-progress-inner {
+ height: 100%;
+ width: 0;
+ box-sizing: border-box;
+ transition: width 0.5s linear;
+ background-color: #202020;
+ border: 1px solid #222223;
+ box-shadow: 0 0 1px 1px #27282E;
+ border-radius: 3px;
+ }
+
+ #status-indeterminate {
+ visibility: visible;
+ position: relative;
+ }
+
+ #status-indeterminate > div {
+ width: 4.5px;
+ height: 0;
+ border-style: solid;
+ border-width: 9px 3px 0 3px;
+ border-color: #2b2b2b transparent transparent transparent;
+ transform-origin: center 21px;
+ position: absolute;
+ }
+
+ #status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
+ #status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
+ #status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
+ #status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
+ #status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
+ #status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
+ #status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
+ #status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
+
+ #status-notice {
+ margin: 0 100px;
+ line-height: 1.3;
+ visibility: visible;
+ padding: 4px 6px;
+ visibility: visible;
+ }
+ </style>
+</head>
+<body>
+ <div
+ id="welcome-modal"
+ class="welcome-modal"
+ role="dialog"
+ aria-labelledby="welcome-modal-title"
+ aria-describedby="welcome-modal-description"
+ onclick="if (event.target === this) closeWelcomeModal(false)"
+ >
+ <div class="welcome-modal-content">
+ <h2 id="welcome-modal-title">Important - Please read before continuing</h2>
+ <div id="welcome-modal-description">
+ <p>
+ The Godot Web Editor has some limitations compared to the native version.
+ Its main focus is education and experimentation;
+ <strong>it is not recommended for production</strong>.
+ </p>
+ <p>
+ Refer to the
+ <a
+ href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html"
+ target="_blank"
+ rel="noopener"
+ >Web editor documentation</a> for usage instructions and limitations.
+ </p>
+ </div>
+ <button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
+ OK, don't show again
+ </button>
+ </div>
+ </div>
+ <div id="tabs-buttons">
+ <button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
+ <button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
+ <button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
+ <button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
+ <button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
+ </div>
+ <div id="tabs">
+ <div id="tab-loader">
+ <div style="color: #e0e0e0;" id="persistence">
+ <label for="videoMode" style="display: none;">Select video driver:</label><br />
+ <select id="videoMode" style="display: none;">
+ <option value="GLES2" selected="selected">WebGL</option>
+ <option value="GLES3">WebGL 2</option>
+ </select>
+ <br />
+ <img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
+ <br />
+ @GODOT_VERSION@
+ <br />
+ <a href="releases/">Need an old version?</a>
+ <br />
+ <br />
+ <br />
+ <label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" name="files" style="margin-bottom: 1rem"/>
+ <br />
+<a href="demo.zip">(Try this for example)</a>
+ <br />
+ <br />
+ <button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
+ <br />
+ <button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
+ <br />
+ <a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
+ </div>
+ </div>
+ <div id="tab-editor" style="display: none;">
+ <canvas id="editor-canvas" tabindex="1">
+ HTML5 canvas appears to be unsupported in the current browser.<br />
+ Please try updating or use a different browser.
+ </canvas>
+ </div>
+ <div id="tab-game" style="display: none;">
+ <canvas id="game-canvas" tabindex="2">
+ HTML5 canvas appears to be unsupported in the current browser.<br />
+ Please try updating or use a different browser.
+ </canvas>
+ </div>
+ <div id="tab-status" style="display: none;">
+ <div id="status-progress" style="display: none;" oncontextmenu="event.preventDefault();"><div id="status-progress-inner"></div></div>
+ <div id="status-indeterminate" style="display: none;" oncontextmenu="event.preventDefault();">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ <div id="status-notice" class="godot" style="display: none;"></div>
+ </div>
+ </div>
+ <script>
+ window.addEventListener("load", () => {
+ if ("serviceWorker" in navigator) {
+ navigator.serviceWorker.register("service.worker.js");
+ }
+
+ if (localStorage.getItem("welcomeModalDismissed") !== 'true') {
+ document.getElementById("welcome-modal").style.display = "block";
+ document.getElementById("welcome-modal-dismiss").focus();
+ }
+ });
+
+ function closeWelcomeModal(dontShowAgain) {
+ document.getElementById("welcome-modal").style.display = "none";
+ if (dontShowAgain) {
+ localStorage.setItem("welcomeModalDismissed", 'true');
+ }
+ }
+ </script>
+ <script src="godot.tools.js"></script>
+ <script>//<![CDATA[
+
+ var editor = null;
+ var game = null;
+ var setStatusMode;
+ var setStatusNotice;
+ var video_driver = "GLES2";
+
+ function clearPersistence() {
+ function deleteDB(path) {
+ return new Promise(function(resolve, reject) {
+ var req = indexedDB.deleteDatabase(path);
+ req.onsuccess = function() {
+ resolve();
+ };
+ req.onerror = function(err) {
+ reject(err);
+ };
+ req.onblocked = function(err) {
+ reject(err);
+ }
+
+ });
+ }
+ if (!window.confirm("Are you sure you want to delete all the locally stored files?\nClicking \"OK\" will permanently remove your projects and editor settings!")) {
+ return;
+ }
+ Promise.all([
+ deleteDB("/home/web_user"),
+ ]).then(function(results) {
+ alert("Done.");
+ }).catch(function (err) {
+ alert("Error deleting local files. Please retry after reloading the page.");
+ });
+ }
+
+ function selectVideoMode() {
+ var select = document.getElementById('videoMode');
+ video_driver = select.selectedOptions[0].value;
+ }
+
+ var tabs = [
+ document.getElementById('tab-loader'),
+ document.getElementById('tab-editor'),
+ document.getElementById('tab-game')
+ ]
+ function showTab(name) {
+ tabs.forEach(function (elem) {
+ if (elem.id == 'tab-' + name) {
+ elem.style.display = 'block';
+ if (name == 'editor' || name == 'game') {
+ const canvas = document.getElementById(name + '-canvas');
+ canvas.focus();
+ }
+ } else {
+ elem.style.display = 'none';
+ }
+ });
+ }
+
+ function setButtonEnabled(id, enabled) {
+ if (enabled) {
+ document.getElementById(id).disabled = "";
+ } else {
+ document.getElementById(id).disabled = "disabled";
+ }
+ }
+
+ function setLoaderEnabled(enabled) {
+ setButtonEnabled('btn-tab-loader', enabled);
+ setButtonEnabled('btn-tab-editor', !enabled);
+ setButtonEnabled('btn-close-editor', !enabled);
+ }
+
+ function setGameTabEnabled(enabled) {
+ setButtonEnabled('btn-tab-game', enabled);
+ setButtonEnabled('btn-close-game', enabled);
+ }
+
+ function closeGame() {
+ if (game) {
+ game.requestQuit();
+ }
+ }
+
+ function closeEditor() {
+ closeGame();
+ if (editor) {
+ editor.requestQuit();
+ }
+ }
+
+ function startEditor(zip) {
+ const INDETERMINATE_STATUS_STEP_MS = 100;
+ const persistentPaths = ['/home/web_user'];
+
+ var editorCanvas = document.getElementById('editor-canvas');
+ var gameCanvas = document.getElementById('game-canvas');
+ var statusProgress = document.getElementById('status-progress');
+ var statusProgressInner = document.getElementById('status-progress-inner');
+ var statusIndeterminate = document.getElementById('status-indeterminate');
+ var statusNotice = document.getElementById('status-notice');
+ var headerDiv = document.getElementById('tabs-buttons');
+
+ var initializing = true;
+ var statusMode = 'hidden';
+
+ showTab('status');
+
+ var animationCallbacks = [];
+ function animate(time) {
+ animationCallbacks.forEach(callback => callback(time));
+ requestAnimationFrame(animate);
+ }
+ requestAnimationFrame(animate);
+
+ var lastScale = 0;
+ var lastWidth = 0;
+ var lastHeight = 0;
+ function adjustCanvasDimensions() {
+ var scale = window.devicePixelRatio || 1;
+ var headerHeight = headerDiv.offsetHeight + 1;
+ var width = window.innerWidth;
+ var height = window.innerHeight - headerHeight;
+ if (lastScale !== scale || lastWidth !== width || lastHeight !== height) {
+ editorCanvas.width = width * scale;
+ editorCanvas.height = height * scale;
+ editorCanvas.style.width = width + "px";
+ editorCanvas.style.height = height + "px";
+ lastScale = scale;
+ lastWidth = width;
+ lastHeight = height;
+ }
+ }
+ animationCallbacks.push(adjustCanvasDimensions);
+ adjustCanvasDimensions();
+
+ setStatusMode = function setStatusMode(mode) {
+ if (statusMode === mode || !initializing)
+ return;
+ [statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
+ elem.style.display = 'none';
+ });
+ animationCallbacks = animationCallbacks.filter(function(value) {
+ return (value != animateStatusIndeterminate);
+ });
+ switch (mode) {
+ case 'progress':
+ statusProgress.style.display = 'block';
+ break;
+ case 'indeterminate':
+ statusIndeterminate.style.display = 'block';
+ animationCallbacks.push(animateStatusIndeterminate);
+ break;
+ case 'notice':
+ statusNotice.style.display = 'block';
+ break;
+ case 'hidden':
+ break;
+ default:
+ throw new Error('Invalid status mode');
+ }
+ statusMode = mode;
+ };
+
+ function animateStatusIndeterminate(ms) {
+ var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
+ if (statusIndeterminate.children[i].style.borderTopColor == '') {
+ Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
+ child.style.borderTopColor = '';
+ });
+ statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
+ }
+ }
+
+ setStatusNotice = function setStatusNotice(text) {
+ while (statusNotice.lastChild) {
+ statusNotice.removeChild(statusNotice.lastChild);
+ }
+ var lines = text.split('\n');
+ lines.forEach((line) => {
+ statusNotice.appendChild(document.createTextNode(line));
+ statusNotice.appendChild(document.createElement('br'));
+ });
+ };
+
+ const gameConfig = {
+ 'persistentPaths': persistentPaths,
+ 'unloadAfterInit': false,
+ 'canvas': gameCanvas,
+ 'canvasResizePolicy': 1,
+ 'onExit': function () {
+ setGameTabEnabled(false);
+ showTab('editor');
+ game = null;
+ },
+ };
+
+ var OnEditorExit = function () {
+ showTab('loader');
+ setLoaderEnabled(true);
+ };
+ function Execute(args) {
+ const is_editor = args.filter(function(v) { return v == '--editor' || v == '-e' }).length != 0;
+ const is_project_manager = args.filter(function(v) { return v == '--project-manager' }).length != 0;
+ const is_game = !is_editor && !is_project_manager;
+ if (is_project_manager) {
+ args.push('--video-driver', video_driver);
+ }
+ if (is_game) {
+ if (game) {
+ console.error("A game is already running. Close it first");
+ return;
+ }
+ setGameTabEnabled(true);
+ game = new Engine(gameConfig);
+ showTab('game');
+ game.init().then(function() {
+ requestAnimationFrame(function() {
+ game.start({'args': args}).then(function() {
+ gameCanvas.focus();
+ });
+ });
+ });
+ } else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
+ OnEditorExit = function(code) {
+ setLoaderEnabled(true);
+ setTimeout(function() {
+ editor.init().then(function() {
+ setLoaderEnabled(false);
+ OnEditorExit = function() {
+ showTab('loader');
+ setLoaderEnabled(true);
+ };
+ editor.start({'args': args, 'persistentDrops': is_project_manager});
+ });
+ }, 0);
+ OnEditorExit = null;
+ };
+ }
+ }
+
+ const editorConfig = {
+ 'unloadAfterInit': false,
+ 'onProgress': function progressFunction (current, total) {
+ if (total > 0) {
+ statusProgressInner.style.width = current/total * 100 + '%';
+ setStatusMode('progress');
+ if (current === total) {
+ // wait for progress bar animation
+ setTimeout(() => {
+ setStatusMode('indeterminate');
+ }, 100);
+ }
+ } else {
+ setStatusMode('indeterminate');
+ }
+ },
+ 'canvas': editorCanvas,
+ 'canvasResizePolicy': 0,
+ 'onExit': function() {
+ if (OnEditorExit) {
+ OnEditorExit();
+ }
+ },
+ 'onExecute': Execute,
+ 'persistentPaths': persistentPaths,
+ };
+ editor = new Engine(editorConfig);
+
+ function displayFailureNotice(err) {
+ var msg = err.message || err;
+ console.error(msg);
+ setStatusNotice(msg);
+ setStatusMode('notice');
+ initializing = false;
+ };
+
+ if (!Engine.isWebGLAvailable()) {
+ displayFailureNotice('WebGL not available');
+ } else {
+ setStatusMode('indeterminate');
+ editor.init('godot.tools').then(function() {
+ if (zip) {
+ editor.copyToFS("/tmp/preload.zip", zip);
+ }
+ try {
+ // Avoid user creating project in the persistent root folder.
+ editor.copyToFS("/home/web_user/keep", new Uint8Array());
+ } catch(e) {
+ // File exists
+ }
+ //selectVideoMode();
+ showTab('editor');
+ setLoaderEnabled(false);
+ editor.start({'args': ['--project-manager', '--video-driver', video_driver], 'persistentDrops': true}).then(function() {
+ setStatusMode('hidden');
+ initializing = false;
+ });
+ }).catch(displayFailureNotice);
+ }
+ };
+ document.getElementById("startButton").onclick = function() {
+ preloadZip(document.getElementById('zip-file')).then(function(zip) {
+ startEditor(zip);
+ });
+ }
+
+ function preloadZip(target) {
+ return new Promise(function(resolve, reject) {
+ if (target.files.length > 0) {
+ target.files[0].arrayBuffer().then(function(data) {
+ resolve(data);
+ });
+ } else {
+ resolve();
+ }
+ });
+ }
+ //]]></script>
+</body>
+</html>
diff --git a/misc/dist/html/fixed-size.html b/misc/dist/html/fixed-size.html
deleted file mode 100644
index 85064b34fd..0000000000
--- a/misc/dist/html/fixed-size.html
+++ /dev/null
@@ -1,393 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
-<head>
- <meta charset="utf-8" />
- <link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
- <title>$GODOT_PROJECT_NAME</title>
- <style type="text/css">
-
- body {
- margin: 0;
- border: 0 none;
- padding: 0;
- text-align: center;
- background-color: #222226;
- font-family: 'Noto Sans', Arial, sans-serif;
- }
-
-
- /* Godot Engine default theme style
- * ================================ */
-
- .godot {
- color: #e0e0e0;
- background-color: #3b3943;
- background-image: linear-gradient(to bottom, #403e48, #35333c);
- border: 1px solid #45434e;
- box-shadow: 0 0 1px 1px #2f2d35;
- }
-
- button.godot {
- font-family: 'Droid Sans', Arial, sans-serif; /* override user agent style */
- padding: 1px 5px;
- background-color: #37353f;
- background-image: linear-gradient(to bottom, #413e49, #3a3842);
- border: 1px solid #514f5d;
- border-radius: 1px;
- box-shadow: 0 0 1px 1px #2a2930;
- }
-
- button.godot:hover {
- color: #f0f0f0;
- background-color: #44414e;
- background-image: linear-gradient(to bottom, #494652, #423f4c);
- border: 1px solid #5a5667;
- box-shadow: 0 0 1px 1px #26252b;
- }
-
- button.godot:active {
- color: #fff;
- background-color: #3e3b46;
- background-image: linear-gradient(to bottom, #36343d, #413e49);
- border: 1px solid #4f4c59;
- box-shadow: 0 0 1px 1px #26252b;
- }
-
- button.godot:disabled {
- color: rgba(230, 230, 230, 0.2);
- background-color: #3d3d3d;
- background-image: linear-gradient(to bottom, #434343, #393939);
- border: 1px solid #474747;
- box-shadow: 0 0 1px 1px #2d2b33;
- }
-
-
- /* Canvas / wrapper
- * ================ */
-
- #container {
- display: inline-block; /* scale with canvas */
- vertical-align: top; /* prevent extra height */
- position: relative; /* root for absolutely positioned overlay */
- margin: 0;
- border: 0 none;
- padding: 0;
- background-color: #0c0c0c;
- }
-
- #canvas {
- display: block;
- margin: 0 auto;
- color: white;
- }
-
- #canvas:focus {
- outline: none;
- }
-
-
- /* Status display
- * ============== */
-
- #status {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- /* don't consume click events - make children visible explicitly */
- visibility: hidden;
- }
-
- #status-progress {
- width: 244px;
- height: 7px;
- background-color: #38363A;
- border: 1px solid #444246;
- padding: 1px;
- box-shadow: 0 0 2px 1px #1B1C22;
- border-radius: 2px;
- visibility: visible;
- }
-
- #status-progress-inner {
- height: 100%;
- width: 0;
- box-sizing: border-box;
- transition: width 0.5s linear;
- background-color: #202020;
- border: 1px solid #222223;
- box-shadow: 0 0 1px 1px #27282E;
- border-radius: 3px;
- }
-
- #status-indeterminate {
- visibility: visible;
- position: relative;
- }
-
- #status-indeterminate > div {
- width: 3px;
- height: 0;
- border-style: solid;
- border-width: 6px 2px 0 2px;
- border-color: #2b2b2b transparent transparent transparent;
- transform-origin: center 14px;
- position: absolute;
- }
-
- #status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
- #status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
- #status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
- #status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
- #status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
- #status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
- #status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
- #status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
-
- #status-notice {
- margin: 0 100px;
- line-height: 1.3;
- visibility: visible;
- padding: 4px 6px;
- visibility: visible;
- }
-
-
- /* Debug output
- * ============ */
-
- #output-panel {
- display: none;
- max-width: 700px;
- font-size: small;
- margin: 6px auto 0;
- padding: 0 4px 4px;
- text-align: left;
- line-height: 2.2;
- }
-
- #output-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- #output-container {
- padding: 6px;
- background-color: #2c2a32;
- box-shadow: inset 0 0 1px 1px #232127;
- color: #bbb;
- }
-
- #output-scroll {
- line-height: 1;
- height: 12em;
- overflow-y: scroll;
- white-space: pre-wrap;
- font-size: small;
- font-family: "Lucida Console", Monaco, monospace;
- }
- </style>
-$GODOT_HEAD_INCLUDE
-</head>
-<body>
- <div id="container">
- <canvas id="canvas" width="640" height="480">
- HTML5 canvas appears to be unsupported in the current browser.<br />
- Please try updating or use a different browser.
- </canvas>
- <div id="status">
- <div id='status-progress' style='display: none;' oncontextmenu="event.preventDefault();"><div id ='status-progress-inner'></div></div>
- <div id='status-indeterminate' style='display: none;' oncontextmenu="event.preventDefault();">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- <div id="status-notice" class="godot" style='display: none;'></div>
- </div>
- </div>
- <div id="output-panel" class="godot">
- <div id="output-header">
- Output:
- <button id='output-clear' class='godot' type='button' autocomplete='off'>Clear</button>
- </div>
- <div id="output-container"><div id="output-scroll"></div></div>
- </div>
-
- <script type="text/javascript" src="$GODOT_BASENAME.js"></script>
- <script type="text/javascript">//<![CDATA[
-
- var engine = new Engine;
-
- (function() {
-
- const EXECUTABLE_NAME = '$GODOT_BASENAME';
- const MAIN_PACK = '$GODOT_BASENAME.pck';
- const EXTRA_ARGS = JSON.parse('$GODOT_ARGS');
- const DEBUG_ENABLED = $GODOT_DEBUG_ENABLED;
- const INDETERMINATE_STATUS_STEP_MS = 100;
-
- var canvas = document.getElementById('canvas');
- var statusProgress = document.getElementById('status-progress');
- var statusProgressInner = document.getElementById('status-progress-inner');
- var statusIndeterminate = document.getElementById('status-indeterminate');
- var statusNotice = document.getElementById('status-notice');
-
- var initializing = true;
- var statusMode = 'hidden';
- var indeterminiateStatusAnimationId = 0;
-
- function setStatusMode(mode) {
-
- if (statusMode === mode || !initializing)
- return;
- [statusProgress, statusIndeterminate, statusNotice].forEach(elem => {
- elem.style.display = 'none';
- });
- if (indeterminiateStatusAnimationId !== 0) {
- cancelAnimationFrame(indeterminiateStatusAnimationId);
- indeterminiateStatusAnimationId = 0;
- }
- switch (mode) {
- case 'progress':
- statusProgress.style.display = 'block';
- break;
- case 'indeterminate':
- statusIndeterminate.style.display = 'block';
- indeterminiateStatusAnimationId = requestAnimationFrame(animateStatusIndeterminate);
- break;
- case 'notice':
- statusNotice.style.display = 'block';
- break;
- case 'hidden':
- break;
- default:
- throw new Error("Invalid status mode");
- }
- statusMode = mode;
- }
-
- function animateStatusIndeterminate(ms) {
- var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
- if (statusIndeterminate.children[i].style.borderTopColor == '') {
- Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
- child.style.borderTopColor = '';
- });
- statusIndeterminate.children[i].style.borderTopColor = '#dfdfdf';
- }
- requestAnimationFrame(animateStatusIndeterminate);
- }
-
- function setStatusNotice(text) {
-
- while (statusNotice.lastChild) {
- statusNotice.removeChild(statusNotice.lastChild);
- }
- var lines = text.split('\n');
- lines.forEach((line, index) => {
- statusNotice.appendChild(document.createTextNode(line));
- statusNotice.appendChild(document.createElement('br'));
- });
- };
-
- engine.setProgressFunc((current, total) => {
-
- if (total > 0) {
- statusProgressInner.style.width = current/total * 100 + '%';
- setStatusMode('progress');
- if (current === total) {
- // wait for progress bar animation
- setTimeout(() => {
- setStatusMode('indeterminate');
- }, 500);
- }
- } else {
- setStatusMode('indeterminate');
- }
- });
-
- if (DEBUG_ENABLED) {
- var outputRoot = document.getElementById("output-panel");
- var outputScroll = document.getElementById("output-scroll");
- var OUTPUT_MSG_COUNT_MAX = 400;
-
- document.getElementById('output-clear').addEventListener('click', () => {
- while (outputScroll.firstChild) {
- outputScroll.firstChild.remove();
- }
- });
-
- outputRoot.style.display = 'block';
-
- function print(text) {
- while (outputScroll.childElementCount >= OUTPUT_MSG_COUNT_MAX) {
- outputScroll.firstChild.remove();
- }
- var msg = document.createElement("div");
- if (String.prototype.trim.call(text).startsWith("**ERROR**")) {
- msg.style.color = "#d44";
- } else if (String.prototype.trim.call(text).startsWith("**WARNING**")) {
- msg.style.color = "#ccc000";
- } else if (String.prototype.trim.call(text).startsWith("**SCRIPT ERROR**")) {
- msg.style.color = "#c6d";
- }
- msg.textContent = text;
- var scrollToBottom = outputScroll.scrollHeight - (outputScroll.clientHeight + outputScroll.scrollTop) < 10;
- outputScroll.appendChild(msg);
- if (scrollToBottom) {
- outputScroll.scrollTop = outputScroll.scrollHeight;
- }
- };
-
- function printError(text) {
- if (!String.prototype.trim.call(text).startsWith('**ERROR**: ')) {
- text = '**ERROR**: ' + text;
- }
- print(text);
- }
-
- engine.setStdoutFunc(text => {
- print(text);
- console.log(text);
- });
-
- engine.setStderrFunc(text => {
- printError(text);
- console.warn(text);
- });
- }
-
- function displayFailureNotice(err) {
- var msg = err.message || err;
- if (DEBUG_ENABLED) {
- printError(msg);
- }
- console.error(msg);
- setStatusNotice(msg);
- setStatusMode('notice');
- initializing = false;
- };
-
- if (!Engine.isWebGLAvailable()) {
- displayFailureNotice("WebGL not available");
- } else {
- setStatusMode('indeterminate');
- engine.setCanvas(canvas);
- engine.startGame(EXECUTABLE_NAME, MAIN_PACK, EXTRA_ARGS).then(() => {
- setStatusMode('hidden');
- initializing = false;
- }, displayFailureNotice);
- }
- })();
- //]]></script>
-</body>
-</html>
diff --git a/misc/dist/html/full-size.html b/misc/dist/html/full-size.html
index 58cf8ba4d8..90e8167369 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -1,9 +1,8 @@
<!DOCTYPE html>
-<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
+<html xmlns='https://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, user-scalable=no' />
- <link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
<title>$GODOT_PROJECT_NAME</title>
<style type='text/css'>
@@ -134,22 +133,14 @@ $GODOT_HEAD_INCLUDE
<div id='status-notice' class='godot' style='display: none;'></div>
</div>
- <script type='text/javascript' src='$GODOT_BASENAME.js'></script>
+ <script type='text/javascript' src='$GODOT_URL'></script>
<script type='text/javascript'>//<![CDATA[
- var engine = new Engine;
- var setStatusMode;
- var setStatusNotice;
+ const GODOT_CONFIG = $GODOT_CONFIG;
+ var engine = new Engine(GODOT_CONFIG);
(function() {
-
- const EXECUTABLE_NAME = '$GODOT_BASENAME';
- const MAIN_PACK = '$GODOT_BASENAME.pck';
- const EXTRA_ARGS = JSON.parse('$GODOT_ARGS');
const INDETERMINATE_STATUS_STEP_MS = 100;
- const FULL_WINDOW = $GODOT_FULL_WINDOW;
-
- var canvas = document.getElementById('canvas');
var statusProgress = document.getElementById('status-progress');
var statusProgressInner = document.getElementById('status-progress-inner');
var statusIndeterminate = document.getElementById('status-indeterminate');
@@ -157,9 +148,6 @@ $GODOT_HEAD_INCLUDE
var initializing = true;
var statusMode = 'hidden';
- var lastWidth = 0;
- var lastHeight = 0;
- var lastScale = 0;
var animationCallbacks = [];
function animate(time) {
@@ -168,26 +156,7 @@ $GODOT_HEAD_INCLUDE
}
requestAnimationFrame(animate);
- function adjustCanvasDimensions() {
- const scale = window.devicePixelRatio || 1;
- if (lastWidth != window.innerWidth || lastHeight != window.innerHeight || lastScale != scale) {
- lastScale = scale;
- lastWidth = window.innerWidth;
- lastHeight = window.innerHeight;
- canvas.width = Math.floor(lastWidth * scale);
- canvas.height = Math.floor(lastHeight * scale);
- canvas.style.width = lastWidth + "px";
- canvas.style.height = lastHeight + "px";
- }
- }
- if (FULL_WINDOW) {
- animationCallbacks.push(adjustCanvasDimensions);
- adjustCanvasDimensions();
- } else {
- engine.setCanvasResizedOnStart(true);
- }
-
- setStatusMode = function setStatusMode(mode) {
+ function setStatusMode(mode) {
if (statusMode === mode || !initializing)
return;
@@ -214,10 +183,9 @@ $GODOT_HEAD_INCLUDE
throw new Error('Invalid status mode');
}
statusMode = mode;
- };
+ }
function animateStatusIndeterminate(ms) {
-
var i = Math.floor(ms / INDETERMINATE_STATUS_STEP_MS % 8);
if (statusIndeterminate.children[i].style.borderTopColor == '') {
Array.prototype.slice.call(statusIndeterminate.children).forEach(child => {
@@ -227,8 +195,7 @@ $GODOT_HEAD_INCLUDE
}
}
- setStatusNotice = function setStatusNotice(text) {
-
+ function setStatusNotice(text) {
while (statusNotice.lastChild) {
statusNotice.removeChild(statusNotice.lastChild);
}
@@ -239,22 +206,6 @@ $GODOT_HEAD_INCLUDE
});
};
- engine.setProgressFunc((current, total) => {
-
- if (total > 0) {
- statusProgressInner.style.width = current/total * 100 + '%';
- setStatusMode('progress');
- if (current === total) {
- // wait for progress bar animation
- setTimeout(() => {
- setStatusMode('indeterminate');
- }, 500);
- }
- } else {
- setStatusMode('indeterminate');
- }
- });
-
function displayFailureNotice(err) {
var msg = err.message || err;
console.error(msg);
@@ -267,8 +218,22 @@ $GODOT_HEAD_INCLUDE
displayFailureNotice('WebGL not available');
} else {
setStatusMode('indeterminate');
- engine.setCanvas(canvas);
- engine.startGame(EXECUTABLE_NAME, MAIN_PACK, EXTRA_ARGS).then(() => {
+ engine.startGame({
+ 'onProgress': function (current, total) {
+ if (total > 0) {
+ statusProgressInner.style.width = current/total * 100 + '%';
+ setStatusMode('progress');
+ if (current === total) {
+ // wait for progress bar animation
+ setTimeout(() => {
+ setStatusMode('indeterminate');
+ }, 500);
+ }
+ } else {
+ setStatusMode('indeterminate');
+ }
+ },
+ }).then(() => {
setStatusMode('hidden');
initializing = false;
}, displayFailureNotice);
diff --git a/misc/dist/html/logo.svg b/misc/dist/html/logo.svg
new file mode 100644
index 0000000000..afca8a36da
--- /dev/null
+++ b/misc/dist/html/logo.svg
@@ -0,0 +1,219 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="svg2"
+ version="1.1"
+ inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+ xml:space="preserve"
+ width="1024"
+ height="414"
+ viewBox="0 0 959.99998 388.125"
+ sodipodi:docname="logo.svg"
+ inkscape:export-filename="/home/akien/Projects/godot/godot.git/logo.png"
+ inkscape:export-xdpi="48"
+ inkscape:export-ydpi="48"><metadata
+ id="metadata8"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+ id="defs6"><clipPath
+ clipPathUnits="userSpaceOnUse"
+ id="clipPath16"><path
+ d="M 0,595.276 H 841.89 V 0 H 0 Z"
+ id="path18"
+ inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1916"
+ inkscape:window-height="1025"
+ id="namedview4"
+ showgrid="false"
+ inkscape:zoom="1.2041016"
+ inkscape:cx="512"
+ inkscape:cy="207"
+ inkscape:window-x="1360"
+ inkscape:window-y="53"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="g14"
+ fit-margin-top="48"
+ fit-margin-left="48"
+ fit-margin-right="48"
+ fit-margin-bottom="48"
+ inkscape:document-rotation="0" /><g
+ id="g10"
+ inkscape:groupmode="layer"
+ inkscape:label="godot_engine_logo_2017_curves-01"
+ transform="matrix(1.25,0,0,-1.25,-94.249997,597.49874)"><g
+ id="g12"><g
+ id="g14"
+ clip-path="url(#clipPath16)"><g
+ id="g20"
+ transform="matrix(1.1310535,0,0,1.1310535,531.44953,355.31567)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c -3.611,0 -6.636,-1.659 -9.09,-4.967 -2.441,-3.311 -3.668,-7.958 -3.668,-13.938 0,-5.993 1.166,-10.581 3.503,-13.778 2.333,-3.207 5.398,-4.804 9.2,-4.804 3.8,0 6.887,1.617 9.258,4.862 2.371,3.233 3.559,7.861 3.559,13.886 0,6.02 -1.227,10.654 -3.673,13.89 C 6.646,-1.617 3.616,0 0,0 m -0.055,-59.493 c -10.573,0 -19.195,3.46 -25.859,10.379 -6.655,6.925 -9.984,17.03 -9.984,30.314 0,13.292 3.367,23.356 10.101,30.209 6.736,6.844 15.431,10.269 26.082,10.269 10.649,0 19.251,-3.363 25.794,-10.109 6.555,-6.733 9.827,-16.94 9.827,-30.591 0,-13.661 -3.348,-23.822 -10.05,-30.49 -6.702,-6.654 -15.333,-9.981 -25.911,-9.981"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path22"
+ inkscape:connector-curvature="0" /></g><g
+ id="g24"
+ transform="matrix(1.1310535,0,0,1.1310535,607.8515,354.43097)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 v -33.768 c 0,-1.577 0.116,-2.571 0.342,-2.988 0.224,-0.415 0.903,-0.623 2.029,-0.623 4.144,0 7.283,1.548 9.429,4.634 2.151,3.083 3.215,8.216 3.215,15.405 0,7.192 -1.113,11.878 -3.325,14.055 C 9.467,-1.102 5.946,0 1.129,0 Z m -21.675,-52.392 v 67.735 c 0,1.883 0.468,3.369 1.413,4.471 0.939,1.085 2.161,1.636 3.671,1.636 H 2.263 c 11.965,0 21.053,-3.018 27.257,-9.04 6.215,-6.02 9.322,-15.499 9.322,-28.447 0,-27.7 -11.821,-41.547 -35.456,-41.547 h -19.302 c -3.836,0 -5.759,1.727 -5.759,5.192"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path26"
+ inkscape:connector-curvature="0" /></g><g
+ id="g28"
+ transform="matrix(1.1310535,0,0,1.1310535,700.81066,355.31567)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c -3.612,0 -6.645,-1.659 -9.095,-4.967 -2.44,-3.311 -3.662,-7.958 -3.662,-13.938 0,-5.993 1.169,-10.581 3.499,-13.778 2.33,-3.207 5.398,-4.804 9.2,-4.804 3.801,0 6.89,1.617 9.258,4.862 2.372,3.233 3.56,7.861 3.56,13.886 0,6.02 -1.225,10.654 -3.671,13.89 C 6.642,-1.617 3.616,0 0,0 m -0.058,-59.493 c -10.577,0 -19.193,3.46 -25.851,10.379 -6.663,6.925 -9.993,17.03 -9.993,30.314 0,13.292 3.367,23.356 10.1,30.209 6.741,6.844 15.431,10.269 26.086,10.269 10.651,0 19.246,-3.363 25.797,-10.109 6.55,-6.733 9.822,-16.94 9.822,-30.591 0,-13.661 -3.349,-23.822 -10.05,-30.49 -6.699,-6.654 -15.338,-9.981 -25.911,-9.981"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path30"
+ inkscape:connector-curvature="0" /></g><g
+ id="g32"
+ transform="matrix(1.1310535,0,0,1.1310535,789.01132,291.33514)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c 0,-1.496 -3.721,-2.255 -11.176,-2.255 -7.448,0 -11.18,0.759 -11.18,2.255 v 56.681 h -13.545 c -1.281,0 -2.185,1.727 -2.71,5.198 -0.226,1.652 -0.334,3.343 -0.334,5.077 0,1.724 0.108,3.422 0.334,5.077 0.525,3.462 1.429,5.202 2.71,5.202 h 49.112 c 1.279,0 2.179,-1.74 2.712,-5.202 0.221,-1.655 0.335,-3.353 0.335,-5.077 0,-1.734 -0.114,-3.425 -0.335,-5.077 C 15.39,58.408 14.49,56.681 13.211,56.681 H 0 Z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path34"
+ inkscape:connector-curvature="0" /></g><g
+ id="g36"
+ transform="matrix(1.1310535,0,0,1.1310535,468.26549,336.71278)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c -6.078,0.094 -13.034,-1.173 -13.034,-1.173 v -11.863 h 6.995 l -0.078,-5.288 c 0,-1.959 -1.942,-2.943 -5.815,-2.943 -3.878,0 -7.303,1.642 -10.274,4.917 -2.978,3.279 -4.459,8.072 -4.459,14.388 0,6.329 1.447,10.995 4.345,14.006 2.892,3.008 6.683,4.517 11.346,4.517 1.959,0 3.987,-0.316 6.096,-0.961 2.11,-0.639 3.519,-1.238 4.238,-1.799 0.713,-0.577 1.391,-0.85 2.032,-0.85 0.638,0 1.671,0.746 3.1,2.255 1.431,1.505 2.713,3.786 3.844,6.827 1.126,3.057 1.69,5.4 1.69,7.062 0,1.649 -0.036,2.786 -0.109,3.386 -1.581,1.73 -4.499,3.102 -8.755,4.122 -4.248,1.017 -9.011,1.522 -14.28,1.522 -11.594,0 -20.66,-3.65 -27.207,-10.95 -6.552,-7.303 -9.822,-16.783 -9.822,-28.452 0,-13.701 3.347,-24.087 10.041,-31.162 6.706,-7.074 15.51,-10.607 26.425,-10.607 5.87,0 11.08,0.505 15.632,1.522 4.557,1.013 7.586,2.053 9.093,3.105 l 0.452,35.33 C 11.496,-1.036 6.078,-0.104 0,0"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path38"
+ inkscape:connector-curvature="0" /></g><g
+ id="g40"
+ transform="matrix(1.1310535,0,0,1.1310535,441.34721,235.75121)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c -0.624,-1.28 -1.771,-2.454 -3.449,-3.516 -1.676,-1.069 -3.805,-1.6 -6.391,-1.6 -3.412,0 -6.156,1.075 -8.24,3.249 -2.076,2.157 -3.116,5.266 -3.116,9.323 v 10.116 c 0,3.969 0.98,7.013 2.946,9.138 1.962,2.108 4.59,3.177 7.872,3.177 3.208,0 5.695,-0.844 7.455,-2.513 1.755,-1.675 2.677,-4.015 2.757,-7.003 L -0.21,20.238 h -2.619 c -0.094,2.29 -0.759,4.057 -2.01,5.305 -1.244,1.238 -3.095,1.864 -5.539,1.864 -2.473,0 -4.432,-0.837 -5.866,-2.516 -1.43,-1.675 -2.143,-4.103 -2.143,-7.293 V 7.424 c 0,-3.308 0.771,-5.83 2.311,-7.567 1.54,-1.724 3.616,-2.588 6.236,-2.588 1.913,0 3.451,0.339 4.602,1.033 1.155,0.684 1.956,1.519 2.409,2.51 v 8.861 h -7.06 v 2.463 H 0 Z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path42"
+ inkscape:connector-curvature="0" /></g><g
+ id="g44"
+ transform="matrix(1.1310535,0,0,1.1310535,456.01527,232.82495)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c 1.553,0 2.936,0.44 4.144,1.336 1.21,0.9 2.058,2.037 2.561,3.422 v 5.468 H 2.213 c -1.91,0 -3.44,-0.541 -4.585,-1.623 C -3.52,7.528 -4.088,6.185 -4.088,4.588 -4.088,3.239 -3.733,2.131 -3.014,1.277 -2.296,0.42 -1.292,0 0,0 M 7.124,-2.04 C 6.984,-1.164 6.875,-0.453 6.806,0.104 6.739,0.671 6.705,1.235 6.705,1.808 5.938,0.554 4.948,-0.486 3.725,-1.301 2.504,-2.122 1.146,-2.529 -0.35,-2.529 c -2.092,0 -3.701,0.648 -4.84,1.946 -1.132,1.303 -1.704,3.059 -1.704,5.276 0,2.343 0.823,4.223 2.473,5.618 1.649,1.395 3.89,2.092 6.709,2.092 h 4.417 v 3.106 c 0,1.786 -0.456,3.193 -1.351,4.21 -0.914,1.004 -2.17,1.512 -3.791,1.512 -1.508,0 -2.752,-0.479 -3.728,-1.45 -0.973,-0.965 -1.456,-2.144 -1.456,-3.549 l -2.623,0.023 -0.046,0.137 c -0.074,1.906 0.647,3.591 2.168,5.084 1.515,1.489 3.459,2.229 5.825,2.229 2.338,0 4.22,-0.711 5.657,-2.128 1.429,-1.431 2.146,-3.471 2.146,-6.124 V 3.057 c 0,-0.903 0.042,-1.78 0.121,-2.617 0.081,-0.848 0.212,-1.665 0.417,-2.48 z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path46"
+ inkscape:connector-curvature="0" /></g><g
+ id="g48"
+ transform="matrix(1.1310535,0,0,1.1310535,476.7303,259.10521)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 0.24,-3.923 c 0.664,1.404 1.554,2.486 2.657,3.255 1.107,0.759 2.41,1.138 3.906,1.138 1.527,0 2.814,-0.444 3.852,-1.343 1.039,-0.896 1.805,-2.252 2.292,-4.074 0.623,1.682 1.505,3.011 2.65,3.973 1.145,0.964 2.534,1.444 4.143,1.444 2.217,0 3.937,-0.897 5.156,-2.692 1.224,-1.799 1.834,-4.559 1.834,-8.288 v -14.765 h -2.823 v 14.814 c 0,3.1 -0.429,5.283 -1.263,6.538 -0.839,1.257 -2.042,1.89 -3.598,1.89 -1.637,0 -2.915,-0.691 -3.834,-2.096 -0.914,-1.405 -1.478,-3.161 -1.683,-5.282 v -0.655 -15.209 H 10.72 v 14.798 c 0,3.027 -0.424,5.194 -1.292,6.488 -0.864,1.294 -2.066,1.936 -3.609,1.936 -1.475,0 -2.668,-0.45 -3.562,-1.342 -0.9,-0.897 -1.54,-2.125 -1.928,-3.683 V -25.275 H -2.477 V 0 Z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path50"
+ inkscape:connector-curvature="0" /></g><g
+ id="g52"
+ transform="matrix(1.1310535,0,0,1.1310535,522.82277,256.83868)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c -1.758,0 -3.202,-0.802 -4.334,-2.402 -1.133,-1.606 -1.718,-3.585 -1.765,-5.944 h 11.66 v 1.082 c 0,2.086 -0.489,3.823 -1.469,5.201 C 3.106,-0.684 1.745,0 0,0 m 0.397,-23.76 c -2.725,0 -4.954,1.026 -6.685,3.073 -1.726,2.043 -2.591,4.657 -2.591,7.841 v 4.197 c 0,3.19 0.867,5.85 2.602,7.965 1.739,2.105 3.828,3.158 6.277,3.158 2.648,0 4.699,-0.939 6.164,-2.823 1.468,-1.887 2.201,-4.422 2.201,-7.603 v -2.773 H -6.099 v -2.102 c 0,-2.447 0.586,-4.484 1.752,-6.11 1.168,-1.63 2.755,-2.438 4.744,-2.438 1.382,0 2.585,0.244 3.588,0.724 1.003,0.491 1.863,1.179 2.578,2.082 l 1.149,-1.988 C 6.949,-21.525 5.96,-22.307 4.753,-22.887 3.549,-23.464 2.094,-23.76 0.397,-23.76"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path54"
+ inkscape:connector-curvature="0" /></g><g
+ id="g56"
+ transform="matrix(1.1310535,0,0,1.1310535,558.0805,256.83868)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="M 0,0 C -1.763,0 -3.21,-0.802 -4.341,-2.402 -5.467,-4.008 -6.053,-5.987 -6.104,-8.346 H 5.559 v 1.082 c 0,2.086 -0.488,3.823 -1.474,5.201 C 3.104,-0.684 1.744,0 0,0 m 0.394,-23.76 c -2.726,0 -4.951,1.026 -6.679,3.073 -1.733,2.043 -2.6,4.657 -2.6,7.841 v 4.197 c 0,3.19 0.871,5.85 2.602,7.965 1.744,2.105 3.834,3.158 6.283,3.158 2.643,0 4.703,-0.939 6.164,-2.823 1.463,-1.887 2.197,-4.422 2.197,-7.603 v -2.773 H -6.104 v -2.102 c 0,-2.447 0.587,-4.484 1.76,-6.11 1.162,-1.63 2.742,-2.438 4.738,-2.438 1.387,0 2.585,0.244 3.585,0.724 1.007,0.491 1.866,1.179 2.589,2.082 l 1.141,-1.988 c -0.764,-0.968 -1.75,-1.75 -2.959,-2.33 -1.204,-0.577 -2.658,-0.873 -4.356,-0.873"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path58"
+ inkscape:connector-curvature="0" /></g><g
+ id="g60"
+ transform="matrix(1.1310535,0,0,1.1310535,575.91679,259.10521)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 0.23,-4.178 c 0.674,1.483 1.564,2.634 2.682,3.435 1.108,0.805 2.413,1.213 3.914,1.213 2.258,0 3.988,-0.835 5.189,-2.513 1.214,-1.675 1.815,-4.279 1.815,-7.812 v -15.42 h -2.825 v 15.394 c 0,2.888 -0.423,4.905 -1.264,6.075 -0.836,1.17 -2.065,1.753 -3.665,1.753 -1.435,0 -2.638,-0.466 -3.603,-1.414 C 1.504,-4.406 0.782,-5.657 0.301,-7.234 V -25.275 H -2.504 V 0 Z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path62"
+ inkscape:connector-curvature="0" /></g><g
+ id="g64"
+ transform="matrix(1.1310535,0,0,1.1310535,600.8685,242.30884)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 c 0,-2.565 0.486,-4.605 1.472,-6.123 0.974,-1.532 2.457,-2.288 4.436,-2.288 1.356,0 2.498,0.361 3.435,1.101 0.934,0.74 1.672,1.77 2.218,3.077 v 12.52 c -0.525,1.346 -1.246,2.434 -2.157,3.272 -0.91,0.824 -2.062,1.238 -3.448,1.238 -1.975,0 -3.468,-0.86 -4.46,-2.587 C 0.497,8.48 0,6.224 0,3.454 Z m -2.833,3.454 c 0,3.582 0.723,6.459 2.177,8.627 1.442,2.157 3.448,3.239 6.004,3.239 1.419,0 2.664,-0.346 3.728,-1.04 1.066,-0.681 1.947,-1.678 2.654,-2.946 l 0.274,3.516 h 2.381 v -25.298 c 0,-3.239 -0.751,-5.749 -2.26,-7.525 -1.511,-1.769 -3.657,-2.665 -6.428,-2.665 -0.996,0 -2.067,0.156 -3.212,0.459 -1.147,0.303 -2.162,0.701 -3.052,1.2 l 0.776,2.463 c 0.759,-0.492 1.608,-0.873 2.548,-1.141 0.932,-0.277 1.895,-0.41 2.894,-0.41 2.009,0 3.498,0.645 4.46,1.932 0.966,1.304 1.45,3.19 1.45,5.687 v 3.057 c -0.717,-1.138 -1.597,-2.011 -2.64,-2.614 -1.039,-0.606 -2.253,-0.909 -3.622,-0.909 -2.539,0 -4.53,0.994 -5.968,2.982 C -2.11,-5.948 -2.833,-3.301 -2.833,0 Z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path66"
+ inkscape:connector-curvature="0" /></g><path
+ d="m 627.82321,230.5176 h -3.20089 v 28.58738 h 3.20089 z m 0,36.72644 h -3.20089 v 4.50385 h 3.20089 z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.99999994"
+ id="path68"
+ inkscape:connector-curvature="0" /><g
+ id="g70"
+ transform="matrix(1.1310535,0,0,1.1310535,638.15379,259.10521)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="m 0,0 0.23,-4.178 c 0.676,1.483 1.562,2.634 2.678,3.435 1.115,0.805 2.422,1.213 3.916,1.213 2.258,0 3.995,-0.835 5.199,-2.513 1.211,-1.675 1.807,-4.279 1.807,-7.812 v -15.42 h -2.825 v 15.394 c 0,2.888 -0.422,4.905 -1.261,6.075 -0.843,1.17 -2.063,1.753 -3.668,1.753 -1.434,0 -2.635,-0.466 -3.599,-1.414 C 1.51,-4.406 0.785,-5.657 0.306,-7.234 V -25.275 H -2.503 V 0 Z"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path72"
+ inkscape:connector-curvature="0" /></g><g
+ id="g74"
+ transform="matrix(1.1310535,0,0,1.1310535,669.70883,256.83868)"
+ style="stroke-width:0.88413143;fill:#e0e0e0;fill-opacity:1"><path
+ d="M 0,0 C -1.763,0 -3.208,-0.802 -4.334,-2.402 -5.463,-4.008 -6.052,-5.987 -6.102,-8.346 H 5.56 v 1.082 c 0,2.086 -0.486,3.823 -1.47,5.201 C 3.109,-0.684 1.747,0 0,0 m 0.401,-23.76 c -2.733,0 -4.958,1.026 -6.681,3.073 -1.73,2.043 -2.595,4.657 -2.595,7.841 v 4.197 c 0,3.19 0.865,5.85 2.6,7.965 1.739,2.105 3.831,3.158 6.275,3.158 2.646,0 4.706,-0.939 6.172,-2.823 1.462,-1.887 2.195,-4.422 2.195,-7.603 v -2.773 H -6.102 v -2.102 c 0,-2.447 0.59,-4.484 1.757,-6.11 1.166,-1.63 2.748,-2.438 4.746,-2.438 1.382,0 2.579,0.244 3.578,0.724 1.012,0.491 1.869,1.179 2.591,2.082 l 1.147,-1.988 c -0.769,-0.968 -1.755,-1.75 -2.962,-2.33 -1.203,-0.577 -2.658,-0.873 -4.354,-0.873"
+ style="fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path76"
+ inkscape:connector-curvature="0" /></g><g
+ id="g78"
+ transform="matrix(1.1310535,0,0,1.1310535,348.13109,279.2668)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 c 0,0 -0.325,1.994 -0.515,1.976 l -36.182,-3.491 c -2.879,-0.278 -5.115,-2.574 -5.317,-5.459 l -0.994,-14.247 -27.992,-1.997 -1.904,12.912 c -0.424,2.872 -2.932,5.037 -5.835,5.037 h -38.188 c -2.902,0 -5.41,-2.165 -5.834,-5.037 l -1.905,-12.912 -27.992,1.997 -0.994,14.247 c -0.202,2.886 -2.438,5.182 -5.317,5.46 l -36.2,3.49 c -0.187,0.018 -0.324,-1.978 -0.511,-1.978 l -0.049,-7.83 30.658,-4.944 1.004,-14.374 c 0.203,-2.91 2.551,-5.263 5.463,-5.472 l 38.551,-2.75 c 0.146,-0.01 0.29,-0.016 0.434,-0.016 2.897,0 5.401,2.166 5.825,5.038 l 1.959,13.286 h 28.005 l 1.959,-13.286 c 0.423,-2.871 2.93,-5.037 5.831,-5.037 0.142,0 0.284,0.005 0.423,0.015 l 38.556,2.75 c 2.911,0.209 5.26,2.562 5.463,5.472 l 1.003,14.374 30.645,4.966 z"
+ style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path80"
+ inkscape:connector-curvature="0" /></g><g
+ id="g82"
+ transform="matrix(1.1310535,0,0,1.1310535,126.80608,346.04533)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 v -47.514 -6.035 -5.492 c 0.108,-0.001 0.216,-0.005 0.323,-0.015 l 36.196,-3.49 c 1.896,-0.183 3.382,-1.709 3.514,-3.609 l 1.116,-15.978 31.574,-2.253 2.175,14.747 c 0.282,1.912 1.922,3.329 3.856,3.329 h 38.188 c 1.933,0 3.573,-1.417 3.855,-3.329 l 2.175,-14.747 31.575,2.253 1.115,15.978 c 0.133,1.9 1.618,3.425 3.514,3.609 l 36.182,3.49 c 0.107,0.01 0.214,0.014 0.322,0.015 v 4.711 l 0.015,0.005 V 0 c 5.09692,6.4164715 9.92323,13.494208 13.621,19.449 -5.651,9.62 -12.575,18.217 -19.976,26.182 -6.864,-3.455 -13.531,-7.369 -19.828,-11.534 -3.151,3.132 -6.7,5.694 -10.186,8.372 -3.425,2.751 -7.285,4.768 -10.946,7.118 1.09,8.117 1.629,16.108 1.846,24.448 -9.446,4.754 -19.519,7.906 -29.708,10.17 -4.068,-6.837 -7.788,-14.241 -11.028,-21.479 -3.842,0.642 -7.702,0.88 -11.567,0.926 v 0.006 c -0.027,0 -0.052,-0.006 -0.075,-0.006 -0.024,0 -0.049,0.006 -0.073,0.006 V 63.652 C 93.903,63.606 90.046,63.368 86.203,62.726 82.965,69.964 79.247,77.368 75.173,84.205 64.989,81.941 54.915,78.789 45.47,74.035 45.686,65.695 46.225,57.704 47.318,49.587 43.65,47.237 39.795,45.22 36.369,42.469 32.888,39.791 29.333,37.229 26.181,34.097 19.884,38.262 13.219,42.176 6.353,45.631 -1.048,37.666 -7.968,29.069 -13.621,19.449 -9.1783421,12.475308 -4.4130298,5.4661124 0,0 Z"
+ style="fill:#478cbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.884131"
+ id="path84"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccccccsssscccccccccccccccccccsccccccccccc" /></g><g
+ id="g86"
+ transform="matrix(1.1310535,0,0,1.1310535,311.40329,266.88437)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 -1.121,-16.063 c -0.135,-1.936 -1.675,-3.477 -3.611,-3.616 l -38.555,-2.751 c -0.094,-0.007 -0.188,-0.01 -0.281,-0.01 -1.916,0 -3.569,1.406 -3.852,3.33 l -2.211,14.994 H -81.09 l -2.211,-14.994 c -0.297,-2.018 -2.101,-3.469 -4.133,-3.32 l -38.555,2.751 c -1.936,0.139 -3.476,1.68 -3.611,3.616 L -130.721,0 -163.268,3.138 c 0.015,-3.498 0.06,-7.33 0.06,-8.093 0,-34.374 43.605,-50.896 97.781,-51.086 h 0.066 0.067 c 54.176,0.19 97.766,16.712 97.766,51.086 0,0.777 0.047,4.593 0.063,8.093 z"
+ style="fill:#478cbf;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path88"
+ inkscape:connector-curvature="0" /></g><g
+ id="g90"
+ transform="matrix(1.1310535,0,0,1.1310535,204.11393,318.93771)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 c 0,-12.052 -9.765,-21.815 -21.813,-21.815 -12.042,0 -21.81,9.763 -21.81,21.815 0,12.044 9.768,21.802 21.81,21.802 C -9.765,21.802 0,12.044 0,0"
+ style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path92"
+ inkscape:connector-curvature="0" /></g><g
+ id="g94"
+ transform="matrix(1.1310535,0,0,1.1310535,198.17748,317.47435)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 c 0,-7.994 -6.479,-14.473 -14.479,-14.473 -7.996,0 -14.479,6.479 -14.479,14.473 0,7.994 6.483,14.479 14.479,14.479 C -6.479,14.479 0,7.994 0,0"
+ style="fill:#414042;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path96"
+ inkscape:connector-curvature="0" /></g><g
+ id="g98"
+ transform="matrix(1.1310535,0,0,1.1310535,237.47503,292.01909)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 c -3.878,0 -7.021,2.858 -7.021,6.381 v 20.081 c 0,3.52 3.143,6.381 7.021,6.381 3.878,0 7.028,-2.861 7.028,-6.381 V 6.381 C 7.028,2.858 3.878,0 0,0"
+ style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path100"
+ inkscape:connector-curvature="0" /></g><g
+ id="g102"
+ transform="matrix(1.1310535,0,0,1.1310535,270.84021,318.93771)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 c 0,-12.052 9.765,-21.815 21.815,-21.815 12.041,0 21.808,9.763 21.808,21.815 0,12.044 -9.767,21.802 -21.808,21.802 C 9.765,21.802 0,12.044 0,0"
+ style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path104"
+ inkscape:connector-curvature="0" /></g><g
+ id="g106"
+ transform="matrix(1.1310535,0,0,1.1310535,276.77813,317.47435)"
+ style="stroke-width:0.88413143"><path
+ d="m 0,0 c 0,-7.994 6.477,-14.473 14.471,-14.473 8.002,0 14.479,6.479 14.479,14.473 0,7.994 -6.477,14.479 -14.479,14.479 C 6.477,14.479 0,7.994 0,0"
+ style="fill:#414042;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.88413143"
+ id="path108"
+ inkscape:connector-curvature="0" /></g></g></g></g></svg>
diff --git a/misc/dist/html/manifest.json b/misc/dist/html/manifest.json
new file mode 100644
index 0000000000..0ca27b3742
--- /dev/null
+++ b/misc/dist/html/manifest.json
@@ -0,0 +1,18 @@
+{
+ "name": "Godot Engine Web Editor",
+ "short_name": "Godot",
+ "description": "Multi-platform 2D and 3D game engine with a feature-rich editor (Web edition)",
+ "lang": "en",
+ "start_url": "./godot.tools.html",
+ "display": "standalone",
+ "orientation": "landscape",
+ "theme_color": "#478cbf",
+ "icons": [
+ {
+ "src": "favicon.png",
+ "sizes": "256x256",
+ "type": "image/png"
+ }
+ ],
+ "background_color": "#333b4f"
+}
diff --git a/misc/dist/html/offline-export.html b/misc/dist/html/offline-export.html
new file mode 100644
index 0000000000..41ab42b04b
--- /dev/null
+++ b/misc/dist/html/offline-export.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>You are offline</title>
+ <style>
+ html {
+ background-color: #000000;
+ color: #ffffff;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ margin: 2rem;
+ }
+
+ p {
+ margin-block: 1rem;
+ }
+
+ button {
+ display: block;
+ padding: 1rem 2rem;
+ margin: 3rem auto 0;
+ }
+ </style>
+</head>
+<body>
+ <h1>You are offline</h1>
+ <p>This application requires an Internet connection to run for the first time.</p>
+ <p>Press the button below to try reloading:</p>
+ <button type="button">Reload</button>
+
+ <script>
+ document.querySelector("button").addEventListener("click", () => {
+ window.location.reload();
+ });
+ </script>
+</body>
+</html>
diff --git a/misc/dist/html/offline.html b/misc/dist/html/offline.html
new file mode 100644
index 0000000000..000c21b4d3
--- /dev/null
+++ b/misc/dist/html/offline.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>You are offline</title>
+ <style>
+ html {
+ background-color: #333b4f;
+ color: #e0e0e0;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ margin: 2rem;
+ }
+
+ p {
+ margin-block: 1rem;
+ }
+
+ button {
+ display: block;
+ padding: 1rem 2rem;
+ margin: 3rem auto 0;
+ }
+ </style>
+</head>
+<body>
+ <h1>You are offline</h1>
+ <p>This application requires an Internet connection to run for the first time.</p>
+ <p>Press the button below to try reloading:</p>
+ <button type="button">Reload</button>
+
+ <script>
+ document.querySelector("button").addEventListener("click", () => {
+ window.location.reload();
+ });
+ </script>
+</body>
+</html>
diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js
new file mode 100644
index 0000000000..063e40a6cb
--- /dev/null
+++ b/misc/dist/html/service-worker.js
@@ -0,0 +1,73 @@
+// This service worker is required to expose an exported Godot project as a
+// Progressive Web App. It provides an offline fallback page telling the user
+// that they need an Internet connection to run the project if desired.
+// Incrementing CACHE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const CACHE_VERSION = "@GODOT_VERSION@";
+const CACHE_NAME = "@GODOT_NAME@-cache";
+const OFFLINE_URL = "@GODOT_OFFLINE_PAGE@";
+// Files that will be cached on load.
+const CACHED_FILES = @GODOT_CACHE@;
+// Files that we might not want the user to preload, and will only be cached on first load.
+const CACHABLE_FILES = @GODOT_OPT_CACHE@;
+const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES);
+
+self.addEventListener("install", (event) => {
+ event.waitUntil(async function () {
+ const cache = await caches.open(CACHE_NAME);
+ // Clear old cache (including optionals).
+ await Promise.all(FULL_CACHE.map(path => cache.delete(path)));
+ // Insert new one.
+ const done = await cache.addAll(CACHED_FILES);
+ return done;
+ }());
+});
+
+self.addEventListener("activate", (event) => {
+ event.waitUntil(async function () {
+ if ("navigationPreload" in self.registration) {
+ await self.registration.navigationPreload.enable();
+ }
+ }());
+ // Tell the active service worker to take control of the page immediately.
+ self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+ const isNavigate = event.request.mode === "navigate";
+ const url = event.request.url || "";
+ const referrer = event.request.referrer || "";
+ const base = referrer.slice(0, referrer.lastIndexOf("/") + 1);
+ const local = url.startsWith(base) ? url.replace(base, "") : "";
+ const isCachable = FULL_CACHE.some(v => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
+ if (isNavigate || isCachable) {
+ event.respondWith(async function () {
+ try {
+ // Use the preloaded response, if it's there
+ let request = event.request.clone();
+ let response = await event.preloadResponse;
+ if (!response) {
+ // Or, go over network.
+ response = await fetch(event.request);
+ }
+ if (isCachable) {
+ // Update the cache
+ const cache = await caches.open(CACHE_NAME);
+ cache.put(request, response.clone());
+ }
+ return response;
+ } catch (error) {
+ const cache = await caches.open(CACHE_NAME);
+ if (event.request.mode === "navigate") {
+ // Check if we have full cache.
+ const cached = await Promise.all(FULL_CACHE.map(name => cache.match(name)));
+ const missing = cached.some(v => v === undefined);
+ const cachedResponse = missing ? await caches.match(OFFLINE_URL) : await caches.match(CACHED_FILES[0]);
+ return cachedResponse;
+ }
+ const cachedResponse = await caches.match(event.request);
+ return cachedResponse;
+ }
+ }());
+ }
+});