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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #E6E8E2;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 100px;25    background: #E1E4DE;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 34px;32    color: #2F2F2F;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .sb-icon { width: 34px; height: 34px; opacity: 0.8; }40 41  /* App bar */42  .appbar {43    position: absolute;44    top: 100px;45    left: 0;46    width: 100%;47    height: 140px;48    background: #E6E8E2;49    border-bottom: 1px solid #D2D6CE;50    display: flex;51    align-items: center;52    padding: 0 24px 0 24px;53    box-sizing: border-box;54    gap: 18px;55  }56  .back-btn {57    width: 72px;58    height: 72px;59    display: flex;60    align-items: center;61    justify-content: center;62  }63  .title {64    font-size: 46px;65    color: #2A2A2A;66  }67 68  /* Content area */69  .content {70    position: absolute;71    top: 240px;72    left: 0;73    width: 100%;74    height: 1156px;75    background: #FBFAFF;76  }77 78  /* Keyboard */79  .keyboard {80    position: absolute;81    left: 0;82    bottom: 80px;83    width: 100%;84    height: 980px;85    background: #EEF0FF;86    border-top: 1px solid #D8DBF3;87    box-sizing: border-box;88    padding: 28px 26px 20px;89  }90  .kb-toolbar {91    height: 120px;92    display: flex;93    align-items: center;94    justify-content: space-between;95    padding: 0 16px;96    box-sizing: border-box;97  }98  .tool-icons {99    display: flex;100    align-items: center;101    gap: 44px;102  }103  .tool-icon {104    width: 70px;105    height: 70px;106    background: #FFFFFF;107    border: 1px solid #D5D5E8;108    border-radius: 18px;109    display: flex;110    align-items: center;111    justify-content: center;112    color: #666;113  }114  .tool-icon.round {115    border-radius: 50%;116    width: 70px; height: 70px;117  }118 119  /* Key rows */120  .row {121    display: flex;122    justify-content: center;123    gap: 16px;124    margin-top: 18px;125  }126  .indent { padding: 0 58px; }127  .key {128    width: 90px;129    height: 120px;130    background: #FFFFFF;131    border: 1px solid #D7D7EA;132    border-radius: 28px;133    display: flex;134    align-items: center;135    justify-content: center;136    font-size: 46px;137    color: #2D2D2D;138    box-sizing: border-box;139  }140  .key.pink { background: #FFD9E8; border-color: #F6B8CE; }141  .key.small { width: 80px; }142  .key.wide { width: 160px; }143  .key.xwide { width: 480px; }144  .round-btn {145    width: 120px; height: 120px;146    border-radius: 60px;147    background: #FFFFFF;148    border: 1px solid #D7D7EA;149    display: flex; align-items: center; justify-content: center;150  }151  .round-btn.pink { background: #FFD9E8; border-color: #F6B8CE; }152  .round-btn.green { background: #CFE78A; border-color: #B9D86A; }153  .label { font-size: 40px; color: #2C2C2C; }154 155  /* Gesture bar */156  .gesture {157    position: absolute;158    bottom: 24px;159    left: 50%;160    transform: translateX(-50%);161    width: 280px;162    height: 10px;163    background: #BDBDBD;164    border-radius: 10px;165    opacity: 0.7;166  }167 168  /* Simple svg icons colored */169  svg { display: block; }170  .icon { width: 48px; height: 48px; fill: #3A3A3A; }171  .icon-light { fill: #6B6B6B; }172</style>173</head>174<body>175<div id="render-target">176 177  <!-- Status Bar -->178  <div class="status-bar">179    <div>8:28</div>180    <div class="status-right">181      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3" fill="#6B6B6B"/></svg>182      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 18h18v-2L12 6 3 16z" fill="#6B6B6B"/></svg>183      <svg class="sb-icon" viewBox="0 0 24 24"><rect x="3" y="8" width="4" height="10" fill="#6B6B6B"/><rect x="9" y="6" width="4" height="12" fill="#6B6B6B"/><rect x="15" y="4" width="4" height="14" fill="#6B6B6B"/></svg>184      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 18h18v-2L12 6 3 16z" fill="#6B6B6B"/></svg>185      <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="19" cy="5" r="2" fill="#6B6B6B"/></svg>186      <svg class="sb-icon" viewBox="0 0 24 24"><path d="M18 7a6 6 0 1 0-12 0v6a6 6 0 1 0 12 0V7z" fill="#6B6B6B"/></svg>187    </div>188  </div>189 190  <!-- App Bar -->191  <div class="appbar">192    <div class="back-btn">193      <svg class="icon" viewBox="0 0 24 24">194        <path d="M14 5L6 12l8 7" stroke="#2F2F2F" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>195      </svg>196    </div>197    <div class="title">Search spreadsheets</div>198  </div>199 200  <!-- Content Area -->201  <div class="content"></div>202 203  <!-- Keyboard -->204  <div class="keyboard">205    <!-- Toolbar above keys -->206    <div class="kb-toolbar">207      <div class="tool-icons">208        <div class="tool-icon round">209          <svg viewBox="0 0 24 24" width="32" height="32" class="icon-light">210            <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>211            <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>212          </svg>213        </div>214        <div class="tool-icon">215          <svg viewBox="0 0 24 24" width="36" height="36" class="icon-light">216            <circle cx="12" cy="10" r="4"/><path d="M4 21c2-3 14-3 16 0" fill="none" stroke="#6B6B6B" stroke-width="1.5"/>217          </svg>218        </div>219        <div class="tool-icon">220          <span class="label">GIF</span>221        </div>222        <div class="tool-icon">223          <svg viewBox="0 0 24 24" width="34" height="34" class="icon-light">224            <path d="M12 7v10M7 12h10" stroke="#6B6B6B" stroke-width="2" fill="none" stroke-linecap="round"/>225            <circle cx="12" cy="12" r="9" fill="none" stroke="#6B6B6B" stroke-width="1.5"/>226          </svg>227        </div>228        <div class="tool-icon">229          <svg viewBox="0 0 24 24" width="36" height="36" class="icon-light">230            <path d="M4 18h12l4-8H8z" fill="#6B6B6B"/>231            <rect x="9" y="4" width="6" height="4" fill="#6B6B6B"/>232          </svg>233        </div>234        <div class="tool-icon">235          <svg viewBox="0 0 24 24" width="34" height="34" class="icon-light">236            <circle cx="6" cy="18" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="18" cy="6" r="3"/>237          </svg>238        </div>239      </div>240      <div class="tool-icons">241        <div class="tool-icon round">242          <svg viewBox="0 0 24 24" width="30" height="30" class="icon-light">243            <path d="M12 4a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V7a3 3 0 0 0-3-3z" />244            <path d="M5 13c0 4 14 4 14 0" fill="none" stroke="#6B6B6B" stroke-width="1.5"/>245          </svg>246        </div>247      </div>248    </div>249 250    <!-- Row 1 -->251    <div class="row">252      <div class="key">q</div>253      <div class="key">w</div>254      <div class="key">e</div>255      <div class="key">r</div>256      <div class="key">t</div>257      <div class="key">y</div>258      <div class="key">u</div>259      <div class="key">i</div>260      <div class="key">o</div>261      <div class="key">p</div>262    </div>263 264    <!-- Row 2 -->265    <div class="row indent">266      <div class="key">a</div>267      <div class="key">s</div>268      <div class="key">d</div>269      <div class="key">f</div>270      <div class="key">g</div>271      <div class="key">h</div>272      <div class="key">j</div>273      <div class="key">k</div>274      <div class="key">l</div>275    </div>276 277    <!-- Row 3 -->278    <div class="row">279      <div class="key pink wide">280        <svg viewBox="0 0 24 24" width="40" height="40" class="icon-light">281          <path d="M12 6l5 6H7z" />282        </svg>283      </div>284      <div class="key">z</div>285      <div class="key">x</div>286      <div class="key">c</div>287      <div class="key">v</div>288      <div class="key">b</div>289      <div class="key">n</div>290      <div class="key">m</div>291      <div class="key pink wide">292        <svg viewBox="0 0 24 24" width="42" height="42" class="icon-light">293          <path d="M3 12h12" stroke="#6B6B6B" stroke-width="2" fill="none" stroke-linecap="round"/>294          <path d="M17 7l4 5-4 5" fill="#6B6B6B"/>295        </svg>296      </div>297    </div>298 299    <!-- Row 4 -->300    <div class="row">301      <div class="round-btn pink"><span class="label">?123</span></div>302      <div class="key pink small">,</div>303      <div class="round-btn">304        <span class="label">☺</span>305      </div>306      <div class="key xwide"></div>307      <div class="key pink small">.</div>308      <div class="round-btn green">309        <svg viewBox="0 0 24 24" width="40" height="40" class="icon">310          <circle cx="11" cy="11" r="6" fill="none" stroke="#2F2F2F" stroke-width="2"/>311          <path d="M16 16l5 5" stroke="#2F2F2F" stroke-width="2" stroke-linecap="round"/>312        </svg>313      </div>314    </div>315  </div>316 317  <!-- Gesture bar -->318  <div class="gesture"></div>319</div>320</body>321</html>