---
import { iPhoneWindow as ApplePhoneWindow } from '@coffic/cosy-ui/vue';
---

<div class="cosy:p-4">
  <ApplePhoneWindow height="md" client:idle>
    <div class="cosy:h-full cosy:w-full cosy:pt-12">
      <h1 class="cosy:text-center cosy:text-2xl">Hello</h1>
    </div>
  </ApplePhoneWindow>
</div>

---
import { iPhoneWindow as ApplePhoneWindow } from '@coffic/cosy-ui/vue';
---

<div class="cosy:p-4">
  <ApplePhoneWindow height="lg" client:idle>
    <div class="cosy:h-full cosy:w-full cosy:pt-12">
      <h1 class="cosy:text-center cosy:text-2xl">Hello</h1>
    </div>
  </ApplePhoneWindow>
</div>

---
import { iPhoneWindow as ApplePhoneWindow } from '@coffic/cosy-ui/vue';
---

<div class="cosy:p-4">
  <ApplePhoneWindow height="xl" client:idle>
    <div class="cosy:h-full cosy:w-full cosy:pt-12">
      <h1 class="cosy:text-center cosy:text-2xl">Hello</h1>
    </div>
  </ApplePhoneWindow>
</div>

---
import { iPhoneWindow as ApplePhoneWindow } from '@coffic/cosy-ui/vue';
---

<div class="cosy:p-4">
  <ApplePhoneWindow height="3xl" client:idle>
    <div
      style="
      margin-top: 15%;
      background-color: rgba(0, 0, 255, 0);
      height: 100%;
      width: 100%;
      overflow-y: auto;
      ">
      <div class="cosy:px-4 cosy:pb-4">
        <h1 class="cosy:text-center cosy:text-2xl cosy:mb-6">长内容测试</h1>

        <div class="cosy:space-y-4">
          <p class="cosy:text-sm cosy:text-gray-600">
            这是一个用于测试 ApplePhoneWindow
            组件滚动功能的示例。当内容超出容器高度时，应该会出现滚动条。
          </p>

          <div class="cosy:bg-gray-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第一段内容</h3>
            <p class="cosy:text-sm">
              这是第一段测试内容，用来填充空间。Lorem ipsum dolor sit amet,
              consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
              labore et dolore magna aliqua.
            </p>
          </div>

          <div class="cosy:bg-blue-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第二段内容</h3>
            <p class="cosy:text-sm">
              这是第二段测试内容，继续填充空间。Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat.
            </p>
          </div>

          <div class="cosy:bg-green-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第三段内容</h3>
            <p class="cosy:text-sm">
              这是第三段测试内容，继续增加内容长度。Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur.
            </p>
          </div>

          <div class="cosy:bg-yellow-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第四段内容</h3>
            <p class="cosy:text-sm">
              这是第四段测试内容，确保内容足够长。Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit
              anim id est laborum.
            </p>
          </div>

          <div class="cosy:bg-purple-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第五段内容</h3>
            <p class="cosy:text-sm">
              这是第五段测试内容，继续增加内容。Sed ut perspiciatis unde omnis
              iste natus error sit voluptatem accusantium doloremque laudantium.
            </p>
          </div>

          <div class="cosy:bg-red-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第六段内容</h3>
            <p class="cosy:text-sm">
              这是第六段测试内容，确保滚动条出现。Totam rem aperiam, eaque ipsa
              quae ab illo inventore veritatis et quasi architecto beatae vitae
              dicta sunt explicabo.
            </p>
          </div>

          <div class="cosy:bg-indigo-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第七段内容</h3>
            <p class="cosy:text-sm">
              这是第七段测试内容，继续填充。Nemo enim ipsam voluptatem quia
              voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
              magni dolores eos qui ratione.
            </p>
          </div>

          <div class="cosy:bg-pink-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">第八段内容</h3>
            <p class="cosy:text-sm">
              这是第八段测试内容，最后一段。Voluptatem sequi nesciunt. Neque
              porro quisquam est, qui dolorem ipsum quia dolor sit amet,
              consectetur, adipisci velit.
            </p>
          </div>

          <div class="cosy:bg-orange-100 cosy:p-3 cosy:rounded-lg">
            <h3 class="cosy:font-semibold cosy:mb-2">结束内容</h3>
            <p class="cosy:text-sm">
              这是最后一段内容，用来确保滚动条能够正常工作。如果能看到这段内容，说明滚动功能正常。
            </p>
          </div>
        </div>
      </div>
    </div>
  </ApplePhoneWindow>
</div>

---
import { iPhoneWindow as ApplePhoneWindow } from '@coffic/cosy-ui/vue';
---

<div class="cosy:p-4">
  <ApplePhoneWindow backgroundColor="cosy:bg-gray-900" client:idle>
    <div
      style="padding-top: 100px;"
      class="cosy:flex cosy:flex-col cosy:items-center cosy:justify-center cosy:h-full cosy:text-gray-100">
      <div class="cosy:text-center">
        <div
          class="cosy:w-14 cosy:h-14 cosy:mx-auto cosy:mb-3 cosy:bg-gray-700 cosy:rounded-full cosy:flex cosy:items-center cosy:justify-center">
          <svg
            class="cosy:w-7 cosy:h-7 cosy:text-gray-300"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
            ></path>
          </svg>
        </div>
        <h3 class="cosy:text-base cosy:font-semibold cosy:mb-1">夜间模式</h3>
        <p class="cosy:text-xs cosy:text-gray-400">护眼舒适的界面</p>
      </div>
    </div>
  </ApplePhoneWindow>
</div>