BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

colors are detected but not applied

Browse Source
This commit is contained in:
Raphaël Forment
2023-12-15 15:16:05 +01:00
parent 2e548b83f0
commit eb5e1fb384
4 changed files with 209 additions and 799 deletions
Download Patch File Download Diff File Expand all files Collapse all files

263
index.html
View File

@ -27,7 +27,7 @@
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;
} }
@ -65,59 +65,58 @@
} }
</style> </style>
<body id="all" class="z-0 bg-color2 overflow-y-hidden"> <body id="all" class="z-0 overflow-y-hidden bg-color12">
<h1 class="text-2xl text-color1 bg-color3">DADADADADADADAADADADADA</h1>
<!-- 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 neutral-900">
<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">
<a class="flex title-font font-medium items-center text-black mb-0"> <a class="flex title-font font-medium items-center text-black mb-0">
<img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 bg-white rounded-full" alt="Topos Frog Logo" /> <img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 white rounded-full" 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 placeholder-white" 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"> <a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:gray-800 px-2 py-2 rounded-lg">
<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"> <a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover: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"> <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="black" 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"> <a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover: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"> <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="flex flex-row mr-2 hover:text-gray-900 hover: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 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="flex flex-row mr-2 hover:text-gray-900 hover: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 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="flex flex-row hover:text-gray-900 hover: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"> <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>
@ -126,18 +125,18 @@
</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-lineHighlight text-white"> <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 lineHighlight ">
<nav class="text-xl sm:text-sm overflow-y-scroll mb-24"> <nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
<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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Coding</p>
</div> </div>
</details> </details>
<details class="space-y-2" open> <details class="space-y-2" open>
@ -146,118 +145,118 @@
<!-- 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 ">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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 ">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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 ">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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">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="ml-2 lg:text-xl pb-1 pt-1 ">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="ml-8 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Syncing</p>
</div> </div>
</details> </details>
<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_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Global Variables</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_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</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_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Probabilities</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_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Chaining</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_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">Functions</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> <p rel="noopener noreferrer" id="docs_reference" class="pl-2 pr-2 lg:text-xl text-sm hover: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 text-orange-300">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg">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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg" 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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg" 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="pl-2 pr-2 lg:text-xl text-sm hover:neutral-800 py-1 my-1 rounded-lg" 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 gray-900 opacity-50 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 white">
<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">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 text-gray-900 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 text-gray-500 text-gray-400" 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="text-black absolute right-2.5 bottom-2.5 white hover:white 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 border-gray-200 rounded-b dark:border-gray-600 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 hover:neutral-700 neutral-800 focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Close</button>
</div> </div>
</div> </div>
@ -272,23 +271,23 @@
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">
<h1 class="lg:mt-12 mt-6 font-semibold rounded-lg <h1 class="lg:mt-12 mt-6 font-semibold rounded-lg
bg-gray-800 justify-center lg:text-center lg:pl-0 pl-8 text-white mx-4 gray-800 justify-center lg:text-center lg:pl-0 pl-8 mx-4
text-sm lg:text-xl border-b border-gray-300 py-4">Topos Application Settings</h1> 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="gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
<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">Font 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">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="gray-50 border border-gray-300 text-gray-900
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:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:gray-700
dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"> dark:border-gray-600 dark:placeholder-gray-400 dark: 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">Font:</label>
<select id="font-family" class="bg-gray-50 ml-4 border border-gray-300 mb-2 <select id="font-family" class="gray-50 ml-4 border border-gray-300 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-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:">
<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>
@ -302,49 +301,49 @@
</select> </select>
</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="gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
<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">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-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-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-600">
<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-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-600">
<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-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-600">
<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-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-600">
<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-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-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-dark">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="gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
<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">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="gray-800 hover:gray-900 font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
<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>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="gray-800 hover:gray-900 font-bold lg:py-4 lg:px-2 px-1 py-2 rounded-lg inline-flex items-center mx-4">
<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>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="red-800 hover:red-900 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>
@ -355,43 +354,43 @@
</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="gray-200 rounded-lg flex lg:flex-row flex-col mx-4 my-4 pt-4">
<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">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-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
<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 text-sm font-medium text-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2">
<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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-600">
<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-dark">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 text-sm font-medium text-dark">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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 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 gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:gray-700 dark:border-gray-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-dark">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="gray-200 rounded-lg flex flex-col mx-4 my-4 pt-4 pb-2">
<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">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">Clock:</p> <p class="pt-0.5 ml-4">Clock:</p>
@ -407,7 +406,7 @@
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="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 "
>0</output> >0</output>
</div> </div>
@ -426,7 +425,7 @@
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="gray-500 rounded-lg ml-2 mr-4 px-4 py-1 "
>0</output> >0</output>
</div> </div>
@ -434,7 +433,7 @@
<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 border-gray-200 rounded-b dark:border-gray-600 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:gray-700 gray-800 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">OK</button>
</div> </div>
</div> </div>
@ -448,38 +447,38 @@
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 neutral-900
dark:border-neutral-700 border-none" dark: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="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg hover:gray-800">
<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="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg hover:gray-800">
<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="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg hover:gray-800">
<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="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg hover:gray-800">
<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="pl-2 p-1.5 focus:outline-nones transition-colors duration-200 rounded-lg hover:gray-800">
<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" />
@ -493,55 +492,55 @@
<!-- 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="orange-300 inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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="inline-block lg:px-4 px-2 py-1 hover:gray-800">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 text-red-400 w-screen neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
</div> </div>
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
<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="hover:fill-black hover:white py-2 hover:text-black flex justify-between px-4">
<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>

