<title>TringlyBuilder</title>
<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: #777777;
}
a:hover {
color: #888888;
}
a:active {
color: #666666;
}
/* 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">
TringlyBuilder is currently in development, some project files may break
due to code changing all the time.<br /><br />website by:
<a href="https://github.com/Tringlyman">Tringlyman</a><br />fork of
<a href="https://TurboBuilder.vercel.app">TurboBuilder</a> by
<a href="https://github.com/Jwklong">Jwklong</a>
</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_ = [];
// 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("tringlybuilder: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>
