GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Save and Share</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; color: #222; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #FAFAFA;15  }16 17  /* Top bar */18  .header {19    position: absolute;20    top: 120px;21    left: 80px;22    right: 80px;23    height: 160px;24  }25  .back {26    position: absolute;27    left: 0;28    top: 36px;29    width: 64px;30    height: 64px;31    display: flex;32    align-items: center;33    justify-content: center;34  }35  .title {36    position: absolute;37    left: 120px;38    top: 24px;39    font-size: 58px;40    font-weight: 500;41    color: #3A3A3A;42  }43  .next {44    position: absolute;45    right: 0;46    top: 0;47    width: 112px;48    height: 112px;49    background: #2196F3;50    border-radius: 56px;51    display: flex;52    align-items: center;53    justify-content: center;54    box-shadow: 0 6px 14px rgba(33,150,243,0.35);55  }56 57  /* Decorative illustration placeholder */58  .decor {59    position: absolute;60    right: 180px;61    top: 40px;62    width: 360px;63    height: 180px;64    background: #E0E0E0;65    border: 1px solid #BDBDBD;66    display: flex;67    align-items: center;68    justify-content: center;69    color: #757575;70    border-radius: 18px;71  }72 73  /* Main canvas card */74  .canvas-card {75    position: absolute;76    left: 48px;77    right: 48px;78    top: 420px;79    height: 1320px;80    background: #FFFFFF;81    border-radius: 16px;82    box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);83  }84  .preview-placeholder {85    position: absolute;86    left: 60px;87    right: 60px;88    top: 120px;89    bottom: 260px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #757575;96    border-radius: 8px;97    font-size: 34px;98  }99 100  /* Actions row */101  .actions {102    position: absolute;103    left: 0;104    right: 0;105    top: 1880px;106    height: 360px;107    display: flex;108    justify-content: space-around;109    align-items: center;110  }111  .action {112    width: 420px;113    text-align: center;114    color: #616161;115  }116  .action .icon-wrap {117    width: 100px;118    height: 100px;119    margin: 0 auto 26px;120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .action .label {125    font-size: 40px;126    letter-spacing: 1px;127  }128 129  /* Snackbar */130  .snackbar {131    position: absolute;132    left: 80px;133    right: 80px;134    bottom: 320px;135    background: #2F2F2F;136    color: #FFFFFF;137    border-radius: 60px;138    padding: 40px 56px;139    display: flex;140    align-items: center;141    gap: 28px;142    box-shadow: 0 10px 24px rgba(0,0,0,0.25);143  }144  .snackbar .badge {145    width: 88px;146    height: 88px;147    border-radius: 44px;148    background: linear-gradient(135deg, #7B61FF, #B388FF);149    display: flex;150    align-items: center;151    justify-content: center;152    color: #FFF;153    font-weight: bold;154    font-size: 32px;155  }156  .snackbar .text {157    font-size: 38px;158  }159 160  /* Bottom CTA */161  .cta {162    position: absolute;163    left: 0;164    right: 0;165    bottom: 120px;166    height: 180px;167    background: #FF2D87;168    display: flex;169    align-items: center;170    justify-content: center;171    gap: 30px;172  }173  .cta .p-icon {174    width: 84px;175    height: 84px;176    border-radius: 42px;177    background: #FFFFFF;178    color: #FF2D87;179    font-weight: bold;180    display: flex;181    align-items: center;182    justify-content: center;183    font-size: 56px;184  }185  .cta .cta-text {186    color: #FFFFFF;187    font-size: 46px;188    font-weight: 700;189    letter-spacing: 1px;190  }191 192  /* OS navigation area (visual) */193  .nav-area {194    position: absolute;195    left: 0;196    right: 0;197    bottom: 0;198    height: 100px;199    background: #000;200  }201  .home-indicator {202    position: absolute;203    bottom: 30px;204    left: 50%;205    transform: translateX(-50%);206    width: 240px;207    height: 12px;208    background: #FFFFFF;209    border-radius: 6px;210    opacity: 0.9;211  }212</style>213</head>214<body>215<div id="render-target">216 217  <div class="header">218    <div class="back">219      <svg width="64" height="64" viewBox="0 0 64 64">220        <path d="M38 14 L22 32 L38 50" stroke="#5F6368" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>221      </svg>222    </div>223    <div class="title">Save and Share</div>224    <div class="next">225      <svg width="52" height="52" viewBox="0 0 52 52">226        <path d="M18 12 L34 26 L18 40" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227      </svg>228    </div>229  </div>230 231  <div class="decor">[IMG: Gradient brush illustration]</div>232 233  <div class="canvas-card">234    <div class="preview-placeholder">[IMG: Export preview canvas]</div>235  </div>236 237  <div class="actions">238    <div class="action">239      <div class="icon-wrap">240        <svg width="84" height="84" viewBox="0 0 84 84">241          <path d="M42 16 V52" stroke="#757575" stroke-width="6" stroke-linecap="round"/>242          <path d="M30 42 L42 54 L54 42" stroke="#757575" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>243          <rect x="20" y="56" width="44" height="12" rx="6" fill="#757575"/>244        </svg>245      </div>246      <div class="label">GALLERY</div>247    </div>248 249    <div class="action">250      <div class="icon-wrap">251        <svg width="84" height="84" viewBox="0 0 84 84">252          <rect x="18" y="20" width="48" height="36" rx="6" stroke="#757575" stroke-width="6" fill="none"/>253          <polygon points="46,38 36,32 36,44" fill="#757575"/>254        </svg>255      </div>256      <div class="label">EXPORT VIDEO</div>257    </div>258 259    <div class="action">260      <div class="icon-wrap">261        <svg width="84" height="84" viewBox="0 0 84 84">262          <path d="M26 20 H52 A6 6 0 0 1 58 26 V58 H26 A6 6 0 0 1 20 52 V26 A6 6 0 0 1 26 20 Z" stroke="#757575" stroke-width="6" fill="none"/>263          <rect x="26" y="32" width="28" height="18" rx="3" fill="#757575"/>264        </svg>265      </div>266      <div class="label">EXPORT GIF</div>267    </div>268  </div>269 270  <div class="snackbar">271    <div class="badge">★</div>272    <div class="text">Saved at O/Pictures/Color/Project Capture.jpg</div>273  </div>274 275  <div class="cta">276    <div class="p-icon">P</div>277    <div class="cta-text">CONTINUE WITH PICSART</div>278  </div>279 280  <div class="nav-area">281    <div class="home-indicator"></div>282  </div>283 284</div>285</body>286</html>