GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Save As - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #1c1c1c;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-left { display: flex; align-items: center; gap: 28px; }32  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }33  .status-time { font-size: 36px; font-weight: 600; letter-spacing: 0.5px; }34 35  /* App bar */36  .app-bar {37    position: absolute;38    top: 120px;39    left: 0;40    width: 1080px;41    height: 160px;42    background: #202020;43    display: flex;44    align-items: center;45    padding: 0 36px;46    box-sizing: border-box;47  }48  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }49  .title { font-size: 58px; font-weight: 600; }50  .places { margin-left: auto; display: flex; align-items: center; gap: 16px; color: #f0f0f0; font-size: 38px; }51 52  /* Path row */53  .path-row {54    position: absolute;55    top: 280px;56    left: 0;57    width: 1080px;58    height: 110px;59    display: flex;60    align-items: center;61    padding: 0 36px;62    box-sizing: border-box;63    color: #cfcfcf;64    gap: 20px;65    border-bottom: 1px solid #2a2a2a;66  }67  .path-row .path-text { font-size: 34px; }68 69  /* Folder list */70  .list {71    position: absolute;72    top: 390px;73    left: 0;74    right: 0;75    padding: 0 36px;76    box-sizing: border-box;77  }78  .folder-item {79    height: 130px;80    display: flex;81    align-items: center;82    gap: 28px;83    border-bottom: 1px solid #1e1e1e;84  }85  .folder-name { font-size: 46px; color: #f5f5f5; }86 87  /* Bottom save bar */88  .bottom-bar {89    position: absolute;90    bottom: 120px;91    left: 0;92    width: 1080px;93    height: 170px;94    background: #1b1b1b;95    display: flex;96    align-items: center;97    padding: 0 36px;98    box-sizing: border-box;99    gap: 24px;100  }101  .filename-wrap { position: relative; flex: 1; }102  .filename-input {103    width: 100%;104    height: 90px;105    border: 3px solid #C46E43;106    border-radius: 12px;107    background: #141414;108    color: #ffffff;109    font-size: 40px;110    padding: 0 110px 0 28px;111    box-sizing: border-box;112    outline: none;113  }114  .clear-btn {115    position: absolute;116    right: 14px;117    top: 50%;118    transform: translateY(-50%);119    width: 72px;120    height: 72px;121    border-radius: 8px;122    background: #2a2a2a;123    display: flex;124    align-items: center;125    justify-content: center;126    border: 2px solid #C46E43;127  }128  .ext-label { color: #d0d0d0; font-size: 40px; }129  .save-btn {130    width: 180px;131    height: 90px;132    background: #C46E43;133    color: #ffffff;134    font-size: 40px;135    font-weight: 600;136    border-radius: 12px;137    display: flex;138    align-items: center;139    justify-content: center;140  }141 142  /* Gesture bar */143  .gesture {144    position: absolute;145    bottom: 40px;146    left: 50%;147    transform: translateX(-50%);148    width: 220px;149    height: 10px;150    background: #ffffff;151    border-radius: 8px;152    opacity: 0.9;153  }154 155  /* Simple icon styling */156  svg { display: block; }157  .icon-stroke { stroke: #ffffff; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }158  .icon-muted { stroke: #bdbdbd; }159</style>160</head>161<body>162<div id="render-target">163  <!-- Status bar -->164  <div class="status-bar">165    <div class="status-left">166      <div class="status-time">1:06</div>167      <!-- Crescent moon (DND) -->168      <svg width="34" height="34" viewBox="0 0 24 24">169        <path class="icon-stroke" d="M12 3a7 7 0 1 0 9 9A9 9 0 1 1 12 3z"></path>170      </svg>171      <!-- Small dot icon -->172      <svg width="28" height="28" viewBox="0 0 24 24">173        <circle cx="12" cy="12" r="4" fill="#ffffff"></circle>174      </svg>175      <!-- Video icon -->176      <svg width="32" height="32" viewBox="0 0 24 24">177        <rect x="3" y="6" width="13" height="12" class="icon-stroke"></rect>178        <polygon points="18,9 22,12 18,15" fill="#ffffff"></polygon>179      </svg>180    </div>181    <div class="status-right">182      <!-- WiFi -->183      <svg width="36" height="36" viewBox="0 0 24 24">184        <path class="icon-stroke" d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 20l0.01 0"></path>185      </svg>186      <!-- Battery -->187      <svg width="48" height="36" viewBox="0 0 30 18">188        <rect x="2" y="3" width="22" height="12" rx="2" ry="2" stroke="#ffffff" fill="none" stroke-width="2"></rect>189        <rect x="4" y="5" width="18" height="8" fill="#ffffff"></rect>190        <rect x="24" y="7" width="4" height="4" fill="#ffffff"></rect>191      </svg>192    </div>193  </div>194 195  <!-- App bar -->196  <div class="app-bar">197    <div class="back-btn">198      <svg width="56" height="56" viewBox="0 0 24 24">199        <path class="icon-stroke" d="M15 19l-7-7 7-7"></path>200      </svg>201    </div>202    <div class="title">Save as</div>203    <div class="places">204      <svg width="48" height="48" viewBox="0 0 24 24">205        <path class="icon-stroke icon-muted" d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"></path>206      </svg>207      <span>Places</span>208    </div>209  </div>210 211  <!-- Path Row -->212  <div class="path-row">213    <svg width="40" height="40" viewBox="0 0 24 24">214      <rect x="6" y="3" width="12" height="18" rx="2" class="icon-stroke icon-muted"></rect>215      <rect x="9" y="6" width="6" height="10" class="icon-stroke icon-muted"></rect>216    </svg>217    <div class="path-text">This device &gt; Download</div>218  </div>219 220  <!-- Folder List -->221  <div class="list">222    <div class="folder-item">223      <svg width="64" height="64" viewBox="0 0 24 24">224        <path class="icon-stroke icon-muted" d="M3 8h7l2-2h9v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z"></path>225      </svg>226      <div class="folder-name">aMessage</div>227    </div>228    <div class="folder-item">229      <svg width="64" height="64" viewBox="0 0 24 24">230        <path class="icon-stroke icon-muted" d="M3 8h7l2-2h9v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z"></path>231      </svg>232      <div class="folder-name">Nearby Share</div>233    </div>234    <div class="folder-item">235      <svg width="64" height="64" viewBox="0 0 24 24">236        <path class="icon-stroke icon-muted" d="M3 8h7l2-2h9v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z"></path>237      </svg>238      <div class="folder-name">offlinePractices</div>239    </div>240    <div class="folder-item">241      <svg width="64" height="64" viewBox="0 0 24 24">242        <path class="icon-stroke icon-muted" d="M3 8h7l2-2h9v10a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8z"></path>243      </svg>244      <div class="folder-name">TeraBox</div>245    </div>246  </div>247 248  <!-- Bottom Save Bar -->249  <div class="bottom-bar">250    <div class="filename-wrap">251      <input class="filename-input" type="text" value="Importance of hiking">252      <div class="clear-btn">253        <svg width="36" height="36" viewBox="0 0 24 24">254          <path class="icon-stroke" d="M6 6l12 12M18 6l-12 12"></path>255        </svg>256      </div>257    </div>258    <div class="ext-label">.pptx</div>259    <div class="save-btn">Save</div>260  </div>261 262  <!-- Gesture bar -->263  <div class="gesture"></div>264</div>265</body>266</html>