GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Save to Drive UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Roboto, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#F6F4F9;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:110px; padding:24px 36px 0 36px;16    color:#2f2f2f; font-size:38px; letter-spacing:0.5px;17    display:flex; align-items:center; justify-content:space-between;18  }19  .status-icons { display:flex; gap:24px; align-items:center; }20  .dot-icon { width:28px; height:28px; background:#9E9E9E; border-radius:50%; }21  .battery {22    width:40px; height:24px; border:3px solid #4A4A4A; border-radius:4px; position:relative;23  }24  .battery::after { content:""; position:absolute; right:-10px; top:6px; width:8px; height:12px; background:#4A4A4A; border-radius:2px; }25  .battery-fill { position:absolute; left:3px; top:3px; width:28px; height:16px; background:#4A4A4A; }26 27  /* Top app bar */28  .top-bar {29    position:absolute; top:110px; left:0; right:0;30    height:180px; background:#EEEAF6;31    display:flex; align-items:center;32    padding:0 40px;33  }34  .title { font-size:64px; color:#22223A; margin-left:24px; }35  .close {36    width:72px; height:72px; display:flex; align-items:center; justify-content:center;37    border-radius:50%;38  }39  .save-btn {40    margin-left:auto; margin-right:28px;41    background:#5A57A0; color:#fff; border:none;42    height:100px; width:240px; border-radius:50px;43    font-size:44px; font-weight:600; box-shadow:none;44  }45 46  /* Content area */47  .content {48    position:absolute; top:290px; left:0; right:0;49    padding:40px 60px;50  }51  .preview-box {52    width:900px; height:420px; margin:0 auto 60px auto;53    background:#FFFFFF; border:3px solid #E0DFEA; border-radius:26px;54    display:flex; align-items:center; justify-content:center;55    color:#8E8E99; font-size:44px;56  }57 58  .form-group { width:960px; margin:0 auto 46px auto; }59  .label { font-size:40px; color:#6E6E78; margin:20px 12px; }60 61  .input-row {62    background:#FFFFFF; border:3px solid #D9D9E4; border-radius:26px;63    height:140px; display:flex; align-items:center;64    padding:0 28px;65  }66  .doc-icon, .drive-icon {67    width:80px; height:80px; margin-right:26px;68    background:#E0E0E0; border:2px solid #BDBDBD; border-radius:10px;69    position:relative;70  }71  /* simple document fold */72  .doc-icon::after {73    content:""; position:absolute; right:0; top:0;74    width:28px; height:28px; background:#CFCFCF;75    clip-path: polygon(0 0, 100% 0, 100% 100%);76  }77  /* simple Google Drive triangle */78  .drive-icon::after {79    content:""; position:absolute; left:14px; top:18px;80    width:52px; height:44px; background:#CFCFCF;81    clip-path: polygon(50% 0, 100% 100%, 0 100%);82  }83  .input-text {84    font-size:46px; color:#222; flex:1;85    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;86  }87  .circle-x, .arrow-down {88    width:72px; height:72px; border-radius:50%;89    border:3px solid #B8B8C7; display:flex;90    align-items:center; justify-content:center; margin-left:20px;91  }92  .arrow-down { border-color:#B8B8C7; }93  /* bottom gesture bar */94  .gesture-bar {95    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);96    width:520px; height:14px; background:#8E8E8E; border-radius:8px;97  }98  /* SVG sizes */99  svg { display:block; }100</style>101</head>102<body>103<div id="render-target">104 105  <div class="status-bar">106    <div style="display:flex; align-items:center; gap:20px;">107      <div style="font-size:40px;">8:35</div>108    </div>109    <div class="status-icons">110      <div class="dot-icon"></div>111      <div class="dot-icon"></div>112      <div class="dot-icon"></div>113      <div class="battery"><div class="battery-fill"></div></div>114    </div>115  </div>116 117  <div class="top-bar">118    <div class="close">119      <svg width="44" height="44" viewBox="0 0 24 24">120        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#2F2F2F" stroke-width="2.5" stroke-linecap="round"/>121      </svg>122    </div>123    <div class="title">Save to Drive</div>124    <button class="save-btn">Save</button>125  </div>126 127  <div class="content">128    <div class="preview-box">No preview available</div>129 130    <div class="form-group">131      <div class="label">File name</div>132      <div class="input-row">133        <div class="doc-icon"></div>134        <div class="input-text">BACKUP_REMINDER_MADE_EASY.db</div>135        <div class="circle-x">136          <svg width="34" height="34" viewBox="0 0 24 24">137            <circle cx="12" cy="12" r="10" stroke="#9A9AAC" stroke-width="2" fill="none"/>138            <path d="M8 8 L16 16 M16 8 L8 16" stroke="#9A9AAC" stroke-width="2" stroke-linecap="round"/>139          </svg>140        </div>141      </div>142    </div>143 144    <div class="form-group">145      <div class="label">Location</div>146      <div class="input-row">147        <div class="drive-icon"></div>148        <div class="input-text">My Drive</div>149        <div class="arrow-down">150          <svg width="26" height="26" viewBox="0 0 24 24">151            <path d="M6 9 L12 15 L18 9" stroke="#8F8F9C" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>152          </svg>153        </div>154      </div>155    </div>156  </div>157 158  <div class="gesture-bar"></div>159 160</div>161</body>162</html>