GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Save to Drive 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: #18141f; /* dark purple/black */14    color: #eae6f7;15  }16 17  /* Header */18  .header {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 220px;24    padding: 60px 56px 0 56px;25    box-sizing: border-box;26  }27  .header-row {28    display: flex;29    align-items: center;30    justify-content: space-between;31  }32  .title-wrap {33    display: flex;34    align-items: center;35    gap: 32px;36  }37  .title {38    font-size: 64px;39    font-weight: 600;40    letter-spacing: 0.5px;41    color: #e7e0eb;42  }43  .save-btn {44    padding: 26px 56px;45    font-size: 46px;46    border-radius: 64px;47    background: #ceb4ff;48    color: #231b2f;49    font-weight: 700;50    border: none;51  }52 53  /* Close icon */54  .icon-btn {55    width: 72px;56    height: 72px;57    border-radius: 36px;58    display: inline-flex;59    align-items: center;60    justify-content: center;61    background: transparent;62  }63  .icon {64    width: 52px; height: 52px;65  }66  .icon svg { width: 100%; height: 100%; }67 68  /* Content area */69  .content {70    position: absolute;71    top: 260px;72    left: 0;73    width: 100%;74    padding: 0 56px;75    box-sizing: border-box;76  }77 78  .preview {79    width: 860px;80    height: 360px;81    margin: 0 auto 60px auto;82    border-radius: 28px;83    border: 2px solid #3b3345;84    background: rgba(255,255,255,0.02);85    display: flex;86    align-items: center;87    justify-content: center;88    color: #a99fb1;89    font-size: 44px;90  }91 92  /* Field blocks */93  .field {94    margin-bottom: 56px;95  }96  .label {97    color: #a79fb4;98    font-size: 36px;99    margin: 12px 0 22px 4px;100  }101  .input-wrap {102    background: #221c2b;103    border: 2px solid #3a3145;104    border-radius: 22px;105    padding: 30px 32px;106    display: flex;107    align-items: center;108    justify-content: space-between;109  }110  .left {111    display: flex; align-items: center; gap: 24px;112  }113  .chip-icon {114    width: 64px; height: 64px; border-radius: 12px; background: #4e8cff;115    display: inline-flex; align-items: center; justify-content: center;116    color: #fff; font-weight: 800; font-size: 28px;117  }118  .drive-icon {119    width: 64px; height: 64px; border-radius: 12px; background: #9aa2ff;120    display: inline-flex; align-items: center; justify-content: center;121    color: #23202b; font-weight: 800; font-size: 26px;122  }123  .value {124    font-size: 48px; color: #f3eef8;125  }126  .subtle {127    color: #b9b2c5;128  }129  .right {130    display: flex; align-items: center; gap: 26px;131  }132  .clear-circle {133    width: 72px; height: 72px; border-radius: 36px;134    border: 2px solid #5a5365;135    display: flex; align-items: center; justify-content: center;136  }137  .dropdown {138    width: 52px; height: 52px;139  }140 141  /* Bottom gesture bar (visual only) */142  .gesture {143    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);144    width: 420px; height: 12px; border-radius: 6px; background: #dfdde6; opacity: 0.8;145  }146</style>147</head>148<body>149<div id="render-target">150 151  <!-- Header -->152  <div class="header">153    <div class="header-row">154      <div class="title-wrap">155        <button class="icon-btn" aria-label="Close">156          <div class="icon">157            <svg viewBox="0 0 24 24" fill="#e7e0eb">158              <path d="M6 6l12 12M18 6L6 18" stroke="#e7e0eb" stroke-width="2" stroke-linecap="round"/>159            </svg>160          </div>161        </button>162        <div class="title">Save to Drive</div>163      </div>164      <button class="save-btn">Save</button>165    </div>166  </div>167 168  <!-- Content -->169  <div class="content">170    <div class="preview">No preview available</div>171 172    <!-- File name -->173    <div class="field">174      <div class="label">File name</div>175      <div class="input-wrap">176        <div class="left">177          <div class="chip-icon">ODP</div>178          <div class="value">Field trip.odp</div>179        </div>180        <div class="right">181          <div class="clear-circle">182            <svg class="dropdown" viewBox="0 0 24 24">183              <circle cx="12" cy="12" r="11" fill="none"/>184              <path d="M7 7l10 10M17 7L7 17" stroke="#cfc7da" stroke-width="2" stroke-linecap="round"/>185            </svg>186          </div>187        </div>188      </div>189    </div>190 191    <!-- Location -->192    <div class="field">193      <div class="label">Location</div>194      <div class="input-wrap">195        <div class="left">196          <div class="drive-icon">△</div>197          <div class="value">My Drive</div>198        </div>199        <div class="right">200          <svg class="dropdown" viewBox="0 0 24 24">201            <path d="M6 9l6 6 6-6" fill="none" stroke="#d6cfe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>202          </svg>203        </div>204      </div>205    </div>206 207    <!-- Account -->208    <div class="field">209      <div class="label">Account</div>210      <div class="input-wrap">211        <div class="left">212          <div class="value subtle">farida.wadi01@gmail.com</div>213        </div>214        <div class="right">215          <svg class="dropdown" viewBox="0 0 24 24">216            <path d="M6 9l6 6 6-6" fill="none" stroke="#d6cfe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>217          </svg>218        </div>219      </div>220    </div>221  </div>222 223  <div class="gesture"></div>224</div>225</body>226</html>