GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Drawing App UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, sans-serif;12  }13  #render-target {14    position: relative;15    overflow: hidden;16    width: 1440px;17    height: 3120px;18    background: #FFFFFF;19  }20 21  /* Top black status bar */22  .status-top {23    position: absolute;24    top: 0;25    left: 0;26    width: 1440px;27    height: 120px;28    background: #000000;29  }30 31  /* Top white toolbar */32  .toolbar-top {33    position: absolute;34    top: 120px;35    left: 0;36    width: 1440px;37    height: 180px;38    background: #FFFFFF;39    box-shadow: 0 1px 0 rgba(0,0,0,0.08);40    display: flex;41    align-items: center;42    padding: 0 60px;43    gap: 64px;44  }45 46  .top-actions {47    display: flex;48    align-items: center;49    gap: 64px;50    flex: 1;51  }52 53  .icon {54    width: 96px;55    height: 96px;56    display: inline-flex;57    align-items: center;58    justify-content: center;59  }60  .icon svg {61    width: 88px;62    height: 88px;63    stroke: #333;64    fill: none;65    stroke-width: 6;66    stroke-linecap: round;67    stroke-linejoin: round;68  }69  .icon.muted svg {70    stroke: #CCCCCC;71  }72 73  .send-btn {74    width: 120px;75    height: 120px;76    background: #1E86FF;77    border-radius: 60px;78    display: flex;79    align-items: center;80    justify-content: center;81  }82  .send-btn svg {83    width: 72px;84    height: 72px;85    fill: #FFFFFF;86    stroke: none;87  }88 89  /* Canvas area */90  .canvas {91    position: absolute;92    top: 300px; /* 120 + 180 */93    left: 0;94    width: 1440px;95    height: 2500px;96    background: #FFFFFF;97  }98 99  /* Scribble texts */100  .scribble-small {101    position: absolute;102    left: 240px;103    top: 1180px;104    transform: rotate(-11deg);105    color: #244BFF;106    font-family: cursive;107    font-size: 42px;108    letter-spacing: 1px;109    white-space: nowrap;110  }111  .scribble-small span {112    margin-right: 40px;113  }114  .scribble-large {115    position: absolute;116    left: 240px;117    top: 1600px;118    color: #D07979;119    font-family: cursive;120    font-size: 96px;121    letter-spacing: 2px;122    white-space: nowrap;123  }124 125  /* Bottom white toolbar */126  .toolbar-bottom {127    position: absolute;128    bottom: 140px; /* above bottom system bar */129    left: 0;130    width: 1440px;131    height: 180px;132    background: #FFFFFF;133    box-shadow: 0 -1px 0 rgba(0,0,0,0.08);134    display: flex;135    align-items: center;136    padding: 0 60px;137    gap: 54px;138  }139 140  .color-wheel {141    width: 120px;142    height: 120px;143    border-radius: 60px;144    background: conic-gradient(#ff7a7a, #ffda7a, #7aff8a, #7ad8ff, #b37aff, #ff7a7a);145    border: 6px solid #fff;146    box-shadow: 0 2px 6px rgba(0,0,0,0.15);147  }148 149  .bottom-icon {150    width: 100px;151    height: 100px;152    display: inline-flex;153    align-items: center;154    justify-content: center;155  }156  .bottom-icon svg {157    width: 92px;158    height: 92px;159    stroke: #333;160    fill: none;161    stroke-width: 6;162    stroke-linecap: round;163    stroke-linejoin: round;164  }165 166  .bottom-icon.text-active svg,167  .bottom-icon.text-active span {168    color: #1E86FF;169    stroke: #1E86FF;170    fill: none;171  }172 173  .hand-icon {174    font-size: 72px;175    color: #333;176    line-height: 1;177  }178 179  /* Bottom black navigation area */180  .status-bottom {181    position: absolute;182    bottom: 0;183    left: 0;184    width: 1440px;185    height: 140px;186    background: #000000;187  }188  .home-pill {189    position: absolute;190    bottom: 42px;191    left: 50%;192    transform: translateX(-50%);193    width: 420px;194    height: 20px;195    background: #EEEEEE;196    border-radius: 12px;197    opacity: 0.8;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <div class="status-top"></div>205 206  <div class="toolbar-top">207    <div class="top-actions">208      <!-- Close (X) -->209      <div class="icon">210        <svg viewBox="0 0 100 100">211          <path d="M20 20 L80 80"></path>212          <path d="M80 20 L20 80"></path>213        </svg>214      </div>215 216      <!-- Undo -->217      <div class="icon">218        <svg viewBox="0 0 100 100">219          <path d="M35 40 L20 55 L35 70"></path>220          <path d="M20 55 Q55 55 80 75"></path>221        </svg>222      </div>223 224      <!-- Redo (muted) -->225      <div class="icon muted">226        <svg viewBox="0 0 100 100">227          <path d="M65 40 L80 55 L65 70"></path>228          <path d="M80 55 Q45 55 20 75"></path>229        </svg>230      </div>231 232      <!-- Add Image -->233      <div class="icon">234        <svg viewBox="0 0 100 100">235          <rect x="18" y="20" width="64" height="60" rx="8"></rect>236          <path d="M30 60 L45 45 L60 60 L70 52"></path>237          <circle cx="40" cy="35" r="6"></circle>238        </svg>239      </div>240 241      <!-- Compass/Measure -->242      <div class="icon">243        <svg viewBox="0 0 100 100">244          <path d="M50 25 L50 75"></path>245          <path d="M30 75 L50 25 L70 75"></path>246          <circle cx="50" cy="25" r="6"></circle>247        </svg>248      </div>249 250      <!-- Layers -->251      <div class="icon">252        <svg viewBox="0 0 100 100">253          <rect x="22" y="24" width="56" height="34" rx="6"></rect>254          <rect x="28" y="46" width="56" height="34" rx="6"></rect>255        </svg>256      </div>257    </div>258 259    <!-- Send Button -->260    <div class="send-btn">261      <svg viewBox="0 0 100 100">262        <path d="M20 50 L80 50"></path>263        <path d="M60 30 L80 50 L60 70" fill="#FFFFFF"></path>264      </svg>265    </div>266  </div>267 268  <!-- Canvas content -->269  <div class="canvas">270    <div class="scribble-small">271      <span>Quentin clark</span>272      <span>Quentin clark</span>273      <span>Quentin clark</span>274      <span>Quentin clark</span>275      <span>Q</span>276    </div>277 278    <div class="scribble-large">Quentin clark  Quen</div>279  </div>280 281  <!-- Bottom toolbar -->282  <div class="toolbar-bottom">283    <div class="color-wheel"></div>284 285    <!-- Brush -->286    <div class="bottom-icon">287      <svg viewBox="0 0 100 100">288        <path d="M65 25 L80 40 L45 75"></path>289        <path d="M40 80 Q30 90 20 80"></path>290      </svg>291    </div>292 293    <!-- Eraser -->294    <div class="bottom-icon">295      <svg viewBox="0 0 100 100">296        <path d="M30 65 L55 35 L80 55 L55 85 Z" fill="none"></path>297        <path d="M30 65 L20 75 L35 90 L55 85"></path>298      </svg>299    </div>300 301    <!-- Hand (pan) -->302    <div class="bottom-icon">303      <span class="hand-icon">✋</span>304    </div>305 306    <!-- Squiggle -->307    <div class="bottom-icon">308      <svg viewBox="0 0 100 100">309        <path d="M15 70 Q35 30 55 70 T95 70"></path>310      </svg>311    </div>312 313    <!-- Selection/Shape -->314    <div class="bottom-icon">315      <svg viewBox="0 0 100 100">316        <rect x="20" y="20" width="60" height="60" rx="8"></rect>317        <circle cx="70" cy="30" r="10"></circle>318      </svg>319    </div>320 321    <!-- Fill/Drop -->322    <div class="bottom-icon">323      <svg viewBox="0 0 100 100">324        <path d="M30 60 L55 35 L80 60 L55 85 Z"></path>325        <circle cx="78" cy="78" r="7"></circle>326      </svg>327    </div>328 329    <!-- Text tool active -->330    <div class="bottom-icon text-active">331      <svg viewBox="0 0 100 100">332        <path d="M20 30 H80"></path>333        <path d="M50 30 V80"></path>334        <path d="M62 58 L86 42" stroke="#1E86FF"></path>335      </svg>336    </div>337  </div>338 339  <div class="status-bottom">340    <div class="home-pill"></div>341  </div>342 343</div>344</body>345</html>