654
src/style.css
View File

@ -16,7 +16,7 @@
/* 2 */ /* 2 */
border-style: solid; border-style: solid;
/* 2 */ /* 2 */
border-color: #e5e7eb; border-color: currentColor;
/* 2 */ /* 2 */
} }
@ -435,28 +435,27 @@ video {
} }
:root { :root {
--color0: "#252525", --color0: "#252525";
--color1: "#832e31", --color1: "#832e31";
--color2: "#a63c40", --color2: "#a63c40";
--color3: "#d3494e", --color3: "#d3494e";
--color4: "#fc595f", --color4: "#fc595f";
--color5: "#df9395", --color5: "#df9395";
--color6: "#ba8586", --color6: "#ba8586";
--color7: "#f5f5f5", --color7: "#f5f5f5";
--color8: "#5d6f71", --color8: "#5d6f71";
--color9: "#832e31", --color9: "#832e31";
--color10: "#a63c40", --color10: "#a63c40";
--color11: "#d2494e", --color11: "#d2494e";
--color12: "#fc595f", --color12: "#fc595f";
--color13: "#df9395", --color13: "#df9395";
--color14: "#ba8586", --color14: "#ba8586";
--color15: "#f5f5f5", --color15: "#f5f5f5";
--background: "#252525", --background: "#252525";
--selection_foreground: "#f5f5f5", --selection_foreground: "#f5f5f5";
--cursor: "#ac4142", --cursor: "#ac4142";
--foreground: "#d0d0d0", --foreground: "#d0d0d0";
--selection_background: "#832e31", --selection_background: "#832e31";
} }
*, ::before, ::after { *, ::before, ::after {
@ -559,217 +558,8 @@ video {
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
} }
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #2E3440;
}
.hljs,
.hljs-subst {
color: #D8DEE9;
}
.hljs-selector-tag {
color: #81A1C1;
}
.hljs-selector-id {
color: #8FBCBB;
font-weight: bold;
}
.hljs-selector-class {
color: #8FBCBB;
}
.hljs-selector-attr {
color: #8FBCBB;
}
.hljs-selector-pseudo {
color: #88C0D0;
}
.hljs-addition {
background-color: rgba(163, 190, 140, 0.5);
}
.hljs-deletion {
background-color: rgba(191, 97, 106, 0.5);
}
.hljs-built_in,
.hljs-type {
color: #8FBCBB;
}
.hljs-class {
color: #8FBCBB;
}
.hljs-function {
color: #88C0D0;
}
.hljs-function > .hljs-title {
color: #88C0D0;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol {
color: #81A1C1;
}
.hljs-number {
color: #B48EAD;
}
.hljs-regexp {
color: #EBCB8B;
}
.hljs-string {
color: #A3BE8C;
}
.hljs-title {
color: #8FBCBB;
}
.hljs-params {
color: #D8DEE9;
}
.hljs-bullet {
color: #81A1C1;
}
.hljs-code {
color: #8FBCBB;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-formula {
color: #8FBCBB;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link:hover {
text-decoration: underline;
}
.hljs-quote {
color: #4C566A;
}
.hljs-comment: #FEFEFE; .hljs-comment: #FEFEFE;
.hljs-doctag {
color: #8FBCBB;
}
.hljs-meta,
.hljs-meta-keyword {
color: #5E81AC;
}
.hljs-meta-string {
color: #A3BE8C;
}
.hljs-attr {
color: #8FBCBB;
}
.hljs-attribute {
color: #D8DEE9;
}
.hljs-builtin-name {
color: #81A1C1;
}
.hljs-name {
color: #81A1C1;
}
.hljs-section {
color: #88C0D0;
}
.hljs-tag {
color: #81A1C1;
}
.hljs-variable {
color: #D8DEE9;
}
.hljs-template-variable {
color: #D8DEE9;
}
.hljs-template-tag {
color: #5E81AC;
}
.abnf .hljs-attribute {
color: #88C0D0;
}
.abnf .hljs-symbol {
color: #EBCB8B;
}
.apache .hljs-attribute {
color: #88C0D0;
}
.apache .hljs-section {
color: #81A1C1;
}
.arduino .hljs-built_in {
color: #88C0D0;
}
.aspectj .hljs-meta {
color: #D08770;
}
.aspectj > .hljs-title {
color: #88C0D0;
}
.bnf .hljs-attribute {
color: #8FBCBB;
}
.clojure .hljs-name {
color: #88C0D0;
}
.clojure .hljs-symbol {
color: #EBCB8B;
}
.coq .hljs-built_in {
color: #88C0D0;
}
.cpp .hljs-meta-string {
color: #8FBCBB;
}
.css .hljs-built_in { .css .hljs-built_in {
color: #88C0D0; color: #88C0D0;
} }
@ -778,83 +568,11 @@ video {
color: #D08770; color: #D08770;
} }
.diff .hljs-meta {
color: #8FBCBB;
}
.ebnf .hljs-attribute {
color: #8FBCBB;
}
.glsl .hljs-built_in {
color: #88C0D0;
}
.groovy .hljs-meta:not(:first-child) {
color: #D08770;
}
.haxe .hljs-meta {
color: #D08770;
}
.java .hljs-meta {
color: #D08770;
}
.ldif .hljs-attribute {
color: #8FBCBB;
}
.lisp .hljs-name {
color: #88C0D0;
}
.lua .hljs-built_in {
color: #88C0D0;
}
.moonscript .hljs-built_in {
color: #88C0D0;
}
.nginx .hljs-attribute {
color: #88C0D0;
}
.nginx .hljs-section {
color: #5E81AC;
}
.pf .hljs-built_in {
color: #88C0D0;
}
.processing .hljs-built_in {
color: #88C0D0;
}
.scss .hljs-keyword {
color: #81A1C1;
}
.stylus .hljs-keyword {
color: #81A1C1;
}
.swift .hljs-meta {
color: #D08770;
}
.vim .hljs-built_in { .vim .hljs-built_in {
color: #88C0D0; color: #88C0D0;
font-style: italic; font-style: italic;
} }
.yaml .hljs-meta {
color: #D08770;
}
.sr-only { .sr-only {
position: absolute; position: absolute;
width: 1px; width: 1px;
@ -1423,122 +1141,25 @@ video {
border-style: none; border-style: none;
} }
.border-gray-200 { .bg-color10 {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-neutral-500 {
--tw-border-opacity: 1;
border-color: rgb(115 115 115 / var(--tw-border-opacity));
}
.border-neutral-800 {
--tw-border-opacity: 1;
border-color: rgb(38 38 38 / var(--tw-border-opacity));
}
.bg-emerald-600 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(5 150 105 / var(--tw-bg-opacity)); background-color: rgb(var(--color10) / var(--tw-bg-opacity));
} }
.bg-gray-100 { .bg-color14 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity)); background-color: rgb(var(--color14) / var(--tw-bg-opacity));
} }
.bg-gray-200 { .bg-color12 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity)); background-color: rgb(var(--color12) / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-neutral-500 {
--tw-bg-opacity: 1;
background-color: rgb(115 115 115 / var(--tw-bg-opacity));
}
.bg-neutral-600 {
--tw-bg-opacity: 1;
background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}
.bg-neutral-700 {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}
.bg-neutral-800 {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.bg-neutral-900 {
--tw-bg-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}
.bg-orange-300 {
--tw-bg-opacity: 1;
background-color: rgb(253 186 116 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-red-800 {
--tw-bg-opacity: 1;
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}
.bg-transparent {
background-color: transparent;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.bg-opacity-50 { .bg-opacity-50 {
--tw-bg-opacity: 0.5; --tw-bg-opacity: 0.5;
} }
.fill-current {
fill: currentColor;
}
.fill-orange-300 {
fill: #fdba74;
}
.p-1 { .p-1 {
padding: 0.25rem; padding: 0.25rem;
} }
@ -1758,64 +1379,9 @@ video {
line-height: 1.5; line-height: 1.5;
} }
.text-black { .text-color12 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity)); color: rgb(var(--color12) / var(--tw-text-opacity));
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-neutral-200 {
--tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity));
}
.text-orange-300 {
--tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.text-rose-600 {
--tw-text-opacity: 1;
color: rgb(225 29 72 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.underline { .underline {
@ -1830,14 +1396,8 @@ video {
text-underline-offset: 4px; text-underline-offset: 4px;
} }
.placeholder-white::-moz-placeholder { .opacity-50 {
--tw-placeholder-opacity: 1; opacity: 0.5;
color: rgb(255 255 255 / var(--tw-placeholder-opacity));
}
.placeholder-white::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(255 255 255 / var(--tw-placeholder-opacity));
} }
.outline { .outline {
@ -1875,80 +1435,6 @@ video {
transition-duration: 200ms; transition-duration: 200ms;
} }
.hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.hover\:bg-gray-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.hover\:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}
.hover\:bg-neutral-500:hover {
--tw-bg-opacity: 1;
background-color: rgb(115 115 115 / var(--tw-bg-opacity));
}
.hover\:bg-neutral-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(82 82 82 / var(--tw-bg-opacity));
}
.hover\:bg-neutral-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}
.hover\:bg-neutral-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.hover\:bg-neutral-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}
.hover\:bg-red-900:hover {
--tw-bg-opacity: 1;
background-color: rgb(127 29 29 / var(--tw-bg-opacity));
}
.hover\:bg-white:hover {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:fill-black:hover {
fill: #000;
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.focus\:border-blue-500:focus {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.focus\:outline-none:focus { .focus\:outline-none:focus {
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: 2px; outline-offset: 2px;
@ -1966,11 +1452,6 @@ video {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
} }
.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
:is([dir="rtl"] .rtl\:border-l) { :is([dir="rtl"] .rtl\:border-l) {
border-left-width: 1px; border-left-width: 1px;
} }
@ -1979,77 +1460,6 @@ video {
border-right-width: 0px; border-right-width: 0px;
} }
@media (prefers-color-scheme: dark) {
.dark\:border-gray-500 {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.dark\:border-gray-600 {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.dark\:border-neutral-700 {
--tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity));
}
.dark\:bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark\:text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark\:text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:placeholder-gray-400::-moz-placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.dark\:placeholder-gray-400::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}
.dark\:ring-offset-gray-800 {
--tw-ring-offset-color: #1f2937;
}
.dark\:focus\:border-blue-500:focus {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.dark\:focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-blue-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
}
}
@media (min-width: 640px) { @media (min-width: 640px) {
.sm\:my-1 { .sm\:my-1 {
margin-top: 0.25rem; margin-top: 0.25rem;

42
src/tailwind.css
View File

@ -4,26 +4,26 @@
@layer base { @layer base {
:root { :root {
--color0: "#252525", --color0: "#252525";
--color1: "#832e31", --color1: "#832e31";
--color2: "#a63c40", --color2: "#a63c40";
--color3: "#d3494e", --color3: "#d3494e";
--color4: "#fc595f", --color4: "#fc595f";
--color5: "#df9395", --color5: "#df9395";
--color6: "#ba8586", --color6: "#ba8586";
--color7: "#f5f5f5", --color7: "#f5f5f5";
--color8: "#5d6f71", --color8: "#5d6f71";
--color9: "#832e31", --color9: "#832e31";
--color10: "#a63c40", --color10: "#a63c40";
--color11: "#d2494e", --color11: "#d2494e";
--color12: "#fc595f", --color12: "#fc595f";
--color13: "#df9395", --color13: "#df9395";
--color14: "#ba8586", --color14: "#ba8586";
--color15: "#f5f5f5", --color15: "#f5f5f5";
--background: "#252525", --background: "#252525";
--selection_foreground: "#f5f5f5", --selection_foreground: "#f5f5f5";
--cursor: "#ac4142", --cursor: "#ac4142";
--foreground: "#d0d0d0", --foreground: "#d0d0d0";
--selection_background: "#832e31", --selection_background: "#832e31";
} }
} }

49
tailwind.config.js
View File

@ -1,36 +1,34 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
export default { export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], content: ["./src/**/*.html", "./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
safelist: [ safelist: [
{ {
pattern: /hljs+/, pattern: /hljs+/,
}, },
], ],
theme: { theme: {
extend: {
colors: { colors: {
color0: "var(--color0)", color0: "rgb(var(--color0) / <alpha-value>)",
color1: "var(--color1)", color1: "rgb(var(--color1) / <alpha-value>)",
color2: "var(--color2)", color2: "rgb(var(--color2) / <alpha-value>)",
color3: "var(--color3)", color3: "rgb(var(--color3) / <alpha-value>)",
color4: "var(--color4)", color4: "rgb(var(--color4) / <alpha-value>)",
color5: "var(--color5)", color5: "rgb(var(--color5) / <alpha-value>)",
color6: "var(--color6)", color6: "rgb(var(--color6) / <alpha-value>)",
color7: "var(--color7)", color7: "rgb(var(--color7) / <alpha-value>)",
color8: "var(--color8)", color8: "rgb(var(--color8) / <alpha-value>)",
color9: "var(--color9)", color9: "rgb(var(--color9) / <alpha-value>)",
color10: "var(--color10)", color10: "rgb(var(--color10) / <alpha-value>)",
color11: "var(--color11)", color11: "rgb(var(--color11) / <alpha-value>)",
color12: "var(--color12)", color12: "rgb(var(--color12) / <alpha-value>)",
color13: "var(--color13)", color13: "rgb(var(--color13) / <alpha-value>)",
color14: "var(--color14)", color14: "rgb(var(--color14) / <alpha-value>)",
color15: "var(--color15)", color15: "rgb(var(--color15) / <alpha-value>)",
background: "var(--background)", background: "rgb(var(--background) / <alpha-value>)",
selection_foreground: "var(--selection_foreground)", selection_foreground: "rgb(var(--selection_foreground) / <alpha-value>)",
cursor: "var(--cursor)", cursor: "rgb(var(--cursor) / <alpha-value>)",
foreground: "var(--foreground)", foreground: "rgb(var(--foreground) / <alpha-value>)",
selection_background: "var(--selection_background)", selection_background: "rgb(var(--selection_background) / <alpha-value>)",
},
}, },
extend: {}, extend: {},
hljs: { hljs: {
@ -43,4 +41,7 @@ export default {
}, },
}, },
plugins: [require("tailwind-highlightjs")], plugins: [require("tailwind-highlightjs")],
safelist: {
pattern: /(bg|text|border)-(transparent|color0|color1|color2|color3|color4|color5|color6|color7|color8|color9|color10|color11|color12|color13|color14|color15|background|selection_background|cursor|foreground|selection_background)/,
}
}; };