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>Post to Picsart - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FAFAFA;15    color: #333;16  }17 18  /* Status bar */19  .status-bar {20    height: 100px;21    background: #000;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 32px;26    font-weight: 600;27    font-size: 38px;28    box-sizing: border-box;29    justify-content: space-between;30  }31  .sb-left, .sb-right { display: flex; align-items: center; gap: 24px; }32  .dot-icon {33    width: 28px; height: 28px; border-radius: 50%; background: #BDBDBD;34  }35  .wifi-icon, .battery-icon { display: inline-flex; align-items: center; }36  .wifi-icon svg, .battery-icon svg { width: 44px; height: 44px; fill: #fff; }37 38  /* Header */39  .app-bar {40    height: 140px;41    background: #FFFFFF;42    display: flex;43    align-items: center;44    box-sizing: border-box;45    padding: 0 32px;46    border-bottom: 1px solid #eee;47  }48  .back-btn {49    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-right: 12px;50  }51  .title {52    font-size: 50px; font-weight: 700; color: #4A4A4A;53  }54  .skip {55    margin-left: auto;56    font-size: 44px;57    font-weight: 700;58    color: #7C4DFF;59  }60 61  /* Content */62  .content {63    padding: 32px;64  }65 66  .preview-card {67    width: 1016px;68    height: 1016px;69    background: #fff;70    border-radius: 24px;71    margin: 24px auto 32px auto;72    position: relative;73    box-shadow: 0 2px 8px rgba(0,0,0,0.06);74    display: flex; align-items: center; justify-content: center;75  }76  .img-placeholder {77    width: 90%;78    height: 90%;79    background: #E0E0E0;80    border: 1px solid #BDBDBD;81    color: #757575;82    display: flex; align-items: center; justify-content: center;83    text-align: center;84    border-radius: 24px;85    font-size: 40px;86    padding: 24px;87    box-sizing: border-box;88  }89  .gif-chip {90    position: absolute;91    right: 28px;92    bottom: 28px;93    width: 140px; height: 140px;94    border-radius: 50%;95    background: rgba(0,0,0,0.12);96    display: flex; align-items: center; justify-content: center;97    color: #fff;98    font-weight: 800;99    letter-spacing: 1px;100  }101  .gif-chip .play {102    position: absolute;103    left: 30px;104  }105  .gif-chip svg { fill: #fff; width: 42px; height: 42px; }106 107  .input-prompt {108    font-size: 44px; color: #7A7A7A; margin: 24px 8px;109  }110  .divider {111    height: 1px; background: #E0E0E0; margin: 16px 0 24px 0;112  }113 114  .subhead { font-size: 42px; color: #777; margin: 12px 8px; }115 116  .chips { display: flex; gap: 20px; flex-wrap: wrap; padding: 8px 0 24px 0; }117  .chip {118    background: #EEEEEE;119    color: #444;120    border-radius: 40px;121    padding: 18px 28px;122    font-size: 40px;123  }124 125  .row {126    display: flex; align-items: center; justify-content: space-between;127    padding: 24px 8px;128  }129  .row .label { font-size: 48px; color: #333; display: flex; align-items: center; gap: 16px; }130  .info-icon {131    width: 48px; height: 48px; border-radius: 50%;132    border: 3px solid #111; color: #111; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;133    font-size: 34px;134  }135 136  /* Toggle */137  .toggle.on {138    width: 140px; height: 72px; border-radius: 40px; background: #6F2BFF; position: relative;139    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.08);140  }141  .toggle .knob {142    position: absolute; top: 8px; right: 8px;143    width: 56px; height: 56px; border-radius: 50%;144    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);145  }146 147  /* Actions */148  .actions {149    position: absolute; left: 0; right: 0; bottom: 300px;150    display: flex; align-items: center; justify-content: space-between;151    padding: 0 56px;152  }153  .save-link {154    color: #7C4DFF; font-size: 50px; font-weight: 800; letter-spacing: 1px;155  }156  .post-btn {157    background: #C400FF;158    color: #fff; font-weight: 800; font-size: 48px; letter-spacing: 1px;159    border: none; border-radius: 60px; padding: 32px 120px;160    box-shadow: 0 6px 14px rgba(196,0,255,0.25);161  }162 163  /* Ad banner */164  .ad-banner {165    position: absolute; left: 0; right: 0; bottom: 100px;166    height: 160px; background: #F1F1F1; border-top: 1px solid #E0E0E0;167    display: flex; align-items: center; justify-content: space-between;168    padding: 0 24px; box-sizing: border-box;169  }170  .ad-left { display: flex; align-items: center; gap: 20px; }171  .ad-thumb {172    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;173    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;174  }175  .ad-text { display: flex; flex-direction: column; }176  .ad-text .title { font-size: 40px; color: #333; font-weight: 800; }177  .ad-text .subtitle { font-size: 30px; color: #888; }178  .ad-get {179    background: #1F7A4A; color: #fff; border: none; border-radius: 16px;180    padding: 22px 46px; font-size: 44px; font-weight: 800;181  }182 183  /* Gesture bar */184  .gesture {185    position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: #000;186    display: flex; align-items: center; justify-content: center;187  }188  .gesture .pill {189    width: 220px; height: 10px; background: #fff; border-radius: 10px; opacity: 0.9;190  }191</style>192</head>193<body>194<div id="render-target">195  <!-- Status bar -->196  <div class="status-bar">197    <div class="sb-left">198      <div>4:17</div>199      <div class="dot-icon"></div>200      <div class="dot-icon"></div>201      <div class="dot-icon"></div>202    </div>203    <div class="sb-right">204      <span class="wifi-icon" aria-hidden="true">205        <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 0.001 3.999A2 2 0 0 0 12 18zm-7-6l1.5 1.5A9 9 0 0 1 17.5 13L19 11a11 11 0 0 0-14 0zM3 8l1.6 1.6a13 13 0 0 1 14.8 0L21 8a15 15 0 0 0-18 0z"/></svg>206      </span>207      <span class="battery-icon" aria-hidden="true">208        <svg viewBox="0 0 24 24"><path d="M16 6h2a2 2 0 0 1 2 2v1h1v6h-1v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10zm-9 3v6h10V9H7z"/></svg>209      </span>210    </div>211  </div>212 213  <!-- App bar -->214  <div class="app-bar">215    <div class="back-btn" aria-label="Back">216      <svg viewBox="0 0 24 24" width="48" height="48"><path d="M15 19L8 12l7-7" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>217    </div>218    <div class="title">Post to Picsart</div>219    <div class="skip">SKIP</div>220  </div>221 222  <!-- Main content -->223  <div class="content">224    <div class="preview-card">225      <div class="img-placeholder">[IMG: Artwork preview with glitter ring]</div>226      <div class="gif-chip">227        <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>228        GIF229      </div>230    </div>231 232    <div class="input-prompt">Add #hashtag, description, @friends</div>233    <div class="divider"></div>234 235    <div class="subhead">Suggested Tags</div>236    <div class="chips">237      <div class="chip">#nature</div>238      <div class="chip">#animal</div>239      <div class="chip">#beauty</div>240      <div class="chip">#food</div>241    </div>242 243    <div class="row">244      <div class="label">Free-to-Edit <span class="info-icon">i</span></div>245      <div class="toggle on">246        <div class="knob"></div>247      </div>248    </div>249  </div>250 251  <!-- Actions -->252  <div class="actions">253    <div class="save-link">SAVE</div>254    <button class="post-btn">POST</button>255  </div>256 257  <!-- Ad banner -->258  <div class="ad-banner">259    <div class="ad-left">260      <div class="ad-thumb">Ad</div>261      <div class="ad-text">262        <div class="subtitle">Play Store</div>263        <div class="title">MONOPOLY GO!</div>264      </div>265    </div>266    <button class="ad-get">GET</button>267  </div>268 269  <!-- Gesture area -->270  <div class="gesture"><div class="pill"></div></div>271</div>272</body>273</html>