GD-ML/AndroidCode

1<html>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  /* Top black status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 140px;22    background: #000000;23  }24 25  /* Bottom navigation black bar */26  .nav-bar {27    position: absolute;28    bottom: 0;29    left: 0;30    width: 1080px;31    height: 120px;32    background: #000000;33  }34  .home-indicator {35    width: 360px;36    height: 14px;37    background: #CCCCCC;38    border-radius: 10px;39    margin: 0 auto;40    position: relative;41    top: 50%;42    transform: translateY(-50%);43    opacity: 0.8;44  }45 46  /* Central canvas area */47  .canvas-area {48    position: absolute;49    top: 140px; /* below status bar */50    left: 0;51    width: 1080px;52    height: 1730px; /* space above purple toolbar */53    background: #FFFFFF;54  }55 56  .poster {57    width: 760px;58    height: 760px;59    background: #000000;60    margin: 320px auto 0 auto;61    box-sizing: border-box;62  }63  .poster-inner {64    width: 680px;65    height: 680px;66    background: #E4635E;67    margin: 40px auto;68    position: relative;69  }70  .poster-inner .title {71    position: absolute;72    top: 22px;73    left: 26px;74    font-size: 52px;75    color: #111111;76    letter-spacing: 1px;77  }78 79  /* Purple editing toolbar */80  .toolbar {81    position: absolute;82    bottom: 120px; /* above nav bar */83    left: 0;84    width: 1080px;85    height: 410px;86    background: #7A39E6;87    box-sizing: border-box;88    padding: 32px 40px;89    color: #FFFFFF;90  }91  .tool-row {92    display: flex;93    align-items: center;94    gap: 60px;95    margin-bottom: 28px;96  }97  .tool {98    width: 92px;99    height: 92px;100    border-radius: 18px;101    display: flex;102    align-items: center;103    justify-content: center;104    background: rgba(255,255,255,0.14);105  }106  .tool svg { width: 56px; height: 56px; fill: #FFFFFF; }107  .tool-label {108    font-size: 42px;109    font-weight: 700;110    letter-spacing: 1px;111  }112 113  /* Thumbnails strip */114  .thumbs {115    display: flex;116    gap: 24px;117    overflow-x: auto;118    padding-top: 12px;119  }120  .img-placeholder {121    min-width: 170px;122    height: 170px;123    background: #E0E0E0;124    border: 1px solid #BDBDBD;125    color: #757575;126    display: flex;127    align-items: center;128    justify-content: center;129    border-radius: 10px;130    font-size: 26px;131  }132 133  /* Small close icon bottom-left */134  .small-close {135    position: absolute;136    bottom: 150px;137    left: 18px;138    width: 64px;139    height: 64px;140    border-radius: 50%;141    border: 2px solid rgba(255,255,255,0.8);142    display: flex;143    align-items: center;144    justify-content: center;145    color: #FFFFFF;146    opacity: 0.9;147    font-size: 40px;148  }149</style>150</head>151<body>152<div id="render-target">153  <div class="status-bar"></div>154 155  <div class="canvas-area">156    <div class="poster">157      <div class="poster-inner">158        <div class="title">I have to do it</div>159      </div>160    </div>161  </div>162 163  <div class="toolbar">164    <div class="tool-row">165      <div class="tool" style="background:#FFFFFF1F;">166        <!-- Circle "AD" badge -->167        <svg viewBox="0 0 64 64">168          <circle cx="32" cy="32" r="28" stroke="#FFFFFF" stroke-width="4" fill="none"></circle>169          <text x="32" y="40" font-size="20" text-anchor="middle" fill="#FFFFFF" font-family="Arial" font-weight="700">AD</text>170        </svg>171      </div>172 173      <div class="tool">174        <!-- Paint brush -->175        <svg viewBox="0 0 64 64">176          <path d="M46 14l4 4L28 40l-8 2 2-8z"></path>177          <path d="M22 44c-4 0-8 4-8 8 6 2 10-2 10-6 0-1-1-2-2-2z"></path>178        </svg>179      </div>180 181      <div class="tool">182        <!-- Eraser -->183        <svg viewBox="0 0 64 64">184          <path d="M12 40l16-18c2-2 6-2 8 0l16 18-10 10H22z"></path>185        </svg>186      </div>187 188      <div class="tool">189        <!-- Shapes (circle in square) -->190        <svg viewBox="0 0 64 64">191          <rect x="10" y="10" width="44" height="44" rx="6"></rect>192          <circle cx="32" cy="32" r="12" fill="#7A39E6" stroke="#FFFFFF" stroke-width="4"></circle>193        </svg>194      </div>195 196      <div class="tool">197        <!-- Pen nib -->198        <svg viewBox="0 0 64 64">199          <path d="M32 10l14 20-14 24-14-24z"></path>200          <circle cx="32" cy="30" r="4" fill="#7A39E6" stroke="#FFFFFF" stroke-width="3"></circle>201        </svg>202      </div>203 204      <div class="tool">205        <!-- Drag hand -->206        <svg viewBox="0 0 64 64">207          <path d="M22 26v10h6V26c0-4 8-4 8 0v10h6V30c0-6-20-10-20-4zM20 36l-2 6c6 8 22 8 28 0l-2-6H20z"></path>208        </svg>209      </div>210 211      <div class="tool">212        <!-- Fullscreen arrows -->213        <svg viewBox="0 0 64 64">214          <path d="M10 28v-16h16M54 28v-16H38M10 36v16h16M54 36v16H38" fill="none" stroke="#FFFFFF" stroke-width="5"></path>215        </svg>216      </div>217 218      <div class="tool-label">Tt</div>219      <div class="tool">220        <!-- Undo -->221        <svg viewBox="0 0 64 64">222          <path d="M26 20l-12 12 12 12v-8h12c8 0 14 6 14 14-2-10-10-18-22-18H26z"></path>223        </svg>224      </div>225      <div class="tool" style="opacity:0.6;">226        <!-- Redo -->227        <svg viewBox="0 0 64 64">228          <path d="M38 20l12 12-12 12v-8H26c-8 0-14 6-14 14 2-10 10-18 22-18h4z"></path>229        </svg>230      </div>231    </div>232 233    <div class="thumbs">234      <div class="img-placeholder">[IMG: Red Car]</div>235      <div class="img-placeholder">[IMG: Small Red Car]</div>236      <div class="img-placeholder">[IMG: White Car]</div>237      <div class="img-placeholder">[IMG: Red Hatch]</div>238      <div class="img-placeholder">[IMG: Black Jeep]</div>239      <div class="img-placeholder">[IMG: Red Sedan]</div>240      <div class="img-placeholder">[IMG: Car Thumbnail]</div>241    </div>242 243    <div class="small-close">×</div>244  </div>245 246  <div class="nav-bar">247    <div class="home-indicator"></div>248  </div>249</div>250</body>251</html>