GD-ML/AndroidCode

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 Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Top status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 160px;29    background: #000000;30  }31 32  /* Main canvas area */33  .canvas {34    position: absolute;35    top: 160px;36    left: 0;37    width: 1080px;38    height: 1760px; /* 2400 - 160 - 220 - 260 */39    background: #FFFFFF;40  }41 42  /* Red shapes */43  .shape-large {44    position: absolute;45    width: 540px;46    height: 420px;47    background: #FF5858;48    left: 270px;49    top: 880px;50  }51  .shape-small {52    position: absolute;53    width: 180px;54    height: 180px;55    background: #FF5858;56    left: 690px; /* 270 + 540 - 120 approx small offset */57    top: 1240px; /* 880 + 360 approx bottom-right attachment */58  }59 60  /* Purple toolbar */61  .toolbar {62    position: absolute;63    bottom: 260px;64    left: 0;65    width: 1080px;66    height: 220px;67    background: #7E2AFF;68    box-shadow: 0 -4px 0 rgba(0,0,0,0.08) inset;69  }70  .toolbar-inner {71    position: absolute;72    left: 40px;73    right: 40px;74    top: 30px;75    height: 160px;76    display: flex;77    align-items: center;78    justify-content: space-between;79  }80  .tool {81    width: 110px;82    height: 110px;83    display: flex;84    align-items: center;85    justify-content: center;86  }87  .tool svg {88    width: 90px;89    height: 90px;90  }91 92  /* Bottom ad banner */93  .ad-bar {94    position: absolute;95    bottom: 0;96    left: 0;97    width: 1080px;98    height: 260px;99    background: #FFFFFF;100    border-top: 1px solid #E0E0E0;101    display: flex;102    align-items: center;103    padding: 20px 24px;104    box-sizing: border-box;105  }106  .ad-media {107    width: 260px;108    height: 220px;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    display: flex;112    align-items: center;113    justify-content: center;114    color: #757575;115    font-size: 28px;116    text-align: center;117  }118  .ad-details {119    flex: 1;120    margin-left: 24px;121  }122  .ad-appicon {123    width: 120px;124    height: 120px;125    background: #E0E0E0;126    border: 1px solid #BDBDBD;127    display: inline-flex;128    align-items: center;129    justify-content: center;130    color: #757575;131    font-size: 22px;132    border-radius: 24px;133  }134  .ad-title {135    font-size: 40px;136    font-weight: 700;137    margin-left: 24px;138    display: inline-block;139    vertical-align: middle;140  }141  .ad-sub {142    margin-top: 10px;143    font-size: 28px;144    color: #444;145  }146  .ad-rating {147    color: #FFA000;148    font-size: 28px;149    margin-left: 12px;150  }151  .ad-btn {152    width: 220px;153    height: 100px;154    background: #15A85C;155    color: #FFFFFF;156    font-weight: 700;157    font-size: 40px;158    border-radius: 50px;159    display: flex;160    align-items: center;161    justify-content: center;162    margin-left: 24px;163  }164 165  /* Small close button on ad (left side) */166  .ad-close {167    position: absolute;168    left: 8px;169    bottom: 8px;170    width: 40px;171    height: 40px;172    color: #7E7E7E;173    display: flex;174    align-items: center;175    justify-content: center;176    font-size: 28px;177  }178</style>179</head>180<body>181<div id="render-target">182  <div class="status-bar"></div>183 184  <div class="canvas">185    <div class="shape-large"></div>186    <div class="shape-small"></div>187  </div>188 189  <div class="toolbar">190    <div class="toolbar-inner">191      <!-- Palette -->192      <div class="tool">193        <svg viewBox="0 0 100 100">194          <circle cx="50" cy="50" r="38" fill="none" stroke="#FFFFFF" stroke-width="6"/>195          <circle cx="72" cy="35" r="7" fill="#FFFFFF"/>196        </svg>197      </div>198      <!-- Brush -->199      <div class="tool">200        <svg viewBox="0 0 100 100">201          <path d="M20 70 C30 60 55 35 80 20" stroke="#FFFFFF" stroke-width="8" fill="none" stroke-linecap="round"/>202          <path d="M22 78 C35 78 42 70 42 60" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round"/>203        </svg>204      </div>205      <!-- Eraser -->206      <div class="tool">207        <svg viewBox="0 0 100 100">208          <rect x="25" y="30" width="50" height="30" transform="rotate(-20 50 45)" fill="none" stroke="#FFFFFF" stroke-width="6" rx="6"/>209          <path d="M20 75 H80" stroke="#FFFFFF" stroke-width="6" />210        </svg>211      </div>212      <!-- Shape (square + circle) -->213      <div class="tool">214        <svg viewBox="0 0 100 100">215          <rect x="18" y="18" width="40" height="40" fill="none" stroke="#FFFFFF" stroke-width="6"/>216          <circle cx="70" cy="60" r="18" fill="none" stroke="#FFFFFF" stroke-width="6"/>217        </svg>218      </div>219      <!-- Paint bucket -->220      <div class="tool">221        <svg viewBox="0 0 100 100">222          <path d="M30 32 L60 20 L78 38 L48 50 Z" fill="none" stroke="#FFFFFF" stroke-width="6"/>223          <path d="M78 60 C78 72 88 72 88 60" fill="#FFFFFF"/>224        </svg>225      </div>226      <!-- Undo -->227      <div class="tool">228        <svg viewBox="0 0 100 100">229          <path d="M34 40 L18 50 L34 60" stroke="#FFFFFF" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>230          <path d="M80 60 C70 40 50 35 34 40" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round"/>231        </svg>232      </div>233      <!-- Redo -->234      <div class="tool">235        <svg viewBox="0 0 100 100">236          <path d="M66 40 L82 50 L66 60" stroke="#FFFFFF" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>237          <path d="M20 60 C30 40 50 35 66 40" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round"/>238        </svg>239      </div>240      <!-- Fullscreen -->241      <div class="tool">242        <svg viewBox="0 0 100 100">243          <path d="M18 42 V18 H42" stroke="#FFFFFF" stroke-width="6" fill="none"/>244          <path d="M58 18 H82 V42" stroke="#FFFFFF" stroke-width="6" fill="none"/>245          <path d="M42 82 H18 V58" stroke="#FFFFFF" stroke-width="6" fill="none"/>246          <path d="M82 58 V82 H58" stroke="#FFFFFF" stroke-width="6" fill="none"/>247        </svg>248      </div>249    </div>250  </div>251 252  <div class="ad-bar">253    <div class="ad-media">[IMG: App Promo]</div>254    <div class="ad-details">255      <div style="display:flex; align-items:center;">256        <div class="ad-appicon">[IMG: App Icon]</div>257        <div class="ad-title">Booking.com</div>258      </div>259      <div class="ad-sub">260        4.7261        <span class="ad-rating">★</span>262        FREE263      </div>264    </div>265    <div class="ad-btn">Open</div>266    <div class="ad-close">×</div>267  </div>268</div>269</body>270</html>