diff options
Diffstat (limited to 'misc/dist/html/editor.html')
-rw-r--r-- | misc/dist/html/editor.html | 128 |
1 files changed, 109 insertions, 19 deletions
diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html index 535721f418..2cae215951 100644 --- a/misc/dist/html/editor.html +++ b/misc/dist/html/editor.html @@ -1,9 +1,28 @@ <!DOCTYPE html> -<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''> +<html xmlns="https://www.w3.org/1999/xhtml" lang="en"> <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' /> + <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 { @@ -39,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; @@ -187,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> @@ -194,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;"> @@ -203,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 /> @@ -211,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 /> @@ -223,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> @@ -247,11 +319,29 @@ <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> + window.addEventListener("load", () => { + if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("service.worker.js"); + } - <script src='godot.tools.js'></script> + 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; @@ -486,7 +576,7 @@ showTab('loader'); setLoaderEnabled(true); }; - editor.start({'args': args}); + editor.start({'args': args, 'persistentDrops': is_project_manager}); }); }, 0); OnEditorExit = null; @@ -547,7 +637,7 @@ //selectVideoMode(); showTab('editor'); setLoaderEnabled(false); - editor.start({'args': ['--video-driver', video_driver]}).then(function() { + editor.start({'args': ['--project-manager', '--video-driver', video_driver], 'persistentDrops': true}).then(function() { setStatusMode('hidden'); initializing = false; }); |