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 { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #6e6e6e;12    border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);13  }14 15  /* Modal (color picker) */16  .modal {17    position: absolute;18    left: 40px; top: 420px;19    width: 1000px; height: 1150px;20    background: #2c2c2c;21    border-radius: 18px;22    box-shadow: 0 20px 60px rgba(0,0,0,0.45);23    color: #fff;24  }25  .picker-wrap {26    position: absolute;27    left: 60px; top: 60px;28    width: 780px; height: 780px;29    border-radius: 8px;30    overflow: hidden;31    border: 2px solid #1a1a1a;32    background:33      linear-gradient(to right, #ffffff, #ff0000),34      linear-gradient(to top, #000000, rgba(0,0,0,0));35    background-blend-mode: multiply;36  }37  .picker-cursor {38    position: absolute;39    width: 28px; height: 28px;40    border-radius: 50%;41    border: 3px solid #e6e6e6;42    box-shadow: 0 0 0 2px rgba(0,0,0,0.5);43    left: 12px; bottom: 12px;44  }45  .spectrum {46    position: absolute;47    right: 38px; top: 80px;48    width: 66px; height: 760px;49    border-radius: 6px;50    border: 2px solid #1a1a1a;51    background: linear-gradient(to bottom,52      #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff8000, #ff0000);53  }54  .spectrum-thumb {55    position: absolute;56    left: 2px; bottom: 48px;57    width: 62px; height: 18px;58    background: rgba(0,0,0,0.7);59    border: 2px solid #c33;60    border-radius: 4px;61  }62 63  /* Swatches */64  .swatches {65    position: absolute;66    left: 60px; top: 870px; right: 60px;67    display: grid;68    grid-template-columns: repeat(7, 1fr);69    gap: 26px 30px;70  }71  .swatch {72    width: 96px; height: 96px;73    border-radius: 50%;74    border: 4px solid #dedede;75    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3);76  }77  .swatch.black { background: #000; }78  .swatch.darkgray { background: #2a2a2a; }79  .swatch.purple { background: #9b6bdc; }80  .swatch.green { background: #7ec062; }81  .swatch.orange { background: #ff8a57; }82  .swatch.lavender { background: #8ea1ff; }83  .swatch.lightgreen { background: #b9e288; }84 85  .swatch.red { background: #ff4a4a; }86  .swatch.cyan { background: #58c9ff; }87  .swatch.yellow { background: #ffe26a; }88  .swatch.pink { background: #ff7fb5; }89  .swatch.teal { background: #53d2c2; }90  .swatch.pale { background: #efe5ff; }91  .swatch.glow { background: #e1ffad; }92 93  /* Preview squares and actions */94  .previews {95    position: absolute;96    left: 60px; bottom: 110px;97    display: flex; gap: 16px;98  }99  .preview-box {100    width: 260px; height: 170px;101    background: #000;102    border: 2px solid #3b3b3b;103  }104  .actions {105    position: absolute;106    right: 60px; bottom: 110px;107    display: flex; gap: 50px; align-items: center;108  }109  .btn-text {110    font-size: 48px; letter-spacing: 2px; text-transform: uppercase;111    color: #bb77ff;112  }113 114  /* Underlying app UI (behind modal) */115  .toolbar {116    position: absolute; left: 0; bottom: 360px;117    width: 1080px; height: 160px;118    background: #7f2bb7;119    display: flex; align-items: center; justify-content: space-around;120    padding: 0 40px; color: #fff;121  }122  .tool {123    width: 96px; height: 96px; border-radius: 50%;124    background: rgba(255,255,255,0.12);125    display: flex; align-items: center; justify-content: center;126    border: 2px solid rgba(255,255,255,0.25);127  }128  .tool svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 3; }129 130  .ad-banner {131    position: absolute; left: 0; bottom: 170px;132    width: 1080px; height: 190px;133    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;134    display: flex; align-items: center; justify-content: space-between;135    padding: 0 40px; color: #333; font-size: 42px;136  }137  .ad-open {138    background: #2ecc71; color: #fff; padding: 16px 40px; border-radius: 40px; font-weight: bold; font-size: 36px;139  }140 141  .home-indicator {142    position: absolute; left: 50%; transform: translateX(-50%);143    bottom: 60px; width: 200px; height: 8px;144    background: #ffffff; border-radius: 8px; opacity: 0.9;145  }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Modal Color Picker -->152  <div class="modal">153    <div class="picker-wrap">154      <div class="picker-cursor"></div>155    </div>156    <div class="spectrum">157      <div class="spectrum-thumb"></div>158    </div>159 160    <div class="swatches">161      <div class="swatch black"></div>162      <div class="swatch darkgray"></div>163      <div class="swatch purple"></div>164      <div class="swatch green"></div>165      <div class="swatch orange"></div>166      <div class="swatch lavender"></div>167      <div class="swatch lightgreen"></div>168 169      <div class="swatch red"></div>170      <div class="swatch cyan"></div>171      <div class="swatch yellow"></div>172      <div class="swatch pink"></div>173      <div class="swatch teal"></div>174      <div class="swatch pale"></div>175      <div class="swatch glow"></div>176    </div>177 178    <div class="previews">179      <div class="preview-box"></div>180      <div class="preview-box"></div>181    </div>182    <div class="actions">183      <div class="btn-text">Cancel</div>184      <div class="btn-text">OK</div>185    </div>186  </div>187 188  <!-- Underlying app toolbar -->189  <div class="toolbar">190    <div class="tool">191      <svg viewBox="0 0 24 24">192        <circle cx="12" cy="12" r="9"></circle>193        <circle cx="12" cy="12" r="3"></circle>194      </svg>195    </div>196    <div class="tool">197      <svg viewBox="0 0 24 24">198        <path d="M4 18l6-6 6-6 4 4-6 6-6 6-4-4z"></path>199      </svg>200    </div>201    <div class="tool">202      <svg viewBox="0 0 24 24">203        <path d="M5 16l7-10 7 6-7 10-7-6z"></path>204      </svg>205    </div>206    <div class="tool">207      <svg viewBox="0 0 24 24">208        <rect x="6" y="6" width="12" height="12"></rect>209      </svg>210    </div>211    <div class="tool">212      <svg viewBox="0 0 24 24">213        <path d="M15 7l-6 6M9 9l-3-3M7 15h10"></path>214      </svg>215    </div>216    <div class="tool">217      <svg viewBox="0 0 24 24">218        <path d="M12 5v8M8 9l4-4 4 4M6 19h12"></path>219      </svg>220    </div>221    <div class="tool">222      <svg viewBox="0 0 24 24">223        <path d="M5 5h6v6H5zM13 13h6v6h-6z"></path>224      </svg>225    </div>226  </div>227 228  <!-- Ad banner placeholder -->229  <div class="ad-banner">230    <div>[IMG: Ad Banner - Booking.com]</div>231    <div class="ad-open">Open</div>232  </div>233 234  <div class="home-indicator"></div>235</div>236</body>237</html>