Keyboard shortcuts
This commit is contained in:
19
index.html
19
index.html
@ -30,7 +30,7 @@
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header class="hidden xl:block text-white bg-black">
|
||||
<header class="py-2 hidden xl:block text-white bg-neutral-900">
|
||||
<div 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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-black p-2 bg-white rounded-full" viewBox="0 0 24 24">
|
||||
@ -64,7 +64,7 @@
|
||||
|
||||
<div id="app">
|
||||
|
||||
<div id="modal-buffers" class="invisible bg-black bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="modal-buffers" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="px-16 py-14 rounded-md text-center">
|
||||
<div id="disclaimer" class="pb-4">
|
||||
<form>
|
||||
@ -75,7 +75,7 @@
|
||||
<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>
|
||||
</div>
|
||||
<input minlength="2" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 outline-0 rounded-lg bg-black dark:bg-black dark:text-white" placeholder="Buffer..." required>
|
||||
<input minlength="2" type="text" id="buffer-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 outline-0 rounded-lg bg-neutral-900 dark:bg-neutral-900 dark:text-white" placeholder="Buffer..." required>
|
||||
<button disabled 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>
|
||||
</div>
|
||||
</form>
|
||||
@ -84,34 +84,35 @@
|
||||
</div>
|
||||
|
||||
<div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
|
||||
<div id="modal" class="bg-black bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
|
||||
<div id="start-button" class="bg-white px-16 py-14 rounded-md text-center">
|
||||
<h1 class="text-xl mb-4 font-bold text-black">Topos Prototype</h1>
|
||||
<div id="disclaimer" class="pb-4">
|
||||
|
||||
<p>This is Topos, an experimental live coding platform.</p>
|
||||
<p>Switch to the <b>Help</b> (<b>Ctrl+b</b>) universe for a tutorial!</p>
|
||||
<p>Have fun, press <b>Enter/Space</b> to get started!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<aside class="flex flex-col items-center w-14 h-screen py-2 overflow-y-auto bg-white border-r rtl:border-l rtl:border-r-0 dark:bg-black dark:border-gray-700">
|
||||
<aside class="flex flex-col items-center w-14 h-screen py-2 overflow-y-auto bg-white border-r rtl:border-l rtl:border-r-0 dark:bg-neutral-900 dark:border-gray-700">
|
||||
<nav class="flex flex-col space-y-6">
|
||||
<a id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
|
||||
<svg class="w-8 h-8 text-orange-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<svg class="w-8 h-8 text-orange-300" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-11a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1Zm0 12a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1ZM4.343 5.757a1 1 0 0 0 1.414-1.414L4.343 2.929a1 1 0 0 0-1.414 1.414l1.414 1.414Zm11.314 8.486a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM4 10a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1Zm15-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2ZM4.343 14.243l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414ZM14.95 6.05a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 .707 1.707Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a id="global-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M17.8 13.75a1 1 0 0 0-.859-.5A7.488 7.488 0 0 1 10.52 2a1 1 0 0 0 0-.969A1.035 1.035 0 0 0 9.687.5h-.113a9.5 9.5 0 1 0 8.222 14.247 1 1 0 0 0 .004-.997Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a id="init-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:hover:bg-gray-800 hover:bg-gray-100">
|
||||
<svg class="w-8 h-8 text-white " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20">
|
||||
<svg class="w-8 h-8 text-white " fill="none" viewBox="0 0 21 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.487 1.746c0 4.192 3.592 1.66 4.592 5.754 0 .828 1 1.5 2 1.5s2-.672 2-1.5a1.5 1.5 0 0 1 1.5-1.5h1.5m-16.02.471c4.02 2.248 1.776 4.216 4.878 5.645C10.18 13.61 9 19 9 19m9.366-6h-2.287a3 3 0 0 0-3 3v2m6-8a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
@ -143,7 +144,7 @@
|
||||
</a>
|
||||
</aside>
|
||||
<div class="min-w-screen flex grow flex-col">
|
||||
<ul id="local-script-tabs" class="flex text-sm font-medium text-center text-white dark:text-white bg-black space-x-2 lg:space-x-8">
|
||||
<ul id="local-script-tabs" class="flex text-sm font-medium text-center text-white dark:text-white bg-neutral-900 space-x-2 lg:space-x-8">
|
||||
<li class="pl-5">
|
||||
<a id="tab-1" class="bg-orange-300 inline-block px-4 py-1 text-white hover:bg-gray-800">1</a>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user