GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Start Location UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0f0f10; /* dark overall screen like Android */11 }12 13 /* Top app panel (white area) */14 .app-panel {15 position:absolute; left:0; top:0; width:100%; height:1500px;16 background:#ffffff;17 }18 19 /* Status bar */20 .statusbar {21 height:110px; display:flex; align-items:center; justify-content:space-between;22 padding:0 36px; color:#222; font-weight:500; font-size:40px;23 }24 .status-icons { display:flex; align-items:center; gap:26px; }25 .dot { width:16px; height:16px; background:#444; border-radius:50%; }26 .wifi { width:36px; height:24px; border:3px solid #444; border-left-color:transparent; border-right-color:transparent; border-bottom:none; border-radius:18px; transform:rotate(45deg); }27 .battery {28 width:60px; height:30px; border:3px solid #444; border-radius:6px; position:relative;29 }30 .battery::after { content:""; position:absolute; right:-12px; top:8px; width:10px; height:14px; background:#444; border-radius:2px; }31 .battery .level { position:absolute; left:4px; top:4px; height:22px; width:38px; background:#444; border-radius:4px; }32 33 /* Search bar */34 .search-area { padding:0 36px; }35 .search-pill {36 margin:10px 0 20px; height:124px; border:2px solid #e3e3e3; border-radius:62px;37 display:flex; align-items:center; padding:0 34px; gap:28px; color:#5a5a5a;38 font-size:42px;39 }40 .icon-btn {41 width:84px; height:84px; border-radius:42px; background:#f2f2f2;42 display:flex; align-items:center; justify-content:center;43 }44 .mic { width:40px; height:70px; border:4px solid #666; border-radius:20px; position:relative; }45 .mic::after { content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-20px; width:34px; height:4px; background:#666; }46 .search-text { flex:1; color:#1b1b1b; font-size:56px; }47 .back svg { width:40px; height:40px; }48 .back path { fill:#555; }49 50 /* List rows */51 .list { margin-top:22px; }52 .row {53 display:flex; align-items:center; padding:34px 36px; gap:32px;54 border-top:1px solid #efefef;55 }56 .row:first-child { border-top:none; }57 .circle {58 width:86px; height:86px; border-radius:43px; background:#f4f4f6;59 display:flex; align-items:center; justify-content:center;60 }61 .title { font-size:52px; color:#1b1b1b; }62 .subtitle { font-size:40px; color:#7a7a7a; margin-top:8px; }63 .row-text { display:flex; flex-direction:column; }64 /* icons */65 .target { width:46px; height:46px; border:4px solid #666; border-radius:50%; position:relative; }66 .target::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; background:#666; border-radius:50%; }67 .pin {68 width:38px; height:54px; border:4px solid #666; border-top-left-radius:22px; border-top-right-radius:22px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; position:relative;69 }70 .pin::after { content:""; position:absolute; left:50%; top:18px; transform:translateX(-50%); width:12px; height:12px; background:#666; border-radius:50%; }71 .briefcase {72 width:62px; height:42px; border:4px solid #666; border-radius:8px; position:relative;73 }74 .briefcase::before { content:""; position:absolute; top:-18px; left:16px; width:28px; height:18px; border:4px solid #666; border-bottom:none; border-radius:6px 6px 0 0; }75 .clock { width:56px; height:56px; border:4px solid #666; border-radius:50%; position:relative; }76 .clock::before { content:""; position:absolute; width:4px; height:18px; background:#666; left:50%; top:18px; transform:translateX(-50%); }77 .clock::after { content:""; position:absolute; width:14px; height:4px; background:#666; left:50%; top:28px; transform:translateX(-2px); }78 .share {79 position:relative; width:60px; height:56px;80 }81 .share span {82 position:absolute; width:14px; height:14px; background:#666; border-radius:50%;83 }84 .share span:nth-child(1){ left:8px; top:22px; }85 .share span:nth-child(2){ left:36px; top:8px; }86 .share span:nth-child(3){ left:36px; top:36px; }87 .share::after{88 content:""; position:absolute; left:20px; top:22px; width:20px; height:4px; background:#666; transform:rotate(-28deg);89 }90 .share::before{91 content:""; position:absolute; left:20px; top:24px; width:20px; height:4px; background:#666; transform:rotate(28deg);92 }93 94 /* Keyboard area */95 .keyboard {96 position:absolute; left:0; bottom:0; width:100%; height:970px; background:#1a1a1a; color:#e6e6e6;97 border-top-left-radius:24px; border-top-right-radius:24px;98 }99 .kb-toolbar {100 display:flex; align-items:center; gap:48px; padding:36px 36px; color:#cfcfcf; font-size:44px;101 }102 .kb-grid {103 padding:0 24px; display:flex; flex-direction:column; gap:26px;104 }105 .kb-row { display:flex; justify-content:space-between; padding:0 26px; }106 .key {107 width:92px; height:110px; background:#2b2b2b; border-radius:20px; display:flex; align-items:center; justify-content:center;108 font-size:46px; color:#f2f2f2;109 }110 .key.wide { width:180px; }111 .space { flex:1; height:110px; background:#2b2b2b; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:40px; color:#bdbdbd; }112 .search-fab {113 position:absolute; right:36px; bottom:36px; width:144px; height:144px; background:#cfe2ff; border-radius:72px;114 display:flex; align-items:center; justify-content:center;115 }116 .magnifier {117 width:58px; height:58px; border:8px solid #3b6fc3; border-radius:50%; position:relative;118 }119 .magnifier::after { content:""; position:absolute; right:-18px; bottom:-18px; width:24px; height:8px; background:#3b6fc3; transform:rotate(45deg); border-radius:4px; }120 121 /* Home indicator */122 .home-indicator {123 position:absolute; left:50%; transform:translateX(-50%); bottom:20px; width:420px; height:16px; background:#eaeaea; border-radius:8px;124 }125</style>126</head>127<body>128<div id="render-target">129 <div class="app-panel">130 <!-- Status bar -->131 <div class="statusbar">132 <div>11:00</div>133 <div class="status-icons">134 <div class="dot"></div>135 <div class="dot"></div>136 <div class="dot"></div>137 <div class="dot"></div>138 <div class="wifi"></div>139 <div class="battery"><div class="level"></div></div>140 </div>141 </div>142 143 <!-- Search pill -->144 <div class="search-area">145 <div class="search-pill">146 <div class="icon-btn back">147 <svg viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" /></svg>148 </div>149 <div class="search-text">Choose start location</div>150 <div class="icon-btn">151 <div class="mic"></div>152 </div>153 </div>154 </div>155 156 <!-- List items -->157 <div class="list">158 <div class="row">159 <div class="circle"><div class="target"></div></div>160 <div class="row-text">161 <div class="title">Your location</div>162 </div>163 </div>164 165 <div class="row">166 <div class="circle"><div class="pin"></div></div>167 <div class="row-text">168 <div class="title">Choose on map</div>169 </div>170 </div>171 172 <div class="row">173 <div class="circle"><div class="briefcase"></div></div>174 <div class="row-text">175 <div class="title">Work</div>176 <div class="subtitle">Westerstraat 21, Amsterdam, Netherlands</div>177 </div>178 </div>179 180 <div class="row">181 <div class="circle"><div class="clock"></div></div>182 <div class="row-text">183 <div class="title">New York</div>184 <div class="subtitle">NY, USA</div>185 </div>186 </div>187 188 <div class="row">189 <div class="circle"><div class="clock"></div></div>190 <div class="row-text">191 <div class="title">Philadelphia</div>192 <div class="subtitle">PA, USA</div>193 </div>194 </div>195 196 <div class="row">197 <div class="circle"><div class="clock"></div></div>198 <div class="row-text">199 <div class="title">Grays Ferry Crescent Skatepark</div>200 <div class="subtitle">Grays Ferry Avenue, Philadelphia, PA, USA</div>201 </div>202 </div>203 204 <div class="row">205 <div class="circle"><div class="share"><span></span><span></span><span></span></div></div>206 <div class="row-text">207 <div class="title">Golden Gate Bridge</div>208 <div class="subtitle">Golden Gate Bridge, California, USA</div>209 </div>210 </div>211 </div>212 </div>213 214 <!-- Keyboard -->215 <div class="keyboard">216 <div class="kb-toolbar">217 <div>◻︎◻︎</div>218 <div>😊</div>219 <div>GIF</div>220 <div>⚙︎</div>221 <div style="margin-left:auto;">🌐</div>222 <div>🎨</div>223 <div>🎙️</div>224 </div>225 <div class="kb-grid">226 <div class="kb-row">227 <!-- row qwertyuiop -->228 <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>229 <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>230 </div>231 <div class="kb-row">232 <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>233 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>234 </div>235 <div class="kb-row">236 <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>237 <div class="key">n</div><div class="key">m</div>238 <div class="key wide">⌫</div>239 </div>240 <div class="kb-row">241 <div class="key wide">?123</div>242 <div class="key">,</div>243 <div class="space">space</div>244 <div class="key">.</div>245 </div>246 </div>247 <div class="search-fab">248 <div class="magnifier"></div>249 </div>250 </div>251 252 <div class="home-indicator"></div>253</div>254</body>255</html>