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>UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#1b1b1b;13    font-family: "Roboto", Arial, sans-serif;14    color:#fff;15  }16 17  /* Status bar */18  .status-bar{19    height:110px; background:#000; color:#fff; padding:0 28px;20    display:flex; align-items:center; justify-content:space-between;21    font-size:40px; letter-spacing:1px;22  }23  .status-icons{ display:flex; align-items:center; gap:26px; }24  .dot{ width:10px; height:10px; background:#cfcfcf; border-radius:50%; display:inline-block; }25 26  /* App bar */27  .app-bar{28    height:120px; background:#111; display:flex; align-items:center;29    padding:0 28px; border-bottom:1px solid #2a2a2a;30  }31  .app-title{32    font-size:46px; color:#e9e9e9; font-weight:600;33  }34  .app-actions{ margin-left:auto; display:flex; align-items:center; gap:34px; }35  .icon-btn svg{ width:56px; height:56px; fill:#e9e9e9; opacity:0.9; }36 37  /* File list area (dimmed later by overlay) */38  .content{39    background:#f4f4f4; height:2170px; /* until keyboard covers */40    color:#111;41  }42  .file-row{43    display:flex; align-items:center;44    background:#345a86; color:#fff;45    margin:0; height:210px;46    padding:0 24px;47  }48  .file-icon{49    width:130px; height:130px; border-radius:18px;50    background:#90a7c3; display:flex; align-items:center; justify-content:center;51    margin-right:24px;52  }53  .file-text{ flex:1; }54  .file-name{55    font-size:44px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;56    max-width:760px;57  }58  .file-sub{59    margin-top:8px; font-size:34px; opacity:0.9;60  }61  .check{62    width:56px; height:56px; border-radius:8px; border:3px solid #fff; display:flex; align-items:center; justify-content:center;63  }64  .check svg{ width:40px; height:40px; fill:#fff; }65 66  /* Scrim overlay */67  .scrim{68    position:absolute; left:0; top:0; right:0; bottom:0;69    background:rgba(0,0,0,0.55);70  }71 72  /* Dialog */73  .dialog{74    position:absolute; left:50%; transform:translateX(-50%);75    top:680px; width:920px; background:#f2f2f2; color:#111;76    border-radius:30px; box-shadow:0 22px 60px rgba(0,0,0,0.35);77    border:1px solid #d6d6d6;78  }79  .dialog-body{ padding:44px 54px 30px; }80  .dialog-title{ font-size:56px; font-weight:700; margin-bottom:40px; }81  .text-field{82    position:relative; padding:18px 0 22px;83    border-bottom:3px solid #b9b9b9; overflow:hidden;84  }85  .selection{86    position:absolute; left:0; top:12px; height:64px; width:760px;87    background:#c8c8c8;88  }89  .text-value{90    position:relative; font-size:44px; letter-spacing:1px;91    color:#111; padding-left:16px;92  }93  .dialog-actions{94    display:flex; justify-content:flex-end; gap:40px;95    padding:22px 40px 34px;96  }97  .text-btn{98    font-size:48px; color:#66a3ff; font-weight:500; cursor:default;99  }100 101  /* Keyboard */102  .keyboard{103    position:absolute; left:0; right:0; bottom:60px;104    height:860px; background:#111214; border-top:1px solid #222;105    padding:18px 18px 24px;106  }107  .kb-toolbar{108    height:120px; display:flex; gap:26px; align-items:center; justify-content:center;109  }110  .kb-tool{111    width:92px; height:92px; background:#1f1f21; border-radius:18px; display:flex; align-items:center; justify-content:center;112    color:#c9c9c9; font-size:34px;113  }114  .kb-rows{ margin-top:6px; }115  .kb-row{116    display:flex; justify-content:center; gap:14px; margin:16px 0;117  }118  .key{119    height:128px; min-width:92px; background:#2b2c30; color:#fff; border-radius:22px;120    display:flex; align-items:center; justify-content:center; font-size:44px;121    padding:0 22px;122  }123  .key.wide{ min-width:150px; }124  .key.space{ flex:1; }125  .key.icon{ font-size:38px; color:#cfcfcf; }126  .key.enter{ background:#b8b9ff22; color:#e6e6ff; min-width:140px; }127  .nav-pill{128    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);129    width:320px; height:12px; background:#eaeaea; border-radius:8px; opacity:0.9;130  }131 132  /* Small helpers */133  .muted{ opacity:0.85; }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status bar -->140  <div class="status-bar">141    <div>9:13</div>142    <div class="status-icons">143      <span class="dot"></span>144      <span class="dot"></span>145      <span class="dot"></span>146      <svg viewBox="0 0 24 24" width="42" height="42" fill="#ffffffcc"><path d="M16 7h4a2 2 0 0 1 2 2v8h-6V7zM2 11a2 2 0 0 1 2-2h10v8H2v-6z"/></svg>147      <svg viewBox="0 0 24 24" width="48" height="48" fill="#ffffff"><path d="M16 4v2a6 6 0 0 1 0 12v2a8 8 0 0 0 0-16zM3 12a7 7 0 0 1 7-7v14a7 7 0 0 1-7-7z"/></svg>148    </div>149  </div>150 151  <!-- App bar -->152  <div class="app-bar">153    <div class="app-title">(1)</div>154    <div class="app-actions">155      <div class="icon-btn" title="Search">156        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 21l1-1-5.5-5.5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>157      </div>158      <div class="icon-btn" title="Cut">159        <svg viewBox="0 0 24 24"><path d="M14.5 4l-5 9M4 4l7 7m3 3l6 6M4 20a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm12-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" stroke="#e9e9e9" stroke-width="2" fill="none"/></svg>160      </div>161      <div class="icon-btn" title="Edit">162        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z"/></svg>163      </div>164      <div class="icon-btn" title="More">165        <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/></svg>166      </div>167    </div>168  </div>169 170  <!-- Content -->171  <div class="content">172    <div class="file-row">173      <div class="file-icon">174        <svg viewBox="0 0 24 24" width="70" height="70" fill="#2b3a54">175          <path d="M6 2h7l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM13 3.5V8h4.5L13 3.5z"/>176        </svg>177      </div>178      <div class="file-text">179        <div class="file-name">2023_12_07_08_05_37_1_1....</div>180        <div class="file-sub muted">2023-12-07 08:15, 194.3 KB    00:12s</div>181      </div>182      <div class="check">183        <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>184      </div>185    </div>186  </div>187 188  <!-- Scrim + Dialog -->189  <div class="scrim"></div>190  <div class="dialog" role="dialog" aria-label="Rename">191    <div class="dialog-body">192      <div class="dialog-title">Insert new file name</div>193      <div class="text-field">194        <div class="selection"></div>195        <div class="text-value">2023_12_07_08_05_37_1_1</div>196      </div>197    </div>198    <div class="dialog-actions">199      <div class="text-btn">Cancel</div>200      <div class="text-btn">OK</div>201    </div>202  </div>203 204  <!-- Keyboard -->205  <div class="keyboard">206    <div class="kb-toolbar">207      <div class="kb-tool">▦</div>208      <div class="kb-tool">☺</div>209      <div class="kb-tool">GIF</div>210      <div class="kb-tool">⚙</div>211      <div class="kb-tool">G↔︎</div>212      <div class="kb-tool">🎨</div>213      <div class="kb-tool">🎙</div>214    </div>215    <div class="kb-rows">216      <div class="kb-row">217        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>218        <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>219      </div>220      <div class="kb-row">221        <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>222        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>223      </div>224      <div class="kb-row">225        <div class="key wide icon">⇧</div>226        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>227        <div class="key wide icon">⌫</div>228      </div>229      <div class="kb-row">230        <div class="key wide">?123</div>231        <div class="key">,</div>232        <div class="key space"></div>233        <div class="key">.</div>234        <div class="key enter">✓</div>235      </div>236    </div>237  </div>238 239  <div class="nav-pill"></div>240</div>241</body>242</html>