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 UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1440px;16    height: 3120px;17    position: relative;18    overflow: hidden;19    background: #FAFAFA;20  }21 22  /* Top system bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1440px;28    height: 120px;29    background: #000;30  }31 32  /* Header */33  .header {34    position: absolute;35    top: 120px;36    left: 0;37    width: 1440px;38    height: 220px;39    background: #FFFFFF;40  }41  .header .back {42    position: absolute;43    left: 36px;44    top: 78px;45    width: 80px;46    height: 80px;47    display: flex;48    align-items: center;49    justify-content: center;50  }51  .header .title {52    position: absolute;53    left: 140px;54    top: 96px;55    font-size: 58px;56    color: #555555;57    letter-spacing: 0.5px;58  }59  .next-btn {60    position: absolute;61    right: 36px;62    top: 70px;63    width: 120px;64    height: 120px;65    background: #3DA4FF;66    border-radius: 60px;67    box-shadow: 0 8px 16px rgba(61, 164, 255, 0.35);68    display: flex;69    align-items: center;70    justify-content: center;71  }72  .brush-placeholder {73    position: absolute;74    right: 60px;75    top: 120px;76    width: 420px;77    height: 220px;78    background: #E0E0E0;79    border: 1px solid #BDBDBD;80    border-radius: 12px;81    color: #757575;82    display: flex;83    align-items: center;84    justify-content: center;85    transform: rotate(15deg);86  }87 88  /* Preview Card */89  .preview-card {90    position: absolute;91    left: 36px;92    top: 420px;93    width: 1368px;94    height: 1480px;95    background: #FFFFFF;96    border: 1px solid #E0E0E0;97    border-radius: 16px;98    box-shadow: 0 6px 18px rgba(0,0,0,0.06);99  }100  .artwork-placeholder {101    position: absolute;102    left: 70px;103    top: 140px;104    width: 1228px;105    height: 900px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    border-radius: 8px;109    color: #757575;110    display: flex;111    align-items: center;112    justify-content: center;113    text-align: center;114  }115 116  .export-row {117    position: absolute;118    left: 0;119    bottom: 90px;120    width: 100%;121    display: flex;122    justify-content: space-evenly;123    align-items: flex-start;124    padding: 0 80px;125  }126  .export-item {127    width: 360px;128    text-align: center;129  }130  .export-icon {131    width: 120px;132    height: 120px;133    margin: 0 auto 24px auto;134    display: flex;135    align-items: center;136    justify-content: center;137  }138  .export-label {139    font-size: 40px;140    color: #666666;141    letter-spacing: 1px;142  }143 144  /* Bottom CTA */145  .cta-bar {146    position: absolute;147    left: 0;148    bottom: 120px;149    width: 1440px;150    height: 170px;151    background: #FF2D8B;152    display: flex;153    align-items: center;154    justify-content: center;155  }156  .cta-content {157    display: flex;158    align-items: center;159    gap: 28px;160    color: #FFFFFF;161    font-weight: 700;162    font-size: 52px;163    letter-spacing: 1px;164  }165  .cta-logo {166    width: 80px;167    height: 80px;168    border-radius: 40px;169    border: 2px solid #FFF;170    display: flex;171    align-items: center;172    justify-content: center;173    font-weight: 800;174    font-size: 54px;175    line-height: 1;176  }177 178  /* Home indicator */179  .home-indicator {180    position: absolute;181    left: 50%;182    transform: translateX(-50%);183    bottom: 36px;184    width: 360px;185    height: 20px;186    background: #111111;187    border-radius: 10px;188  }189</style>190</head>191<body>192<div id="render-target">193  <div class="status-bar"></div>194 195  <div class="header">196    <div class="back">197      <svg width="56" height="56" viewBox="0 0 56 56">198        <path d="M34 12 L18 28 L34 44" fill="none" stroke="#666" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>199      </svg>200    </div>201    <div class="title">Save and Share</div>202    <div class="next-btn">203      <svg width="64" height="64" viewBox="0 0 64 64">204        <path d="M24 16 L44 32 L24 48" fill="none" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>205      </svg>206    </div>207  </div>208 209  <div class="brush-placeholder">[IMG: Brush strokes decoration]</div>210 211  <div class="preview-card">212    <div class="artwork-placeholder">[IMG: Preview of artwork]</div>213 214    <div class="export-row">215      <div class="export-item">216        <div class="export-icon">217          <!-- Download icon -->218          <svg width="120" height="120" viewBox="0 0 100 100">219            <path d="M50 18 V58" stroke="#666" stroke-width="8" stroke-linecap="round"/>220            <path d="M34 44 L50 60 L66 44" fill="none" stroke="#666" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>221            <path d="M22 76 H78" stroke="#666" stroke-width="8" stroke-linecap="round"/>222          </svg>223        </div>224        <div class="export-label">GALLERY</div>225      </div>226 227      <div class="export-item">228        <div class="export-icon">229          <!-- Video icon -->230          <svg width="120" height="120" viewBox="0 0 100 100">231            <rect x="18" y="26" width="52" height="36" rx="6" ry="6" fill="none" stroke="#666" stroke-width="8"/>232            <polygon points="72,36 90,46 72,56" fill="#666"/>233          </svg>234        </div>235        <div class="export-label">EXPORT VIDEO</div>236      </div>237 238      <div class="export-item">239        <div class="export-icon">240          <!-- GIF file icon -->241          <svg width="120" height="120" viewBox="0 0 100 100">242            <path d="M28 20 H60 L72 32 V80 H28 Z" fill="none" stroke="#666" stroke-width="8" stroke-linejoin="round"/>243            <path d="M60 20 V32 H72" fill="none" stroke="#666" stroke-width="8" stroke-linejoin="round"/>244            <text x="34" y="58" font-size="24" fill="#666" font-family="Arial" font-weight="700">GIF</text>245          </svg>246        </div>247        <div class="export-label">EXPORT GIF</div>248      </div>249    </div>250  </div>251 252  <div class="cta-bar">253    <div class="cta-content">254      <div class="cta-logo">P</div>255      <div>CONTINUE WITH PICSART</div>256    </div>257  </div>258 259  <div class="home-indicator"></div>260</div>261</body>262</html>