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>Color Picker UI</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: #6b6b6b;20  }21 22  /* Top status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 130px;29    background: #0a0a0a;30  }31 32  /* Modal color picker card */33  .picker-modal {34    position: absolute;35    left: 30px;36    top: 420px;37    width: 1020px;38    height: 1100px;39    background: #2f2f2f;40    border-radius: 12px;41    box-shadow: 0 20px 40px rgba(0,0,0,0.5);42    color: #eee;43  }44 45  .color-area {46    position: absolute;47    left: 36px;48    top: 90px;49    width: 870px;50    height: 650px;51    border: 3px solid #1a1a1a;52    border-radius: 4px;53    /* white->red with black at the bottom using blend */54    background:55      linear-gradient(to right, #ffffff 0%, #ff0000 100%),56      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);57    background-blend-mode: multiply;58    position: relative;59    box-shadow: inset 0 0 20px rgba(0,0,0,0.35);60  }61 62  .cursor {63    position: absolute;64    top: 40px;65    left: 560px;66    width: 28px;67    height: 28px;68    border-radius: 50%;69    border: 4px solid #111;70    box-shadow: 0 0 0 2px #e9e9e9 inset;71    background: transparent;72  }73 74  .hue-slider {75    position: absolute;76    left: 930px;77    top: 90px;78    width: 52px;79    height: 650px;80    border: 3px solid #1a1a1a;81    border-radius: 4px;82    background: linear-gradient(to bottom, red, magenta, blue, cyan, lime, yellow, orange, red);83    box-shadow: inset 0 0 12px rgba(0,0,0,0.35);84  }85  .hue-indicator {86    position: absolute;87    left: 930px;88    top: 713px;89    width: 52px;90    height: 10px;91    background: #b00000;92    border: 2px solid #000;93    border-radius: 6px;94  }95 96  /* Swatches */97  .swatch-row {98    position: absolute;99    left: 36px;100    width: 948px;101    display: flex;102    gap: 40px;103  }104  .swatch-row.row1 { top: 786px; }105  .swatch-row.row2 { top: 900px; }106 107  .swatch {108    width: 88px;109    height: 88px;110    border-radius: 50%;111    border: 5px solid #f1f1f1;112    box-shadow: 0 6px 10px rgba(0,0,0,0.35);113  }114 115  .preview {116    position: absolute;117    left: 90px;118    top: 1018px;119    width: 360px;120    height: 160px;121    border-radius: 6px;122    overflow: hidden;123    border: 2px solid #000;124    box-shadow: inset 0 0 8px rgba(0,0,0,0.4);125  }126  .preview .left { width: 50%; height: 100%; background: #000; float: left; }127  .preview .right { width: 50%; height: 100%; background: #ff5f5f; float: left; }128 129  .actions {130    position: absolute;131    right: 40px;132    bottom: 36px;133    display: flex;134    gap: 80px;135    align-items: center;136  }137  .action-text {138    font-size: 48px;139    letter-spacing: 4px;140    color: #9b59ff;141  }142 143  /* Small AD badge near bottom-left of modal */144  .ad-badge {145    position: absolute;146    left: 38px;147    bottom: -62px;148    width: 60px;149    height: 60px;150    border-radius: 50%;151    background: #e0d9ff;152    display: flex;153    align-items: center;154    justify-content: center;155    color: #6b35bf;156    font-weight: bold;157  }158 159  /* Bottom purple toolbar */160  .toolbar {161    position: absolute;162    left: 0;163    top: 1600px;164    width: 1080px;165    height: 260px;166    background: #7a1ba7;167    box-shadow: 0 -6px 18px rgba(0,0,0,0.4);168  }169  .toolbar-icons {170    position: absolute;171    left: 120px;172    top: 40px;173    width: 840px;174    display: flex;175    justify-content: space-between;176    align-items: center;177  }178  .tool {179    width: 96px;180    height: 96px;181    border-radius: 50%;182    background: rgba(255,255,255,0.1);183    display: flex;184    align-items: center;185    justify-content: center;186    border: 2px solid rgba(255,255,255,0.25);187  }188  .tool svg { width: 56px; height: 56px; fill: none; stroke: #f7f7f7; stroke-width: 5; }189 190  /* Ad strip under toolbar */191  .ad-strip {192    position: absolute;193    left: 0;194    top: 1860px;195    width: 1080px;196    height: 220px;197    background: #ffffff;198    border-top: 1px solid #ddd;199  }200  .ad-content {201    position: absolute;202    left: 30px;203    top: 20px;204    right: 30px;205    height: 180px;206    display: flex;207    align-items: center;208    gap: 28px;209  }210  .ad-image {211    width: 300px;212    height: 180px;213    background: #E0E0E0;214    border: 1px solid #BDBDBD;215    display: flex;216    justify-content: center;217    align-items: center;218    color: #757575;219    font-size: 28px;220  }221  .ad-text {222    flex: 1;223    color: #222;224  }225  .ad-title { font-size: 48px; font-weight: bold; margin-bottom: 8px; }226  .ad-sub { font-size: 30px; color: #555; }227  .ad-open {228    width: 160px;229    height: 90px;230    background: #28c943;231    color: #fff;232    border-radius: 16px;233    display: flex;234    align-items: center;235    justify-content: center;236    font-size: 36px;237    font-weight: bold;238  }239 240  /* Bottom home indicator */241  .home-indicator {242    position: absolute;243    left: 360px;244    bottom: 40px;245    width: 360px;246    height: 14px;247    background: #ffffff;248    border-radius: 8px;249    opacity: 0.8;250  }251</style>252</head>253<body>254<div id="render-target">255  <div class="status-bar"></div>256 257  <div class="picker-modal">258    <div class="color-area">259      <div class="cursor"></div>260    </div>261    <div class="hue-slider"></div>262    <div class="hue-indicator"></div>263 264    <div class="swatch-row row1">265      <div class="swatch" style="background:#000000;"></div>266      <div class="swatch" style="background:#1f1f1f;"></div>267      <div class="swatch" style="background:#9b6bd4;"></div>268      <div class="swatch" style="background:#8ccf70;"></div>269      <div class="swatch" style="background:#ff9567;"></div>270      <div class="swatch" style="background:#8ea8ff;"></div>271    </div>272    <div class="swatch-row row2">273      <div class="swatch" style="background:#ff5a58;"></div>274      <div class="swatch" style="background:#ff6b6b;"></div>275      <div class="swatch" style="background:#6fd3ff;"></div>276      <div class="swatch" style="background:#f6ea65;"></div>277      <div class="swatch" style="background:#ffa7c0;"></div>278      <div class="swatch" style="background:#68dce0;"></div>279    </div>280 281    <div class="preview">282      <div class="left"></div>283      <div class="right"></div>284    </div>285 286    <div class="actions">287      <div class="action-text">CANCEL</div>288      <div class="action-text">OK</div>289    </div>290 291    <div class="ad-badge">AD</div>292  </div>293 294  <div class="toolbar">295    <div class="toolbar-icons">296      <div class="tool">297        <!-- Color wheel icon -->298        <svg viewBox="0 0 24 24">299          <circle cx="12" cy="12" r="9" stroke="#fff" fill="none"></circle>300          <path d="M12 3v9l8-4" stroke="#fff"></path>301        </svg>302      </div>303      <div class="tool">304        <!-- Brush icon -->305        <svg viewBox="0 0 24 24">306          <path d="M3 20c4-1 5-2 6-4l9-9c1-1 3 1 2 2l-9 9c-2 1-3 2-4 6" stroke="#fff"></path>307        </svg>308      </div>309      <div class="tool">310        <!-- Eraser icon -->311        <svg viewBox="0 0 24 24">312          <path d="M4 16l8-8 8 8-6 4H8z" stroke="#fff"></path>313        </svg>314      </div>315      <div class="tool">316        <!-- Square icon -->317        <svg viewBox="0 0 24 24">318          <rect x="5" y="5" width="14" height="14" stroke="#fff"></rect>319        </svg>320      </div>321      <div class="tool">322        <!-- Pen tool icon -->323        <svg viewBox="0 0 24 24">324          <path d="M12 3l4 7-7-4-6 15 15-6-4-7" stroke="#fff"></path>325        </svg>326      </div>327      <div class="tool">328        <!-- Share/Export icon -->329        <svg viewBox="0 0 24 24">330          <path d="M12 4v10M8 8l4-4 4 4" stroke="#fff"></path>331          <rect x="5" y="14" width="14" height="6" stroke="#fff"></rect>332        </svg>333      </div>334    </div>335  </div>336 337  <div class="ad-strip">338    <div class="ad-content">339      <div class="ad-image">[IMG: Booking.com Ad]</div>340      <div class="ad-text">341        <div class="ad-title">Booking.com</div>342        <div class="ad-sub">4.7 ★  •  Sponsored</div>343      </div>344      <div class="ad-open">Open</div>345    </div>346  </div>347 348  <div class="home-indicator"></div>349</div>350</body>351</html>