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">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111111;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #ffffff;17  }18 19  /* Top action bar */20  .topbar {21    position: relative;22    height: 150px;23    background: #1d1d1d;24    display: flex;25    align-items: center;26    padding: 0 28px;27    gap: 30px;28  }29  .icon-btn {30    width: 56px;31    height: 56px;32    display: inline-flex;33    align-items: center;34    justify-content: center;35    color: #e6e6e6;36    opacity: 0.9;37  }38  .icon-btn svg { width: 42px; height: 42px; stroke: #e6e6e6; }39  .spacer { margin-left: auto; }40 41  .next-wrap {42    width: 66px; height: 66px;43    background: #f2f2f2;44    border-radius: 33px;45    display: flex; align-items: center; justify-content: center;46    margin-right: 8px;47  }48  .next-wrap svg { width: 34px; height: 34px; stroke: #111; }49 50  /* Editing canvas area */51  .canvas-area {52    height: 1550px;53    background: #111111;54    position: relative;55    display: flex;56    align-items: center;57    justify-content: center;58  }59 60  /* Central artwork placeholder (circular) */61  .artboard {62    width: 920px;63    height: 920px;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    border-radius: 50%;67    position: relative;68    display: flex;69    align-items: center;70    justify-content: center;71    color: #757575;72    text-transform: none;73    font-size: 24px;74    box-shadow:75      0 0 0 0 rgba(0,0,0,0);76  }77 78  /* Soft vignette and subtle glitter ring approximation */79  .glitter-ring {80    position: absolute;81    inset: -50px;82    border-radius: 50%;83    pointer-events: none;84    background:85      radial-gradient(closest-side, rgba(0,0,0,0) 78%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0) 81%),86      radial-gradient(circle, rgba(212,175,55,0.30) 78%, rgba(212,175,55,0.08) 82%, rgba(212,175,55,0) 86%);87    /* gives a hint of gold speckles feel around the circle */88    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 88%);89  }90 91  /* Red drawn triangle stroke */92  .triangle-svg {93    position: absolute;94    width: 720px;95    height: 720px;96  }97  .triangle-svg path {98    fill: none;99    stroke: #ff4d58;100    stroke-width: 20;101    stroke-linecap: round;102    stroke-linejoin: round;103    filter: drop-shadow(0 0 6px rgba(255, 80, 90, 0.8));104  }105 106  /* Bottom toolbar */107  .toolbar {108    height: 220px;109    background: #1d1d1d;110    display: flex;111    align-items: center;112    justify-content: space-around;113    padding: 0 18px;114  }115  .tool {116    width: 150px;117    height: 160px;118    display: flex;119    flex-direction: column;120    align-items: center;121    justify-content: flex-start;122    color: #ffffff;123    gap: 16px;124    font-size: 26px;125  }126  .tool svg {127    width: 64px; height: 64px; stroke: #ffffff; fill: none; stroke-width: 2.6;128  }129  .tool .label { font-size: 26px; color: #eaeaea; }130 131  /* Ad banner area */132  .ad-area {133    height: 160px;134    background: #111;135    display: flex;136    align-items: center;137    justify-content: center;138    position: relative;139  }140  .ad-placeholder {141    width: 940px;142    height: 120px;143    background: #E0E0E0;144    border: 1px solid #BDBDBD;145    display: flex;146    align-items: center;147    justify-content: center;148    color: #757575;149    font-size: 28px;150  }151  .info-dot {152    position: absolute;153    left: 18px;154    bottom: 20px;155    width: 28px; height: 28px;156    border-radius: 14px;157    background: #2b2b2b;158    border: 1px solid #444;159    display: flex; align-items: center; justify-content: center;160    color: #d9d9d9; font-weight: 600;161    font-size: 18px;162  }163 164  /* Home indicator */165  .home-indicator {166    position: absolute;167    left: 50%;168    bottom: 26px;169    transform: translateX(-50%);170    width: 390px;171    height: 8px;172    background: #ffffff;173    border-radius: 4px;174    opacity: 0.85;175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Top Action Bar -->182  <div class="topbar">183    <!-- Back arrow -->184    <div class="icon-btn" aria-label="Back">185      <svg viewBox="0 0 48 48">186        <path d="M30 8 L14 24 L30 40" stroke-width="3" fill="none"/>187      </svg>188    </div>189 190    <!-- Undo -->191    <div class="icon-btn" aria-label="Undo">192      <svg viewBox="0 0 48 48">193        <path d="M18 18 L10 24 L18 30" stroke-width="3" fill="none"/>194        <path d="M10 24 C14 14, 30 14, 36 24 C42 34, 30 38, 24 36" stroke-width="3" fill="none"/>195      </svg>196    </div>197 198    <!-- Redo (dimmed) -->199    <div class="icon-btn" aria-label="Redo" style="opacity:0.35;">200      <svg viewBox="0 0 48 48">201        <path d="M30 18 L38 24 L30 30" stroke-width="3" fill="none"/>202        <path d="M38 24 C34 14, 18 14, 12 24 C6 34, 18 38, 24 36" stroke-width="3" fill="none"/>203      </svg>204    </div>205 206    <!-- Download -->207    <div class="icon-btn" aria-label="Download">208      <svg viewBox="0 0 48 48">209        <path d="M24 10 L24 28" stroke-width="3" fill="none"/>210        <path d="M16 20 L24 28 L32 20" stroke-width="3" fill="none"/>211        <path d="M10 36 H38" stroke-width="3" fill="none"/>212      </svg>213    </div>214 215    <!-- Spacer pushes Next to the far right -->216    <div class="spacer"></div>217 218    <!-- Next (white circular button) -->219    <div class="next-wrap" aria-label="Next">220      <svg viewBox="0 0 48 48">221        <path d="M16 12 L32 24 L16 36" stroke-width="3" fill="none"/>222      </svg>223    </div>224  </div>225 226  <!-- Editing Canvas Area -->227  <div class="canvas-area">228    <div class="artboard">229      [IMG: Glitter Circle Artwork]230      <div class="glitter-ring"></div>231 232      <!-- Red freehand triangle -->233      <svg class="triangle-svg" viewBox="0 0 720 720">234        <path d="M360 140 L280 600 L620 600 Z" />235      </svg>236    </div>237  </div>238 239  <!-- Bottom Tools -->240  <div class="toolbar">241    <div class="tool">242      <svg viewBox="0 0 64 64" aria-hidden="true">243        <rect x="8" y="12" width="48" height="36" rx="4"></rect>244        <path d="M12 42 L26 28 L36 38 L52 22" stroke-linecap="round"></path>245      </svg>246      <div class="label">Add Photo</div>247    </div>248 249    <div class="tool">250      <svg viewBox="0 0 64 64" aria-hidden="true">251        <path d="M14 44 L30 16 L44 24 L28 52 Z" fill="none"></path>252        <path d="M48 48 L56 56" stroke-linecap="round"></path>253      </svg>254      <div class="label">Remove</div>255    </div>256 257    <div class="tool">258      <svg viewBox="0 0 64 64" aria-hidden="true">259        <path d="M20 28 L12 32 L20 36" stroke-linecap="round"></path>260        <path d="M12 32 C16 20, 40 20, 48 32 C56 44, 38 48, 30 46" stroke-linecap="round"></path>261      </svg>262      <div class="label">Replay</div>263    </div>264 265    <div class="tool">266      <svg viewBox="0 0 64 64" aria-hidden="true">267        <rect x="10" y="12" width="44" height="28" rx="3"></rect>268        <path d="M10 48 H54" stroke-linecap="round"></path>269        <path d="M16 32 L26 22 L34 30 L44 18" stroke-linecap="round"></path>270      </svg>271      <div class="label">Fit</div>272    </div>273 274    <div class="tool">275      <svg viewBox="0 0 64 64" aria-hidden="true">276        <path d="M20 44 Q28 30 24 20" stroke-linecap="round"></path>277        <path d="M34 18 L44 14 L40 24" stroke-linecap="round"></path>278      </svg>279      <div class="label">Brushes</div>280    </div>281 282    <div class="tool">283      <svg viewBox="0 0 64 64" aria-hidden="true">284        <rect x="12" y="12" width="40" height="30" rx="4"></rect>285        <rect x="10" y="46" width="44" height="6" rx="3"></rect>286      </svg>287      <div class="label">Border</div>288    </div>289  </div>290 291  <!-- Ad banner -->292  <div class="ad-area">293    <div class="ad-placeholder">[IMG: Ad - Profit from Crypto]</div>294    <div class="info-dot">i</div>295  </div>296 297  <!-- Home indicator -->298  <div class="home-indicator"></div>299 300</div>301</body>302</html>