Crater Playground

HTML Input

<div style="width: 375px; display: flex; flex-direction: column; background-color: #1e1e2e">
  <header style="display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 16px; background-color: #313244">
    <span style="color: #89b4fa">Crater App</span>
    <div style="width: 32px; height: 32px; background-color: #45475a"></div>
  </header>
  <div style="flex: 1; padding: 16px">
    <div style="margin-bottom: 16px; padding: 16px; background-color: #313244">
      <div style="margin-bottom: 8px; color: #cdd6f4">Welcome</div>
      <div style="color: #a6adc8">A layout engine in MoonBit</div>
    </div>
    <div style="display: flex; gap: 12px; margin-bottom: 16px">
      <div style="flex: 1; height: 80px; padding: 12px; background-color: #f38ba8; color: #1e1e2e">Card A</div>
      <div style="flex: 1; height: 80px; padding: 12px; background-color: #a6e3a1; color: #1e1e2e">Card B</div>
    </div>
    <div style="padding: 16px; background-color: #313244">
      <div style="margin-bottom: 12px; color: #f9e2af">Grid Items</div>
      <div style="display: flex; flex-wrap: wrap; gap: 8px">
        <div style="width: 48px; height: 48px; background-color: #fab387"></div>
        <div style="width: 48px; height: 48px; background-color: #f9e2af"></div>
        <div style="width: 48px; height: 48px; background-color: #a6e3a1"></div>
        <div style="width: 48px; height: 48px; background-color: #89dceb"></div>
        <div style="width: 48px; height: 48px; background-color: #89b4fa"></div>
        <div style="width: 48px; height: 48px; background-color: #cba6f7"></div>
      </div>
    </div>
    <div style="margin-top: 16px; display: flex; flex-direction: column; gap: 8px">
      <div style="height: 44px; padding: 0 16px; display: flex; align-items: center; background-color: #45475a; color: #cdd6f4">List Item 1</div>
      <div style="height: 44px; padding: 0 16px; display: flex; align-items: center; background-color: #45475a; color: #cdd6f4">List Item 2</div>
      <div style="height: 44px; padding: 0 16px; display: flex; align-items: center; background-color: #89b4fa; color: #1e1e2e">Selected</div>
    </div>
  </div>
  <nav style="height: 56px; display: flex; background-color: #313244">
    <div style="flex: 1; display: flex; align-items: center; justify-content: center; color: #89b4fa">Home</div>
    <div style="flex: 1; display: flex; align-items: center; justify-content: center; color: #6c7086">Search</div>
    <div style="flex: 1; display: flex; align-items: center; justify-content: center; color: #6c7086">Profile</div>
  </nav>
</div>

Crater Playground

HTML Input

Canvas Preview

Layout JSON