GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    font-family: Arial, Helvetica, sans-serif;14    color: #111;15  }16 17  /* Top safe area (black strip visible in screenshot) */18  .top-safe {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 100px;24    background: #000;25  }26 27  /* Central framed canvas */28  .frame {29    position: absolute;30    left: 160px;31    top: 720px;32    width: 720px;33    height: 900px;34    border: 40px solid #000000;35    background: #ffffff;36    box-sizing: border-box;37  }38  .frame .title {39    position: absolute;40    top: 22px;41    left: 30px;42    font-size: 52px;43    font-weight: 500;44    letter-spacing: 0.5px;45  }46 47  /* Bottom toolbar */48  .toolbar {49    position: absolute;50    left: 0;51    bottom: 0;52    width: 1080px;53    height: 320px;54    background: #7B3FE6;55    box-sizing: border-box;56    padding: 30px 40px 0 40px;57  }58  .icon-row {59    display: flex;60    align-items: center;61    gap: 36px;62  }63  .tool {64    width: 88px;65    height: 88px;66    display: flex;67    align-items: center;68    justify-content: center;69  }70  .tool svg {71    width: 70px;72    height: 70px;73    stroke: #fff;74    fill: none;75    stroke-width: 8;76    stroke-linecap: round;77    stroke-linejoin: round;78  }79  .tool.circle {80    border: 6px solid #fff;81    border-radius: 50%;82    color: #fff;83    font-weight: 700;84    font-size: 28px;85  }86  /* Ad row inside toolbar */87  .ad-row {88    position: absolute;89    left: 0;90    bottom: 0;91    width: 1080px;92    height: 140px;93    background: #ffffff;94    display: flex;95    align-items: center;96    gap: 26px;97    padding: 16px 32px;98    box-sizing: border-box;99  }100  .app-icon {101    width: 110px;102    height: 110px;103    background: #E0E0E0;104    border: 1px solid #BDBDBD;105    display: flex;106    align-items: center;107    justify-content: center;108    color: #1A73E8;109    font-weight: 800;110    font-size: 56px;111    border-radius: 24px;112  }113  .ad-text {114    flex: 1;115  }116  .ad-text .title {117    font-size: 44px;118    font-weight: 700;119    color: #222;120    margin-bottom: 6px;121  }122  .installed {123    display: inline-flex;124    align-items: center;125    gap: 10px;126    color: #2E7D32;127    font-size: 32px;128    font-weight: 600;129  }130  .btn-open {131    background: #2FA36B;132    color: #fff;133    font-size: 42px;134    font-weight: 700;135    padding: 16px 42px;136    border-radius: 60px;137  }138 139  /* Home indicator */140  .home-indicator {141    position: absolute;142    bottom: 12px;143    left: 50%;144    transform: translateX(-50%);145    width: 320px;146    height: 10px;147    background: #000000;148    opacity: 0.65;149    border-radius: 6px;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <div class="top-safe"></div>157 158  <div class="frame">159    <div class="title">I have to do it</div>160  </div>161 162  <div class="toolbar">163    <div class="icon-row">164      <div class="tool circle">AD</div>165 166      <!-- Color wheel (represented as multi ring) -->167      <div class="tool">168        <svg viewBox="0 0 100 100">169          <circle cx="50" cy="50" r="40" stroke="#fff" />170          <circle cx="50" cy="50" r="25" stroke="#fff" />171          <circle cx="50" cy="50" r="10" stroke="#fff" />172        </svg>173      </div>174 175      <!-- Brush -->176      <div class="tool">177        <svg viewBox="0 0 100 100">178          <path d="M20 70c10-4 20-4 26 4 6 8 0 14-10 10-7-3-12-9-16-14z" />179          <path d="M70 20l10 10-34 34-10-10z" />180        </svg>181      </div>182 183      <!-- Eraser -->184      <div class="tool">185        <svg viewBox="0 0 100 100">186          <path d="M25 65l25-25c4-4 10-4 14 0l16 16-24 24H33z" />187          <line x1="60" y1="85" x2="88" y2="85" />188        </svg>189      </div>190 191      <!-- Shapes: square + circle -->192      <div class="tool">193        <svg viewBox="0 0 100 100">194          <rect x="12" y="12" width="36" height="36" />195          <circle cx="72" cy="68" r="18" />196        </svg>197      </div>198 199      <!-- Dropper -->200      <div class="tool">201        <svg viewBox="0 0 100 100">202          <path d="M20 70l30-30 10 10-30 30H20z" />203          <path d="M65 20l15 15" />204        </svg>205      </div>206 207      <!-- Text Tt -->208      <div class="tool">209        <svg viewBox="0 0 100 100">210          <path d="M20 30h60M50 30v50" />211          <text x="30" y="80" fill="#fff" stroke="none" font-size="28" font-weight="700">Tt</text>212        </svg>213      </div>214 215      <!-- Undo -->216      <div class="tool">217        <svg viewBox="0 0 100 100">218          <path d="M35 35l-20 15 20 15" />219          <path d="M35 50h25c12 0 22 10 22 22" />220        </svg>221      </div>222 223      <!-- Redo -->224      <div class="tool">225        <svg viewBox="0 0 100 100">226          <path d="M65 35l20 15-20 15" />227          <path d="M65 50H40c-12 0-22 10-22 22" />228        </svg>229      </div>230 231      <!-- Share arrow -->232      <div class="tool">233        <svg viewBox="0 0 100 100">234          <rect x="30" y="55" width="40" height="30" />235          <path d="M50 15v40M50 15l-12 12M50 15l12 12" />236        </svg>237      </div>238 239      <!-- Expand corners -->240      <div class="tool">241        <svg viewBox="0 0 100 100">242          <path d="M15 40V20h20M85 40V20H65M15 60v20h20M85 60v20H65" />243        </svg>244      </div>245    </div>246 247    <div class="ad-row">248      <div class="app-icon">f</div>249      <div class="ad-text">250        <div class="title">Facebook</div>251        <div class="installed">252          <svg width="34" height="34" viewBox="0 0 24 24">253            <path d="M5 12l4 4 10-10" fill="none" stroke="#2E7D32" stroke-width="3" />254          </svg>255          Installed256        </div>257      </div>258      <div class="btn-open">Open</div>259    </div>260  </div>261 262  <div class="home-indicator"></div>263</div>264</body>265</html>