GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 8  /* Root container */9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    /* layered gradients to mimic the soft glow to black */15    background:16      radial-gradient(900px circle at 170px 560px, rgba(255,255,255,1) 0%, #bdbdbd 40%, #666 65%, #000 100%),17      radial-gradient(720px circle at 480px 900px, rgba(255,255,255,0.9) 0%, #7c7c7c 40%, #202020 75%, #000 100%),18      linear-gradient(#0a0a0a, #000000);19  }20 21  /* Top toolbar */22  .toolbar {23    position: absolute;24    top: 110px;25    left: 24px;26    width: 1032px;27    height: 120px;28    background: #eaeaea;29    border-radius: 12px;30    box-shadow: 0 6px 18px rgba(0,0,0,0.25);31    display: flex;32    align-items: center;33    padding: 0 26px;34    gap: 36px;35  }36  .tool-btn {37    width: 96px;38    height: 96px;39    display: flex;40    justify-content: center;41    align-items: center;42  }43  .tool-btn svg { width: 70px; height: 70px; fill: #666; stroke: #666; }44 45  /* color wheel mock */46  .color-wheel {47    width: 78px;48    height: 78px;49    border-radius: 50%;50    background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red);51    border: 6px solid #e1e1e1;52    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.75);53  }54 55  /* Floating options panel */56  .floating-panel {57    position: absolute;58    top: 250px;59    left: 130px;60    width: 820px;61    height: 120px;62    background: #2f2f2f;63    border-radius: 12px;64    box-shadow: 0 10px 24px rgba(0,0,0,0.35);65    display: flex;66    align-items: center;67    padding: 0 24px;68    color: #fff;69  }70  .panel-left { display: flex; align-items: center; gap: 22px; }71  .panel-right { margin-left: auto; }72  .panel-square {73    width: 70px;74    height: 70px;75    border-radius: 6px;76    border: 2px solid #bcbcbc;77    background: #ffffff;78  }79  .panel-square.gray {80    background: linear-gradient(#fafafa, #c1c1c1);81    border-color: #9d9d9d;82  }83  .panel-square.dark {84    background: radial-gradient(circle at 50% 40%, #3b6fb2 20%, #0b2a56 60%, #0e0e0e 100%);85    border-color: #6ea0d6;86  }87  .panel-icon {88    width: 70px; height: 70px; border-radius: 8px;89    background: #3a3a3a;90    display: flex; justify-content: center; align-items: center;91  }92  .panel-icon svg { width: 44px; height: 44px; stroke: #e0e0e0; fill: none; stroke-width: 3; }93  .check-btn svg { width: 60px; height: 60px; stroke: #ffffff; stroke-width: 7; fill: none; }94 95  /* Guide line with handles */96  .guide-line {97    position: absolute;98    top: 540px;99    left: 120px;100    width: 860px;101    border-top: 3px dashed rgba(220,220,220,0.6);102  }103  .handle {104    position: absolute;105    top: -40px;106    width: 88px;107    height: 88px;108    border-radius: 50%;109    background: rgba(255,255,255,0.02);110    border: 6px solid #e7e7e7;111    box-shadow: 0 0 0 2px rgba(0,0,0,0.15) inset;112  }113  .handle.left { left: -10px; }114  .handle.middle {115    left: 380px;116    border-color: #8ab7ff;117    background: radial-gradient(circle, rgba(108,167,255,0.9) 0%, rgba(108,167,255,0.15) 60%, rgba(255,255,255,0.02) 100%);118  }119  .handle.right { right: -10px; border-color: #cfcfcf; }120 121  /* Red selection rectangle */122  .selection-rect {123    position: absolute;124    left: 240px;125    top: 780px;126    width: 600px;127    height: 1000px;128    border: 3px dashed #ff7575;129    border-radius: 6px;130    box-shadow: inset 0 0 120px rgba(255,255,255,0.08);131  }132 133  /* bottom spinner */134  .spinner {135    position: absolute;136    left: 50%;137    bottom: 70px;138    width: 44px;139    height: 44px;140    margin-left: -22px;141    border-radius: 50%;142    border: 6px solid #d0d0d0;143    border-top-color: #6f6f6f;144  }145</style>146</head>147<body>148<div id="render-target">149 150  <!-- Top toolbar -->151  <div class="toolbar">152    <div class="tool-btn">153      <svg viewBox="0 0 24 24">154        <rect x="3" y="5" width="18" height="2"></rect>155        <rect x="3" y="11" width="18" height="2"></rect>156        <rect x="3" y="17" width="18" height="2"></rect>157      </svg>158    </div>159    <div class="tool-btn">160      <svg viewBox="0 0 24 24">161        <path d="M15 5l-7 7 7 7"></path>162        <path d="M14 12H4"></path>163      </svg>164    </div>165    <div class="tool-btn">166      <svg viewBox="0 0 24 24">167        <path d="M5 12h10"></path>168        <path d="M13 6l6 6-6 6" fill="none"></path>169      </svg>170    </div>171    <div class="tool-btn">172      <svg viewBox="0 0 24 24">173        <rect x="3" y="3" width="6" height="6"></rect>174        <rect x="9" y="3" width="6" height="6"></rect>175        <rect x="15" y="3" width="6" height="6"></rect>176        <rect x="3" y="9" width="6" height="6"></rect>177        <rect x="9" y="9" width="6" height="6"></rect>178        <rect x="15" y="9" width="6" height="6"></rect>179        <rect x="3" y="15" width="6" height="6"></rect>180        <rect x="9" y="15" width="6" height="6"></rect>181        <rect x="15" y="15" width="6" height="6"></rect>182      </svg>183    </div>184    <div class="tool-btn">185      <svg viewBox="0 0 24 24">186        <path d="M3 21l7-3 8-12-3-3-12 8-3 7z"></path>187      </svg>188    </div>189    <div class="tool-btn">190      <div class="color-wheel"></div>191    </div>192    <div class="tool-btn">193      <svg viewBox="0 0 24 24">194        <path d="M6 14l6-3 6 3-6 3-6-3z"></path>195        <path d="M6 10l6-3 6 3"></path>196      </svg>197    </div>198    <div class="tool-btn">199      <svg viewBox="0 0 24 24">200        <path d="M4 7h6v-3h10v14h-3v-6h-7v3h-6z"></path>201      </svg>202    </div>203  </div>204 205  <!-- Options floating panel -->206  <div class="floating-panel">207    <div class="panel-left">208      <div class="tool-btn" style="width:70px;height:70px;">209        <svg viewBox="0 0 24 24">210          <path d="M5 5L19 19"></path>211          <path d="M19 5L5 19"></path>212        </svg>213      </div>214      <div class="panel-square"></div>215      <div class="panel-square gray"></div>216      <div class="panel-square dark"></div>217      <div class="panel-icon">218        <svg viewBox="0 0 24 24">219          <circle cx="12" cy="12" r="4"></circle>220          <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2 2M17.5 17.5l2 2M4.5 19.5l2-2M17.5 6.5l2-2"></path>221        </svg>222      </div>223    </div>224    <div class="panel-right">225      <div class="tool-btn check-btn" style="width:80px;height:80px;">226        <svg viewBox="0 0 24 24">227          <path d="M4 12l6 6 10-12"></path>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Guide line and draggable handles -->234  <div class="guide-line">235    <div class="handle left"></div>236    <div class="handle middle"></div>237    <div class="handle right"></div>238  </div>239 240  <!-- Red selection rectangle -->241  <div class="selection-rect"></div>242 243  <!-- Bottom spinner -->244  <div class="spinner"></div>245</div>246</body>247</html>