GD-ML/AndroidCode
13.4k
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 - Loading Search</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0a0a0a;15 color: #e8e8e8;16 }17 18 /* Status bar */19 .status-bar {20 height: 84px;21 padding: 0 32px;22 display: flex;23 align-items: flex-end;24 justify-content: space-between;25 color: #f1f1f1;26 font-size: 36px;27 letter-spacing: 0.5px;28 }29 .status-right {30 display: flex; align-items: center; gap: 18px;31 }32 .icon-wifi, .icon-battery {33 width: 40px; height: 40px;34 }35 36 /* Header/Search bar */37 .header {38 height: 126px;39 display: flex;40 align-items: center;41 padding: 0 36px;42 gap: 24px;43 border-bottom: 2px solid #3a3a3a;44 }45 .title {46 font-size: 56px;47 color: #cfcfcf;48 letter-spacing: 0.5px;49 flex: 1;50 }51 .icon-btn {52 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;53 color: #9e9e9e;54 }55 56 /* Main dark content area */57 .content {58 position: absolute;59 top: 210px; /* status(84) + header(126) */60 left: 0; right: 0; bottom: 0;61 background: #0a0a0a;62 }63 64 /* Loading card */65 .loading-card {66 position: absolute;67 left: 56px;68 right: 56px;69 bottom: 760px; /* sits above keyboard */70 background: #3e3e3f;71 border-radius: 18px;72 box-shadow: 0 24px 60px rgba(0,0,0,0.55);73 padding: 42px 48px;74 display: flex; align-items: center; gap: 36px;75 }76 .spinner {77 width: 114px; height: 114px; border-radius: 50%;78 border: 14px solid #6b6b6b;79 border-top-color: #e84c57;80 box-sizing: border-box;81 }82 .loading-text {83 font-size: 44px;84 color: #e5e5e5;85 }86 87 /* Suggestion bar (above keyboard) */88 .suggestion-bar {89 position: absolute; left: 0; right: 0; bottom: 686px;90 height: 92px; background: #1b1b1b;91 display: flex; align-items: center; gap: 28px;92 padding: 0 24px;93 color: #cfcfcf;94 border-top: 1px solid #222;95 }96 .suggestion {97 font-size: 34px; color: #bfbfbf; opacity: 0.95;98 }99 .suggestion + .suggestion::before {100 content: "|"; color: #555; margin: 0 16px 0 0;101 }102 .spacer { flex: 1; }103 104 /* Keyboard */105 .keyboard {106 position: absolute; left: 0; right: 0; bottom: 52px;107 height: 634px; background: #121212; border-top: 1px solid #1e1e1e;108 padding: 22px 18px 28px 18px;109 display: grid; grid-template-rows: repeat(5, 1fr); gap: 16px;110 }111 .row { display: grid; grid-auto-flow: column; gap: 12px; }112 .key {113 background: #2b2b2b; color: #d7d7d7;114 border-radius: 18px; display: flex; align-items: center; justify-content: center;115 font-size: 40px; height: 100%;116 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);117 }118 .key.small { font-size: 34px; }119 .key.special { background: #3b3f45; color: #e6e6e6; }120 .key.wide { grid-column: span 2; }121 .key.space { grid-column: span 6; }122 .row.r1 { grid-template-columns: repeat(10, 1fr); }123 .row.r2 { grid-template-columns: repeat(10, 1fr); }124 .row.r3 { grid-template-columns: repeat(9, 1fr); }125 .row.r4 { grid-template-columns: 1.4fr repeat(7, 1fr) 1.4fr; }126 .row.r5 { grid-template-columns: 1.6fr 1fr 1fr 6fr 1fr 1.6fr; }127 128 /* Gesture bar */129 .gesture {130 position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);131 width: 300px; height: 10px; background: #efefef; border-radius: 8px; opacity: 0.85;132 }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Status bar -->139 <div class="status-bar">140 <div>8:11</div>141 <div class="status-right">142 <!-- Simple WiFi -->143 <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#f1f1f1" stroke-width="2">144 <path d="M2 8c5-4 15-4 20 0"></path>145 <path d="M5 12c4-3 10-3 14 0"></path>146 <path d="M8 16c3-2 5-2 8 0"></path>147 <circle cx="12" cy="19" r="1.5" fill="#f1f1f1"></circle>148 </svg>149 <!-- Battery -->150 <svg class="icon-battery" viewBox="0 0 28 16" stroke="#f1f1f1" fill="none" stroke-width="2">151 <rect x="1" y="3" width="22" height="10" rx="2"></rect>152 <rect x="3" y="5" width="14" height="6" rx="1" fill="#f1f1f1"></rect>153 <rect x="24" y="6" width="3" height="4" rx="1" fill="#f1f1f1"></rect>154 </svg>155 </div>156 </div>157 158 <!-- Header -->159 <div class="header">160 <div class="icon-btn" title="Back">161 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="#bdbdbd" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">162 <path d="M30 8 L14 24 L30 40"></path>163 </svg>164 </div>165 <div class="title">Newyork</div>166 <div class="icon-btn" title="Clear">167 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="#8e8e8e" stroke-width="4" stroke-linecap="round">168 <path d="M12 12 L36 36"></path>169 <path d="M36 12 L12 36"></path>170 </svg>171 </div>172 </div>173 174 <div class="content">175 <!-- Loading card -->176 <div class="loading-card">177 <div class="spinner"></div>178 <div class="loading-text">Loading...</div>179 </div>180 181 <!-- Suggestion bar -->182 <div class="suggestion-bar">183 <div class="icon-btn" style="width:56px;height:56px;">184 <!-- grid icon -->185 <svg width="44" height="44" viewBox="0 0 24 24" fill="#9aa0a6">186 <rect x="3" y="3" width="6" height="6" rx="1"></rect>187 <rect x="3" y="13" width="6" height="6" rx="1"></rect>188 <rect x="13" y="3" width="6" height="6" rx="1"></rect>189 <rect x="13" y="13" width="6" height="6" rx="1"></rect>190 </svg>191 </div>192 <div class="suggestion">Newyork</div>193 <div class="suggestion">New York</div>194 <div class="suggestion">Network</div>195 <div class="spacer"></div>196 <div class="icon-btn" style="width:56px;height:56px;">197 <!-- mic icon -->198 <svg width="44" height="44" viewBox="0 0 24 24" fill="#c9c9c9">199 <rect x="9" y="3" width="6" height="10" rx="3"></rect>200 <path d="M5 11a7 7 0 0 0 14 0" stroke="#c9c9c9" stroke-width="2" fill="none"></path>201 <path d="M12 18v3" stroke="#c9c9c9" stroke-width="2" stroke-linecap="round"></path>202 </svg>203 </div>204 </div>205 206 <!-- Keyboard -->207 <div class="keyboard">208 <div class="row r1">209 <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>210 <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>211 </div>212 <div class="row r2">213 <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>214 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">;</div>215 </div>216 <div class="row r3">217 <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>218 <div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key">,</div>219 </div>220 <div class="row r4">221 <div class="key special small">shift</div>222 <div class="key">1</div><div class="key">2</div><div class="key">3</div><div class="key">4</div>223 <div class="key">5</div><div class="key">6</div><div class="key">7</div>224 <div class="key special small">⌫</div>225 </div>226 <div class="row r5">227 <div class="key special small">?123</div>228 <div class="key">,</div>229 <div class="key">🙂</div>230 <div class="key space"> </div>231 <div class="key">.</div>232 <div class="key special small">↵</div>233 </div>234 </div>235 </div>236 237 <!-- bottom gesture bar -->238 <div class="gesture"></div>239</div>240</body>241</html>