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; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F4F4F4;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 18px; left: 24px; right: 24px;18    height: 70px; display: flex; align-items: center; justify-content: space-between;19    color: #545454; font-size: 38px;20  }21  .status-left { display: flex; align-items: center; gap: 22px; }22  .status-right { display: flex; align-items: center; gap: 22px; }23  .icon-dot { width: 10px; height: 10px; background:#7e7e7e; border-radius:50%; display:inline-block; }24 25  /* Tool cards */26  .card {27    position: absolute; top: 140px;28    background: #FFFFFF; border-radius: 28px;29    box-shadow: 0 6px 16px rgba(0,0,0,0.08);30  }31  .card.tool { left: 36px; width: 360px; height: 280px; padding: 26px; }32  .card.palette { left: 420px; width: 624px; height: 280px; padding: 26px; }33 34  /* Pencil icon */35  .pencil-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 24px; }36  .pencil {37    width: 76px; height: 180px; position: relative;38  }39  .pencil .shaft {40    position: absolute; bottom: 0; left: 18px; right: 18px; height: 140px;41    background: linear-gradient(90deg,#222,#2A2A2A 50%,#222 100%);42  }43  .pencil .wood {44    position: absolute; top: 0; left: 18px; right: 18px; height: 40px;45    background: #E9D2B0;46    clip-path: polygon(50% 0, 100% 100%, 0 100%);47  }48  .pencil .tip {49    position: absolute; top: 8px; left: 34px; right: 34px; height: 22px;50    background: #2A2A2A;51    clip-path: polygon(50% 0, 100% 100%, 0 100%);52  }53  .pencil .blue {54    position: absolute; top: -2px; left: 40px; right: 40px; height: 20px;55    background: #3EA7FF;56    clip-path: polygon(50% 0, 100% 100%, 0 100%);57  }58  .chevron {59    margin-left: auto; width: 42px; height: 42px; border-radius: 50%;60    display: flex; align-items: center; justify-content: center; color: #8A8A8A; background: #F7F7F7;61  }62  .chevron svg { width: 24px; height: 24px; }63 64  /* Palette swatches */65  .swatches {66    display: flex; flex-wrap: wrap; gap: 28px; padding-right: 12px;67  }68  .swatch {69    width: 88px; height: 88px; border-radius: 50%;70    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.04);71  }72  .swatch.gradient { background: conic-gradient(#ff6a00, #ffea00, #39e6c6, #735bff, #ff3aa6, #ff6a00); }73  .swatch.red { background: #F44336; }74  .swatch.orange { background: #FFB300; }75  .swatch.yellow { background: #FFEB3B; }76  .swatch.teal { background: #3DDAD6; }77  .swatch.blue { background: #1E88E5; position: relative; }78  .swatch.purple { background: #7E57C2; }79  .swatch.black { background: #212121; }80  .swatch-grid { width: 88px; height: 88px; border-radius: 12px; background: #FFF; border: 2px solid #E0E0E0; position: relative; }81  .swatch-grid::before {82    content:""; position:absolute; inset: 18px 18px;83    background:84      radial-gradient(circle at 25% 25%, #F44336 8px, transparent 9px),85      radial-gradient(circle at 75% 25%, #FFB300 8px, transparent 9px),86      radial-gradient(circle at 25% 75%, #1E88E5 8px, transparent 9px),87      radial-gradient(circle at 75% 75%, #7E57C2 8px, transparent 9px);88    background-size: 50% 50%;89  }90  .check {91    position: absolute; width: 34px; height: 34px; border-radius: 50%;92    background: #FFFFFF; right: -6px; bottom: -6px; box-shadow: 0 2px 6px rgba(0,0,0,0.12);93    display: flex; align-items: center; justify-content: center;94  }95  .check svg { width: 22px; height: 22px; color: #1E88E5; }96  .palette-footer {97    position: absolute; bottom: 16px; left: 26px; right: 26px; display: flex; align-items: center; gap: 18px; color: #8C8C8C;98  }99  .page-dots { display: flex; align-items: center; gap: 12px; margin-left: auto; }100  .page-dots span { width: 10px; height: 10px; border-radius: 50%; background: #D0D0D0; }101  .page-dots span.active { background: #9E9E9E; }102 103  /* Canvas area placeholder rectangle */104  .canvas-rect {105    position: absolute;106    left: 230px; top: 1680px; width: 620px; height: 460px;107    background: #FFFFFF; border: 1px solid #E6E6E6; box-shadow: 0 2px 8px rgba(0,0,0,0.05);108  }109 110  /* Floating helper button (zoom/target) */111  .float-btn {112    position: absolute; right: 64px; bottom: 420px;113    width: 92px; height: 92px; border-radius: 50%;114    background: #FFFFFF; border: 1px solid #E2E2E2; box-shadow: 0 6px 18px rgba(0,0,0,0.08);115    display: flex; align-items: center; justify-content: center;116  }117  .float-btn svg { width: 42px; height: 42px; color: #7E7E7E; }118 119  /* Bottom toolbar */120  .toolbar {121    position: absolute; left: 0; right: 0; bottom: 0; height: 170px;122    background: #FFFFFF; border-top: 1px solid #E8E8E8;123    display: flex; align-items: center; padding: 0 24px; gap: 26px;124    box-shadow: 0 -8px 24px rgba(0,0,0,0.05);125  }126  .tool {127    width: 112px; height: 112px; border-radius: 26px; display: flex; align-items: center; justify-content: center;128    color: #7B7B7B; background: #FAFAFA;129  }130  .tool svg { width: 48px; height: 48px; }131  .tool.small { width: 112px; }132  .send-wrap { margin-left: auto; }133  .send-btn {134    width: 110px; height: 110px; border-radius: 50%;135    background: #2EA7FF; display: flex; align-items: center; justify-content: center;136    box-shadow: 0 10px 26px rgba(46,167,255,0.45);137  }138  .send-btn svg { width: 44px; height: 44px; color: #FFFFFF; }139 140  /* Gesture pill */141  .gesture-pill {142    position: absolute; left: 50%; transform: translateX(-50%);143    bottom: 186px; width: 340px; height: 10px; border-radius: 6px; background: #BDBDBD;144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-left">153      <span style="font-weight:600;">3:42</span>154      <span style="font-size:28px; color:#888;">36°</span>155      <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#777" stroke-width="2"/><path d="M12 2v20M2 12h20" stroke="#777" stroke-width="1.5"/></svg>156      <span style="font-size:28px; color:#777;">my</span>157      <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M3 18h18l-2-6H5l-2 6z" stroke="#777" stroke-width="1.6"/><path d="M7 18v-6m10 6v-6" stroke="#777" stroke-width="1.6"/></svg>158      <span class="icon-dot"></span>159    </div>160    <div class="status-right">161      <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><path d="M3 18l9-12 9 12" stroke="#777" stroke-width="1.8"/></svg>162      <svg width="34" height="34" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="3" stroke="#777" stroke-width="1.8"/><path d="M4 8h16" stroke="#777" stroke-width="1.8"/></svg>163    </div>164  </div>165 166  <!-- Left Tool Card with Pencil -->167  <div class="card tool">168    <div class="pencil-wrap">169      <div class="pencil">170        <div class="wood"></div>171        <div class="blue"></div>172        <div class="tip"></div>173        <div class="shaft"></div>174      </div>175      <div class="chevron">176        <svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>177      </div>178    </div>179  </div>180 181  <!-- Right Palette Card with Color Swatches -->182  <div class="card palette">183    <div class="swatches">184      <div class="swatch red"></div>185      <div class="swatch orange"></div>186      <div class="swatch yellow"></div>187      <div class="swatch teal"></div>188      <div class="swatch gradient"></div>189 190      <div class="swatch blue">191        <div class="check">192          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>193        </div>194      </div>195      <div class="swatch blue" style="background:#2962FF;"></div>196      <div class="swatch purple"></div>197      <div class="swatch black"></div>198      <div class="swatch-grid"></div>199    </div>200    <div class="palette-footer">201      <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#999" stroke-width="1.6"/><path d="M12 7v6l4 2" stroke="#999" stroke-width="1.6" stroke-linecap="round"/></svg>202      <div class="page-dots">203        <span class="active"></span><span></span><span></span>204      </div>205    </div>206  </div>207 208  <!-- Large canvas area representation -->209  <div class="canvas-rect"></div>210 211  <!-- Floating zoom/target button -->212  <div class="float-btn">213    <svg viewBox="0 0 24 24" fill="none">214      <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.6"/>215      <path d="M12 4v4M12 16v4M4 12h4M16 12h4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>216    </svg>217  </div>218 219  <!-- Bottom Toolbar -->220  <div class="toolbar">221    <div class="tool">222      <svg viewBox="0 0 24 24" fill="none"><path d="M6 18h12v-4L14 6H10L6 14v4z" stroke="currentColor" stroke-width="1.8"/><path d="M10 6l1.5 4" stroke="currentColor" stroke-width="1.4"/></svg>223    </div>224    <div class="tool">225      <svg viewBox="0 0 24 24" fill="none"><path d="M15 7l-5 5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 12h-7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>226    </div>227    <div class="tool">228      <svg viewBox="0 0 24 24" fill="none"><path d="M9 7l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 12h7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>229    </div>230    <div class="tool">231      <svg viewBox="0 0 24 24" fill="none"><path d="M6 14l6-8 6 8H6z" stroke="currentColor" stroke-width="1.8"/><path d="M6 18h12" stroke="currentColor" stroke-width="1.8"/></svg>232    </div>233    <div class="tool">234      <svg viewBox="0 0 24 24" fill="none"><rect x="6" y="6" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M10 10h4v4h-4z" stroke="currentColor" stroke-width="1.2"/></svg>235    </div>236    <div class="tool">237      <svg viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="1.8" stroke-dasharray="3 3"/></svg>238    </div>239    <div class="tool">240      <svg viewBox="0 0 24 24" fill="none">241        <path d="M12 2v6M12 16v6M2 12h6M16 12h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>242        <circle cx="12" cy="12" r="2" fill="currentColor"/>243      </svg>244    </div>245    <div class="tool">246      <svg viewBox="0 0 24 24" fill="none"><path d="M4 4h16v16H4zM8 8h8v8H8z" stroke="currentColor" stroke-width="1.6"/></svg>247    </div>248 249    <div class="send-wrap">250      <div class="send-btn">251        <svg viewBox="0 0 24 24" fill="none"><path d="M3 11l18-8-8 18-2-8-8-2z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/></svg>252      </div>253    </div>254  </div>255 256  <!-- Gesture pill above toolbar -->257  <div class="gesture-pill"></div>258 259</div>260</body>261</html>