source/ui/src/routes/index.svelte

<script lang="ts">
import StyleOptions from '$lib/StyleOptions.svelte';
import DensityOptions from '$lib/DensityOptions.svelte';
import TemperatureOptions from '$lib/TemperatureOptions.svelte';
import ComposeButton from '$lib/ComposeButton.svelte';
import Playback from '$lib/Playback.svelte';
import NoteVisualisation from '$lib/NoteVisualisation.svelte';
import NoteTokens from '$lib/NoteTokens.svelte';
</script>

<main>
  <h1>Composer</h1>
  <p>A hundred thousand songs used to train. One AI model. Infinite compositions.</p>
  <section id="options">
    <StyleOptions />
    <DensityOptions />
    <TemperatureOptions />
  </section>
  <ComposeButton />
  <Playback />
  <NoteVisualisation />
  <NoteTokens />
</main>

<style>
main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
}

h1 {
  font-size: 1.5rem;
  border-left: 0.25ch solid hsl(0 0% 97%);
  padding-left: 0.5ch;
}

p {
  font-size: 2.25rem;
}

#options {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 600px) {
  main {
    max-width: 60rem;
  }
}
@media (min-width: 900px) {
  #options {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
</style>