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 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: #2B1B17;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; width: 100%; height: 110px;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px;20    color: #FAD7D2; font-size: 44px; letter-spacing: 0.3px;21  }22  .status-icons { display: flex; align-items: center; gap: 22px; }23  .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #FAD7D2; stroke-width: 4px; }24 25  /* Top sheet / input area */26  .sheet {27    position: absolute; top: 100px; left: 0; width: 100%; height: 650px;28    background: #47322D;29    border-bottom-left-radius: 70px; border-bottom-right-radius: 70px;30    color: #F3CFC8;31  }32  .sheet .top-actions {33    position: absolute; top: 34px; left: 34px; right: 34px;34    display: flex; align-items: center; justify-content: space-between;35  }36  .btn-save { color: #F6A298; font-size: 44px; }37  .close-icon svg { width: 50px; height: 50px; stroke: #F3CFC8; stroke-width: 6px; }38 39  .input-text {40    position: absolute; left: 36px; right: 36px; bottom: 50px;41    font-size: 110px; line-height: 1.05; color: #F3CFC8;42    white-space: nowrap;43  }44  .caret {45    display: inline-block; width: 4px; height: 110px; background: #F3CFC8;46    position: relative; top: 16px; margin-left: 10px;47  }48 49  /* Middle content (recording / timeline hint) */50  .center-line {51    position: absolute; top: 980px; left: 50%; transform: translateX(-50%);52    width: 6px; height: 420px; background: #3A2723; border-radius: 3px;53  }54  .dotted-baseline {55    position: absolute; top: 1380px; left: 120px; right: 120px; height: 20px;56    display: flex; align-items: center; gap: 18px;57    opacity: 0.6;58  }59  .dotted-baseline span {60    width: 10px; height: 10px; background: #3A2723; border-radius: 50%;61  }62  .dotted-baseline .bar {63    width: 24px; height: 20px; background: #3A2723; border-radius: 6px;64  }65 66  /* Keyboard */67  .keyboard {68    position: absolute; bottom: 110px; left: 0; width: 100%; height: 920px;69    background: #FADBD5;70    border-top-left-radius: 36px; border-top-right-radius: 36px;71    box-sizing: border-box;72    padding: 26px 20px 30px;73  }74  .kb-suggestions {75    display: flex; align-items: center; justify-content: space-between;76    padding: 0 12px; margin-bottom: 18px; color: #7A4E43; font-size: 40px;77  }78  .kb-left-icon, .kb-right-icon {79    width: 84px; height: 84px; background: #F5B9AA; border-radius: 22px;80    display: flex; align-items: center; justify-content: center;81  }82  .kb-left-icon svg, .kb-right-icon svg { width: 40px; height: 40px; stroke: #6A4037; stroke-width: 3px; fill: none; }83 84  .rows { display: flex; flex-direction: column; gap: 18px; padding: 0 6px; }85  .row { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 14px; }86  .key {87    height: 120px; background: #FFFFFF; border-radius: 26px; color: #4A2F28;88    display: flex; align-items: center; justify-content: center; font-size: 54px;89    box-shadow: 0 0 0 1px rgba(74,47,40,0.08) inset;90    position: relative;91  }92  .key .num {93    position: absolute; top: 10px; left: 16px; font-size: 28px; color: #8A5B51; opacity: 0.7;94  }95  .key.special { background: #F6C7BD; }96  .key.wide { grid-column: span 3; }97  .key.space { grid-column: span 6; }98  .key.icon { color: #4A2F28; }99  .key.icon svg { width: 40px; height: 40px; stroke: #4A2F28; stroke-width: 5px; fill: none; }100 101  /* Bottom navigation pill */102  .nav-pill {103    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);104    width: 220px; height: 16px; background: #8E8681; border-radius: 10px; opacity: 0.8;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <div class="status-bar">112    <div class="time">2:39</div>113    <div class="status-icons">114      <!-- Do Not Disturb -->115      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="6" y1="12" x2="18" y2="12"></line></svg>116      <!-- Wi-Fi -->117      <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0"></path><path d="M5 12c4-4 10-4 14 0"></path><path d="M8 15c2-2 6-2 8 0"></path><circle cx="12" cy="18" r="1.5" fill="#FAD7D2" stroke="none"></circle></svg>118      <!-- Battery -->119      <svg viewBox="0 0 28 24"><rect x="2" y="5" width="20" height="14" rx="3"></rect><rect x="23" y="9" width="3" height="6" rx="1"></rect><rect x="4" y="7" width="14" height="10" rx="2" fill="#FAD7D2" stroke="none"></rect></svg>120      <div style="font-size:40px; color:#FAD7D2;">100%</div>121    </div>122  </div>123 124  <div class="sheet">125    <div class="top-actions">126      <div class="close-icon">127        <svg viewBox="0 0 24 24"><line x1="4" y1="4" x2="20" y2="20"></line><line x1="20" y1="4" x2="4" y2="20"></line></svg>128      </div>129      <div class="btn-save">Save</div>130    </div>131    <div class="input-text">132      Wednesday at 12:17 PM<span class="caret"></span>133    </div>134  </div>135 136  <!-- Middle visual elements -->137  <div class="center-line"></div>138  <div class="dotted-baseline">139    <span></span><span></span><span></span><span></span><span class="bar"></span><span class="bar" style="width:12px;"></span>140    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>141    <span></span><span></span><span></span><span></span><span></span>142  </div>143 144  <!-- Keyboard -->145  <div class="keyboard">146    <div class="kb-suggestions">147      <div class="kb-left-icon">148        <!-- grid/apps icon -->149        <svg viewBox="0 0 24 24">150          <rect x="3" y="3" width="6" height="6" rx="1"></rect>151          <rect x="15" y="3" width="6" height="6" rx="1"></rect>152          <rect x="3" y="15" width="6" height="6" rx="1"></rect>153          <rect x="15" y="15" width="6" height="6" rx="1"></rect>154        </svg>155      </div>156      <div>PM</div>157      <div style="opacity:.5;">|</div>158      <div>OM</div>159      <div style="opacity:.5;">|</div>160      <div>PN</div>161      <div class="kb-right-icon">162        <!-- microphone -->163        <svg viewBox="0 0 24 24">164          <rect x="9" y="5" width="6" height="10" rx="3"></rect>165          <path d="M6 10c0 4 12 4 12 0"></path>166          <line x1="12" y1="15" x2="12" y2="20"></line>167          <line x1="8" y1="20" x2="16" y2="20"></line>168        </svg>169      </div>170    </div>171 172    <div class="rows">173      <div class="row">174        <div class="key"><span class="num">1</span>q</div>175        <div class="key"><span class="num">2</span>w</div>176        <div class="key"><span class="num">3</span>e</div>177        <div class="key"><span class="num">4</span>r</div>178        <div class="key"><span class="num">5</span>t</div>179        <div class="key"><span class="num">6</span>y</div>180        <div class="key"><span class="num">7</span>u</div>181        <div class="key"><span class="num">8</span>i</div>182        <div class="key"><span class="num">9</span>o</div>183        <div class="key"><span class="num">0</span>p</div>184      </div>185 186      <div class="row">187        <div class="key">a</div>188        <div class="key">s</div>189        <div class="key">d</div>190        <div class="key">f</div>191        <div class="key">g</div>192        <div class="key">h</div>193        <div class="key">j</div>194        <div class="key">k</div>195        <div class="key">l</div>196      </div>197 198      <div class="row">199        <div class="key special icon">200          <!-- shift -->201          <svg viewBox="0 0 24 24"><path d="M12 4l8 8h-5v8H9v-8H4z"></path></svg>202        </div>203        <div class="key">z</div>204        <div class="key">x</div>205        <div class="key">c</div>206        <div class="key">v</div>207        <div class="key">b</div>208        <div class="key">n</div>209        <div class="key">m</div>210        <div class="key special icon">211          <!-- backspace -->212          <svg viewBox="0 0 24 24">213            <path d="M3 12l6-7h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9z"></path>214            <line x1="12" y1="9" x2="18" y2="15"></line>215            <line x1="18" y1="9" x2="12" y2="15"></line>216          </svg>217        </div>218      </div>219 220      <div class="row">221        <div class="key special">?123</div>222        <div class="key special">,</div>223        <div class="key special icon">224          <!-- smile -->225          <svg viewBox="0 0 24 24">226            <circle cx="12" cy="12" r="9"></circle>227            <circle cx="9" cy="10" r="1.2" fill="#4A2F28" stroke="none"></circle>228            <circle cx="15" cy="10" r="1.2" fill="#4A2F28" stroke="none"></circle>229            <path d="M8 14c4 3 8 0 8 0" fill="none"></path>230          </svg>231        </div>232        <div class="key space"> </div>233        <div class="key special">.</div>234        <div class="key special icon">235          <!-- check/enter -->236          <svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"></path></svg>237        </div>238      </div>239    </div>240  </div>241 242  <div class="nav-pill"></div>243</div>244</body>245</html>