<template lang="pug">
div.text-white.w-full.flex.bg-dark-900
  div.w-xs.border-r-1.border-gray-500.border-opacity-10.pt-24.px-4.flex.flex-col.gap-4
    div
      p.font-bold 迅速に開発できる
      p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。
      textarea.mt-4.rounded-lg.h-32.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
    div
      div.flex.items-center.justify-between
        span.font-bold 从图像中删除特征
        label.switch
          input(type="checkbox" checked)
          div.slider.round
      p.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景
    div
      p.font-bold 筛选
      p.text-gray-400 尝试可以应用于您的图像的不同风格样式
      input.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
    div
      p.font-bold 通过图像生成图像
      p.text-gray-400 上传或绘制图像以用作灵感
      input.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none")
      div.overflow-hidden.flex.gap-2.items-center
        img.relative.right-6.w-4(:src="IconEdit" style="filter: drop-shadow(#ffffff 24px 0);")
        span 画点什么
    div
      button.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none") 开始绘制
  div.flex-1
    span Hello World
  div.w-xs.border-l-1.border-gray-500.border-opacity-10.pt-24.px-4 end
</template>

<script setup>
import IconEdit from 'assets/icon/edit-2.svg'
</script>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
