summaryrefslogtreecommitdiff
path: root/misc/dist/html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/dist/html')
-rw-r--r--misc/dist/html/editor.html108
-rw-r--r--misc/dist/html/fixed-size.html389
-rw-r--r--misc/dist/html/full-size.html1
-rw-r--r--misc/dist/html/manifest.json4
-rw-r--r--misc/dist/html/offline-export.html42
-rw-r--r--misc/dist/html/service-worker.js19
6 files changed, 139 insertions, 424 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index 99ac2379ce..347c22adf8 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -1,8 +1,10 @@
<!DOCTYPE html>
-<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
+<html xmlns="http://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 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" />
@@ -11,7 +13,14 @@
<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" />
- <link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
+ <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>
@@ -49,6 +58,29 @@
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;
@@ -197,6 +229,36 @@
</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>
@@ -204,8 +266,8 @@
<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 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;">
@@ -213,7 +275,7 @@
<option value="GLES3">WebGL 2</option>
</select>
<br />
- <img src="logo.svg" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
+ <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 />
@@ -221,7 +283,7 @@
<br />
<br />
<br />
- <label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" id="files" name="files" style="margin-bottom: 1rem"/>
+ <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 />
@@ -233,21 +295,21 @@
<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">
+ <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">
+ <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 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>
@@ -257,7 +319,7 @@
<div></div>
<div></div>
</div>
- <div id='status-notice' class='godot' style='display: none;'></div>
+ <div id="status-notice" class="godot" style="display: none;"></div>
</div>
</div>
<script>
@@ -265,9 +327,21 @@
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 src="godot.tools.js"></script>
<script>//<![CDATA[
var editor = null;
diff --git a/misc/dist/html/fixed-size.html b/misc/dist/html/fixed-size.html
deleted file mode 100644
index 9d0a946497..0000000000
--- a/misc/dist/html/fixed-size.html
+++ /dev/null
@@ -1,389 +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 abc0479739..7afb6fdb6b 100644
--- a/misc/dist/html/full-size.html
+++ b/misc/dist/html/full-size.html
@@ -3,7 +3,6 @@
<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'>
diff --git a/misc/dist/html/manifest.json b/misc/dist/html/manifest.json
index 6fbed737c7..0ca27b3742 100644
--- a/misc/dist/html/manifest.json
+++ b/misc/dist/html/manifest.json
@@ -1,7 +1,7 @@
{
- "name": "Godot Engine",
+ "name": "Godot Engine Web Editor",
"short_name": "Godot",
- "description": "Multi-platform 2D and 3D game engine with a feature-rich editor",
+ "description": "Multi-platform 2D and 3D game engine with a feature-rich editor (Web edition)",
"lang": "en",
"start_url": "./godot.tools.html",
"display": "standalone",
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/service-worker.js b/misc/dist/html/service-worker.js
index d4eaed2b17..063e40a6cb 100644
--- a/misc/dist/html/service-worker.js
+++ b/misc/dist/html/service-worker.js
@@ -1,26 +1,15 @@
// 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 conneciton to run the project if desired.
+// 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 = "offline.html";
+const OFFLINE_URL = "@GODOT_OFFLINE_PAGE@";
// Files that will be cached on load.
-const CACHED_FILES = [
- "godot.tools.html",
- "offline.html",
- "godot.tools.js",
- "godot.tools.worker.js",
- "godot.tools.audio.worklet.js",
- "logo.svg",
- "favicon.png",
-];
-
+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.tools.wasm",
-];
+const CACHABLE_FILES = @GODOT_OPT_CACHE@;
const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES);
self.addEventListener("install", (event) => {
generated by cgit v1.2.3 (git 2.25.1) at 2025-03-04 08:25:02 +0000