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 Render</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    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Top black system bar */16  .system-bar {17    height: 120px;18    background: #000000;19  }20 21  /* Search toolbar */22  .search-toolbar {23    background: #ffffff;24    height: 170px;25    padding: 26px 32px 20px 32px;26    box-sizing: border-box;27    border-bottom: 1px solid #eeeeee;28  }29  .search-row {30    display: flex; align-items: center; gap: 28px;31  }32  .search-input {33    flex: 1;34    height: 76px;35    border-radius: 12px;36    background: #f7f7f7;37    padding: 0 28px;38    display: flex; align-items: center;39    font-size: 36px; color: #6b6b6b;40    border: 1px solid #e6e6e6;41  }42  .icon-btn {43    width: 64px; height: 64px;44    display: inline-flex; align-items: center; justify-content: center;45  }46  .search-underline {47    margin-top: 20px;48    height: 4px; background: #e0e0e0;49    width: 92%;50    margin-left: 96px;51  }52 53  /* Outline banner / toast */54  .outline-banner {55    margin: 12px 32px 0 32px;56    background: #ffffff;57    border: 1px solid #e4e4e4;58    box-shadow: 0 6px 18px rgba(0,0,0,0.12);59    border-radius: 12px;60    height: 110px;61    display: flex; align-items: center;62    padding: 0 28px; gap: 22px;63  }64  .doc-icon {65    width: 76px; height: 76px;66    border: 1px solid #d5d5d5; border-radius: 8px;67    background: #f2f2f2;68    display: flex; align-items: center; justify-content: center;69  }70  .banner-text {71    font-size: 40px; color: #4d4d4d;72  }73 74  /* Document content */75  .content {76    padding: 24px 64px 0 64px;77    color: #777777;78  }79  .para {80    font-size: 52px; line-height: 76px;81    max-width: 900px;82  }83  .divider {84    height: 2px; background: #e3e3e3; margin: 52px 0;85  }86  .section-title {87    display: flex; align-items: center; justify-content: space-between;88    gap: 20px;89  }90  .section-title .num {91    color: #0b79a8; font-weight: 600; font-size: 72px; margin-right: 10px;92  }93  .section-title .text {94    color: #757575; font-size: 72px; font-weight: 300;95  }96  .chevron {97    width: 56px; height: 56px;98  }99  .link {100    color: #0b79a8; font-size: 64px; font-style: italic; margin-top: 46px;101  }102 103  /* Keyboard mock */104  .keyboard {105    position: absolute; left: 0; right: 0; bottom: 0;106    height: 760px;107    background: #f3f4ec;108    border-top: 1px solid #e4e4e4;109    padding: 26px 32px;110    box-sizing: border-box;111  }112  .kbd-top-icons {113    display: flex; gap: 36px; align-items: center; margin-bottom: 22px;114  }115  .top-icon {116    width: 92px; height: 92px; border-radius: 24px;117    background: #e8eadf; border: 1px solid #dadbd1;118    display: flex; align-items: center; justify-content: center;119    font-size: 34px; color: #444;120  }121  .keys {122    display: grid; gap: 18px; justify-items: center;123  }124  .row { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 14px; margin-bottom: 18px; }125  .key {126    background: #ffffff; border: 1px solid #d9d9d9;127    width: 86px; height: 110px; border-radius: 20px;128    display: flex; align-items: center; justify-content: center;129    font-size: 42px; color: #333;130  }131  .key.wide { width: 170px; }132  .space { flex: 1; width: 520px; }133  .bottom-row { display: grid; grid-template-columns: 160px 120px 120px 1fr 120px 160px; gap: 16px; }134  .search-pill {135    background: #b9deb9; border-color: #9fd39f; color: #1f5221;136  }137 138  /* Ensure content doesn't go under keyboard visually */139  .spacer {140    height: 760px;141  }142</style>143</head>144<body>145<div id="render-target">146 147  <div class="system-bar"></div>148 149  <div class="search-toolbar">150    <div class="search-row">151      <div class="icon-btn">152        <svg width="48" height="48" viewBox="0 0 24 24">153          <path d="M15 18l-6-6 6-6" stroke="#4a4a4a" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154        </svg>155      </div>156      <div class="search-input">Find in document</div>157      <div class="icon-btn">158        <svg width="44" height="44" viewBox="0 0 24 24">159          <path d="M6 6l12 12M18 6L6 18" stroke="#7d7d7d" stroke-width="2.2" fill="none" stroke-linecap="round"/>160        </svg>161      </div>162      <div class="icon-btn">163        <svg width="44" height="44" viewBox="0 0 24 24">164          <path d="M14 6l-6 6 6 6" stroke="#7d7d7d" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165        </svg>166      </div>167      <div class="icon-btn">168        <svg width="44" height="44" viewBox="0 0 24 24">169          <path d="M10 6l6 6-6 6" stroke="#7d7d7d" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>170        </svg>171      </div>172    </div>173    <div class="search-underline"></div>174  </div>175 176  <div class="outline-banner">177    <div class="doc-icon">178      <svg width="42" height="42" viewBox="0 0 24 24">179        <rect x="5" y="4" width="14" height="16" rx="2" fill="#dcdcdc"/>180        <line x1="8" y1="9" x2="16" y2="9" stroke="#bfbfbf" stroke-width="1.6"/>181        <line x1="8" y1="13" x2="16" y2="13" stroke="#bfbfbf" stroke-width="1.6"/>182        <line x1="8" y1="17" x2="16" y2="17" stroke="#bfbfbf" stroke-width="1.6"/>183      </svg>184    </div>185    <div class="banner-text">Tap to show outline</div>186  </div>187 188  <div class="content">189    <div class="para">can also insert, delete, or rotate pages on your desktop, tablet, or mobile device.</div>190 191    <div class="divider"></div>192 193    <div class="section-title">194      <div style="display:flex; align-items:flex-end;">195        <div class="num">03</div>196        <div class="text">Share files<br>with others</div>197      </div>198      <svg class="chevron" viewBox="0 0 24 24">199        <path d="M6 9l6 6 6-6" stroke="#222" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200      </svg>201    </div>202 203    <div class="link">Send, track, and</div>204    <div class="link" style="margin-top: 10px;">manage</div>205  </div>206 207  <div class="spacer"></div>208 209  <!-- Keyboard mock -->210  <div class="keyboard">211    <div class="kbd-top-icons">212      <div class="top-icon">▦</div>213      <div class="top-icon">🙂</div>214      <div class="top-icon">GIF</div>215      <div class="top-icon">⚙️</div>216      <div class="top-icon">Gx</div>217      <div class="top-icon">🎨</div>218      <div class="top-icon">🎤</div>219    </div>220 221    <div class="keys">222      <div class="row">223        <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>224        <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">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>228        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>229      </div>230      <div class="row">231        <div class="key wide">⇧</div>232        <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>233        <div class="key wide">⌫</div>234      </div>235      <div class="bottom-row">236        <div class="key">?123</div>237        <div class="key">,</div>238        <div class="key">🙂</div>239        <div class="key space"> </div>240        <div class="key">.</div>241        <div class="key search-pill">🔍</div>242      </div>243    </div>244  </div>245 246</div>247</body>248</html>