GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FFFFFF;19  }20 21  /* Top status bar */22  .top-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 120px;28    background: #000000;29  }30 31  /* Main canvas area */32  .canvas {33    position: absolute;34    top: 120px;35    left: 0;36    width: 1080px;37    height: 1840px;38    background: #FFFFFF;39  }40  .square-large {41    position: absolute;42    width: 520px;43    height: 520px;44    background: #000000;45    left: 280px;46    top: 980px;47  }48  .square-small {49    position: absolute;50    width: 180px;51    height: 180px;52    background: #000000;53    left: 760px;54    top: 1340px;55  }56 57  /* Purple tool bar */58  .toolbar {59    position: absolute;60    left: 0;61    width: 1080px;62    height: 160px;63    bottom: 240px;64    background: #8A2BE2; /* vivid purple */65    box-shadow: 0 -2px 0 rgba(0,0,0,0.12);66    display: flex;67    align-items: center;68    justify-content: space-around;69    padding: 0 40px;70  }71  .tool {72    width: 80px;73    height: 80px;74  }75  .tool svg {76    width: 100%;77    height: 100%;78  }79 80  /* Ad banner at bottom */81  .ad-strip {82    position: absolute;83    bottom: 0;84    left: 0;85    width: 1080px;86    height: 240px;87    background: #FFFFFF;88    border-top: 1px solid #E0E0E0;89    display: flex;90    align-items: center;91    padding: 20px 30px;92    box-sizing: border-box;93  }94  .ad-info {95    position: absolute;96    left: 0;97    bottom: 0;98    width: 30px;99    height: 240px;100    background: #39C7D1;101    color: #FFFFFF;102    display: flex;103    flex-direction: column;104    align-items: center;105    justify-content: center;106    font-weight: bold;107  }108  .ad-image {109    width: 300px;110    height: 180px;111    background: #E0E0E0;112    border: 1px solid #BDBDBD;113    display: flex;114    align-items: center;115    justify-content: center;116    color: #757575;117    margin-left: 40px;118    margin-right: 30px;119    font-size: 26px;120  }121  .ad-content {122    flex: 1;123    display: flex;124    align-items: center;125    gap: 24px;126  }127  .ad-logo {128    width: 110px;129    height: 110px;130    border-radius: 24px;131    background: #1E88E5;132    display: flex;133    align-items: center;134    justify-content: center;135    color: #FFFFFF;136    font-weight: 700;137    font-size: 30px;138  }139  .ad-text {140    flex: 1;141    display: flex;142    flex-direction: column;143    gap: 8px;144  }145  .ad-title {146    font-size: 40px;147    color: #000000;148    font-weight: 700;149    line-height: 1;150  }151  .ad-subtitle {152    font-size: 30px;153    color: #444444;154  }155  .ad-meta {156    font-size: 28px;157    color: #666666;158    display: flex;159    align-items: center;160    gap: 12px;161  }162  .ad-open {163    width: 200px;164    height: 90px;165    background: #00A86B;166    border-radius: 45px;167    color: #FFFFFF;168    font-size: 34px;169    font-weight: 700;170    display: flex;171    align-items: center;172    justify-content: center;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <div class="top-bar"></div>180 181  <div class="canvas">182    <div class="square-large"></div>183    <div class="square-small"></div>184  </div>185 186  <div class="toolbar">187    <!-- Color wheel -->188    <div class="tool">189      <svg viewBox="0 0 24 24">190        <circle cx="12" cy="12" r="9" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>191        <path d="M12 3v6M12 15v6M3 12h6M15 12h6" stroke="#FFFFFF" stroke-width="2" fill="none"></path>192      </svg>193    </div>194    <!-- Brush -->195    <div class="tool">196      <svg viewBox="0 0 24 24">197        <path d="M14 3l7 7-2 2-7-7 2-2z" fill="#FFFFFF"></path>198        <path d="M4 20c2 0 3-1 4-3 1-2 3-3 5-3" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"></path>199      </svg>200    </div>201    <!-- Eraser -->202    <div class="tool">203      <svg viewBox="0 0 24 24">204        <path d="M3 15l7-7a3 3 0 0 1 4 0l7 7-6 6H9z" fill="none" stroke="#FFFFFF" stroke-width="2"></path>205      </svg>206    </div>207    <!-- Shape: rect + circle -->208    <div class="tool">209      <svg viewBox="0 0 24 24">210        <rect x="3" y="3" width="10" height="10" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>211        <circle cx="18" cy="18" r="4" fill="none" stroke="#FFFFFF" stroke-width="2"></circle>212      </svg>213    </div>214    <!-- Fill/Bucket -->215    <div class="tool">216      <svg viewBox="0 0 24 24">217        <path d="M7 8l5-5 8 8-5 5-8-8z" fill="none" stroke="#FFFFFF" stroke-width="2"></path>218        <path d="M18 14c2 0 3 2 3 3s-1 3-3 3-3-2-3-3 1-3 3-3z" fill="#FFFFFF"></path>219      </svg>220    </div>221    <!-- Undo -->222    <div class="tool">223      <svg viewBox="0 0 24 24">224        <path d="M9 7l-5 5 5 5" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>225        <path d="M20 12c-3-5-9-5-11-5" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>226      </svg>227    </div>228    <!-- Redo -->229    <div class="tool">230      <svg viewBox="0 0 24 24">231        <path d="M15 7l5 5-5 5" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>232        <path d="M4 12c3-5 9-5 11-5" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>233      </svg>234    </div>235    <!-- Pointer/Hand -->236    <div class="tool">237      <svg viewBox="0 0 24 24">238        <path d="M6 20l3-6 2 2 1-6 5 4-3 6H6z" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"></path>239      </svg>240    </div>241    <!-- Fullscreen -->242    <div class="tool">243      <svg viewBox="0 0 24 24">244        <path d="M3 9V3h6M15 3h6v6M21 15v6h-6M9 21H3v-6" fill="none" stroke="#FFFFFF" stroke-width="2"></path>245      </svg>246    </div>247  </div>248 249  <div class="ad-strip">250    <div class="ad-info">251      <div>i</div>252      <div>x</div>253    </div>254    <div class="ad-image">[IMG: Booking app ad]</div>255    <div class="ad-content">256      <div class="ad-logo">B</div>257      <div class="ad-text">258        <div class="ad-title">Booking.com</div>259        <div class="ad-subtitle">4.7 ★ FREE</div>260      </div>261      <div class="ad-open">Open</div>262    </div>263  </div>264 265</div>266</body>267</html>