<script lang="ts">
  let image_url: string = "";
  let quote: string = "挂科比不挂科南";
  let author: string = "宿舍";
</script>

<header>
  <h1 class="text-2xl font-bold">Makequote</h1>
  <p>一个生成奇奇怪怪的名人名言句子的服务</p>
  <p>
    <label for="image">图片：</label>
    <input type="text" id="image" name="image" bind:value={image_url} />
  </p>
  <p>
    <label for="quote">名言：</label>
    <input type="text" id="quote" name="quote" bind:value={quote} />
  </p>
  <p>
    <label for="author">名人：</label>
    <input type="text" id="author" name="author" bind:value={author} />
  </p>
</header>

<div
  id="main"
  class="w-240 h-135 relative bg-green-400 m-20 shadow text-white"
  style="font-family: 'Noto Sans CJK SC';"
>
  {#if image_url}
    <div
      class="absolute left-0 top-0 h-full w-130 bg-center bg-cover grayscale"
      style:background-image={`url(${image_url})`}
    ></div>
  {/if}
  <div
    class="absolute right-0 top-0 h-full w-180"
    style="background: linear-gradient(0.25turn, #00000000, #000000 38.89%)"
  >
    <div
      class="box-border ml-70 w-110 h-full flex justify-center items-center px-10"
    >
      <div class="w-full">
        <h1 class="text-center text-4xl font-bold my-5 wrap-break-word">
          {quote}
        </h1>
        <p class="text-right">– {author}</p>
      </div>
    </div>
  </div>
</div>
