GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>WPS Save Screen Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13    color: #1f1f1f;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    padding: 0 36px;24    box-sizing: border-box;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #4b4b4b;29    font-size: 40px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .icon-wifi svg,37  .icon-battery svg,38  .icon-dnd svg { display: block; }39 40  /* Top app bar */41  .app-bar {42    position: absolute;43    top: 110px;44    left: 0;45    width: 1080px;46    height: 120px;47    display: flex;48    align-items: center;49    padding: 0 32px;50    box-sizing: border-box;51    border-bottom: 1px solid #ececec;52  }53  .back-btn {54    width: 90px;55    height: 90px;56    display: flex;57    align-items: center;58    justify-content: center;59  }60  .title {61    font-size: 54px;62    font-weight: 600;63    margin-left: 8px;64    color: #1f1f1f;65  }66 67  /* Path block */68  .path-block {69    position: absolute;70    top: 230px;71    left: 0;72    width: 1080px;73    padding: 32px 36px 24px;74    box-sizing: border-box;75    border-bottom: 1px solid #f0f0f0;76  }77  .path-label {78    font-size: 34px;79    color: #9a9a9a;80    margin-bottom: 18px;81  }82  .path-row {83    display: flex;84    align-items: center;85    justify-content: space-between;86    font-size: 46px;87    color: #2b2b2b;88  }89  .chevron {90    width: 24px;91    height: 24px;92    border-right: 5px solid #9e9e9e;93    border-top: 5px solid #9e9e9e;94    transform: rotate(45deg);95    margin-right: 10px;96  }97 98  /* Filename inputs */99  .name-section {100    position: absolute;101    top: 410px;102    left: 0;103    width: 1080px;104    padding: 18px 36px 0;105    box-sizing: border-box;106  }107  .name-row {108    display: grid;109    grid-template-columns: 1fr 310px;110    column-gap: 22px;111    align-items: end;112  }113  .text-field {114    position: relative;115    padding: 20px 14px 22px;116    border-bottom: 4px solid #e9e9e9;117    height: 110px;118    box-sizing: border-box;119    display: flex;120    align-items: center;121    font-size: 46px;122    color: #1d1d1d;123  }124  .selection {125    background: #cfe0ff;126    color: #1a1a1a;127    padding: 4px 6px;128    border-radius: 4px;129  }130  .ext-field {131    position: relative;132    padding: 20px 14px 22px;133    border-bottom: 4px solid #e9e9e9;134    height: 110px;135    font-size: 46px;136    color: #1d1d1d;137    display: flex;138    align-items: center;139    justify-content: space-between;140  }141  .caret-down {142    width: 0; height: 0;143    border-left: 12px solid transparent;144    border-right: 12px solid transparent;145    border-top: 16px solid #9a9a9a;146    margin-left: 16px;147  }148 149  /* Buttons */150  .btn-row {151    position: absolute;152    top: 590px;153    left: 0;154    width: 1080px;155    display: flex;156    justify-content: space-between;157    padding: 24px 36px;158    box-sizing: border-box;159  }160  .btn {161    height: 120px;162    font-size: 46px;163    border-radius: 16px;164    padding: 0 48px;165    display: flex;166    align-items: center;167    justify-content: center;168    box-sizing: border-box;169    cursor: default;170  }171  .btn-gray {172    background: #f1f1f1;173    color: #3c3c3c;174    border: 1px solid #e0e0e0;175  }176  .btn-primary {177    background: #5A7BFF;178    color: #ffffff;179    border: 1px solid #5A7BFF;180    min-width: 420px;181  }182 183  /* Center loader */184  .center-area {185    position: absolute;186    top: 760px;187    left: 0;188    right: 0;189    bottom: 140px;190  }191  .loader {192    position: absolute;193    left: 50%;194    top: 240px;195    transform: translateX(-50%);196    width: 170px;197    height: 170px;198    border-radius: 50%;199    border: 10px solid #e9e9e9;200    background: #ffffff;201    box-shadow: 0 0 0 2px #f5f5f5 inset;202  }203  .loader .blue-seg {204    position: absolute;205    width: 36px;206    height: 36px;207    background: #5A7BFF;208    border-radius: 6px;209    left: 72px;210    top: -8px;211  }212  .loader .wps {213    position: absolute;214    width: 100%;215    text-align: center;216    top: 58px;217    font-size: 44px;218    color: #9a9a9a;219    letter-spacing: 2px;220  }221 222  /* Bottom gesture bar */223  .gesture-bar {224    position: absolute;225    bottom: 30px;226    left: 50%;227    transform: translateX(-50%);228    width: 520px;229    height: 14px;230    background: #d9d9d9;231    border-radius: 8px;232  }233</style>234</head>235<body>236<div id="render-target">237 238  <!-- Status Bar -->239  <div class="status-bar">240    <div class="time">9:44</div>241    <div class="status-icons">242      <div class="icon-dnd">243        <svg width="38" height="38" viewBox="0 0 24 24">244          <circle cx="12" cy="12" r="9" fill="none" stroke="#7a7a7a" stroke-width="2"/>245          <rect x="7" y="11" width="10" height="2" fill="#7a7a7a"/>246        </svg>247      </div>248      <div class="icon-wifi">249        <svg width="44" height="44" viewBox="0 0 24 24">250          <path d="M2 9c5-5 15-5 20 0" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>251          <path d="M5 12c4-4 10-4 14 0" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>252          <path d="M9 16c2-2 4-2 6 0" fill="none" stroke="#7a7a7a" stroke-width="2" stroke-linecap="round"/>253          <circle cx="12" cy="19" r="1.3" fill="#7a7a7a"/>254        </svg>255      </div>256      <div class="icon-battery">257        <svg width="56" height="36" viewBox="0 0 30 16">258          <rect x="1" y="2" width="24" height="12" rx="2" ry="2" fill="none" stroke="#7a7a7a" stroke-width="2"/>259          <rect x="3" y="4" width="18" height="8" fill="#7a7a7a"/>260          <rect x="25" y="6" width="4" height="4" fill="#7a7a7a"/>261        </svg>262      </div>263      <div style="font-size:36px;color:#7a7a7a;">89%</div>264    </div>265  </div>266 267  <!-- App Bar -->268  <div class="app-bar">269    <div class="back-btn">270      <svg width="44" height="44" viewBox="0 0 24 24">271        <path d="M15 4 L7 12 L15 20" fill="none" stroke="#4b4b4b" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>272      </svg>273    </div>274    <div class="title">Save</div>275  </div>276 277  <!-- Path block -->278  <div class="path-block">279    <div class="path-label">Path</div>280    <div class="path-row">281      <div>WPS Cloud/My Cloud</div>282      <div class="chevron"></div>283    </div>284  </div>285 286  <!-- Filename section -->287  <div class="name-section">288    <div class="name-row">289      <div class="text-field">290        <span class="selection">Meeting Agenda-WPS Office</span>291      </div>292      <div class="ext-field">293        <span>.docx</span>294        <div class="caret-down"></div>295      </div>296    </div>297  </div>298 299  <!-- Buttons -->300  <div class="btn-row">301    <div class="btn btn-gray">Encrypt</div>302    <div class="btn btn-primary">Save</div>303  </div>304 305  <!-- Center area and loader -->306  <div class="center-area">307    <div class="loader">308      <div class="blue-seg"></div>309      <div class="wps">WPS</div>310    </div>311  </div>312 313  <!-- Bottom gesture bar -->314  <div class="gesture-bar"></div>315</div>316</body>317</html>