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; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Top status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; background: #000;19  }20 21  /* Header search */22  .header {23    position: absolute; top: 110px; left: 0; width: 100%; height: 130px;24    display: flex; align-items: center; gap: 24px;25    padding: 0 36px; box-sizing: border-box;26    background: #fff;27  }28  .header .icon-btn {29    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;30  }31  .search-wrap {32    flex: 1; display: flex; align-items: center;33    border-bottom: 3px solid #e3e3e3; height: 80px;34  }35  .search-input {36    flex: 1; font-size: 44px; border: none; outline: none;37    background: transparent; color: #3c3c3c;38  }39  .header .nav-icons { display: flex; align-items: center; gap: 20px; }40  .divider {41    position: absolute; top: 240px; left: 36px; right: 36px; height: 3px; background: #e7e7e7;42  }43 44  /* Outline chip */45  .outline-chip {46    position: absolute; top: 270px; left: 36px; right: 36px;47    height: 110px; background: #fff;48    border-radius: 14px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);49    display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;50  }51  .outline-chip .doc-icon {52    width: 70px; height: 70px; border: 1px solid #cfcfcf; border-radius: 10px;53    display: flex; align-items: center; justify-content: center; margin-right: 24px;54    background: #f7f7f7;55  }56  .outline-chip .chip-text {57    font-size: 40px; color: #3c3c3c;58  }59 60  /* Content area */61  .content {62    position: absolute; top: 420px; left: 72px; right: 72px;63    color: #7b848a; line-height: 1.35;64  }65  .content .para {66    font-size: 44px; margin-bottom: 60px;67  }68  .content .rule {69    height: 4px; background: #e6e6e6; margin: 60px 0;70  }71 72  .section {73    display: flex; align-items: center; justify-content: space-between;74  }75  .section .title {76    display: flex; align-items: baseline; gap: 20px;77  }78  .section .num {79    font-size: 72px; color: #1e88b7; font-weight: 600;80  }81  .section .text {82    font-size: 64px; color: #616a70; font-weight: 500;83  }84  .section .chev {85    width: 60px; height: 60px;86  }87  .subtext {88    margin-top: 24px; font-size: 54px; color: #1e88b7;89  }90 91  /* Keyboard */92  .keyboard {93    position: absolute; left: 0; right: 0; bottom: 100px;94    height: 860px; background: #eff1e9; border-top: 1px solid #d9dbc9;95  }96  .suggest {97    height: 130px; background: #f6f7f1;98    display: flex; align-items: center; gap: 24px;99    padding: 0 26px; box-sizing: border-box; border-bottom: 1px solid #e2e4d6;100    color: #59606a; font-size: 42px;101  }102  .suggest .kbd-switch {103    width: 78px; height: 78px; background: #cbe2c1; border-radius: 18px;104    display: flex; align-items: center; justify-content: center;105  }106  .suggest .mic {107    margin-left: auto; width: 60px; height: 60px;108  }109 110  .keys { padding: 24px; box-sizing: border-box; display: grid; gap: 22px; }111  .row { display: flex; justify-content: space-between; align-items: center; }112  .key {113    width: 92px; height: 110px; background: #ffffff; border: 1px solid #d6d6d6;114    border-radius: 18px; display: flex; align-items: center; justify-content: center;115    font-size: 44px; color: #4b4f54;116    box-shadow: 0 1px 0 #e6e6e6 inset;117  }118  .key.space { flex: 1; margin: 0 12px; }119  .key.wide { width: 150px; }120  .key.green {121    background: #cbe2c1; border-color: #b7d3ae; color: #305a2f;122  }123  .key.circle {124    width: 120px; height: 120px; border-radius: 60px;125  }126  .key.icon { padding: 0; }127 128  /* Bottom home indicator */129  .home-indicator {130    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);131    width: 320px; height: 12px; border-radius: 8px; background: #9e9e9e;132    opacity: 0.7;133  }134</style>135</head>136<body>137<div id="render-target">138  <div class="status-bar"></div>139 140  <div class="header">141    <div class="icon-btn">142      <svg width="56" height="56" viewBox="0 0 24 24">143        <path d="M15 4 L7 12 L15 20" stroke="#666" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>144      </svg>145    </div>146 147    <div class="search-wrap">148      <input class="search-input" value="signature" />149      <div class="icon-btn">150        <svg width="44" height="44" viewBox="0 0 24 24">151          <path d="M6 6 L18 18 M18 6 L6 18" stroke="#777" stroke-width="2.6" stroke-linecap="round"></path>152        </svg>153      </div>154      <div class="nav-icons">155        <svg width="44" height="44" viewBox="0 0 24 24">156          <path d="M15 4 L7 12 L15 20" stroke="#777" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>157        </svg>158        <svg width="44" height="44" viewBox="0 0 24 24">159          <path d="M9 4 L17 12 L9 20" stroke="#777" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>160        </svg>161      </div>162    </div>163  </div>164  <div class="divider"></div>165 166  <div class="outline-chip">167    <div class="doc-icon">168      <svg width="42" height="42" viewBox="0 0 24 24">169        <rect x="5" y="3" width="14" height="18" rx="2" fill="#fff" stroke="#bdbdbd"></rect>170        <line x1="7" y1="8" x2="17" y2="8" stroke="#bdbdbd" stroke-width="1.6"></line>171        <line x1="7" y1="12" x2="17" y2="12" stroke="#bdbdbd" stroke-width="1.6"></line>172      </svg>173    </div>174    <div class="chip-text">Tap to show outline</div>175  </div>176 177  <div class="content">178    <div class="para">can also insert, delete, or rotate pages on your desktop, tablet, or mobile device.</div>179    <div class="rule"></div>180 181    <div class="section">182      <div class="title">183        <div class="num">03</div>184        <div class="text">Share files with others</div>185      </div>186      <svg class="chev" viewBox="0 0 24 24">187        <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>188      </svg>189    </div>190    <div class="subtext">Send, track, and manage</div>191  </div>192 193  <div class="keyboard">194    <div class="suggest">195      <div class="kbd-switch">196        <svg width="48" height="48" viewBox="0 0 24 24">197          <rect x="3" y="3" width="18" height="18" rx="3" fill="#fff" stroke="#a7c6a0"></rect>198          <circle cx="8" cy="8" r="1.4" fill="#a7c6a0"></circle>199          <circle cx="12" cy="8" r="1.4" fill="#a7c6a0"></circle>200          <circle cx="16" cy="8" r="1.4" fill="#a7c6a0"></circle>201          <circle cx="8" cy="12" r="1.4" fill="#a7c6a0"></circle>202          <circle cx="12" cy="12" r="1.4" fill="#a7c6a0"></circle>203          <circle cx="16" cy="12" r="1.4" fill="#a7c6a0"></circle>204        </svg>205      </div>206      <div>signature | signatures</div>207      <svg class="mic" viewBox="0 0 24 24">208        <path d="M12 3 a3 3 0 0 1 3 3 v6 a3 3 0 0 1 -6 0 V6 a3 3 0 0 1 3 -3z" fill="#6b6b6b"></path>209        <path d="M5 11 a7 7 0 0 0 14 0" stroke="#6b6b6b" stroke-width="2" fill="none"></path>210        <line x1="12" y1="18" x2="12" y2="22" stroke="#6b6b6b" stroke-width="2"></line>211      </svg>212    </div>213 214    <div class="keys">215      <div class="row">216        <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>217        <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>218      </div>219      <div class="row">220        <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>221        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>222      </div>223      <div class="row">224        <div class="key wide green">225          <svg width="40" height="40" viewBox="0 0 24 24">226            <path d="M12 5 L7 12 H10 V18 H14 V12 H17 Z" fill="#305a2f"></path>227          </svg>228        </div>229        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>230        <div class="key">b</div><div class="key">n</div><div class="key">m</div>231        <div class="key wide icon">232          <svg width="56" height="40" viewBox="0 0 24 24">233            <path d="M20 7 H8 L4 12 L8 17 H20" fill="none" stroke="#666" stroke-width="2.4" stroke-linejoin="round"></path>234            <path d="M12 10 L16 14 M16 10 L12 14" stroke="#666" stroke-width="2.2" stroke-linecap="round"></path>235          </svg>236        </div>237      </div>238      <div class="row">239        <div class="key wide">?123</div>240        <div class="key">,</div>241        <div class="key">🙂</div>242        <div class="key space"></div>243        <div class="key">.</div>244        <div class="key circle green icon">245          <svg width="42" height="42" viewBox="0 0 24 24">246            <circle cx="10" cy="10" r="6" stroke="#305a2f" stroke-width="2.2" fill="none"></circle>247            <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#305a2f" stroke-width="2.2" stroke-linecap="round"></line>248          </svg>249        </div>250      </div>251    </div>252  </div>253 254  <div class="home-indicator"></div>255</div>256</body>257</html>