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>Mobile UI Mock</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, Helvetica, sans-serif;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;background:#ffffff;10 }11 12 /* STATUS BAR */13 .status-bar{14 height:120px;background:#ffffff;color:#222;display:flex;align-items:center;justify-content:space-between;15 padding:0 36px;box-sizing:border-box;font-weight:600;font-size:44px;16 }17 .sb-icons{display:flex;gap:22px;align-items:center;}18 .dot{width:14px;height:14px;background:#444;border-radius:50%;}19 .icon-small{width:32px;height:32px;border-radius:6px;background:#555;opacity:.8;}20 /* SEARCH AREA */21 .search-wrap{position:relative;padding:20px 30px 8px 30px;}22 .search-row{display:flex;align-items:center;gap:20px;}23 .back-btn{24 width:92px;height:92px;border-radius:46px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;25 border:1px solid #e3e3e3;26 }27 .back-btn svg{width:44px;height:44px;fill:#333;}28 .search-field{29 flex:1;height:110px;border-radius:56px;border:2px solid #e4e4e4;background:#fafafa;30 display:flex;align-items:center;padding:0 32px;font-size:50px;position:relative;31 }32 .search-text{position:relative;color:#111;white-space:nowrap}33 .selection{background:#b9d6ff;color:#111;border-radius:6px;padding:2px 6px;}34 .handle{35 position:absolute;width:38px;height:38px;background:#4a8bff;border-radius:50%;36 top:86px; /* below the text selection */37 box-shadow:0 0 0 6px #b9d6ff inset;38 }39 .handle.left{left:160px;}40 .handle.right{left:470px;}41 .x-btn{42 margin-left:auto;width:70px;height:70px;border-radius:50%;background:#e9e9e9;border:1px solid #d8d8d8;43 display:flex;align-items:center;justify-content:center;44 }45 .x-btn:after{content:"✕";font-size:44px;color:#666;line-height:1;}46 /* Context menu bubble (Cut/Copy/Paste/Share) */47 .context-menu{48 position:absolute;left:140px;top:230px;background:#ffffff;border:1px solid #e0e0e0;border-radius:26px;49 box-shadow:0 6px 18px rgba(0,0,0,0.15);padding:22px 24px;display:flex;gap:46px;align-items:center;50 }51 .context-menu .opt{font-size:42px;color:#111;}52 .context-menu .sep{width:2px;height:48px;background:#e0e0e0;}53 /* Suggestions list */54 .list{position:absolute;left:0;top:360px;right:0;bottom:960px;overflow:hidden;padding:0 24px;}55 .item{display:flex;align-items:flex-start;gap:28px;padding:32px 12px;border-bottom:1px solid #f0f0f0;}56 .pin{57 width:72px;height:72px;border-radius:36px;background:#f3f3f3;border:1px solid #e4e4e4;display:flex;align-items:center;justify-content:center;margin-top:8px;58 }59 .pin svg{width:38px;height:38px;fill:#757575;}60 .texts{flex:1;}61 .title{font-size:46px;font-weight:700;color:#2c2c2c;line-height:1.2;}62 .subtitle{font-size:36px;color:#7b7b7b;margin-top:10px;}63 .go{width:66px;height:66px;border-radius:18px;background:#f5f5f5;border:1px solid #e6e6e6;display:flex;align-items:center;justify-content:center;margin-top:8px;}64 .go svg{width:34px;height:34px;fill:#606060;transform:rotate(45deg);}65 /* Keyboard */66 .keyboard{67 position:absolute;left:0;right:0;bottom:0;height:920px;background:#161819;border-top:1px solid #2b2b2b;68 padding:30px 24px 24px 24px;box-sizing:border-box;69 }70 .kb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}71 .kb-row{display:flex;justify-content:space-between;margin:18px 12px;}72 .key{73 background:#2a2c2f;border-radius:22px;color:#e5e5e5;font-size:44px;74 width:92px;height:120px;display:flex;align-items:center;justify-content:center;75 box-shadow:inset 0 -3px 0 rgba(255,255,255,0.04);76 }77 .key.wide{width:160px;}78 .space{flex:1;}79 .emoji{width:120px;}80 .search-key{width:140px;background:#cfe0ff;color:#0a2a62;}81 .indicator{height:10px;border-radius:10px;background:#c9c9c9;width:400px;margin:24px auto 0;}82</style>83</head>84<body>85<div id="render-target">86 87 <!-- STATUS BAR -->88 <div class="status-bar">89 <div style="display:flex;align-items:center;gap:16px;">90 <div>10:59</div>91 <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot" style="opacity:.4;"></div>92 </div>93 <div class="sb-icons">94 <div class="icon-small"></div>95 <div class="icon-small"></div>96 </div>97 </div>98 99 <!-- SEARCH AREA -->100 <div class="search-wrap">101 <div class="search-row">102 <div class="back-btn" title="Back">103 <svg viewBox="0 0 24 24"><path d="M15.5 3.9 7.4 12l8.1 8.1-1.9 1.9L3.6 12l10-10 1.9 1.9z"/></svg>104 </div>105 <div class="search-field">106 <div class="search-text">107 <span class="selection">Philadelphia</span>108 </div>109 <div class="x-btn" title="Clear"></div>110 </div>111 </div>112 <!-- floating context menu -->113 <div class="context-menu">114 <div class="opt">Cut</div><div class="sep"></div>115 <div class="opt">Copy</div><div class="sep"></div>116 <div class="opt">Paste</div><div class="sep"></div>117 <div class="opt">Share</div>118 </div>119 <!-- selection handles -->120 <div class="handle left"></div>121 <div class="handle right"></div>122 </div>123 124 <!-- Suggestions List -->125 <div class="list">126 <div class="item">127 <div class="pin">128 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>129 </div>130 <div class="texts">131 <div class="title">Philadelphia International Airport…</div>132 <div class="subtitle">Essington Ave, Philadelphia, PA, USA</div>133 </div>134 <div class="go">135 <svg viewBox="0 0 24 24"><path d="M5 12h14v2H5z"/></svg>136 </div>137 </div>138 139 <div class="item">140 <div class="pin">141 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>142 </div>143 <div class="texts">144 <div class="title">Philadelphia Museum of Art</div>145 <div class="subtitle">Benjamin Franklin Parkway, Philadelphia,…</div>146 </div>147 <div class="go">148 <svg viewBox="0 0 24 24"><path d="M5 12h14v2H5z"/></svg>149 </div>150 </div>151 152 <div class="item">153 <div class="pin">154 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>155 </div>156 <div class="texts">157 <div class="title">Philadelphia Zoo</div>158 <div class="subtitle">West Girard Avenue, Philadelphia, PA, USA</div>159 </div>160 <div class="go">161 <svg viewBox="0 0 24 24"><path d="M5 12h14v2H5z"/></svg>162 </div>163 </div>164 165 <div class="item">166 <div class="pin">167 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>168 </div>169 <div class="texts">170 <div class="title">Philadelphia Mills</div>171 <div class="subtitle">Franklin Mills Circle, Philadelphia, PA, USA</div>172 </div>173 <div class="go">174 <svg viewBox="0 0 24 24"><path d="M5 12h14v2H5z"/></svg>175 </div>176 </div>177 178 <div class="item">179 <div class="pin">180 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>181 </div>182 <div class="texts">183 <div class="title">Philadelphia Premium Outlets</div>184 <div class="subtitle">Lightcap Road, Pottstown, PA, USA</div>185 </div>186 <div class="go">187 <svg viewBox="0 0 24 24"><path d="M5 12h14v2H5z"/></svg>188 </div>189 </div>190 191 <div class="item">192 <div class="pin">193 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>194 </div>195 <div class="texts">196 <div class="title">Philadelphia's Magic Gardens</div>197 <div class="subtitle">South Street, Philadelphia, PA, USA</div>198 </div>199 <div class="go">200 <svg viewBox="0 0 24 24"><path d="M5 12h14v2H5z"/></svg>201 </div>202 </div>203 </div>204 205 <!-- Keyboard -->206 <div class="keyboard">207 <div class="kb-top">208 <div style="display:flex;gap:22px;">209 <div class="key">⚙</div>210 <div class="key">GIF</div>211 </div>212 <div style="display:flex;gap:22px;">213 <div class="key">🌐</div>214 <div class="key">🎨</div>215 <div class="key">🎤</div>216 </div>217 </div>218 219 <div class="kb-row">220 <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><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>221 </div>222 <div class="kb-row" style="padding:0 30px;">223 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>224 </div>225 <div class="kb-row" style="padding:0 90px;">226 <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>227 <div class="key wide">⌫</div>228 </div>229 <div class="kb-row" style="align-items:center;">230 <div class="key wide">?123</div>231 <div class="key">,</div>232 <div class="key emoji">😊</div>233 <div class="key space" style="background:#2a2c2f;height:120px;border-radius:22px;"></div>234 <div class="key">.</div>235 <div class="key search-key">🔍</div>236 </div>237 <div class="indicator"></div>238 </div>239 240</div>241</body>242</html>