GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Save as PDF UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #F1EFF3; /* light app background */13    font-family: Roboto, "Segoe UI", Arial, sans-serif;14    color: #222;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    color: #7e7e7e;29    font-size: 36px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 22px;35  }36  .dot {37    width: 26px;38    height: 26px;39    border-radius: 50%;40    background: #D7D7DA;41  }42  .signal {43    width: 30px;44    height: 30px;45    border-radius: 6px;46    background: #D7D7DA;47  }48 49  /* Header area */50  .header {51    position: absolute;52    top: 120px;53    left: 0;54    width: 1080px;55    padding: 28px 40px;56  }57  .header-top {58    display: flex;59    align-items: center;60    gap: 26px;61  }62  .pdf-badge {63    width: 84px;64    height: 84px;65    border-radius: 12px;66    background: #6750A4;67    display: flex;68    align-items: center;69    justify-content: center;70    color: #fff;71    font-weight: 700;72    letter-spacing: 1px;73  }74  .title {75    font-size: 56px;76    font-weight: 600;77    color: #2d2d2d;78  }79  .chevron {80    margin-left: 12px;81    width: 40px;82    height: 40px;83    vertical-align: middle;84  }85 86  .options {87    display: flex;88    gap: 90px;89    margin-top: 32px;90    align-items: center;91    font-size: 36px;92    color: #424242;93  }94  .opt {95    display: flex;96    align-items: center;97    gap: 16px;98  }99  .opt-label {100    color: #6b6b6b;101  }102  .opt-value {103    font-weight: 600;104  }105  .opt .chev-small {106    width: 28px;107    height: 28px;108    margin-left: 10px;109  }110 111  /* Floating PDF button */112  .fab {113    position: absolute;114    right: 40px;115    top: 480px;116    width: 140px;117    height: 140px;118    border-radius: 70px;119    background: #6750A4;120    box-shadow: 0 8px 16px rgba(0,0,0,0.2);121    display: flex;122    align-items: center;123    justify-content: center;124    color: #fff;125    font-weight: 800;126    letter-spacing: 1px;127  }128 129  /* Preview area */130  .content {131    position: absolute;132    top: 420px;133    left: 0;134    width: 1080px;135    padding: 0 60px;136  }137  .page-preview {138    width: 960px;139    height: 1500px;140    margin: 0 auto;141    background: #ffffff;142    border-radius: 6px;143    box-shadow: 0 10px 30px rgba(0,0,0,0.12);144    position: relative;145  }146  .page-text {147    position: absolute;148    top: 120px;149    left: 140px;150    right: 140px;151    font-size: 28px;152    color: #333;153  }154  .page-footer {155    position: absolute;156    left: 0;157    bottom: 0;158    width: 100%;159    height: 110px;160    background: #BDBDBD;161    display: flex;162    align-items: center;163    justify-content: space-between;164    padding: 0 40px;165    color: #fff;166    font-size: 40px;167    box-sizing: border-box;168  }169  .check-wrap {170    width: 72px;171    height: 72px;172    border-radius: 36px;173    background: #6A5ACD;174    display: flex;175    align-items: center;176    justify-content: center;177  }178  .check-wrap svg {179    width: 44px;180    height: 44px;181    fill: #fff;182  }183</style>184</head>185<body>186<div id="render-target">187 188  <!-- Status Bar -->189  <div class="status-bar">190    <div>7:59</div>191    <div class="status-icons">192      <div class="dot"></div>193      <div class="dot"></div>194      <div class="signal"></div>195      <div class="dot"></div>196    </div>197  </div>198 199  <!-- Header -->200  <div class="header">201    <div class="header-top">202      <div class="pdf-badge">PDF</div>203      <div class="title">Save as PDF204        <svg class="chevron" viewBox="0 0 24 24">205          <path d="M7 10l5 5 5-5H7z" fill="#6b6b6b"></path>206        </svg>207      </div>208    </div>209 210    <div class="options">211      <div class="opt">212        <div class="opt-label">Copies:</div>213        <div class="opt-value">1</div>214      </div>215      <div class="opt">216        <div class="opt-label">Paper size:</div>217        <div class="opt-value">Letter</div>218        <svg class="chev-small" viewBox="0 0 24 24">219          <path d="M7 10l5 5 5-5H7z" fill="#6b6b6b"></path>220        </svg>221      </div>222    </div>223  </div>224 225  <!-- Floating Action Button -->226  <div class="fab">PDF</div>227 228  <!-- Content / Page Preview -->229  <div class="content">230    <div class="page-preview">231      <div class="page-text">232        I will buy the movie 2 more premium tickets for my friend deniel and his wife.233      </div>234 235      <div class="page-footer">236        <div>1/1</div>237        <div class="check-wrap">238          <svg viewBox="0 0 24 24">239            <path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"></path>240          </svg>241        </div>242      </div>243    </div>244  </div>245 246</div>247</body>248</html>