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>Mock UI - Name Input</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 110px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #616161;27    font-size: 38px;28  }29  .sb-left, .sb-right { display: flex; align-items: center; gap: 22px; }30  .sb-icon {31    width: 30px; height: 30px; border-radius: 50%; background: #BDBDBD;32    opacity: 0.6;33  }34  .battery {35    width: 50px; height: 26px; border: 3px solid #777; border-radius: 6px; position: relative;36  }37  .battery::after {38    content: "";39    position: absolute; right: -9px; top: 7px;40    width: 6px; height: 12px; background: #777; border-radius: 2px;41  }42  .battery .level {43    position: absolute; left: 3px; top: 3px; bottom: 3px; right: 10px;44    background: #777;45  }46  .wifi {47    width: 34px; height: 34px;48  }49  .wifi svg { width: 100%; height: 100%; }50  .time { font-weight: 600; color: #5e5e5e; }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 110px; left: 0; right: 0;56    height: 140px;57    display: flex;58    align-items: center;59    padding: 0 36px;60  }61  .back-btn {62    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;63  }64  .title {65    font-size: 58px; font-weight: 600; color: #222;66    margin-left: 6px;67  }68  .ok {69    margin-left: auto;70    font-size: 48px; color: #9E9E9E; font-weight: 600;71  }72 73  /* Form area */74  .content {75    position: absolute;76    top: 270px; left: 48px; right: 48px;77  }78  .label {79    font-size: 34px; color: #757575; margin-bottom: 26px;80  }81  .input-line {82    position: relative;83    padding-bottom: 18px;84    margin-bottom: 22px;85  }86  .input-value {87    font-size: 60px; color: #222; letter-spacing: 0.5px;88  }89  .caret {90    position: absolute; height: 66px; width: 4px; background: #3F51B5;91    bottom: 18px;92  }93  .underline {94    height: 5px; background: #3F51B5; width: 100%;95  }96  .helper {97    margin-top: 36px;98    font-size: 34px; line-height: 48px; color: #808080;99    max-width: 880px;100  }101 102  /* Keyboard */103  .keyboard {104    position: absolute; left: 0; right: 0; bottom: 32px;105    height: 1020px;106    background: #F1F2E8;107    border-top-left-radius: 28px; border-top-right-radius: 28px;108    box-shadow: 0 -2px 0 rgba(0,0,0,0.04);109  }110  .suggestions {111    height: 140px; background: #ECEEE4;112    border-top-left-radius: 28px; border-top-right-radius: 28px;113    display: flex; align-items: center; gap: 24px;114    padding: 0 26px;115    color: #3a3a3a;116    font-size: 42px;117  }118  .kbd-round {119    width: 84px; height: 84px; background: #CFE0C9; border-radius: 42px; display: flex; align-items: center; justify-content: center; color: #3a3a3a; font-weight: 600;120  }121  .suggestion-chip { flex: 0 0 auto; padding: 0 16px; }122  .divider { width: 2px; height: 64px; background: #C8C8C8; }123  .mic {124    margin-left: auto; width: 72px; height: 72px;125  }126 127  .keys {128    padding: 26px;129    display: grid;130    grid-template-rows: repeat(4, 1fr);131    row-gap: 22px;132    height: calc(100% - 140px);133  }134  .row { display: grid; column-gap: 16px; align-items: center; }135  .row.row1 { grid-template-columns: repeat(10, 1fr); }136  .row.row2 { grid-template-columns: repeat(9, 1fr); padding: 0 42px; }137  .row.row3 { grid-template-columns: 120px repeat(7, 1fr) 160px; }138  .row.row4 { grid-template-columns: 140px 140px 1fr 140px 160px; }139  .key {140    background: #FFFFFF; color: #404040; border-radius: 22px; height: 150px;141    display: flex; align-items: center; justify-content: center;142    font-size: 48px; font-weight: 600; box-shadow: inset 0 0 0 2px #E5E5E5;143  }144  .key.light { background: #DDE7D6; color: #2f2f2f; font-weight: 700; }145  .space { justify-content: center; font-weight: 500; letter-spacing: 10px; color: #777; }146 147  /* Gesture bar */148  .gesture {149    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);150    width: 360px; height: 10px; border-radius: 6px; background: #B0B0B0;151    opacity: 0.8;152  }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="status-bar">160    <div class="sb-left">161      <span class="time">1:44</span>162      <div class="sb-icon"></div>163      <div class="sb-icon"></div>164      <div class="sb-icon"></div>165      <div class="sb-icon"></div>166      <div class="sb-icon"></div>167      <div class="sb-icon"></div>168    </div>169    <div class="sb-right">170      <div class="wifi">171        <svg viewBox="0 0 24 24">172          <path d="M2 9c6-6 14-6 20 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>173          <path d="M6 13c4-4 8-4 12 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>174          <circle cx="12" cy="17" r="2" fill="#777"/>175        </svg>176      </div>177      <div class="battery"><div class="level"></div></div>178    </div>179  </div>180 181  <!-- App bar -->182  <div class="app-bar">183    <div class="back-btn">184      <svg width="54" height="54" viewBox="0 0 32 32">185        <path d="M20 8 L10 16 L20 24" stroke="#3A3A3A" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>186      </svg>187    </div>188    <div class="title">Name</div>189    <div class="ok">OK</div>190  </div>191 192  <!-- Content -->193  <div class="content">194    <div class="label">Name</div>195    <div class="input-line">196      <div class="input-value">Cerebra Research</div>197      <div class="caret" style="right: 0;"></div>198      <div class="underline"></div>199    </div>200    <div class="helper">201      Input your name in your native language or the language you're learning. Names cannot contain special symbols or emoji characters.202    </div>203  </div>204 205  <!-- Keyboard -->206  <div class="keyboard">207    <div class="suggestions">208      <div class="kbd-round">⌨</div>209      <div class="suggestion-chip">Research</div>210      <div class="divider"></div>211      <div class="suggestion-chip">Researchcerebra</div>212      <div class="divider"></div>213      <div class="suggestion-chip">Researcher</div>214      <div class="mic">215        <svg viewBox="0 0 24 24">216          <rect x="9" y="3" width="6" height="10" rx="3" fill="#5E6C60"/>217          <path d="M6 10c0 4 3 6 6 6s6-2 6-6" stroke="#5E6C60" stroke-width="2" fill="none"/>218          <path d="M12 16v4" stroke="#5E6C60" stroke-width="2"/>219        </svg>220      </div>221    </div>222    <div class="keys">223      <div class="row row1">224        <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><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>225      </div>226      <div class="row row2">227        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>228      </div>229      <div class="row row3">230        <div class="key light">⇧</div>231        <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>232        <div class="key light">⌫</div>233      </div>234      <div class="row row4">235        <div class="key light">?123</div>236        <div class="key light">,</div>237        <div class="key space"> </div>238        <div class="key light">.</div>239        <div class="key light">✔</div>240      </div>241    </div>242  </div>243 244  <!-- Gesture bar -->245  <div class="gesture"></div>246 247</div>248</body>249</html>