RenaiApp/src/renderer/App.svelte

<script>
  import Bttn from 'atoms/Bttn.svelte';
  import Divide from 'molecules/Divide.svelte';
  import api from 'services/api';

  let form = {
    name: '',
    password: '',
  };

  function handleClick() {
    api.sendCredentials(form);
  }
</script>

<style>
  :root {
    --color-white: #fff;
    --color-black: #000;

    --color-background: #242424;
    --color-foreground: #3a3a3a;
    --color-foreground-light: #696969;
    --color-accent: #454585;
    --color-accent-light: #6969ac;

    --color-text: var(--color-white);

    font-family: sans-serif;
  }

  :global(*) {
    box-sizing: border-box;
    overflow: hidden;
  }

  :global(html) {
    width: 100vw;
    height: 100vh;
  }

  :global(body) {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color: var(--color-text);
    background-color: var(--color-background);
  }

  main {
    width: 100%;
    height: 100%;
  }
</style>

<main>
  <Divide>
    <div slot="1">
      <h1>Login</h1>
      <form>
        <label>
          <span>Username/Email</span>
          <input bind:value="{form.name}" />
        </label>
        <label>
          <span>Password</span>
          <input bind:value="{form.password}" type="password" />
        </label>
        <Bttn on:click="{handleClick}">submit</Bttn>
      </form>
    </div>
    <div slot="2">
      <Divide mode="v">
        <div slot="1">
          <Divide></Divide>
        </div>
        <div slot="2">
          <Divide></Divide>
        </div>
      </Divide>
    </div>
  </Divide>
</main>