GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Color Picker UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 8  /* Root render target */9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #6d6d6d; /* dimmed backdrop */15  }16 17  /* Centered modal/picker */18  .picker-panel {19    position: absolute;20    left: 60px;21    top: 520px;22    width: 960px;23    height: 1160px;24    background: #2e2e2e;25    border-radius: 10px;26    box-shadow: 0 20px 60px rgba(0,0,0,0.45);27    padding: 40px;28    color: #eee;29  }30 31  .top-area {32    display: flex;33    gap: 24px;34  }35 36  .gradient-board {37    position: relative;38    width: 780px;39    height: 700px;40    border: 2px solid #3f3f3f;41    border-radius: 4px;42    background:43      linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)),44      linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)),45      linear-gradient(to right, #ffffff, #ff3d33);46  }47 48  .knob {49    position: absolute;50    width: 26px; height: 26px;51    border: 3px solid #fff;52    border-radius: 50%;53    box-shadow: 0 0 0 2px #191919 inset;54    top: 10px; left: 560px; /* approximate position like screenshot */55    background: rgba(255,255,255,0.05);56  }57 58  .rainbow {59    position: relative;60    width: 80px;61    height: 700px;62    border-radius: 4px;63    border: 2px solid #3f3f3f;64    background: linear-gradient(to bottom,65      #ff0040 0%,66      #ff0000 10%,67      #ff7f00 20%,68      #ffff00 30%,69      #a8ff00 40%,70      #00ff8a 50%,71      #00ffff 60%,72      #0060ff 70%,73      #6a00ff 80%,74      #ff00ff 90%,75      #ff4017 100%);76  }77 78  .slider-thumb {79    position: absolute;80    left: 8px;81    bottom: 16px;82    width: 60px;83    height: 8px;84    background: #1b1b1b;85    border-radius: 4px;86    box-shadow: 0 0 0 2px rgba(255,255,255,0.15);87  }88 89  .swatch-row {90    display: flex;91    gap: 48px;92    margin-top: 42px;93    padding-left: 20px;94  }95 96  .swatch {97    width: 96px; height: 96px;98    border-radius: 50%;99    border: 4px solid #ffffff;100    box-shadow: 0 1px 0 rgba(0,0,0,0.5);101  }102 103  /* Individual swatch colors approximating screenshot */104  .c-red1  { background: #ea5c55; }105  .c-red2  { background: #e85f56; }106  .c-red3  { background: #e35753; }107  .c-blue  { background: #7ec5f3; }108  .c-yellow{ background: #f6e57c; }109  .c-pink  { background: #e68aa6; }110  .c-cyan  { background: #7fd0ff; }111 112  .c-black { background: #000; }113  .c-violet{ background: #8b70d9; }114  .c-green { background: #98c88e; }115  .c-orange{ background: #f19c74; }116  .c-slate { background: #8593c6; }117  .c-mint  { background: #8fd8c7; }118 119  .patches-actions {120    display: flex;121    align-items: center;122    justify-content: space-between;123    margin-top: 48px;124  }125 126  .patches {127    display: flex;128    gap: 20px;129  }130 131  .patch {132    width: 250px;133    height: 200px;134    background: #e56459;135    border-radius: 6px;136    border: 2px solid #3f3f3f;137  }138 139  .actions {140    display: flex;141    gap: 60px;142    align-items: center;143  }144 145  .btn-text {146    color: #8c4bff;147    font-size: 54px;148    letter-spacing: 4px;149    font-weight: 600;150  }151 152  /* Small hint of the purple toolbar at the very bottom (background app area) */153  .bottom-toolbar {154    position: absolute;155    left: 0;156    bottom: 0;157    width: 1080px;158    height: 180px;159    background: #5d2a7b;160    opacity: 0.9;161  }162 163  .toolbar-icon {164    width: 72px;165    height: 72px;166    background: rgba(255,255,255,0.25);167    border-radius: 50%;168    margin: 54px 28px;169    display: inline-block;170  }171</style>172</head>173<body>174<div id="render-target">175 176  <!-- Color picker panel -->177  <div class="picker-panel">178    <div class="top-area">179      <div class="gradient-board">180        <div class="knob"></div>181      </div>182      <div class="rainbow">183        <div class="slider-thumb"></div>184      </div>185    </div>186 187    <!-- Swatch rows -->188    <div class="swatch-row">189      <div class="swatch c-red1"></div>190      <div class="swatch c-red2"></div>191      <div class="swatch c-red3"></div>192      <div class="swatch c-blue"></div>193      <div class="swatch c-yellow"></div>194      <div class="swatch c-pink"></div>195      <div class="swatch c-cyan"></div>196    </div>197 198    <div class="swatch-row">199      <div class="swatch c-black"></div>200      <div class="swatch c-red2"></div>201      <div class="swatch c-black" style="background:#0b0b0b;"></div>202      <div class="swatch c-violet"></div>203      <div class="swatch c-green"></div>204      <div class="swatch c-orange"></div>205      <div class="swatch c-slate"></div>206    </div>207 208    <div class="patches-actions">209      <div class="patches">210        <div class="patch"></div>211        <div class="patch"></div>212      </div>213      <div class="actions">214        <div class="btn-text">CANCEL</div>215        <div class="btn-text">OK</div>216      </div>217    </div>218  </div>219 220  <!-- Background app toolbar hint -->221  <div class="bottom-toolbar">222    <span class="toolbar-icon"></span>223    <span class="toolbar-icon"></span>224    <span class="toolbar-icon"></span>225    <span class="toolbar-icon"></span>226    <span class="toolbar-icon"></span>227  </div>228 229</div>230</body>231</html>