GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Save As - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #101010;15    color: #EDEDED;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    right: 0;25    height: 110px;26    background: #1a1a1a;27    display: flex;28    align-items: center;29    padding: 0 34px;30    box-sizing: border-box;31    color: #f1f1f1;32    font-size: 40px;33  }34  .status-right {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 26px;39  }40  .status-icon svg { display: block; }41 42  /* Header */43  .header {44    position: absolute;45    top: 110px;46    left: 0;47    right: 0;48    height: 120px;49    background: #121212;50    display: flex;51    align-items: center;52    padding: 0 24px 0 16px;53    box-sizing: border-box;54    border-bottom: 1px solid #222;55  }56  .back {57    width: 80px;58    height: 80px;59    display: flex;60    align-items: center;61    justify-content: center;62    margin-right: 8px;63  }64  .title {65    font-size: 48px;66    font-weight: 600;67    letter-spacing: 0.2px;68  }69 70  /* Content list */71  .content {72    position: absolute;73    top: 230px;74    left: 0;75    right: 0;76    bottom: 180px; /* space for filename bar */77    overflow: hidden;78    padding: 10px 24px 0 24px;79    box-sizing: border-box;80  }81  .section-title {82    color: #9E9E9E;83    font-size: 36px;84    margin: 16px 0 10px 16px;85  }86  .list {87    border-top: 1px solid #222;88  }89  .item {90    display: flex;91    align-items: center;92    padding: 26px 10px 26px 10px;93    box-sizing: border-box;94  }95  .item + .item { border-top: 1px solid #1f1f1f; }96  .icon-wrap {97    width: 96px;98    height: 96px;99    margin: 4px 26px 4px 12px;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  .text-block .name {105    font-size: 42px;106    line-height: 1.15;107    color: #F5F5F5;108  }109  .text-block .sub {110    font-size: 30px;111    color: #A8A8A8;112    margin-top: 6px;113  }114 115  /* Bottom filename bar */116  .filename-bar {117    position: absolute;118    left: 0;119    right: 0;120    bottom: 80px;121    height: 130px;122    background: #1a1a1a;123    border-top: 1px solid #333;124    display: flex;125    align-items: center;126    padding: 0 24px;127    box-sizing: border-box;128    gap: 18px;129  }130  .filename-field {131    flex: 1;132    height: 82px;133    display: flex;134    align-items: center;135  }136  .filename-field input {137    width: 100%;138    height: 100%;139    background: transparent;140    border: 2px solid #E67E22;141    border-radius: 8px;142    color: #ffffff;143    font-size: 38px;144    padding: 0 18px;145    box-sizing: border-box;146    outline: none;147  }148  .clear-btn {149    width: 82px;150    height: 82px;151    border-radius: 41px;152    border: 1px solid #333;153    background: #2a2a2a;154    color: #EDEDED;155    font-size: 36px;156  }157  .ext {158    color: #BDBDBD;159    font-size: 40px;160    margin-left: 6px;161    margin-right: auto;162  }163  .save-btn {164    width: 160px;165    height: 82px;166    border-radius: 12px;167    border: none;168    font-size: 36px;169  }170  .save-btn.disabled {171    background: #3a3a3a;172    color: #7a7a7a;173  }174 175  /* Gesture bar */176  .gesture-bar {177    position: absolute;178    left: 50%;179    transform: translateX(-50%);180    bottom: 22px;181    width: 290px;182    height: 10px;183    background: #EDEDED;184    border-radius: 8px;185    opacity: 0.9;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <!-- Status bar -->193  <div class="status-bar">194    <div class="time">1:04</div>195    <div class="status-right">196      <div class="status-icon">197        <!-- simple moon icon -->198        <svg width="36" height="36" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">199          <path d="M12 2a9 9 0 0 0 9 12 9 9 0 1 1-9-12z"></path>200        </svg>201      </div>202      <div class="status-icon">203        <!-- WiFi -->204        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">205          <path d="M2 9c5-5 15-5 20 0"></path>206          <path d="M5 12c4-4 10-4 14 0"></path>207          <path d="M8 15c3-3 5-3 8 0"></path>208          <circle cx="12" cy="18" r="1.5" fill="#ffffff" stroke="none"></circle>209        </svg>210      </div>211      <div class="status-icon">212        <!-- Battery -->213        <svg width="48" height="48" viewBox="0 0 28 24" fill="none" stroke="#ffffff" stroke-width="2">214          <rect x="1" y="5" width="22" height="14" rx="2"></rect>215          <rect x="23" y="9" width="4" height="6" fill="#ffffff" stroke="none"></rect>216          <rect x="3" y="7" width="18" height="10" fill="#ffffff" stroke="none" opacity="0.85"></rect>217        </svg>218      </div>219    </div>220  </div>221 222  <!-- Header -->223  <div class="header">224    <div class="back">225      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">226        <path d="M14.5 4L6 12l8.5 8v-5.5H22v-5H14.5V4z"></path>227      </svg>228    </div>229    <div class="title">Save as</div>230  </div>231 232  <!-- Content -->233  <div class="content">234    <div class="section-title">Places</div>235    <div class="list">236      <!-- OneDrive -->237      <div class="item">238        <div class="icon-wrap">239          <svg width="78" height="78" viewBox="0 0 64 64">240            <path d="M26 26c4-6 14-8 20 0 7-1 12 4 12 10s-5 10-11 10H19c-6 0-11-4-11-9 0-6 5-9 10-8 2-5 5-6 8-3z" fill="#4DA3FF"></path>241          </svg>242        </div>243        <div class="text-block">244          <div class="name">OneDrive - Personal</div>245          <div class="sub">ffionh41@gmail.com</div>246        </div>247      </div>248 249      <!-- This device -->250      <div class="item">251        <div class="icon-wrap">252          <svg width="78" height="78" viewBox="0 0 64 64">253            <rect x="16" y="6" width="32" height="52" rx="6" fill="none" stroke="#CFCFCF" stroke-width="4"></rect>254            <rect x="28" y="50" width="8" height="4" fill="#CFCFCF"></rect>255          </svg>256        </div>257        <div class="text-block">258          <div class="name">This device</div>259        </div>260      </div>261 262      <!-- Browse -->263      <div class="item">264        <div class="icon-wrap">265          <svg width="78" height="78" viewBox="0 0 64 64">266            <path d="M20 42h24c6 0 10-4 10-8s-3-8-9-8c-2-5-7-8-13-7-7 1-12 6-12 12-5 0-8 3-8 7s3 4 8 4z" fill="none" stroke="#CFCFCF" stroke-width="4"></path>267          </svg>268        </div>269        <div class="text-block">270          <div class="name">Browse</div>271          <div class="sub">Google Drive, SD card, and more...</div>272        </div>273      </div>274 275      <!-- Add a place -->276      <div class="item">277        <div class="icon-wrap">278          <svg width="78" height="78" viewBox="0 0 64 64">279            <path d="M32 12v40M12 32h40" stroke="#CFCFCF" stroke-width="6" stroke-linecap="round"></path>280          </svg>281        </div>282        <div class="text-block">283          <div class="name">Add a place</div>284          <div class="sub">Connect to cloud storage</div>285        </div>286      </div>287    </div>288  </div>289 290  <!-- Bottom filename area -->291  <div class="filename-bar">292    <div class="filename-field">293      <input type="text" value="Presentation">294    </div>295    <button class="clear-btn">×</button>296    <div class="ext">.pptx</div>297    <button class="save-btn disabled">Save</button>298  </div>299 300  <!-- Gesture handle -->301  <div class="gesture-bar"></div>302</div>303</body>304</html>