GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Save As - Dark UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    border-radius: 28px;15    box-shadow: 0 20px 60px rgba(0,0,0,0.35);16    color: #EDEDED;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    background: #1A1A1A;27    color: #EDEDED;28    display: flex;29    align-items: center;30    padding: 0 36px;31    box-sizing: border-box;32    font-size: 36px;33  }34  .status-left { flex: 1; }35  .status-right { display: flex; gap: 28px; align-items: center; }36 37  .status-icon svg { width: 36px; height: 36px; fill: none; stroke: #EDEDED; stroke-width: 3; }38 39  /* Header bar */40  .header {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1080px;45    height: 150px;46    background: #1A1A1A;47    display: flex;48    align-items: center;49    box-sizing: border-box;50    padding: 0 36px;51  }52  .back-btn {53    width: 96px;54    height: 96px;55    display: flex;56    align-items: center;57    justify-content: center;58    margin-right: 16px;59  }60  .back-btn svg { width: 52px; height: 52px; stroke: #EDEDED; stroke-width: 4; fill: none; }61  .header-title {62    font-size: 56px;63    font-weight: 600;64    letter-spacing: 0.5px;65  }66  .header-right {67    margin-left: auto;68    display: flex;69    align-items: center;70    gap: 16px;71    color: #CFCFCF;72    font-size: 40px;73  }74  .folder-icon svg { width: 54px; height: 54px; stroke: #CFCFCF; stroke-width: 4; fill: none; }75 76  /* Content area */77  .content {78    position: absolute;79    top: 270px;80    left: 0;81    width: 1080px;82    bottom: 220px;83    padding: 24px 36px;84    box-sizing: border-box;85    overflow: hidden;86  }87 88  .section-label {89    display: flex;90    align-items: center;91    gap: 20px;92    color: #C4C4C4;93    font-size: 40px;94    margin: 24px 0 36px 0;95  }96  .phone-icon svg { width: 46px; height: 46px; stroke: #C4C4C4; stroke-width: 4; fill: none; }97 98  .list {99    display: flex;100    flex-direction: column;101    gap: 44px;102  }103  .row {104    display: flex;105    align-items: center;106    padding: 22px 0;107  }108  .row .icon-wrap {109    width: 120px;110    height: 120px;111    border-radius: 20px;112    display: flex;113    align-items: center;114    justify-content: center;115    margin-right: 28px;116  }117  .row .icon-wrap svg {118    width: 88px; height: 88px;119    stroke: #9E9E9E; stroke-width: 5; fill: none;120  }121  .row .label {122    font-size: 52px;123    color: #F0F0F0;124  }125 126  /* Bottom action bar */127  .bottom-bar {128    position: absolute;129    left: 0;130    bottom: 96px;131    width: 1080px;132    height: 170px;133    background: #2A2A2A;134    display: flex;135    align-items: center;136    padding: 0 36px;137    box-sizing: border-box;138    gap: 24px;139  }140  .filename {141    flex: 0 0 720px;142    height: 100px;143    border: 2px solid #E07A35;144    border-radius: 12px;145    padding: 0 24px;146    display: flex;147    align-items: center;148    font-size: 44px;149    color: #EDEDED;150    box-sizing: border-box;151    position: relative;152    background: #1F1F1F;153  }154  .clear-btn {155    position: absolute;156    right: 8px;157    top: 50%;158    transform: translateY(-50%);159    width: 76px;160    height: 76px;161    display: flex;162    align-items: center;163    justify-content: center;164  }165  .clear-btn svg { width: 42px; height: 42px; stroke: #EDEDED; stroke-width: 4; fill: none; }166 167  .ext {168    font-size: 44px;169    color: #CFCFCF;170    margin-left: 8px;171  }172  .save-btn {173    margin-left: auto;174    background: #505050;175    color: #BFBFBF;176    font-size: 44px;177    padding: 22px 40px;178    border-radius: 16px;179  }180 181  /* Gesture pill */182  .gesture {183    position: absolute;184    bottom: 24px;185    left: 50%;186    transform: translateX(-50%);187    width: 260px;188    height: 12px;189    background: #E0E0E0;190    border-radius: 8px;191    opacity: 0.7;192  }193</style>194</head>195<body>196<div id="render-target">197 198  <!-- Status bar -->199  <div class="status-bar">200    <div class="status-left">1:06</div>201    <div class="status-right">202      <span class="status-icon">203        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0 0 20a9 9 0 0 1 0-20z"/></svg>204      </span>205      <span class="status-icon">206        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>207      </span>208      <span class="status-icon">209        <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="12" rx="2"/><path d="M9 20h6"/></svg>210      </span>211      <span class="status-icon">212        <svg viewBox="0 0 24 24"><path d="M3 12l4-4v8zM13 8l8 4l-8 4z"/></svg>213      </span>214      <span class="status-icon">215        <svg viewBox="0 0 24 24"><path d="M3 18c3-3 6-3 9 0s6 3 9 0"/><circle cx="12" cy="10" r="2"/></svg>216      </span>217      <span class="status-icon">218        <svg viewBox="0 0 24 24"><path d="M6 18h12"/><path d="M6 14h12"/><path d="M6 10h12"/></svg>219      </span>220    </div>221  </div>222 223  <!-- Header -->224  <div class="header">225    <div class="back-btn">226      <svg viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>227    </div>228    <div class="header-title">Save as</div>229    <div class="header-right">230      <div class="folder-icon">231        <svg viewBox="0 0 24 24"><path d="M3 7h7l2 2h9v9H3z"/></svg>232      </div>233      <div>Places</div>234    </div>235  </div>236 237  <!-- Content -->238  <div class="content">239    <div class="section-label">240      <span class="phone-icon">241        <svg viewBox="0 0 24 24"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M10 18h4"/></svg>242      </span>243      <span>This device</span>244    </div>245 246    <div class="list">247      <div class="row">248        <div class="icon-wrap">249          <svg viewBox="0 0 24 24"><path d="M3 7h7l2 2h9v9H3z"/></svg>250        </div>251        <div class="label">Documents</div>252      </div>253 254      <div class="row">255        <div class="icon-wrap">256          <svg viewBox="0 0 24 24"><path d="M3 7h7l2 2h9v9H3z"/></svg>257        </div>258        <div class="label">Download</div>259      </div>260 261      <div class="row">262        <div class="icon-wrap">263          <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M10 18h4"/></svg>264        </div>265        <div class="label">Storage</div>266      </div>267    </div>268  </div>269 270  <!-- Bottom action bar -->271  <div class="bottom-bar">272    <div class="filename">273      Importance of hiking274      <div class="clear-btn">275        <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>276      </div>277    </div>278    <div class="ext">.pptx</div>279    <div class="save-btn">Save</div>280  </div>281 282  <!-- Gesture pill -->283  <div class="gesture"></div>284 285</div>286</body>287</html>