This commit is contained in:
Bubobubobubobubo
2023-12-16 12:59:42 +00:00
parent f75c1c0133
commit 1a9174ddf5
11 changed files with 544 additions and 396 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

BIN
assets/index-ad63a4cb.js.gz Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@ -1,4 +1,4 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -14,14 +14,12 @@
<script src="https://unpkg.com/hydra-synth"></script> <script src="https://unpkg.com/hydra-synth"></script>
<script type="module" crossorigin src="/assets/index-7d89f6a0.js"></script> <script type="module" crossorigin src="/assets/index-ad63a4cb.js"></script>
<link rel="stylesheet" href="/assets/index-c8279334.css"> <link rel="stylesheet" href="/assets/index-9c86d997.css">
<link rel="manifest" href="/manifest.webmanifest"></head> <link rel="manifest" href="/manifest.webmanifest"></head>
<style> <style>
body { body {
font-family: "Arial"; font-family: "Arial";
background-color: #111827;
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
width: 100vw; width: 100vw;
@ -30,11 +28,10 @@
padding: 0; padding: 0;
} }
.fluid-bg-transition { .fluid-transition {
transition: background-color 0.05s ease-in-out; transition: background-color 0.05s ease-in-out;
} }
.fullscreencanvas { .fullscreencanvas {
position: fixed; /* ignore margins */ position: fixed; /* ignore margins */
top: 0px; top: 0px;
@ -68,60 +65,203 @@
z-index: 0; z-index: 0;
} }
.bar_button {
margin-left: 0.5rem;
margin-right: 0.5rem;
display: inline;
display: flex;
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(var(--background) / var(--tw-bg-opacity));
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
--tw-text-opacity: 1;
color: rgb(var(--foreground) / var(--tw-text-opacity));
}
.bar_button:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(var(--background) / var(--tw-text-opacity));
}
.side_button {
border-radius: 0.5rem;
--tw-bg-opacity: 1;
background-color: rgb(var(--background) / var(--tw-bg-opacity));
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
--tw-text-opacity: 1;
color: rgb(var(--foreground) / var(--tw-text-opacity));
}
.side_button:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--foreground) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(var(--background) / var(--tw-text-opacity));
}
.subtitle {
border-bottom-width: 1px;
--tw-bg-opacity: 1;
background-color: rgb(var(--selection_foreground) / var(--tw-bg-opacity));
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(var(--foreground) / var(--tw-text-opacity));
}
@media (min-width: 1024px) {
.subtitle {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
.tab_panel {
display: inline-block;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
--tw-text-opacity: 1;
color: rgb(var(--selection_foreground) / var(--tw-text-opacity));
}
@media (min-width: 1024px) {
.tab_panel {
padding-left: 1rem;
padding-right: 1rem;
}
}
.doc_header {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
border-radius: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(var(--white) / var(--tw-text-opacity));
}
.doc_header:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(var(--brightwhite) / var(--tw-text-opacity));
}
@media (min-width: 1024px) {
.doc_header {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
.doc_subheader {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
margin-left: 1.5rem;
border-radius: 0.5rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(var(--white) / var(--tw-text-opacity));
}
.doc_subheader:hover {
--tw-bg-opacity: 1;
background-color: rgb(var(--brightblack) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(var(--brightwhite) / var(--tw-text-opacity));
}
@media (min-width: 1024px) {
.doc_subheader {
font-size: 1.25rem;
line-height: 1.75rem;
}
}
</style> </style>
<body id="all" class="z-0 bg-neutral-800 overflow-y-hidden"> <body id="all" class="z-0 overflow-y-hidden bg-black">
<!-- The header is hidden on smaller devices --> <!-- The header is hidden on smaller devices -->
<header class="py-0 block text-white bg-neutral-900"> <header class="py-0 block">
<div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center"> <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-background">
<a class="flex title-font font-medium items-center text-black mb-0"> <a class="flex title-font font-medium items-center mb-0">
<img id="topos-logo" src="/assets/topos_frog-e8ab87d1.svg" class="w-12 h-12 text-black p-2 bg-white rounded-full" alt="Topos Frog Logo" /> <img id="topos-logo" src="/assets/topos_frog-e8ab87d1.svg" class="w-12 h-12 text-selection_foreground p-2 rounded-full bg-foreground" alt="Topos Frog Logo"/>
<input id="universe-viewer" class="hidden bg-transparent xl:block ml-4 text-2xl text-white placeholder-white" id="renamer" type="text" placeholder="Topos"> <input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl bg-background text-brightwhite placeholder-brightwhite" id="renamer" type="text" placeholder="Topos">
</a> </a>
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0"> <nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg"> <!-- Play Button -->
<a title="Play button (Ctrl+P)" id="play-button-1" class="bar_button">
<svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16"> <svg id="play-icon" class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/> <path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
</svg> </svg>
<svg id="pause-icon" class="hidden w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <svg id="pause-icon" class="hidden w-7 h-7" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/> <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
</svg> </svg>
<p id="play-label" class="hidden lg:block text-xl pl-2 text-white inline-block">Play</p> <p id="play-label" class="hidden lg:block text-xl pl-2 inline-block">Play</p>
</a> </a>
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <!-- Stop button -->
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="bar_button">
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/> <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
<rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/> <rect x="6.5" y="6.5" width="7" height="7" fill="selection_background" rx="1" ry="1"/>
</svg> </svg>
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Stop</p> <p class="hidden lg:block text-xl pl-2 inline-block">Stop</p>
</a> </a>
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"> <!-- Eval button -->
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="bar_button">
<svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
</svg> </svg>
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Eval</p> <p class="hidden lg:block text-xl pl-2 inline-block">Eval</p>
</a> </a>
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg"> <a title="Clear button" id="clear-button-1" class="bar_button">
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20"> <svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/> <path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
</svg> </svg>
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Clear</p> <p class="hidden lg:block text-xl pl-2 inline-block">Clear</p>
</a> </a>
<a title="Share button" id="share-button" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg"> <a title="Share button" id="share-button" class="bar_button">
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19"> <svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
</svg> </svg>
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Share</p> <p class="hidden lg:block text-xl pl-2 inline-block">Share</p>
</a> </a>
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg"> <a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="bar_button">
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-7 h-7 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/> <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg> </svg>
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Docs</p> <p class="hidden lg:block text-xl pl-2 inline-block">Docs</p>
</a> </a>
</nav> </nav>
@ -130,138 +270,133 @@
</header> </header>
<div id="documentation" class="hidden"> <div id="documentation" class="hidden">
<div id="documentation-page" class="flex flex-row bg-transparent"> <div id="documentation-page" class="flex flex-row transparent">
<aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-neutral-900 text-white"> <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-background">
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24"> <nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-background">
<details class="" open> <details class="" open>
<summary class="font-semibold lg:text-xl text-orange-300">Basics</summary> <summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Welcome </p> <p rel="noopener noreferrer" id="docs_introduction" class="doc_header">Welcome </p>
<p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p> <p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
<p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interaction</p> <p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
<p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p> <p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>
<p rel="noopener noreferrer" id="docs_mouse" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Mouse</p> <p rel="noopener noreferrer" id="docs_mouse" class="doc_header">Mouse</p>
<p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p> <p rel="noopener noreferrer" id="docs_code" class="doc_header">Coding</p>
</div> </div>
</details> </details>
<details class="space-y-2" open> <details class="space-y-2" open>
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary> <summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Learning</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<!-- Time --> <!-- Time -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Time</summary> <summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Time</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_time" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Dealing with time</p> <p rel="noopener noreferrer" id="docs_time" class="doc_subheader">Dealing with time</p>
<p rel="noopener noreferrer" id="docs_linear" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Transport</p> <p rel="noopener noreferrer" id="docs_linear" class="doc_subheader">Time & Transport</p>
<p rel="noopener noreferrer" id="docs_cyclic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Cycles</p> <p rel="noopener noreferrer" id="docs_cyclic" class="doc_subheader">Time & Cycles</p>
<p rel="noopener noreferrer" id="docs_longform" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Time & Structure</p> <p rel="noopener noreferrer" id="docs_longform" class="doc_subheader">Time & Structure</p>
</div> </div>
</details> </details>
<!-- Audio Engine --> <!-- Audio Engine -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Audio Engine</summary> <summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header">Audio Engine</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_audio_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Playing a sound</p> <p rel="noopener noreferrer" id="docs_audio_basics" class="doc_subheader">Playing a sound</p>
<p rel="noopener noreferrer" id="docs_amplitude" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Amplitude</p> <p rel="noopener noreferrer" id="docs_amplitude" class="doc_subheader">Amplitude</p>
<p rel="noopener noreferrer" id="docs_sampler" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Sampler</p> <p rel="noopener noreferrer" id="docs_sampler" class="doc_subheader">Sampler</p>
<p rel="noopener noreferrer" id="docs_synths" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synths</p> <p rel="noopener noreferrer" id="docs_synths" class="doc_subheader">Synths</p>
<p rel="noopener noreferrer" id="docs_filters" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Filters</p> <p rel="noopener noreferrer" id="docs_filters" class="doc_subheader">Filters</p>
<p rel="noopener noreferrer" id="docs_effects" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Effects</p> <p rel="noopener noreferrer" id="docs_effects" class="doc_subheader">Effects</p>
</div> </div>
</details> </details>
<!-- Samples --> <!-- Samples -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Samples</summary> <summary class="ml-2 lg:text-xl pb-1 pt-1 doc_header ">Samples</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_sample_list" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">List of samples</p> <p rel="noopener noreferrer" id="docs_sample_list" class="doc_subheader">List of samples</p>
<p rel="noopener noreferrer" id="docs_loading_samples" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">External samples</p> <p rel="noopener noreferrer" id="docs_loading_samples" class="doc_subheader">External samples</p>
</div> </div>
</details> </details>
<p rel="noopener noreferrer" id="docs_midi" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">MIDI</p> <p rel="noopener noreferrer" id="docs_midi" class="doc_header">MIDI</p>
<p rel="noopener noreferrer" id="docs_osc" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">OSC</p> <p rel="noopener noreferrer" id="docs_osc" class="doc_header">OSC</p>
</div> </div>
</details> </details>
<details class="space-y-2" open> <details class="space-y-2" open>
<summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary> <summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Array patterns</p> <p rel="noopener noreferrer" id="docs_patterns" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg doc_header">Array patterns</p>
<!-- Ziffers --> <!-- Ziffers -->
<details class="space-y-2"> <details class="space-y-2">
<summary class="ml-2 lg:text-xl pb-1 pt-1 text-white">Ziffers</summary> <summary class="doc_header">Ziffers</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<p rel="noopener noreferrer" id="docs_ziffers_basics" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Basics</p> <p rel="noopener noreferrer" id="docs_ziffers_basics" class="doc_subheader">Basics</p>
<p rel="noopener noreferrer" id="docs_ziffers_scales" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Scales</p> <p rel="noopener noreferrer" id="docs_ziffers_scales" class="doc_subheader">Scales</p>
<p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Rhythm</p> <p rel="noopener noreferrer" id="docs_ziffers_rhythm" class="doc_subheader">Rhythm</p>
<p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Algorithmic</p> <p rel="noopener noreferrer" id="docs_ziffers_algorithmic" class="doc_subheader">Algorithmic</p>
<p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Tonnetz</p> <p rel="noopener noreferrer" id="docs_ziffers_tonnetz" class="doc_subheader">Tonnetz</p>
<p rel="noopener noreferrer" id="docs_ziffers_syncing" class="ml-8 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Syncing</p> <p rel="noopener noreferrer" id="docs_ziffers_syncing" class="doc_subheader">Syncing</p>
</div> </div>
</details> </details>
<p rel="noopener noreferrer" id="docs_variables" class="doc_header">Global Variables</p>
<p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Global Variables</p> <p rel="noopener noreferrer" id="docs_lfos" class="doc_header">Low Freq Oscs.</p>
<p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</p> <p rel="noopener noreferrer" id="docs_probabilities" class="doc_header">Probabilities</p>
<p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Probabilities</p> <p rel="noopener noreferrer" id="docs_chaining" class="doc_header">Chaining</p>
<p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p> <p rel="noopener noreferrer" id="docs_functions" class="doc_header">Functions</p>
<p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p> <p rel="noopener noreferrer" id="docs_generators" class="doc_header">Generators</p>
<p rel="noopener noreferrer" id="docs_generators" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Generators</p>
<!--
<p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Reference</p>
-->
</div> </div>
</details> </details>
<details class="space-y-2" open> <details class="space-y-2" open>
<summary class="font-semibold lg:text-xl text-orange-300">More</summary> <summary class="font-semibold lg:text-xl doc_header">More</summary>
<div class="flex flex-col"> <div class="flex flex-col">
<a rel="noopener noreferrer" id="docs_synchronisation" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Synchronisation</a> <a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
<a rel="noopener noreferrer" id="docs_oscilloscope" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Oscilloscope</a> <a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
<a rel="noopener noreferrer" id="docs_bonus" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Bonus/Trivia</a> <a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a> <a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
</div> </div>
</details> </details>
<details class="" open> <details class="" open>
<summary class="font-semibold lg:text-xl text-orange-300">Community</summary> <summary class="font-semibold lg:text-xl text-orange-300">Community</summary>
<form action="https://github.com/Bubobubobubobubo/topos"> <form action="https://github.com/Bubobubobubobubo/topos">
<input rel="noopener noreferrer" id="github_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="GitHub" /> <input rel="noopener noreferrer" id="github_link" class="doc_header" type="submit" value="GitHub" />
</form> </form>
<form action="https://discord.gg/6T67DqBNNT"> <form action="https://discord.gg/6T67DqBNNT">
<input rel="noopener noreferrer" id="discord_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Discord" /> <input rel="noopener noreferrer" id="discord_link" class="doc_header" type="submit" value="Discord" />
</form> </form>
<form action="https://ko-fi.com/raphaelbubo"> <form action="https://ko-fi.com/raphaelbubo">
<input rel="noopener noreferrer" id="support_link" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg" type="submit" value="Support" /> <input rel="noopener noreferrer" id="support_link" class="doc_header" type="submit" value="Support" />
</form> </form>
</details> </details>
</nav> </nav>
</aside> </aside>
<div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 bg-transparent"></div> <div id="documentation-content" class="w-full flex-grow-1 h-screen overflow-y-scroll lg:px-12 mx-2 my-2 break-words pb-32 transparent"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="app"> <div id="app">
<!-- This modal is used for switching between buffers --> <!-- This modal is used for switching between buffers -->
<div id="modal-buffers" class="invisible bg-gray-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0"> <div id="modal-buffers" class="invisible flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-white"> <div id="start-button" class="lg:px-16 px-4 lg:pt-4 lg:pb-4 pt-2 pb-2 rounded-md text-center bg-foreground">
<p class="text-semibold lg:text-2xl text-sm pb-4">Known universes</p> <p class="text-semibold lg:text-2xl text-sm pb-4 text-selection_foreground">Known universes</p>
<p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p> <p id="existing-universes" class="text-normal lg:h-auto h-48 overflow-y-auto mb-2"></p>
<div id="disclaimer" class="pb-4"> <div id="disclaimer" class="pb-4">
<form id="universe-creator"> <form id="universe-creator">
<label for="search" class="mb-2 text-sm font-medium text-gray-900 sr-only text-white">Search</label> <label for="search" class="mb-2 text-sm font-medium sr-only ">Search</label>
<div class="relative"> <div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"> <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"> <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg> </svg>
</div> </div>
<input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg bg-neutral-800 text-white" placeholder="Buffer..." required> <input name="universe" minlength="2" autocomplete="off" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm border border-neutral-800 outline-0 rounded-lg neutral-800 " placeholder="Buffer..." required>
<button id="load-universe-button" class="text-black absolute right-2.5 bottom-2.5 bg-white hover:bg-white focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button> <button id="load-universe-button" class="bg-background text-selection_background absolute right-2.5 bottom-2.5 focus:outline-none font-medium rounded-lg text-sm px-4 py-2">Go</button>
</div> </div>
</form> </form>
<div class="mt-2 flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 border-spacing-y-4"> <div class="mt-2 flex space-x-6 border-t rounded-b border-spacing-y-4">
<button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 hover:bg-neutral-700 bg-neutral-800 text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button> <button id="close-universes-button" data-modal-hide="defaultModal" type="button" class="mt-2 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-background text-selection_background">Close</button>
</div> </div>
</div> </div>
@ -270,29 +405,26 @@
<!-- This modal is used for settings --> <!-- This modal is used for settings -->
<div id="modal-settings" class="invisible flex <div id="modal-settings" class="invisible flex
absolute lg:justify-center lg:items-center absolute lg:justify-center lg:items-center
lg:overflow-y-auto lg:overflow-x-auto lg:overflow-y-auto lg:overflow-x-auto
overflow-y-scroll owerflow-x-scroll overflow-y-scroll owerflow-x-scroll
md:top-0 md:bottom-0 h-screen w-full" md:top-0 md:bottom-0 h-screen w-full"
> >
<div class="grid w-full grid-col-3"> <div class="grid w-full grid-col-3">
<div class="bg-white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8"> <div class="white rounded-lg lg:mx-48 mx-0 lg:space-y-8 space-y-4 lg:px-8 bg-foreground">
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg <h1 class="lg:mt-12 mt-6 font-semibold rounded-lg justify-center lg:text-center lg:pl-0 pl-8 mx-4 subtitle">Topos Application Settings</h1>
bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1>
<div class="flex lg:flex-row flex-col mr-4 ml-4"> <div class="flex lg:flex-row flex-col mr-4 ml-4">
<!-- Font Size Selection --> <!-- Font Size Selection -->
<div class="bg-gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2"> <div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
<p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4">Font Settings</p> <p class="font-bold lg:text-xl text-sm ml-4 lg:pb-4 pb-2 underline underline-offset-4 text-selection_background">Theme Settings</p>
<div class="mb-6 mx-4 font-semibold"> <div class="mb-6 mx-4 font-semibold">
<label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm">Size:</label> <label for="default-input" class="block mb-2 ml-1 font-normal sd:text-sm text-foreground">Size:</label>
<input type="text" id="font-size-input" type="number" class="bg-gray-50 border border-gray-300 text-gray-900 <input type="text" id="font-size-input" type="number" class="border
text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 text-sm rounded-lg focus:border-blue-500 block w-full p-2.5 focus:border-blue-500">
dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
</div> </div>
<label for="font" class="block ml-5 mb-2 font-medium sd:text-sm">Font:</label> <label for="font" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Font:</label>
<select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2 <select id="font-family" class=" ml-4 border mb-2
text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"> text-sm rounded-lg focus:border-blue-500 block p-2.5">
<option value="IBM Plex Mono">IBM Plex Mono</option> <option value="IBM Plex Mono">IBM Plex Mono</option>
<option value="Jet Brains">Jet Brains</option> <option value="Jet Brains">Jet Brains</option>
<option value="Courier">Courier</option> <option value="Courier">Courier</option>
@ -304,186 +436,191 @@
<option value="Steps Mono">Steps Mono</option> <option value="Steps Mono">Steps Mono</option>
<option value="Steps Mono Thin">Steps Mono Thin</option> <option value="Steps Mono Thin">Steps Mono Thin</option>
</select> </select>
<div class="rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
<label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm text-foreground">Theme:</label>
<select id="theme-selector" class="ml-4 border mb-2
text-sm rounded-lg block p-2.5">
</select>
<div id="theme-previewer"></div>
</div>
</div> </div>
<!-- Editor mode selection --> <!-- Editor mode selection -->
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2"> <div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p> <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Editor options</p>
<!-- Checkboxes --> <!-- Checkboxes -->
<div class="pr-4"> <div class="pr-4">
<div class="flex items-center mb-4 ml-5"> <div class="flex items-center mb-4 ml-5">
<input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="vim-mode" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Vim Mode</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-selection_background">Vim Mode</label>
</div> </div>
<div class="flex items-center mb-4 ml-5"> <div class="flex items-center mb-4 ml-5">
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Line Numbers</label>
</div> </div>
<div class="flex items-center mb-4 ml-5"> <div class="flex items-center mb-4 ml-5">
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Time Position</label>
</div> </div>
<div class="flex items-center mb-4 ml-5"> <div class="flex items-center mb-4 ml-5">
<input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="show-tips" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Hovering Tips</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Hovering Tips</label>
</div> </div>
<div class="flex items-center mb-4 ml-5"> <div class="flex items-center mb-4 ml-5">
<input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="show-completions" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Completions</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Show Completions</label>
</div> </div>
<div class="flex items-center mb-4 ml-5"> <div class="flex items-center mb-4 ml-5">
<input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="load-demo-songs" type="checkbox" value="" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Load Demo Song</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Load Demo Song</label>
</div> </div>
</div> </div>
</div> </div>
<div class="bg-gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2"> <div class="rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2 bg-selection_foreground">
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">File Management</p> <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">File Management</p>
<div class="flex flex-col space-y-2 pb-2"> <div class="flex flex-col space-y-2 pb-2">
<button id="download-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4"> <button id="download-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
<svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> <svg class="fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span>Download universes</span> <span class="text-selection_foreground">Download universes</span>
</button> </button>
<button id="upload-universes" class="bg-gray-800 hover:bg-gray-900 text-white font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4"> <button id="upload-universes" class="bg-brightwhite font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4 text-selection_background">
<svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> <svg class="rotate-180 fill-current w-4 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
<span>Upload universes</span> <span class="text-selection_foreground">Upload universes</span>
</button> </button>
<button id="destroy-universes" class="bg-red-800 hover:bg-red-900 text-white font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4"> <button id="destroy-universes" class="bg-brightwhite font-bold lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg> </svg>
<span>Destroy universes</span> <span class="text-selection_foreground">Destroy universes</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<!-- Midi settings --> <!-- Midi settings -->
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4"> <div id="midi-settings-container" class="rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4 bg-color bg-selection_foreground">
<div class="lg:flex lg:flex-row w-fit"> <div class="lg:flex lg:flex-row w-fit">
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">MIDI I/O Settings</p> <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">MIDI I/O Settings</p>
<div class="flex items-center mb-4 ml-6"> <div class="flex items-center mb-4 ml-6">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI Clock:&nbsp;</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">MIDI Clock:&nbsp;</label>
<select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2"> <select id="midi-clock-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
<option value="-1">Internal</option> <option value="-1">Internal</option>
</select> </select>
</div> </div>
<div class="lg:flex block items-center mb-4 ml-6"> <div class="lg:flex block items-center mb-4 ml-6">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Clock PPQN:&nbsp;</label> <label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">Clock PPQN:&nbsp;</label>
<select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2"> <select id="midi-clock-ppqn-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600">
<option value="24">24</option> <option value="24">24</option>
<option value="48">48</option> <option value="48">48</option>
</select> </select>
</div> </div>
<div class="lg:flex block items-center mb-4 ml-6"> <div class="lg:flex block items-center mb-4 ml-6">
<input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="send-midi-clock" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600 focus:ring-2">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Send MIDI Clock</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Send MIDI Clock</label>
</div> </div>
</div> </div>
<div class="lg:flex block flex-row"> <div class="lg:flex block flex-row">
<div class="flex items-center mb-4 ml-6"> <div class="flex items-center mb-4 ml-6">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">MIDI input:&nbsp;</label> <label for="default-checkbox" class="ml-2 mr-2 text-sm font-medium text-foreground">MIDI input:&nbsp;</label>
<select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2"> <select id="default-midi-input" class="w-32 h-8 text-sm font-medium text-black rounded focus:ring-blue-600 focus:ring-2">
<option value="-1">None</option> <option value="-1">None</option>
</select> </select>
</div> </div>
<div class="lg:flex block items-center mb-4 ml-6"> <div class="lg:flex block items-center mb-4 ml-6">
<input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> <input id="midi-channels-scripts" type="checkbox" value="" class="lg:w-8 lg:h-8 h-4 w-4 text-blue-600 rounded focus:ring-blue-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Route channels to scripts</label> <label for="default-checkbox" class="ml-2 text-sm font-medium text-foreground">Route channels to scripts</label>
</div> </div>
</div> </div>
</div> </div>
<!-- Audio nudge slider --> <!-- Audio nudge slider -->
<div id="midi-settings-container" class="bg-gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2"> <div id="midi-settings-container" class="rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2 bg-selection_foreground">
<p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Audio/Event Nudging</p> <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4 text-selection_background">Audio/Event Nudging</p> <div class="flex flex-column pb-2">
<div class="flex flex-column pb-2"> <p class="pt-0.5 ml-4 text-foreground">Clock:</p>
<p class="pt-0.5 ml-4">Clock:</p>
<input <input
type="range" id="audio_nudge" type="range" id="audio_nudge"
name="audiorangeInput" name="audiorangeInput"
min="-200" max="200" min="-200" max="200"
value="0" value="0"
class="w-full ml-4" class="w-full ml-4 text-red"
oninput="nudgenumber.value=audio_nudge.value" oninput="nudgenumber.value=audio_nudge.value"
> >
<output <output
name="nudgenumber" name="nudgenumber"
id="nudgenumber" id="nudgenumber"
for="audiorangeInput" for="audiorangeInput"
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white" class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
>0</output> >0</output>
</div> </div>
<div class="flex flex-column"> <div class="flex flex-column">
<p class="pt-0.5 ml-4">Audio:</p> <p class="pt-0.5 ml-4 text-foreground">Audio:</p>
<input <input
type="range" id="dough_nudge" type="range" id="dough_nudge"
name="doughrangeInput" name="doughrangeInput"
min="0" max="100" min="0" max="100"
value="0" value="0"
class="w-full ml-4" class="w-full ml-4 text-foreground"
oninput="doughnumber.value=dough_nudge.value" oninput="doughnumber.value=dough_nudge.value"
> >
<output <output
name="doughnumber" name="doughnumber"
id="doughnumber" id="doughnumber"
for="doughrangeInput" for="doughrangeInput"
class="bg-gray-500 rounded-lg ml-2 mr-4 px-4 py-1 text-white" class="rounded-lg ml-2 mr-4 px-4 py-1 text-foreground"
>0</output> >0</output>
</div> </div>
</div> </div>
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4 pb-36 lg:pb-0"> <div class="flex space-x-6 border-t rounded-b mx-4 border-spacing-y-4 pb-36 lg:pb-0">
<button id="close-settings-button" data-modal-hide="defaultModal" type="button" class=" <button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="
hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4 hover:bg-background bg-background mt-4 mb-4 focus:ring-4
font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button> font-medium rounded-lg text-sm px-5 py-2.5 text-center text-selection_background">OK</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-row max-h-fit"> <div class="flex flex-row max-h-fit">
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. --> <!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
<aside id="sidebar" class=" <aside id="sidebar" class="
flex flex-col items-center w-14 flex flex-col items-center w-14
h-screen py-2 border-r h-screen py-2 border-r
rtl:border-l max-h-fit rtl:border-l max-h-fit
rtl:border-r-0 bg-neutral-900 rtl:border-r-0 bg-background
dark:border-neutral-700 border-none" border-neutral-700 border-none"
> >
<nav class="flex flex-col space-y-6"> <nav class="flex flex-col space-y-6">
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800"> <a title="Local Scripts (Ctrl + L)" id="local-button" class="side_button">
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18"> <svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
<path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/> <path d="M18 5H0v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5Zm-7.258-2L9.092.8a2.009 2.009 0 0 0-1.6-.8H2.049a2 2 0 0 0-2 2v1h10.693Z"/>
</svg> </svg>
</svg> </svg>
</a> </a>
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg hover:bg-gray-800"> <a title="Global Script (Ctrl + G)" id="global-button" class="side_button">
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16"> <svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
<path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/> <path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z"/>
<path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/> <path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z"/>
</svg> </svg>
</a> </a>
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800"> <a title="Initialisation Script (Ctrl + I)" id="init-button" class="side_button">
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14"> <svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1v12m0 0 4-4m-4 4L1 9"/>
</svg> </svg>
</a> </a>
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800"> <a title="Project notes (Ctrl + N)" id="note-button" class="side_button">
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/> <path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
</svg> </svg>
</a> </a>
<a title="Application Settings" id="settings-button" class="pl-2 p-1.5 text-white focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800"> <a title="Application Settings" id="settings-button" class="side_button">
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <svg class="w-8 h-8 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
@ -497,55 +634,54 @@
<!-- Tabs for local files --> <!-- Tabs for local files -->
<div class="min-w-screen flex grow flex-col"> <div class="min-w-screen flex grow flex-col">
<ul id="local-script-tabs" class=" flex text-xl font-medium text-center text-white bg-neutral-900 space-x-1 lg:space-x-8"> <ul id="local-script-tabs" class=" flex text-xl font-medium text-center neutral-900 space-x-1 lg:space-x-8">
<li class="pl-5"> <li class="pl-5">
<a title="Local Script 1 (F1)" id="tab-1" class="bg-orange-300 inline-block lg:px-4 px-2 py-1 text-white hover:bg-gray-800">1</a> <a title="Local Script 1 (F1)" id="tab-1" class="tab_panel">1</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 2 (F2)" id="tab-2" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">2</a> <a title="Local Script 2 (F2)" id="tab-2" class="tab_panel">2</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 3 (F3)" id="tab-3" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">3</a> <a title="Local Script 3 (F3)" id="tab-3" class="tab_panel">3</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 4 (F4)" id="tab-4" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">4</a> <a title="Local Script 4 (F4)" id="tab-4" class="tab_panel">4</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 5 (F5)" id="tab-5" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">5</a> <a title="Local Script 5 (F5)" id="tab-5" class="tab_panel">5</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 6 (F6)" id="tab-6" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">6</a> <a title="Local Script 6 (F6)" id="tab-6" class="tab_panel">6</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 7 (F7)" id="tab-7" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">7</a> <a title="Local Script 7 (F7)" id="tab-7" class="tab_panel">7</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 8 (F8)" id="tab-8" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">8</a> <a title="Local Script 8 (F8)" id="tab-8" class="tab_panel">8</a>
</li> </li>
<li class=""> <li class="">
<a title="Local Script 9 (F9)" id="tab-9" class="inline-block lg:px-4 px-2 py-1 hover:bg-gray-800">9</a> <a title="Local Script 9 (F9)" id="tab-9" class="tab_panel">9</a>
</li> </li>
</ul> </ul>
<!-- Here comes the editor itself --> <!-- Here comes the editor itself -->
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden"> <div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
<canvas id="hydra-bg" class="fullscreencanvas"></canvas> <canvas id="hydra-" class="fullscreencanvas"></canvas>
<canvas id="scope" class="fullscreencanvas"></canvas> <canvas id="scope" class="fullscreencanvas"></canvas>
<canvas id="feedback" class="fullscreencanvas"></canvas> <canvas id="feedback" class="fullscreencanvas"></canvas>
</div> </div>
<p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p> <p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
</div> </div>
</div> </div>
<template id="ui-known-universe-item-template"> <template id="ui-known-universe-item-template">
<!-- A known universe button in "opening" interface --> <!-- A known universe button in "opening" interface -->
<li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4"> <li class="py-2 px-4 flex justify-between text-brightwhite hover:bg-selection_background hover:text-selection_foreground">
<button class="universe-name load-universe" title="Load this universe">Universe Name</button> <button class="universe-name load-universe" title="Load this universe">Universe Name</button>
<button class="delete-universe" title="Delete this universe">🗑</button> <button class="delete-universe" title="Delete this universe">🗑</button>
</li> </li>
</template> </template>
</body> </body>
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p> <p id="timeviewer" class="rounded-lg px-2 py-2 font-bold white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
<p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute right-2 bottom-12">/////// Fill ///////</p> <p id="fillviewer" class="invisible rounded-lg px-2 py-2 font-bold white cursor-textpointer-events-none select-none text-black text-sm absolute right-2 bottom-12">/////// Fill ///////</p>
</html> </html>

Binary file not shown.

2
sw.js
View File

@ -1 +1 @@
if(!self.define){let s,e={};const l=(l,o)=>(l=new URL(l+".js",o).href,e[l]||new Promise((e=>{if("document"in self){const s=document.createElement("script");s.src=l,s.onload=e,document.head.appendChild(s)}else s=l,importScripts(l),e()})).then((()=>{let s=e[l];if(!s)throw new Error(`Module ${l} didnt register its module`);return s})));self.define=(o,n)=>{const i=s||("document"in self?document.currentScript.src:"")||location.href;if(e[i])return;let r={};const u=s=>l(s,i),a={module:{uri:i},exports:r,require:u};e[i]=Promise.all(o.map((s=>a[s]||u(s)))).then((s=>(n(...s),r)))}}define(["./workbox-0f370d1d"],(function(s){"use strict";self.skipWaiting(),s.clientsClaim(),s.precacheAndRoute([{url:"assets/apple-touch-icon-77f1cce1.png",revision:null},{url:"assets/ComicMono-742af5ad.woff",revision:null},{url:"assets/ComicMono-bed2c2b5.woff2",revision:null},{url:"assets/ComicMono-Bold-2350c6c1.woff",revision:null},{url:"assets/IBMPlexMono-Bold-3152ee89.woff2",revision:null},{url:"assets/IBMPlexMono-Bold-6bb3fd98.woff",revision:null},{url:"assets/IBMPlexMono-BoldItalic-5cd662b9.woff",revision:null},{url:"assets/IBMPlexMono-BoldItalic-6f4d360c.woff2",revision:null},{url:"assets/IBMPlexMono-Italic-30cb963d.woff2",revision:null},{url:"assets/IBMPlexMono-Italic-fc3301da.woff",revision:null},{url:"assets/IBMPlexMono-Regular-06ba2f2e.woff",revision:null},{url:"assets/IBMPlexMono-Regular-82ad22f5.woff2",revision:null},{url:"assets/index-7d89f6a0.js.gz",revision:null},{url:"assets/index-c8279334.css",revision:null},{url:"assets/JetBrainsMono-Bold-c503cc5e.woff2",revision:null},{url:"assets/JetBrainsMono-Regular-a9cb1cd8.woff2",revision:null},{url:"assets/jgs_vecto-e7fb4a88.woff2",revision:null},{url:"assets/jgs5-0e03e537.woff2",revision:null},{url:"assets/jgs5-9f26a38a.woff",revision:null},{url:"assets/jgs7-a69a9a5d.woff2",revision:null},{url:"assets/jgs7-d3f51478.woff",revision:null},{url:"assets/jgs9-0c41ef37.woff",revision:null},{url:"assets/jgs9-dc75d6ab.woff2",revision:null},{url:"assets/many_universes-d74e86dc.svg",revision:null},{url:"assets/pulses-30df7a48.svg",revision:null},{url:"assets/safari-pinned-tab-61a1253d.svg",revision:null},{url:"assets/Steps-Mono-aff9e933.woff2",revision:null},{url:"assets/Steps-Mono-Thin-b82a0d7e.woff2",revision:null},{url:"assets/times-1426387b.svg",revision:null},{url:"assets/topos_arch-db355d32.svg",revision:null},{url:"assets/topos_frog-e8ab87d1.svg",revision:null},{url:"assets/workbox-window.prod.es5-a7b12eab.js",revision:null},{url:"assets/workbox-window.prod.es5-a7b12eab.js.gz",revision:null},{url:"index.html",revision:"ee1e91096ef6aa3b4ed4e003f5e71627"},{url:"manifest.webmanifest",revision:"57ee5fb60f9f17e5897fa9d47daea92a"}],{}),s.cleanupOutdatedCaches(),s.registerRoute(new s.NavigationRoute(s.createHandlerBoundToURL("index.html"))),s.registerRoute((({url:s})=>[/^https:\/\/raw\.githubusercontent\.com\/.*/i,/^https:\/\/shabda\.ndre\.gr\/.*/i].some((e=>e.test(s)))),new s.CacheFirst({cacheName:"external-samples",plugins:[new s.ExpirationPlugin({maxEntries:5e3,maxAgeSeconds:2592e3}),new s.CacheableResponsePlugin({statuses:[0,200]})]}),"GET")})); if(!self.define){let s,e={};const l=(l,o)=>(l=new URL(l+".js",o).href,e[l]||new Promise((e=>{if("document"in self){const s=document.createElement("script");s.src=l,s.onload=e,document.head.appendChild(s)}else s=l,importScripts(l),e()})).then((()=>{let s=e[l];if(!s)throw new Error(`Module ${l} didnt register its module`);return s})));self.define=(o,n)=>{const i=s||("document"in self?document.currentScript.src:"")||location.href;if(e[i])return;let r={};const u=s=>l(s,i),a={module:{uri:i},exports:r,require:u};e[i]=Promise.all(o.map((s=>a[s]||u(s)))).then((s=>(n(...s),r)))}}define(["./workbox-80358384"],(function(s){"use strict";self.skipWaiting(),s.clientsClaim(),s.precacheAndRoute([{url:"assets/apple-touch-icon-77f1cce1.png",revision:null},{url:"assets/ComicMono-742af5ad.woff",revision:null},{url:"assets/ComicMono-bed2c2b5.woff2",revision:null},{url:"assets/ComicMono-Bold-2350c6c1.woff",revision:null},{url:"assets/IBMPlexMono-Bold-3152ee89.woff2",revision:null},{url:"assets/IBMPlexMono-Bold-6bb3fd98.woff",revision:null},{url:"assets/IBMPlexMono-BoldItalic-5cd662b9.woff",revision:null},{url:"assets/IBMPlexMono-BoldItalic-6f4d360c.woff2",revision:null},{url:"assets/IBMPlexMono-Italic-30cb963d.woff2",revision:null},{url:"assets/IBMPlexMono-Italic-fc3301da.woff",revision:null},{url:"assets/IBMPlexMono-Regular-06ba2f2e.woff",revision:null},{url:"assets/IBMPlexMono-Regular-82ad22f5.woff2",revision:null},{url:"assets/index-9c86d997.css",revision:null},{url:"assets/index-ad63a4cb.js.gz",revision:null},{url:"assets/JetBrainsMono-Bold-c503cc5e.woff2",revision:null},{url:"assets/JetBrainsMono-Regular-a9cb1cd8.woff2",revision:null},{url:"assets/jgs_vecto-e7fb4a88.woff2",revision:null},{url:"assets/jgs5-0e03e537.woff2",revision:null},{url:"assets/jgs5-9f26a38a.woff",revision:null},{url:"assets/jgs7-a69a9a5d.woff2",revision:null},{url:"assets/jgs7-d3f51478.woff",revision:null},{url:"assets/jgs9-0c41ef37.woff",revision:null},{url:"assets/jgs9-dc75d6ab.woff2",revision:null},{url:"assets/many_universes-d74e86dc.svg",revision:null},{url:"assets/pulses-30df7a48.svg",revision:null},{url:"assets/safari-pinned-tab-61a1253d.svg",revision:null},{url:"assets/Steps-Mono-aff9e933.woff2",revision:null},{url:"assets/Steps-Mono-Thin-b82a0d7e.woff2",revision:null},{url:"assets/times-1426387b.svg",revision:null},{url:"assets/topos_arch-db355d32.svg",revision:null},{url:"assets/topos_frog-e8ab87d1.svg",revision:null},{url:"assets/workbox-window.prod.es5-a7b12eab.js",revision:null},{url:"assets/workbox-window.prod.es5-a7b12eab.js.gz",revision:null},{url:"index.html",revision:"54e3db057e0d4d698502bced55283b2a"},{url:"manifest.webmanifest",revision:"57ee5fb60f9f17e5897fa9d47daea92a"}],{}),s.registerRoute(new s.NavigationRoute(s.createHandlerBoundToURL("index.html"))),s.registerRoute((({url:s})=>[/^https:\/\/raw\.githubusercontent\.com\/.*/i,/^https:\/\/shabda\.ndre\.gr\/.*/i].some((e=>e.test(s)))),new s.CacheFirst({cacheName:"external-samples",plugins:[new s.ExpirationPlugin({maxEntries:5e3,maxAgeSeconds:2592e3}),new s.CacheableResponsePlugin({statuses:[0,200]})]}),"GET")}));

File diff suppressed because one or more lines are too long