199 lines
5.3 KiB
HTML
199 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
|
<title>TurboBuilder - Make extensions with blocks</title>
|
|
<meta name="description" content="Create TurboWarp extensions using Scratch-like block coding." />
|
|
<meta name="keywords" content="turbowarp, extensions, blocks" />
|
|
<meta name="author" content="JeremyGamer13" />
|
|
<meta name="theme-color" content="#ff4b4b" />
|
|
<meta name="og:image" content="/favicon.png" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<style id="XTI0GZwZotMzDMi0wcGctLFttIWctMdtLPXI9M0aGGDQyMHRpMViW3E="></style>
|
|
<style>
|
|
*:not(code, .token) {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
body {
|
|
color: black;
|
|
}
|
|
body.dark {
|
|
color: white;
|
|
}
|
|
|
|
a {
|
|
color: #ff4b4b;
|
|
}
|
|
a:hover {
|
|
color: #ff7373;
|
|
}
|
|
a:active {
|
|
color: #a52b2b;
|
|
}
|
|
|
|
/* blockly overrides */
|
|
.blocklyMenu {
|
|
color: black;
|
|
}
|
|
.blocklyToolboxCategory {
|
|
cursor: pointer;
|
|
}
|
|
.blocklyTreeLabel {
|
|
font-size: 10px !important;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
padding: 0 8px;
|
|
color: #575E75 !important;
|
|
}
|
|
.blocklyScrollbarHandle {
|
|
opacity: 0.5;
|
|
fill: #575E75;
|
|
}
|
|
body.light .blocklyScrollbarHandle:hover {
|
|
fill: #454a5c;
|
|
}
|
|
body.dark .blocklyTreeLabel {
|
|
color: #ccc !important;
|
|
}
|
|
.categoryBubble {
|
|
border: 1px rgba(0, 0, 0, 0.35) solid;
|
|
}
|
|
.blocklyTreeSelected {
|
|
background-color: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
body.dark .blocklyTreeSelected {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
/* dark mode ovverrifdes */
|
|
body.dark .blocklyToolboxDiv {
|
|
background-color: #111 !important;
|
|
}
|
|
body.dark .blocklyFlyoutBackground {
|
|
fill: #111 !important;
|
|
}
|
|
body.dark .blocklyFlyoutLabelText {
|
|
fill: #ccc !important;
|
|
}
|
|
body.dark .blocklyScrollbarHandle {
|
|
fill: #ccc;
|
|
}
|
|
/* TODO: preserve grid */
|
|
body.dark .blocklyMainBackground {
|
|
fill: #222 !important;
|
|
}
|
|
|
|
body.dark :is(.blocklyDropDownDiv, .fieldColourSlider) {
|
|
background: #444;
|
|
border-color: #111;
|
|
}
|
|
|
|
/* alert */
|
|
.__alert_prompt {
|
|
position: fixed;
|
|
left: 24px;
|
|
top: 24px;
|
|
z-index: 100000;
|
|
padding: 14px 24px;
|
|
background: rgb(255, 196, 0);
|
|
box-shadow: 0px 0px 16px black;
|
|
border-radius: 6px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
%sveltekit.head%
|
|
</head>
|
|
<body data-sveltekit-preload-data="hover">
|
|
<div class="__alert_prompt" id="Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=">
|
|
<p style="margin-block: 0;">TurboBuilder is currently in development. Features may not work correctly here.</p>
|
|
<button
|
|
style="margin: 0; margin-left: 8px; background: transparent; border: 0; outline: 0; padding: 0; cursor: pointer;"
|
|
onclick="document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=').remove()"
|
|
>
|
|
<img width="24" height="24" src="/images/close.svg">
|
|
</button>
|
|
</div>
|
|
<script>
|
|
// reset events
|
|
window.tbevents_ = [];
|
|
|
|
// if localhost, get rid of the alert
|
|
const isLocalHost = location.hostname === 'localhost';
|
|
if (isLocalHost) {
|
|
const alert = document.getElementById('Zm5BSEgzQW5HeW9yZkFkNEhpbGJiamtpZmdoOGNDc2lMR29JSzF0K2JnPT0=');
|
|
alert.remove();
|
|
}
|
|
|
|
// prism styles
|
|
const prismStyles = {
|
|
light: null,
|
|
dark: null
|
|
};
|
|
const getPrismStyleUrl_ = (id) => {
|
|
switch (id) {
|
|
case 'light':
|
|
return 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css';
|
|
case 'dark':
|
|
return 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-tomorrow.min.css';
|
|
default:
|
|
return '';
|
|
}
|
|
};
|
|
const loadPrismStyle_ = (id) => {
|
|
const url = getPrismStyleUrl_(id);
|
|
console.log('grabbing prism style for', id);
|
|
return fetch(url);
|
|
};
|
|
|
|
// handle theme updating
|
|
const head = document.head;
|
|
const body = document.body;
|
|
const updateTheme = async () => {
|
|
// update body
|
|
const mode = localStorage.getItem('tb:theme');
|
|
if (mode === 'dark') {
|
|
body.setAttribute("class", "dark");
|
|
body.style.background = "#111";
|
|
} else {
|
|
body.setAttribute("class", "light");
|
|
body.style.background = "";
|
|
}
|
|
// update head
|
|
const styleElement = document.getElementById("XTI0GZwZotMzDMi0wcGctLFttIWctMdtLPXI9M0aGGDQyMHRpMViW3E=");
|
|
let promise;
|
|
let styleCode = '';
|
|
let styleId = 'dark';
|
|
if (mode === 'dark') {
|
|
styleCode = prismStyles.dark;
|
|
if (!prismStyles.dark) promise = loadPrismStyle_('dark');
|
|
} else {
|
|
styleId = 'light';
|
|
styleCode = prismStyles.light;
|
|
if (!prismStyles.light) promise = loadPrismStyle_('light');
|
|
}
|
|
if (promise) {
|
|
const res = await promise;
|
|
const text = await res.text();
|
|
styleCode = text;
|
|
prismStyles[styleId] = styleCode;
|
|
}
|
|
styleElement.innerHTML = styleCode;
|
|
};
|
|
|
|
window.themeUpdated_ = () => {
|
|
updateTheme();
|
|
for (const event in window.tbevents_) {
|
|
if (event.type === 'THEME') {
|
|
event.callback();
|
|
}
|
|
}
|
|
};
|
|
updateTheme();
|
|
</script>
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
</body>
|
|
</html>
|