GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body{margin:0;padding:0;background:transparent;font-family: Roboto, Arial, sans-serif;}7 #render-target{8 width:1080px;height:2400px;position:relative;overflow:hidden;9 background:#FFFFFF;10 }11 12 /* Status bar */13 .status-bar{14 position:absolute;top:0;left:0;width:100%;height:96px;background:#ffffff;15 border-bottom:1px solid #e6e6e6;display:flex;align-items:center;justify-content:space-between;16 padding:0 24px;box-sizing:border-box;color:#222;17 }18 .status-left{display:flex;align-items:center;gap:18px;font-size:36px;}19 .status-icons{display:flex;align-items:center;gap:18px;color:#666;}20 .status-icons svg{width:36px;height:36px;fill:none;stroke:#666;stroke-width:2}21 22 /* Search bar */23 .search-wrapper{position:absolute;top:96px;left:30px;right:30px;height:120px;}24 .search-pill{25 width:100%;height:120px;border-radius:60px;background:#fff;border:1px solid #dcdcdc;26 box-shadow:0 3px 10px rgba(0,0,0,0.08);display:flex;align-items:center;padding:0 30px;box-sizing:border-box;27 }28 .icon-circle{29 width:84px;height:84px;border-radius:42px;background:#f2f2f2;border:1px solid #d9d9d9;30 display:flex;align-items:center;justify-content:center;31 }32 .icon-circle svg{width:46px;height:46px;stroke:#333;fill:none;stroke-width:4}33 .search-text{font-size:56px;color:#111;letter-spacing:0.5px;margin-left:22px;flex:1;}34 .clear-btn{width:86px;height:86px;border-radius:43px;background:#f7f7f7;border:1px solid #d9d9d9;35 display:flex;align-items:center;justify-content:center;}36 .clear-btn svg{width:34px;height:34px;stroke:#333;stroke-width:5;fill:none}37 38 /* Results list */39 .results{position:absolute;top:240px;left:0;width:100%;bottom:940px;overflow:hidden;}40 .result-item{41 display:flex;align-items:flex-start;gap:26px;padding:32px 40px;border-bottom:1px solid #eee;background:#fff;42 }43 .pin{width:74px;height:74px;border-radius:37px;background:#f2f2f2;border:1px solid #d9d9d9;44 display:flex;align-items:center;justify-content:center;}45 .pin svg{width:40px;height:40px;fill:none;stroke:#333;stroke-width:3}46 .res-text{flex:1;}47 .res-title{font-size:42px;color:#1b1b1b;font-weight:600;}48 .res-sub{font-size:30px;color:#767676;margin-top:10px;}49 .open-arrow{width:52px;height:52px;border-radius:26px;background:#f4f4f4;border:1px solid #dedede;display:flex;align-items:center;justify-content:center;margin-left:auto;}50 .open-arrow svg{width:28px;height:28px;stroke:#333;stroke-width:3;fill:none}51 52 /* Keyboard */53 .keyboard{54 position:absolute;bottom:0;left:0;width:100%;height:940px;background:#1a1a1a;color:#eaeaea;55 box-shadow:0 -6px 20px rgba(0,0,0,0.35);56 }57 .kb-top{58 height:120px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;gap:34px;59 padding:0 28px;box-sizing:border-box;60 }61 .kb-top .top-item{62 display:flex;align-items:center;justify-content:center;width:86px;height:86px;border-radius:18px;background:#262626;color:#ddd;font-size:30px;63 }64 .kb-top svg{width:40px;height:40px;fill:none;stroke:#ddd;stroke-width:3}65 66 .kb-rows{padding:16px 18px;}67 .kb-row{display:flex;justify-content:center;gap:18px;margin:16px 0;}68 .key{69 width:88px;height:128px;border-radius:20px;background:#2a2a2a;display:flex;align-items:center;justify-content:center;70 font-size:48px;color:#f5f5f5;71 }72 .key.wide{width:140px}73 .key.xwide{width:540px}74 .key.func{background:#2b2b2b;color:#d0d0d0}75 .key.dark{background:#222}76 .key svg{width:40px;height:40px;stroke:#eaeaea;stroke-width:3;fill:none}77 78 .bottom-row{display:flex;align-items:center;gap:18px;padding:18px;}79 .search-circle{80 margin-left:auto;width:120px;height:120px;border-radius:60px;background:#cfe0ff;border:1px solid #9ec2ff;81 display:flex;align-items:center;justify-content:center;82 }83 .search-circle svg{width:52px;height:52px;stroke:#1d5ed8;stroke-width:5;fill:none}84 85 /* Small helper */86 .dot{font-size:56px}87</style>88</head>89<body>90<div id="render-target">91 92 <!-- Status bar -->93 <div class="status-bar">94 <div class="status-left">95 <div>11:04</div>96 <div style="color:#777">🔔 🔔 🔔 🔔 •</div>97 </div>98 <div class="status-icons">99 <svg viewBox="0 0 24 24"><path d="M2 12h20M4 7h16M6 17h12"/></svg>100 <svg viewBox="0 0 24 24"><path d="M3 12c4-6 14-6 18 0"/><path d="M7 12c2-3 8-3 10 0"/><circle cx="12" cy="12" r="1.5" fill="#666"/></svg>101 <svg viewBox="0 0 26 14"><rect x="1" y="2" width="18" height="10" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"/><rect x="20" y="5" width="5" height="4" fill="#666"/></svg>102 </div>103 </div>104 105 <!-- Search bar -->106 <div class="search-wrapper">107 <div class="search-pill">108 <div class="icon-circle">109 <svg viewBox="0 0 100 100"><path d="M62 20 L30 50 L62 80" stroke-linecap="round" stroke-linejoin="round"/></svg>110 </div>111 <div class="search-text">k</div>112 <div class="clear-btn">113 <svg viewBox="0 0 24 24"><path d="M4 4 L20 20M20 4 L4 20" stroke-linecap="round"/></svg>114 </div>115 </div>116 </div>117 118 <!-- Results list -->119 <div class="results">120 <div class="result-item">121 <div class="pin">122 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 0 0-14 0c0 4 7 12 7 12z"/><circle cx="12" cy="10" r="3"/></svg>123 </div>124 <div class="res-text">125 <div class="res-title">K'Far Cafe Philadelphia</div>126 <div class="res-sub">South 19th Street, Philadelphia, PA, USA</div>127 </div>128 <div class="open-arrow">129 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7M10 7h7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>130 </div>131 </div>132 133 <div class="result-item">134 <div class="pin">135 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 0 0-14 0c0 4 7 12 7 12z"/><circle cx="12" cy="10" r="3"/></svg>136 </div>137 <div class="res-text">138 <div class="res-title">K. R. Mangalam University</div>139 <div class="res-sub">Sohna, Haryana</div>140 </div>141 <div class="open-arrow">142 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7M10 7h7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>143 </div>144 </div>145 146 <div class="result-item">147 <div class="pin">148 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 0 0-14 0c0 4 7 12 7 12z"/><circle cx="12" cy="10" r="3"/></svg>149 </div>150 <div class="res-text">151 <div class="res-title">K Lot</div>152 <div class="res-sub">Lincoln Financial Field Way, Philadelphia, PA</div>153 </div>154 <div class="open-arrow">155 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7M10 7h7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>156 </div>157 </div>158 159 <div class="result-item">160 <div class="pin">161 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 0 0-14 0c0 4 7 12 7 12z"/><circle cx="12" cy="10" r="3"/></svg>162 </div>163 <div class="res-text">164 <div class="res-title">K-town</div>165 <div class="res-sub">Manhattan, New York, NY, USA</div>166 </div>167 <div class="open-arrow">168 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7M10 7h7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>169 </div>170 </div>171 172 <div class="result-item">173 <div class="pin">174 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 0 0-14 0c0 4 7 12 7 12z"/><circle cx="12" cy="10" r="3"/></svg>175 </div>176 <div class="res-text">177 <div class="res-title">K.R. Puram</div>178 <div class="res-sub">Bengaluru, Karnataka</div>179 </div>180 <div class="open-arrow">181 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7M10 7h7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>182 </div>183 </div>184 185 <div class="result-item">186 <div class="pin">187 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 0 0-14 0c0 4 7 12 7 12z"/><circle cx="12" cy="10" r="3"/></svg>188 </div>189 <div class="res-text">190 <div class="res-title">K'Far</div>191 <div class="res-sub">Wythe Avenue, Brooklyn, NY, USA</div>192 </div>193 <div class="open-arrow">194 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7M10 7h7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>195 </div>196 </div>197 198 <div class="result-item">199 <div class="pin">200 <svg viewBox="0 0 24 24"><path d="M12 22s7-8 7-12a7 7 0 0 0-14 0c0 4 7 12 7 12z"/><circle cx="12" cy="10" r="3"/></svg>201 </div>202 <div class="res-text">203 <div class="res-title">K'gari</div>204 <div class="res-sub">QLD, Australia</div>205 </div>206 <div class="open-arrow">207 <svg viewBox="0 0 24 24"><path d="M7 17 L17 7M10 7h7v7" stroke-linecap="round" stroke-linejoin="round"/></svg>208 </div>209 </div>210 </div>211 212 <!-- Keyboard -->213 <div class="keyboard">214 <div class="kb-top">215 <div class="top-item">216 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>217 </div>218 <div class="top-item">219 <svg viewBox="0 0 24 24"><circle cx="12" cy="10" r="5"/><path d="M4 20c2-5 14-5 16 0" stroke-linecap="round"/></svg>220 </div>221 <div class="top-item" style="font-weight:600">GIF</div>222 <div class="top-item">223 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 6v6l4 2"/></svg>224 </div>225 <div class="top-item" style="font-size:28px;font-weight:600">Gx</div>226 <div class="top-item">227 <svg viewBox="0 0 24 24"><path d="M3 21l6-3 10-10-6-3-10 10z"/><circle cx="17" cy="7" r="2"/></svg>228 </div>229 <div class="top-item" style="margin-left:auto;">230 <svg viewBox="0 0 24 24"><path d="M12 4v14"/><path d="M6 10a6 6 0 0 0 12 0"/><circle cx="12" cy="19" r="2"/></svg>231 </div>232 </div>233 234 <div class="kb-rows">235 <!-- Row 1 -->236 <div class="kb-row">237 <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>238 <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>239 </div>240 <!-- Row 2 -->241 <div class="kb-row" style="padding-left:40px;padding-right:40px">242 <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>243 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>244 </div>245 <!-- Row 3 -->246 <div class="kb-row" style="padding-left:100px;padding-right:26px">247 <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>248 <div class="key wide">249 <svg viewBox="0 0 24 24"><path d="M4 12l6-6v12l-6-6z"/><path d="M10 6h10v12H10" /></svg>250 </div>251 </div>252 </div>253 254 <!-- Bottom function row -->255 <div class="bottom-row">256 <div class="key wide func">?123</div>257 <div class="key func">,</div>258 <div class="key func">🙂</div>259 <div class="key xwide dark"></div>260 <div class="key func">.</div>261 <div class="search-circle">262 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"/><path d="M15 15l6 6"/></svg>263 </div>264 </div>265 </div>266 267</div>268</body>269</html>