GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #F6F7EE; /* light off-white */14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 150px;23 background: #8C8F3D; /* olive green */24 color: #212121;25 display: flex;26 align-items: center;27 padding: 0 40px;28 box-sizing: border-box;29 font-size: 36px;30 }31 .status-left { flex: 1; }32 .status-right {33 display: flex;34 gap: 24px;35 align-items: center;36 }37 .status-icon {38 width: 28px; height: 28px; background: #303030; border-radius: 6px;39 }40 41 /* Back row */42 .back-row {43 position: absolute;44 top: 150px;45 left: 0;46 width: 1080px;47 height: 140px;48 background: #F6F7EE;49 display: flex;50 align-items: center;51 }52 .back-btn {53 margin-left: 34px;54 width: 64px;55 height: 64px;56 }57 .back-btn svg { width: 64px; height: 64px; }58 59 /* Search bar */60 .search-wrap {61 position: absolute;62 top: 260px;63 left: 72px;64 width: 936px;65 height: 120px;66 background: #FFFFFF;67 border: 1px solid #E0E0E0;68 border-radius: 32px;69 display: flex;70 align-items: center;71 box-shadow: 0 2px 6px rgba(0,0,0,0.06);72 overflow: hidden;73 }74 .search-icon {75 margin-left: 28px;76 margin-right: 20px;77 width: 48px; height: 48px;78 color: #86A24A;79 }80 .search-input {81 flex: 1;82 color: #3C3C3C;83 font-size: 38px;84 letter-spacing: 0.2px;85 }86 .cursor {87 color: #7C7C7C;88 margin-right: 6px;89 }90 .mic-slot {91 width: 140px;92 height: 100%;93 border-left: 1px solid #E6E6E6;94 display: flex;95 align-items: center;96 justify-content: center;97 background: #FFFFFF;98 }99 .mic-slot svg { width: 48px; height: 48px; }100 101 /* Keyboard */102 .keyboard {103 position: absolute;104 bottom: 0;105 left: 0;106 width: 1080px;107 height: 900px;108 background: #1F2227;109 border-top: 1px solid #2A2D33;110 box-sizing: border-box;111 }112 .kb-tools {113 height: 120px;114 display: flex;115 align-items: center;116 justify-content: space-around;117 padding: 0 60px;118 color: #D9DADF;119 font-size: 40px;120 }121 .kb-row {122 display: flex;123 justify-content: center;124 padding: 10px 40px;125 gap: 14px;126 }127 .key {128 width: 86px;129 height: 110px;130 background: #2B2F36;131 border-radius: 18px;132 color: #E6E7EA;133 display: flex;134 align-items: center;135 justify-content: center;136 font-size: 44px;137 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06);138 }139 .key-wide { width: 140px; }140 .key-back { width: 160px; }141 .space { width: 520px; }142 .circle-key {143 width: 126px;144 height: 126px;145 border-radius: 50%;146 background: #AFC3E2;147 color: #1F2227;148 display: flex;149 align-items: center;150 justify-content: center;151 font-size: 42px;152 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.08);153 }154 .circle-key.left { background: #AFC3E2; color: #0F1114; }155 .period { width: 110px; }156 157 .home-indicator {158 position: absolute;159 bottom: 16px;160 left: 50%;161 transform: translateX(-50%);162 width: 240px;163 height: 10px;164 background: #E5E5E7;165 border-radius: 6px;166 opacity: 0.9;167 }168</style>169</head>170<body>171<div id="render-target">172 173 <!-- Status bar -->174 <div class="status-bar">175 <div class="status-left">12:20</div>176 <div class="status-right">177 <div class="status-icon"></div>178 <div class="status-icon"></div>179 <div class="status-icon"></div>180 <div class="status-icon"></div>181 </div>182 </div>183 184 <!-- Back arrow row -->185 <div class="back-row">186 <div class="back-btn">187 <svg viewBox="0 0 24 24">188 <path d="M15 6 L9 12 L15 18" stroke="#2A2A2A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>189 </svg>190 </div>191 </div>192 193 <!-- Search bar -->194 <div class="search-wrap">195 <div class="search-icon">196 <svg viewBox="0 0 24 24">197 <circle cx="10" cy="10" r="7" stroke="#86A24A" stroke-width="2" fill="none"></circle>198 <path d="M16 16 L21 21" stroke="#86A24A" stroke-width="2" stroke-linecap="round"></path>199 </svg>200 </div>201 <div class="search-input">202 <span class="cursor">|</span>Sending good luck plant or more203 </div>204 <div class="mic-slot">205 <svg viewBox="0 0 24 24">206 <rect x="9" y="5" width="6" height="10" rx="3" fill="#C8AE4A"></rect>207 <path d="M6 12 C6 16 18 16 18 12" stroke="#C8AE4A" stroke-width="2" fill="none" stroke-linecap="round"></path>208 <path d="M12 16 V20 M9 20 H15" stroke="#C8AE4A" stroke-width="2" stroke-linecap="round"></path>209 </svg>210 </div>211 </div>212 213 <!-- Keyboard -->214 <div class="keyboard">215 <div class="kb-tools">216 <span>⌨️</span>217 <span>🙂</span>218 <span>GIF</span>219 <span>⚙️</span>220 <span>G↔︎</span>221 <span>🎨</span>222 <span>🎤</span>223 </div>224 225 <div class="kb-row">226 <div class="key">q</div>227 <div class="key">w</div>228 <div class="key">e</div>229 <div class="key">r</div>230 <div class="key">t</div>231 <div class="key">y</div>232 <div class="key">u</div>233 <div class="key">i</div>234 <div class="key">o</div>235 <div class="key">p</div>236 </div>237 238 <div class="kb-row">239 <div class="key">a</div>240 <div class="key">s</div>241 <div class="key">d</div>242 <div class="key">f</div>243 <div class="key">g</div>244 <div class="key">h</div>245 <div class="key">j</div>246 <div class="key">k</div>247 <div class="key">l</div>248 </div>249 250 <div class="kb-row">251 <div class="key key-wide">⇧</div>252 <div class="key">z</div>253 <div class="key">x</div>254 <div class="key">c</div>255 <div class="key">v</div>256 <div class="key">b</div>257 <div class="key">n</div>258 <div class="key">m</div>259 <div class="key key-back">⌫</div>260 </div>261 262 <div class="kb-row" style="align-items:center;">263 <div class="circle-key left">?123</div>264 <div class="key">,</div>265 <div class="key">🙂</div>266 <div class="key space"></div>267 <div class="key period">.</div>268 <div class="circle-key">🔍</div>269 </div>270 271 <div class="home-indicator"></div>272 </div>273 274</div>275</body>276</html>