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; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Central framed rectangle */16  .framed-area {17    position: absolute;18    top: 760px;19    left: 160px; /* centered: (1080 - 760) / 2 */20    width: 760px;21    height: 980px;22    border: 40px solid #000000;23    box-sizing: border-box;24    background: #ffffff;25  }26  .frame-text {27    position: absolute;28    top: 40px;29    left: 70px;30    font-size: 64px;31    color: #111111;32    letter-spacing: 1px;33  }34 35  /* Bottom purple tool bar */36  .tool-bar {37    position: absolute;38    left: 0;39    bottom: 100px; /* leave space for home indicator area */40    width: 100%;41    height: 260px;42    background: #8C43DB;43    box-sizing: border-box;44    padding: 24px 28px;45    color: #fff;46  }47  .top-tools {48    display: flex;49    align-items: center;50    gap: 36px;51    margin-bottom: 18px;52  }53  .tool-btn {54    width: 64px;55    height: 64px;56    border-radius: 32px;57    background: rgba(255,255,255,0.18);58    display: flex;59    align-items: center;60    justify-content: center;61    backdrop-filter: blur(2px);62  }63  .tool-label {64    font-weight: bold;65    font-size: 22px;66  }67  .tool-btn svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; }68 69  .right-controls {70    margin-left: auto;71    display: flex;72    align-items: center;73    gap: 18px;74  }75  .close-btn, .info-btn {76    width: 40px;77    height: 40px;78    border-radius: 20px;79    background: rgba(255,255,255,0.22);80    display: flex;81    align-items: center;82    justify-content: center;83    font-weight: bold;84    color: #fff;85  }86 87  /* Thumbnails row */88  .thumb-row {89    display: flex;90    gap: 16px;91    padding-top: 8px;92  }93  .thumb {94    position: relative;95    width: 190px;96    height: 150px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #555;103    font-size: 22px;104    text-align: center;105    border-radius: 8px;106  }107  .badge {108    position: absolute;109    top: 8px;110    left: 8px;111    background: #ffffff;112    color: #000;113    font-weight: 700;114    font-size: 20px;115    padding: 4px 10px;116    border-radius: 10px;117    box-shadow: 0 2px 0 rgba(0,0,0,0.15);118  }119 120  /* Bottom system area */121  .system-area {122    position: absolute;123    left: 0;124    bottom: 0;125    width: 100%;126    height: 100px;127    background: #000000;128  }129  .home-indicator {130    position: absolute;131    left: 50%;132    transform: translateX(-50%);133    bottom: 24px;134    width: 330px;135    height: 10px;136    background: #CFCFCF;137    border-radius: 6px;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Large framed canvas -->145  <div class="framed-area">146    <div class="frame-text">I have to do it</div>147  </div>148 149  <!-- Purple tool bar with icons and thumbnails -->150  <div class="tool-bar">151    <div class="top-tools">152      <div class="tool-btn"><span class="tool-label">Aa</span></div>153 154      <div class="tool-btn">155        <!-- color wheel simple circle -->156        <svg viewBox="0 0 24 24">157          <circle cx="12" cy="12" r="10" stroke="#fff"/>158          <path d="M12 2v20M2 12h20" />159        </svg>160      </div>161 162      <div class="tool-btn">163        <!-- brush -->164        <svg viewBox="0 0 24 24">165          <path d="M3 20c3-1 5-1 6-3s2-3 4-4l6-6c.8-.8.8-2.2 0-3s-2.2-.8-3 0l-6 6c-1 1-2 2-4 4-1 1-2 3-3 6z"/>166        </svg>167      </div>168 169      <div class="tool-btn">170        <!-- eraser -->171        <svg viewBox="0 0 24 24">172          <path d="M4 15l7-7 5 5-7 7H4z"/>173          <path d="M14 20h6"/>174        </svg>175      </div>176 177      <div class="tool-btn">178        <!-- square shape -->179        <svg viewBox="0 0 24 24">180          <rect x="5" y="5" width="14" height="14" rx="2"/>181        </svg>182      </div>183 184      <div class="tool-btn">185        <!-- diamond -->186        <svg viewBox="0 0 24 24">187          <path d="M12 3l8 9-8 9-8-9 8-9z"/>188        </svg>189      </div>190 191      <div class="tool-btn">192        <!-- undo arrow -->193        <svg viewBox="0 0 24 24">194          <path d="M6 9l-4 4 4 4"/>195          <path d="M2 13h11a6 6 0 0 1 6 6"/>196        </svg>197      </div>198 199      <div class="right-controls">200        <div class="close-btn">×</div>201        <div class="info-btn">i</div>202      </div>203    </div>204 205    <div class="thumb-row">206      <div class="thumb">207        <div class="badge">-50%</div>208        [IMG: Black PUMA wallet]209      </div>210      <div class="thumb">211        <div class="badge">-40%</div>212        [IMG: Striped jersey]213      </div>214      <div class="thumb">215        <div class="badge">-40%</div>216        [IMG: Yellow hoodie]217      </div>218      <div class="thumb">219        <div class="badge">-30%</div>220        [IMG: Teal dress model]221      </div>222      <div class="thumb">223        <div class="badge">-40%</div>224        [IMG: PUMA sneakers]225      </div>226    </div>227  </div>228 229  <!-- Bottom system area with home indicator -->230  <div class="system-area">231    <div class="home-indicator"></div>232  </div>233 234</div>235</body>236</html>