Bigaston/Godot custom HTML color.md

## Godot custom HTML color.md

      
    Raw
  

              Godot custom HTML color.md
            
          
    Better HTML export template with customisable background color

I wanted to create a better HTML export template with customisable load bar color for my game Emilien in Paris.

You can customise the line between 9 and 12 to change the color. If you use Itch.io, you can match some colors with your theme to have a good integration.

--background-color: BG
--progress-bar-background: BG2
--progress-bar-background: BG2 but a darker
--progress-line-background: Link

Example with Emilien in Paris:


Then, replace your HTML Shell in Godot
Tested for Godot 4.1 and 4.2

  
## template.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>$GODOT_PROJECT_NAME</title>
    <style>
      * {
        --background-color: #d8f2fd;
        --progress-bar-background: #faf6fd;
        --progress-bar-border: #e6d3f5;
        --progress-line-background: #cb97ec;
      }

      body {
        touch-action: none;
        margin: 0;
        border: 0 none;
        padding: 0;
        text-align: center;
        background-color: var(--background-color);
      }

      #canvas {
        display: block;
        margin: 0;
        color: white;
      }

      #canvas:focus {
        outline: none;
      }

      .godot {
        font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;
        color: #e0e0e0;
        background-color: #3b3943;
        background-image: linear-gradient(to bottom, #403e48, #35333c);
        border: 1px solid #45434e;
        box-shadow: 0 0 1px 1px #2f2d35;
      }

      /* 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: var(--progress-bar-background);
        border: 1px solid var(--progress-bar-border);
        padding: 1px;
        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: var(--progress-line-background);
        border: 1px solid var(--progress-line-border);
        border-radius: 2px;
      }

      #status-indeterminate {
        height: 42px;
        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>
    $GODOT_HEAD_INCLUDE
  </head>
  <body>
    <canvas id="canvas">
      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>

    <script src="$GODOT_URL"></script>
    <script>
      const GODOT_CONFIG = $GODOT_CONFIG;
      const engine = new Engine(GODOT_CONFIG);

      (function () {
        const INDETERMINATE_STATUS_STEP_MS = 100;
        const statusProgress = document.getElementById("status-progress");
        const statusProgressInner = document.getElementById(
          "status-progress-inner"
        );
        const statusIndeterminate = document.getElementById(
          "status-indeterminate"
        );
        const statusNotice = document.getElementById("status-notice");

        let initializing = true;
        let statusMode = "hidden";

        let animationCallbacks = [];
        function animate(time) {
          animationCallbacks.forEach((callback) => callback(time));
          requestAnimationFrame(animate);
        }
        requestAnimationFrame(animate);

        function animateStatusIndeterminate(ms) {
          const 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";
          }
        }

        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 setStatusNotice(text) {
          while (statusNotice.lastChild) {
            statusNotice.removeChild(statusNotice.lastChild);
          }
          const lines = text.split("\n");
          lines.forEach((line) => {
            statusNotice.appendChild(document.createTextNode(line));
            statusNotice.appendChild(document.createElement("br"));
          });
        }

        function displayFailureNotice(err) {
          const msg = err.message || err;
          console.error(msg);
          setStatusNotice(msg);
          setStatusMode("notice");
          initializing = false;
        }

        const missing = Engine.getMissingFeatures();
        if (missing.length !== 0) {
          const missingMsg =
            "Error\nThe following features required to run Godot projects on the Web are missing:\n";
          displayFailureNotice(missingMsg + missing.join("\n"));
        } else {
          setStatusMode("indeterminate");
          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);
        }
      })();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no" />
	<title>$GODOT_PROJECT_NAME</title>
	<style>
	* {
	--background-color: #d8f2fd;
	--progress-bar-background: #faf6fd;
	--progress-bar-border: #e6d3f5;
	--progress-line-background: #cb97ec;
	}

	body {
	touch-action: none;
	margin: 0;
	border: 0 none;
	padding: 0;
	text-align: center;
	background-color: var(--background-color);
	}

	#canvas {
	display: block;
	margin: 0;
	color: white;
	}

	#canvas:focus {
	outline: none;
	}

	.godot {
	font-family: "Noto Sans", "Droid Sans", Arial, sans-serif;
	color: #e0e0e0;
	background-color: #3b3943;
	background-image: linear-gradient(to bottom, #403e48, #35333c);
	border: 1px solid #45434e;
	box-shadow: 0 0 1px 1px #2f2d35;
	}

	/* 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: var(--progress-bar-background);
	border: 1px solid var(--progress-bar-border);
	padding: 1px;
	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: var(--progress-line-background);
	border: 1px solid var(--progress-line-border);
	border-radius: 2px;
	}

	#status-indeterminate {
	height: 42px;
	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>
	$GODOT_HEAD_INCLUDE
	</head>
	<body>
	<canvas id="canvas">
	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>

	<script src="$GODOT_URL"></script>
	<script>
	const GODOT_CONFIG = $GODOT_CONFIG;
	const engine = new Engine(GODOT_CONFIG);

	(function () {
	const INDETERMINATE_STATUS_STEP_MS = 100;
	const statusProgress = document.getElementById("status-progress");
	const statusProgressInner = document.getElementById(
	"status-progress-inner"
	);
	const statusIndeterminate = document.getElementById(
	"status-indeterminate"
	);
	const statusNotice = document.getElementById("status-notice");

	let initializing = true;
	let statusMode = "hidden";

	let animationCallbacks = [];
	function animate(time) {
	animationCallbacks.forEach((callback) => callback(time));
	requestAnimationFrame(animate);
	}
	requestAnimationFrame(animate);

	function animateStatusIndeterminate(ms) {
	const 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";
	}
	}

	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 setStatusNotice(text) {
	while (statusNotice.lastChild) {
	statusNotice.removeChild(statusNotice.lastChild);
	}
	const lines = text.split("\n");
	lines.forEach((line) => {
	statusNotice.appendChild(document.createTextNode(line));
	statusNotice.appendChild(document.createElement("br"));
	});
	}

	function displayFailureNotice(err) {
	const msg = err.message \|\| err;
	console.error(msg);
	setStatusNotice(msg);
	setStatusMode("notice");
	initializing = false;
	}

	const missing = Engine.getMissingFeatures();
	if (missing.length !== 0) {
	const missingMsg =
	"Error\nThe following features required to run Godot projects on the Web are missing:\n";
	displayFailureNotice(missingMsg + missing.join("\n"));
	} else {
	setStatusMode("indeterminate");
	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);
	}
	})();
	</script>
	</body>
	</html>