GD-ML/AndroidCode
13.4k
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: #FFFFFF;15 }16 17 /* Top status bar */18 .top-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 130px;24 background: #000;25 }26 27 /* Canvas area - simple shapes */28 .big-square, .small-square {29 position: absolute;30 background: #000;31 }32 .big-square {33 width: 520px;34 height: 520px;35 left: 270px;36 top: 930px;37 }38 .small-square {39 width: 180px;40 height: 180px;41 left: 790px; /* attaches to big square's right edge */42 top: 1450px; /* attaches to big square's bottom edge */43 }44 45 /* Bottom toolbar */46 .toolbar {47 position: absolute;48 left: 0;49 width: 1080px;50 height: 160px;51 top: 2010px; /* sits above ad strip */52 background: #8A2BE2; /* purple */53 box-shadow: 0 -4px 10px rgba(0,0,0,0.12);54 }55 .tools {56 position: absolute;57 left: 60px;58 right: 60px;59 top: 30px;60 height: 100px;61 display: flex;62 align-items: center;63 justify-content: space-between;64 }65 .tool {66 width: 100px;67 height: 100px;68 display: flex;69 align-items: center;70 justify-content: center;71 }72 .icon {73 width: 72px;74 height: 72px;75 }76 .icon path, .icon circle, .icon rect, .icon polyline, .icon line {77 stroke: #FFFFFF;78 stroke-width: 2.5;79 fill: none;80 stroke-linecap: round;81 stroke-linejoin: round;82 }83 84 /* Ad strip */85 .ad-strip {86 position: absolute;87 bottom: 0;88 left: 0;89 width: 1080px;90 height: 230px;91 background: #FFFFFF;92 border-top: 1px solid #E0E0E0;93 }94 .ad-info-rail {95 position: absolute;96 left: 0;97 top: 0;98 width: 44px;99 height: 100%;100 background: #B9F3FF;101 }102 .ad-info-rail .mark {103 position: absolute;104 left: 0;105 right: 0;106 text-align: center;107 color: #0E6F8F;108 font-family: Arial, Helvetica, sans-serif;109 font-size: 30px;110 font-weight: bold;111 }112 .ad-info-rail .mark.info { top: 14px; }113 .ad-info-rail .mark.close { bottom: 12px; }114 115 .ad-content {116 position: absolute;117 left: 64px;118 right: 24px;119 top: 20px;120 bottom: 20px;121 display: grid;122 grid-template-columns: 260px 1fr 220px;123 gap: 24px;124 align-items: center;125 }126 .ad-image {127 width: 100%;128 height: 100%;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 display: flex;132 align-items: center;133 justify-content: center;134 color: #757575;135 font-family: Arial, Helvetica, sans-serif;136 font-size: 28px;137 }138 .ad-text {139 font-family: Arial, Helvetica, sans-serif;140 color: #222;141 }142 .ad-text .title {143 font-size: 44px;144 font-weight: 700;145 margin-bottom: 10px;146 }147 .ad-text .meta {148 font-size: 32px;149 color: #555;150 }151 .ad-cta {152 display: flex;153 align-items: center;154 justify-content: flex-end;155 gap: 16px;156 }157 .open-btn {158 background: #0EB36E;159 color: #FFF;160 font-family: Arial, Helvetica, sans-serif;161 font-size: 36px;162 font-weight: 700;163 padding: 22px 40px;164 border-radius: 50px;165 }166 .rating {167 font-family: Arial, Helvetica, sans-serif;168 font-size: 28px;169 color: #333;170 }171 .star {172 color: #FFB300;173 font-size: 30px;174 margin: 0 6px;175 }176 177 /* Color swatch (first tool) shows a black filled circle inside white outline */178 .swatch svg circle.fill {179 fill: #000000;180 stroke: none;181 }182</style>183</head>184<body>185<div id="render-target">186 187 <div class="top-bar"></div>188 189 <!-- Canvas content (simple black squares) -->190 <div class="big-square"></div>191 <div class="small-square"></div>192 193 <!-- Bottom drawing toolbar -->194 <div class="toolbar">195 <div class="tools">196 <!-- Color swatch -->197 <div class="tool swatch">198 <svg class="icon" viewBox="0 0 24 24">199 <circle cx="12" cy="12" r="9"></circle>200 <circle class="fill" cx="12" cy="12" r="6"></circle>201 </svg>202 </div>203 <!-- Brush -->204 <div class="tool">205 <svg class="icon" viewBox="0 0 24 24">206 <path d="M3 21c2-1 4-1 5-4l10-10c1-1 1-3 0-4s-3-1-4 0L6 13c-3 1-3 3-4 5z"></path>207 <line x1="14" y1="6" x2="18" y2="10"></line>208 </svg>209 </div>210 <!-- Eraser -->211 <div class="tool">212 <svg class="icon" viewBox="0 0 24 24">213 <path d="M3 16l7-7 5 5-6 6H5z"></path>214 <line x1="14" y1="7" x2="20" y2="7"></line>215 </svg>216 </div>217 <!-- Rectangle tool -->218 <div class="tool">219 <svg class="icon" viewBox="0 0 24 24">220 <rect x="4" y="6" width="16" height="12" rx="2" ry="2"></rect>221 </svg>222 </div>223 <!-- Paint bucket -->224 <div class="tool">225 <svg class="icon" viewBox="0 0 24 24">226 <path d="M9 3l-6 6 8 8 6-6z"></path>227 <path d="M19 15c1 1 1 3-1 4s-3-1-2-3 2-2 3-1z"></path>228 </svg>229 </div>230 <!-- Pointer/gesture -->231 <div class="tool">232 <svg class="icon" viewBox="0 0 24 24">233 <path d="M6 12l4-4 4 4M10 8v8"></path>234 <path d="M18 16l2 2-2 2"></path>235 </svg>236 </div>237 <!-- Fullscreen/expand -->238 <div class="tool">239 <svg class="icon" viewBox="0 0 24 24">240 <polyline points="4,10 4,4 10,4"></polyline>241 <polyline points="14,4 20,4 20,10"></polyline>242 <polyline points="20,14 20,20 14,20"></polyline>243 <polyline points="10,20 4,20 4,14"></polyline>244 </svg>245 </div>246 </div>247 </div>248 249 <!-- Bottom ad area -->250 <div class="ad-strip">251 <div class="ad-info-rail">252 <div class="mark info">i</div>253 <div class="mark close">x</div>254 </div>255 <div class="ad-content">256 <div class="ad-image">[IMG: Booking.com Ad]</div>257 <div class="ad-text">258 <div class="title">Booking.com</div>259 <div class="meta">260 4.7261 <span class="star">★</span>262 FREE263 </div>264 </div>265 <div class="ad-cta">266 <div class="open-btn">Open</div>267 </div>268 </div>269 </div>270 271</div>272</body>273</html>