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>Drawing App UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13    font-family: Arial, Helvetica, sans-serif;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute; top: 0; left: 0; width: 100%; height: 140px;20    background: #000000; color: #ffffff;21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 36px;23    box-sizing: border-box;24    font-weight: 600;25  }26  .status-left { font-size: 42px; }27  .status-right { display: flex; align-items: center; gap: 24px; }28  .status-icon svg { width: 44px; height: 44px; stroke: #ffffff; fill: none; stroke-width: 4; }29 30  /* Top toolbar */31  .top-toolbar {32    position: absolute; top: 140px; left: 0; width: 100%; height: 160px;33    background: #ffffff;34    display: flex; align-items: center;35    padding: 0 36px; box-sizing: border-box;36    gap: 38px;37    box-shadow: 0 1px 0 rgba(0,0,0,0.06);38  }39  .icon {40    width: 80px; height: 80px;41    display: inline-flex; align-items: center; justify-content: center;42  }43  .icon svg { width: 64px; height: 64px; stroke: #8a8a8a; fill: none; stroke-width: 4; }44  .icon.gray svg { stroke: #8a8a8a; }45  .icon.blue svg { stroke: #2962FF; }46 47  /* Canvas areas */48  .canvas {49    position: absolute; top: 300px; left: 0; width: 100%; height: 1680px;50    background: #ffffff;51  }52  .band {53    position: absolute; left: 0; width: 100%; background: #f2f2f2;54  }55  .band.top { top: 0; height: 520px; }56  .band.bottom { bottom: 0; height: 520px; }57 58  /* Lines in canvas */59  .thin-line {60    position: absolute; left: 72px; top: 1040px;61    width: 936px; height: 6px; background: #dcdcdc;62    border-radius: 3px;63  }64  .thick-line {65    position: absolute; left: 112px; top: 1184px;66    width: 860px; height: 18px; background: #111111;67    border-radius: 9px;68  }69 70  /* Bottom toolbar (floating) */71  .bottom-toolbar-wrap {72    position: absolute; left: 40px; right: 40px; bottom: 176px; /* above gesture/nav */73    display: flex; justify-content: center;74  }75  .bottom-toolbar {76    width: 1000px; height: 160px; background: #ffffff;77    border-radius: 36px;78    box-shadow: 0 8px 22px rgba(0,0,0,0.15);79    display: flex; align-items: center; justify-content: space-between;80    padding: 0 46px; box-sizing: border-box;81  }82  .bt-icon {83    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;84  }85  .bt-icon svg { width: 72px; height: 72px; stroke: #8a8a8a; fill: none; stroke-width: 4; }86  .bt-icon.pen svg { stroke: #2962FF; }87  .pen-active {88    position: absolute; left: 64px; bottom: 150px; /* inside wrap, under pen */89    width: 100px; height: 6px; background: #2962FF; border-radius: 3px;90  }91 92  /* Color circle with rainbow ring */93  .color-swatch {94    width: 72px; height: 72px;95    border-radius: 50%;96    background: teal;97    border: 8px solid transparent;98    background-clip: padding-box;99    position: relative;100  }101  .color-swatch::after {102    content: "";103    position: absolute; inset: -8px;104    border-radius: 50%;105    background: conic-gradient(red, orange, yellow, lime, cyan, blue, purple, red);106    z-index: -1;107  }108 109  /* Bottom system nav bar */110  .nav-bar {111    position: absolute; bottom: 0; left: 0; width: 100%; height: 120px;112    background: #000000;113  }114  .gesture-pill {115    position: absolute; bottom: 36px; left: 50%;116    transform: translateX(-50%);117    width: 240px; height: 14px; background: #e6e6e6; border-radius: 7px;118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status Bar -->125  <div class="status-bar">126    <div class="status-left">1:48</div>127    <div class="status-right">128      <div class="status-icon">129        <svg viewBox="0 0 48 48">130          <path d="M4 32c6-10 14-16 24-16s18 6 24 16" />131        </svg>132      </div>133      <div class="status-icon">134        <svg viewBox="0 0 48 48">135          <rect x="6" y="10" width="30" height="24" rx="4"></rect>136          <path d="M38 18l6 6-6 6"></path>137        </svg>138      </div>139      <div class="status-icon">140        <svg viewBox="0 0 48 48">141          <rect x="6" y="10" width="30" height="24" rx="4"></rect>142          <path d="M40 14v20"></path>143        </svg>144      </div>145    </div>146  </div>147 148  <!-- Top Toolbar -->149  <div class="top-toolbar">150    <!-- Back -->151    <div class="icon gray">152      <svg viewBox="0 0 48 48">153        <path d="M30 10L16 24l14 14"></path>154      </svg>155    </div>156    <!-- New Document -->157    <div class="icon gray">158      <svg viewBox="0 0 48 48">159        <rect x="10" y="8" width="28" height="32" rx="4"></rect>160        <path d="M28 8v12h10"></path>161      </svg>162    </div>163    <!-- Layers -->164    <div class="icon gray">165      <svg viewBox="0 0 48 48">166        <rect x="10" y="10" width="24" height="16" rx="2"></rect>167        <rect x="14" y="20" width="24" height="16" rx="2"></rect>168      </svg>169    </div>170    <!-- Undo -->171    <div class="icon gray">172      <svg viewBox="0 0 48 48">173        <path d="M20 16l-10 8 10 8"></path>174        <path d="M18 24h10a10 10 0 0 1 10 10"></path>175      </svg>176    </div>177    <!-- Redo -->178    <div class="icon gray">179      <svg viewBox="0 0 48 48">180        <path d="M28 16l10 8-10 8"></path>181        <path d="M30 24H20a10 10 0 0 0-10 10"></path>182      </svg>183    </div>184    <!-- Grid -->185    <div class="icon gray">186      <svg viewBox="0 0 48 48">187        <rect x="8" y="8" width="32" height="32" rx="4"></rect>188        <path d="M24 8v32M8 24h32"></path>189      </svg>190    </div>191    <!-- Sync/Refresh -->192    <div class="icon gray">193      <svg viewBox="0 0 48 48">194        <path d="M14 20a12 12 0 0 1 20-4"></path>195        <path d="M32 12l2 8-8-2"></path>196        <path d="M34 28a12 12 0 0 1-20 4"></path>197        <path d="M16 36l-2-8 8 2"></path>198      </svg>199    </div>200    <!-- Share -->201    <div class="icon gray">202      <svg viewBox="0 0 48 48">203        <path d="M24 8v22"></path>204        <path d="M16 16l8-8 8 8"></path>205        <rect x="10" y="26" width="28" height="12" rx="3"></rect>206      </svg>207    </div>208    <!-- Expand -->209    <div class="icon gray">210      <svg viewBox="0 0 48 48">211        <path d="M10 20V10h10"></path>212        <path d="M38 28v10H28"></path>213        <path d="M10 38h10v-10"></path>214        <path d="M38 10H28v10"></path>215      </svg>216    </div>217  </div>218 219  <!-- Canvas -->220  <div class="canvas">221    <div class="band top"></div>222    <div class="band bottom"></div>223 224    <div class="thin-line"></div>225    <div class="thick-line"></div>226  </div>227 228  <!-- Bottom floating toolbar -->229  <div class="bottom-toolbar-wrap">230    <div class="bottom-toolbar">231      <div class="bt-icon pen">232        <svg viewBox="0 0 48 48">233          <path d="M10 34l6-2 18-18-4-4-18 18-2 6z"></path>234          <path d="M30 10l8 8"></path>235        </svg>236      </div>237      <div class="bt-icon">238        <svg viewBox="0 0 48 48">239          <circle cx="14" cy="16" r="3"></circle>240          <path d="M8 16h12"></path>241          <circle cx="28" cy="30" r="3"></circle>242          <path d="M22 30h12"></path>243          <circle cx="34" cy="16" r="3"></circle>244          <path d="M28 16h12"></path>245        </svg>246      </div>247      <div class="bt-icon">248        <svg viewBox="0 0 48 48">249          <path d="M12 32l12-16h10l-12 16H12z"></path>250          <rect x="10" y="32" width="20" height="6" rx="2"></rect>251        </svg>252      </div>253      <div class="bt-icon">254        <svg viewBox="0 0 48 48">255          <path d="M12 36l24-24"></path>256          <path d="M20 32l4-4"></path>257          <path d="M28 24l4-4"></path>258        </svg>259      </div>260      <div class="bt-icon">261        <svg viewBox="0 0 48 48">262          <rect x="10" y="12" width="18" height="18" rx="2"></rect>263          <rect x="20" y="20" width="18" height="18" rx="2"></rect>264        </svg>265      </div>266      <div class="bt-icon" style="font-size: 56px; color:#8a8a8a; line-height: 0;">T</div>267      <div class="bt-icon">268        <svg viewBox="0 0 48 48">269          <rect x="8" y="10" width="32" height="26" rx="4"></rect>270          <path d="M12 28l8-8 8 10 4-4"></path>271          <circle cx="16" cy="16" r="2"></circle>272        </svg>273      </div>274      <div class="bt-icon">275        <div class="color-swatch"></div>276      </div>277    </div>278    <div class="pen-active"></div>279  </div>280 281  <!-- Bottom system navigation -->282  <div class="nav-bar"></div>283  <div class="gesture-pill"></div>284</div>285</body>286</html>