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 black status/header bar */23  .top-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 100%;28    height: 120px;29    background: #000000;30  }31 32  /* Drawing squares */33  .big-square {34    position: absolute;35    width: 520px;36    height: 520px;37    background: #000000;38    left: 240px;39    top: 860px;40  }41  .small-square {42    position: absolute;43    width: 170px;44    height: 170px;45    background: #000000;46    left: 760px; /* attaches to the right-bottom area of big square */47    top: 1200px;48  }49 50  /* Purple toolbar */51  .toolbar {52    position: absolute;53    left: 0;54    bottom: 170px;55    width: 100%;56    height: 160px;57    background: #8a2be2;58    box-shadow: 0 -2px 0 rgba(0,0,0,0.1) inset;59  }60  .tools {61    position: absolute;62    left: 40px;63    right: 40px;64    top: 20px;65    height: 120px;66    display: flex;67    align-items: center;68    justify-content: space-between;69  }70  .tool {71    width: 110px;72    height: 110px;73    display: flex;74    align-items: center;75    justify-content: center;76  }77  .tool svg {78    width: 72px;79    height: 72px;80    stroke: #ffffff;81    fill: none;82    stroke-width: 28;83    stroke-linecap: round;84    stroke-linejoin: round;85  }86  .tool .filled {87    fill: #ffffff;88    stroke: none;89  }90 91  /* Bottom ad area */92  .ad-bar {93    position: absolute;94    left: 0;95    bottom: 0;96    width: 100%;97    height: 170px;98    background: #ffffff;99    border-top: 1px solid #dcdcdc;100    display: flex;101    align-items: center;102    padding: 0 28px;103    box-sizing: border-box;104  }105  .ad-img {106    width: 300px;107    height: 120px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    color: #757575;111    display: flex;112    align-items: center;113    justify-content: center;114    font-size: 28px;115    margin-right: 24px;116  }117  .ad-title {118    flex: 1;119    display: flex;120    flex-direction: column;121    justify-content: center;122  }123  .ad-title .line1 {124    font-weight: 700;125    font-size: 36px;126    color: #1d1d1d;127  }128  .ad-title .line2 {129    font-size: 28px;130    color: #6b6b6b;131    margin-top: 6px;132  }133  .ad-cta {134    background: #1DBA66;135    color: #ffffff;136    border-radius: 999px;137    padding: 20px 44px;138    font-size: 34px;139    font-weight: bold;140  }141 142  /* Floating info button on the very left bottom */143  .floater {144    position: absolute;145    left: 12px;146    bottom: 180px;147    width: 54px;148    height: 54px;149    background: #27d3d8;150    border-radius: 50%;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #ffffff;155    font-weight: 700;156    font-size: 30px;157  }158</style>159</head>160<body>161<div id="render-target">162  <div class="top-bar"></div>163 164  <!-- Drawing canvas content -->165  <div class="big-square"></div>166  <div class="small-square"></div>167 168  <!-- Purple tool bar -->169  <div class="toolbar">170    <div class="tools">171      <!-- Color palette (circle with dots) -->172      <div class="tool">173        <svg viewBox="0 0 100 100">174          <circle class="filled" cx="50" cy="50" r="40"></circle>175          <circle cx="35" cy="40" r="4" fill="#8a2be2" stroke="#8a2be2"></circle>176          <circle cx="50" cy="32" r="4" fill="#8a2be2" stroke="#8a2be2"></circle>177          <circle cx="65" cy="40" r="4" fill="#8a2be2" stroke="#8a2be2"></circle>178          <path d="M60 70c-6 8-24 10-30 0" stroke="#8a2be2" stroke-width="8" fill="none"></path>179        </svg>180      </div>181 182      <!-- Brush -->183      <div class="tool">184        <svg viewBox="0 0 100 100">185          <path d="M65 20 L85 40 L45 80 L25 60 Z"></path>186          <path d="M30 70 C25 80 20 85 15 86" ></path>187        </svg>188      </div>189 190      <!-- Eraser -->191      <div class="tool">192        <svg viewBox="0 0 100 100">193          <polygon points="25,65 55,35 80,60 50,90" class="filled"></polygon>194          <line x1="15" y1="90" x2="85" y2="90"></line>195        </svg>196      </div>197 198      <!-- Shapes (square + circle) -->199      <div class="tool">200        <svg viewBox="0 0 100 100">201          <rect x="18" y="40" width="40" height="40"></rect>202          <circle cx="68" cy="35" r="18"></circle>203        </svg>204      </div>205 206      <!-- Paint bucket -->207      <div class="tool">208        <svg viewBox="0 0 100 100">209          <path d="M30 35 L65 70 L50 85 L15 50 Z"></path>210          <path d="M68 30 C76 32 82 40 80 48 C78 56 70 60 68 52" class="filled"></path>211        </svg>212      </div>213 214      <!-- Undo -->215      <div class="tool">216        <svg viewBox="0 0 100 100">217          <path d="M35 35 L20 50 L35 65"></path>218          <path d="M25 50 H55 C75 50 80 65 80 80"></path>219        </svg>220      </div>221 222      <!-- Redo -->223      <div class="tool">224        <svg viewBox="0 0 100 100">225          <path d="M65 35 L80 50 L65 65"></path>226          <path d="M75 50 H45 C25 50 20 65 20 80"></path>227        </svg>228      </div>229 230      <!-- Fullscreen -->231      <div class="tool">232        <svg viewBox="0 0 100 100">233          <path d="M25 15 H45 V25 H35 V35 H25 Z"></path>234          <path d="M75 15 H55 V25 H65 V35 H75 Z"></path>235          <path d="M25 85 H45 V75 H35 V65 H25 Z"></path>236          <path d="M75 85 H55 V75 H65 V65 H75 Z"></path>237        </svg>238      </div>239    </div>240  </div>241 242  <div class="floater">i</div>243 244  <!-- Bottom ad area -->245  <div class="ad-bar">246    <div class="ad-img">[IMG: App Ad]</div>247    <div class="ad-title">248      <div class="line1">Booking.com</div>249      <div class="line2">4.7 ★  FREE</div>250    </div>251    <div class="ad-cta">Open</div>252  </div>253</div>254</body>255</html>