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; color:#222; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FAFAFA;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #000;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30    font-size: 34px;31  }32  .status-left { font-weight: 600; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .dot {40    width: 22px; height: 22px; background:#fff; border-radius: 50%; opacity: 0.9;41  }42  .battery {43    width: 46px; height: 24px; border:2px solid #fff; border-radius:4px; position: relative;44  }45  .battery::after {46    content:""; position:absolute; right:-6px; top:6px; width:6px; height:12px; background:#fff; border-radius:1px;47  }48 49  /* App bar */50  .app-bar {51    position: absolute;52    top: 110px;53    left: 0;54    width: 1080px;55    height: 140px;56    background: #F3F3F4;57    display: flex;58    align-items: center;59    padding: 0 28px;60    box-sizing: border-box;61    border-bottom: 1px solid #E0E0E0;62  }63  .back-btn {64    width: 72px; height: 72px; display:flex; align-items:center; justify-content:center; margin-right: 16px;65  }66  .app-title {67    font-size: 44px;68    font-weight: 600;69    color:#222;70  }71  .skip {72    margin-left: auto;73    font-size: 36px;74    color: #6A1B9A;75    font-weight: 700;76  }77 78  /* Main content */79  .content {80    position: absolute;81    top: 250px; /* status + app bar */82    left: 0;83    right: 0;84    bottom: 0;85    padding: 40px 60px 220px;86    box-sizing: border-box;87    overflow: hidden;88  }89 90  .image-placeholder {91    width: 960px;92    height: 960px;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    border-radius: 24px;96    margin: 10px auto 50px;97    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px; text-align:center;98  }99 100  .hint {101    font-size: 34px;102    color: #5F6368;103    margin: 10px 10px 26px 10px;104  }105  .divider {106    height:1px; background:#E0E0E0; margin: 0 10px 30px;107  }108 109  .section-title {110    font-size: 36px; font-weight: 700; color:#2c2c2c; margin: 0 10px 24px;111  }112  .chips {113    display: flex; gap: 22px; flex-wrap: wrap; padding: 0 10px 40px;114  }115  .chip {116    background:#E9E9EB; color:#333; padding: 18px 26px; border-radius: 36px; font-size: 32px; font-weight: 600;117  }118 119  .row {120    display:flex; align-items:center; justify-content: space-between;121    padding: 20px 10px 20px 10px;122  }123  .row-left {124    display:flex; align-items:center; gap: 22px;125  }126  .row-title { font-size: 42px; font-weight: 700; }127  .info-icon {128    width: 48px; height: 48px;129  }130 131  /* Toggle */132  .toggle {133    width: 120px;134    height: 64px;135    background: #6A00FF;136    border-radius: 36px;137    position: relative;138    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05);139  }140  .toggle::after {141    content:"";142    position: absolute;143    right: 6px;144    top: 6px;145    width: 52px; height: 52px;146    background: #fff; border-radius: 50%;147    box-shadow: 0 2px 4px rgba(0,0,0,0.2);148  }149 150  .spacer-large {151    height: 520px;152  }153 154  /* Dim overlay for modal sheet */155  .overlay {156    position: absolute;157    left: 0;158    top: 250px; /* below app bar */159    width: 100%;160    height: calc(100% - 250px);161    background: rgba(0,0,0,0.36);162    z-index: 5;163  }164 165  /* Bottom sheet */166  .sheet {167    position: absolute;168    left: 0;169    bottom: 0;170    width: 1080px;171    background: #fff;172    border-top-left-radius: 28px;173    border-top-right-radius: 28px;174    box-shadow: 0 -10px 30px rgba(0,0,0,0.25);175    padding: 34px 40px 40px;176    box-sizing: border-box;177    z-index: 8;178  }179  .sheet-item {180    display:flex; align-items:center; gap: 28px;181    padding: 28px 0;182    border-bottom: 1px solid #EEE;183  }184  .sheet-item:last-child { border-bottom: none; }185  .sheet-icon {186    width: 84px; height: 84px; display:flex; align-items:center; justify-content:center;187  }188  .sheet-texts .title {189    font-size: 40px; font-weight: 700; color:#333;190  }191  .sheet-texts .subtitle {192    font-size: 32px; color:#6C6C6C; margin-top: 6px;193  }194 195  /* Home indicator */196  .home-indicator {197    position: absolute;198    bottom: 18px;199    left: 50%;200    transform: translateX(-50%);201    width: 280px;202    height: 10px;203    background: #000;204    border-radius: 6px;205    opacity: 0.3;206    z-index: 9;207  }208</style>209</head>210<body>211<div id="render-target">212  <!-- Status bar -->213  <div class="status-bar">214    <div class="status-left">4:17</div>215    <div class="status-right">216      <div class="dot"></div>217      <div class="dot"></div>218      <div class="dot"></div>219      <div class="dot" style="opacity:.7;"></div>220      <svg width="36" height="28"><circle cx="18" cy="14" r="12" fill="#fff"/></svg>221      <div class="battery"></div>222    </div>223  </div>224 225  <!-- App bar -->226  <div class="app-bar">227    <div class="back-btn">228      <svg width="48" height="48" viewBox="0 0 24 24">229        <path d="M14 4 L6 12 L14 20" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>230      </svg>231    </div>232    <div class="app-title">Post to Picsart</div>233    <div class="skip">SKIP</div>234  </div>235 236  <!-- Page content -->237  <div class="content">238    <div class="image-placeholder">[IMG: Edited photo (circular frame with gold speckles)]</div>239 240    <div class="hint">Add #hashtag, description, @friends</div>241    <div class="divider"></div>242 243    <div class="section-title">Suggested Tags</div>244    <div class="chips">245      <div class="chip">#nature</div>246      <div class="chip">#animal</div>247      <div class="chip">#beauty</div>248      <div class="chip">#food</div>249    </div>250 251    <div class="row">252      <div class="row-left">253        <div class="row-title">Free-to-Edit</div>254        <svg class="info-icon" viewBox="0 0 24 24">255          <circle cx="12" cy="12" r="10" fill="none" stroke="#111" stroke-width="2"/>256          <rect x="11" y="10" width="2" height="7" fill="#111"/>257          <circle cx="12" cy="7" r="1.2" fill="#111"/>258        </svg>259      </div>260      <div class="toggle"></div>261    </div>262 263    <div class="spacer-large"></div>264  </div>265 266  <!-- Dim overlay -->267  <div class="overlay"></div>268 269  <!-- Bottom sheet -->270  <div class="sheet">271    <div class="sheet-item">272      <div class="sheet-icon">273        <svg width="68" height="68" viewBox="0 0 24 24">274          <path d="M6 15a6 6 0 0 1 11.5-2 4 4 0 1 1 1.5 7H7a4 4 0 0 1-1-7" stroke="#8A2BE2" stroke-width="2" fill="none" stroke-linecap="round"/>275          <path d="M12 8v7M12 8l-3 3M12 8l3 3" stroke="#8A2BE2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>276        </svg>277      </div>278      <div class="sheet-texts">279        <div class="title" style="color:#6A1B9A">Upload Privately</div>280        <div class="subtitle">Use Picsart as a storage</div>281      </div>282    </div>283 284    <div class="sheet-item">285      <div class="sheet-icon">286        <svg width="68" height="68" viewBox="0 0 24 24">287          <path d="M6 19h12M12 5v9M12 14l-3-3M12 14l3-3" stroke="#8A2BE2" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>288        </svg>289      </div>290      <div class="sheet-texts">291        <div class="title">Save</div>292        <div class="subtitle">Save picture on your device</div>293      </div>294    </div>295  </div>296 297  <div class="home-indicator"></div>298</div>299</body>300</html>