GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #14181D;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #EAEFF5;17  }18 19  /* General */20  .screen-padding { padding: 40px; }21 22  /* Top bar with back and search */23  .topbar {24    display: flex;25    align-items: center;26    gap: 28px;27    margin-top: 80px; /* room for status area */28  }29  .back-btn {30    width: 88px;31    height: 88px;32    border: none;33    background: transparent;34    padding: 0;35    cursor: default;36  }37  .search {38    flex: 1;39    height: 120px;40    background: #20252B;41    border-radius: 24px;42    display: flex;43    align-items: center;44    padding: 0 36px;45    color: #8C939D;46    box-shadow: 0 2px 0 rgba(0,0,0,0.15) inset;47  }48  .search svg { margin-right: 24px; }49  .search span {50    font-size: 40px;51    letter-spacing: 0.2px;52  }53 54  /* Section title */55  .section-title {56    margin-top: 70px;57    color: #8B9099;58    font-weight: 600;59    font-size: 46px;60  }61 62  /* Type cards */63  .type-grid {64    display: flex;65    gap: 32px;66    margin-top: 28px;67  }68  .type-card {69    width: 316px;70    height: 280px;71    background: #1C2127;72    border-radius: 26px;73    display: flex;74    flex-direction: column;75    align-items: center;76    justify-content: center;77    box-shadow: 0 8px 18px rgba(0,0,0,0.25);78  }79  .type-card svg { margin-bottom: 22px; }80  .type-card .label {81    font-size: 40px;82    font-weight: 700;83    color: #E6EBF1;84  }85 86  /* Color picker circle */87  .color-row {88    margin-top: 80px;89  }90  .color-swatch {91    width: 150px;92    height: 150px;93    border-radius: 50%;94    background: #FFB800;95    box-shadow: inset 0 0 0 4px rgba(0,0,0,0.25);96    margin-top: 30px;97  }98 99  /* Bottom gesture bar */100  .gesture {101    position: absolute;102    bottom: 48px;103    left: 50%;104    transform: translateX(-50%);105    width: 320px;106    height: 16px;107    background: #E7E7E7;108    border-radius: 12px;109    opacity: 0.95;110  }111</style>112</head>113<body>114<div id="render-target">115  <div class="screen-padding">116    <div class="topbar">117      <button class="back-btn" aria-label="Back">118        <svg width="88" height="88" viewBox="0 0 24 24">119          <path d="M15 5L8 12L15 19" stroke="#EAEFF5" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>120          <path d="M8 12H21" stroke="#EAEFF5" stroke-width="2.2" fill="none" stroke-linecap="round"/>121        </svg>122      </button>123      <div class="search">124        <svg width="56" height="56" viewBox="0 0 28 28">125          <circle cx="12" cy="12" r="7.5" stroke="#9BA3AE" stroke-width="2" fill="none"/>126          <path d="M18.5 18.5L26 26" stroke="#9BA3AE" stroke-width="2" stroke-linecap="round"/>127        </svg>128        <span>Search...</span>129      </div>130    </div>131 132    <div class="section-title">Type</div>133    <div class="type-grid">134      <div class="type-card">135        <svg width="96" height="96" viewBox="0 0 48 48">136          <rect x="9" y="6" width="30" height="36" rx="4" fill="#2D6CFF"/>137          <path d="M15 18H33M15 24H28M15 30H26" stroke="#FFFFFF" stroke-width="2.2" stroke-linecap="round"/>138        </svg>139        <div class="label">TXT</div>140      </div>141 142      <div class="type-card">143        <svg width="96" height="96" viewBox="0 0 48 48">144          <circle cx="24" cy="24" r="18" fill="#2D6CFF"/>145          <path d="M17 24l5 5 10-12" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>146        </svg>147        <div class="label">Checklist</div>148      </div>149 150      <div class="type-card">151        <svg width="96" height="96" viewBox="0 0 48 48">152          <rect x="8" y="10" width="32" height="28" rx="4" fill="#2D6CFF"/>153          <rect x="12" y="6" width="6" height="6" rx="2" fill="#2D6CFF"/>154          <rect x="30" y="6" width="6" height="6" rx="2" fill="#2D6CFF"/>155          <rect x="22" y="22" width="6" height="8" rx="1.5" fill="#1C2127"/>156        </svg>157        <div class="label">Calendar</div>158      </div>159    </div>160 161    <div class="color-row">162      <div class="section-title">Color</div>163      <div class="color-swatch" aria-label="Selected color: Yellow"></div>164    </div>165  </div>166 167  <div class="gesture"></div>168</div>169</body>170</html>