GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Choose starting point</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 :root{9 --bg: #121212;10 --panel: #1a1a1a;11 --panel2:#202225;12 --text: #e6e6e6;13 --sub: #9aa0a6;14 --divider:#2a2a2a;15 --blue:#4da3ff;16 }17 body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }18 #render-target{19 position:relative; overflow:hidden;20 width:1080px; height:2400px;21 background:#121212; color:var(--text);22 }23 /* Status bar */24 .statusbar{25 height:90px; padding:0 28px;26 display:flex; align-items:center; justify-content:space-between;27 color:#ffffff; font-size:34px; letter-spacing:1px;28 }29 .status-right{ display:flex; align-items:center; gap:26px; }30 .dot{ width:10px; height:10px; background:#cfcfcf; border-radius:50%; display:inline-block; }31 /* Top search bar area */32 .top-bar{33 height:110px; display:flex; align-items:center;34 border-bottom:1px solid var(--divider);35 padding:0 22px;36 background:#1c1c1c;37 }38 .back{39 width:72px; height:72px; display:flex; align-items:center; justify-content:center;40 margin-right:10px;41 }42 .search-placeholder{43 color:#b5b5b5; font-size:42px; font-weight:500;44 }45 46 /* List area */47 .content{ position:absolute; left:0; right:0; top:200px; bottom:470px; overflow:auto; }48 .option-row{49 display:flex; align-items:center; gap:22px;50 padding:28px 26px;51 border-bottom:1px solid var(--divider);52 background:#1c1c1c;53 }54 .option-row .title{55 color:var(--blue); font-size:40px; font-weight:600;56 }57 .section-label{58 padding:26px; color:#8b9096; font-size:32px; letter-spacing:0.3px;59 background:#121212;60 }61 .place-row{62 background:#1b1c1f;63 padding:32px 26px;64 display:flex; align-items:flex-start; gap:24px;65 border-top:1px solid #232428;66 border-bottom:1px solid #232428;67 }68 .place-row .text{69 flex:1;70 }71 .place-title{72 font-size:40px; font-weight:700; color:#e9e9e9; margin-bottom:10px;73 }74 .place-sub{75 font-size:30px; color:#9aa0a6; line-height:1.35;76 }77 .row-actions{78 width:96px; display:flex; align-items:center; justify-content:center;79 }80 .divider{ height:1px; background:var(--divider); }81 /* Icons */82 .icon{83 width:48px; height:48px; display:inline-block;84 }85 .icon.pin path{ fill:#9aa0a6; }86 .icon.map path{ fill:var(--blue); }87 .icon.loc path{ fill:var(--blue); }88 .icon.star path{ fill:none; stroke:#9aa0a6; stroke-width:40; }89 .icon.more circle{ fill:#9aa0a6; }90 /* Keyboard */91 .keyboard{92 position:absolute; left:0; right:0; bottom:36px;93 height:430px; background:#232022;94 border-top:1px solid #2c2c2c;95 padding:18px 22px;96 display:flex; flex-direction:column; justify-content:space-between;97 }98 .kb-tools{99 display:flex; align-items:center; gap:26px; color:#c9c3c6;100 height:70px;101 }102 .kb-tools .tool{103 background:#2e2a2c; padding:16px 22px; border-radius:12px; font-size:30px;104 }105 .kb-row{ display:flex; gap:12px; justify-content:center; }106 .key{107 background:#2e2a2c; color:#efe6ea; min-width:82px; height:92px;108 border-radius:18px; display:flex; align-items:center; justify-content:center;109 font-size:36px; box-shadow: inset 0 0 0 1px #3a3537;110 }111 .key.wide{ min-width:160px; }112 .key.space{ min-width:540px; }113 .key.action{114 background:#f3c9c8; color:#2a2a2a; min-width:130px; font-weight:700;115 }116 .bottom-gesture{117 position:absolute; bottom:10px; left:50%; transform:translateX(-50%);118 width:340px; height:10px; border-radius:8px; background:#e5e5e5;119 opacity:0.8;120 }121</style>122</head>123<body>124<div id="render-target">125 <!-- Status bar -->126 <div class="statusbar">127 <div class="time">4:17</div>128 <div class="status-right">129 <!-- simple status icons -->130 <svg class="icon" viewBox="0 0 24 24"><path fill="#cfcfcf" d="M12 2l4 8-8 0z"/></svg>131 <svg class="icon" viewBox="0 0 24 24"><path fill="#cfcfcf" d="M4 12h16v8H4z"/></svg>132 <span class="dot"></span>133 <svg class="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 4a8 8 0 100 16 8 8 0 000-16z"/></svg>134 <svg class="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M6 22h12v-2H6v2zM11 2h2v15h-2z"/></svg>135 </div>136 </div>137 138 <!-- Top input bar -->139 <div class="top-bar">140 <div class="back">141 <svg class="icon" viewBox="0 0 24 24">142 <path fill="#cfcfcf" d="M15.5 3.5L7 12l8.5 8.5 1.5-1.5L10 12l7-7z"/>143 </svg>144 </div>145 <div class="search-placeholder">Choose starting point</div>146 </div>147 148 <!-- Content list -->149 <div class="content">150 <div class="option-row">151 <svg class="icon loc" viewBox="0 0 24 24"><path d="M12 2l3 6H9l3-6zm0 20l-3-6h6l-3 6z"></path></svg>152 <div class="title">Your current location</div>153 </div>154 <div class="option-row" style="border-bottom:1px solid var(--divider);">155 <svg class="icon map" viewBox="0 0 24 24"><path d="M9 3l6 2 6-2v18l-6 2-6-2-6 2V5l6-2zM9 5v14l6 2V7L9 5z"></path></svg>156 <div class="title">Choose on map</div>157 </div>158 159 <div class="section-label">Favourites</div>160 161 <div class="place-row">162 <svg class="icon pin" viewBox="0 0 24 24" style="margin-top:6px;">163 <path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"></path>164 </svg>165 <div class="text">166 <div class="place-title" style="text-transform:lowercase;">rajeev chowk</div>167 <div class="place-sub">Rajeev Chowk, Connaught Place, New Delhi, Delhi</div>168 </div>169 <div class="row-actions">170 <svg class="icon more" viewBox="0 0 24 24">171 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>172 </svg>173 </div>174 </div>175 176 <div class="divider"></div>177 178 <div class="place-row">179 <svg class="icon pin" viewBox="0 0 24 24" style="margin-top:6px;">180 <path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"></path>181 </svg>182 <div class="text">183 <div class="place-title">Mystery Rooms - Pacific Mall, Tagore Garden</div>184 <div class="place-sub">Delhi, Najafgarh Road, Tagore Garden, Tilak</div>185 </div>186 <div class="row-actions">187 <svg class="icon more" viewBox="0 0 24 24">188 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>189 </svg>190 </div>191 </div>192 193 <div class="section-label" style="margin-top:8px;">Recent</div>194 195 <div class="place-row">196 <svg class="icon pin" viewBox="0 0 24 24" style="margin-top:6px;">197 <path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"></path>198 </svg>199 <div class="text">200 <div class="place-title">Rajiv Chowk Flyover</div>201 <div class="place-sub">Shanti Nagar, Shivaji Nagar, Sector 11, Gurugram, Haryana, India</div>202 </div>203 <div class="row-actions">204 <svg class="icon star" viewBox="0 0 24 24">205 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.7L12 17l-5.5 3 1-6.7L3 8.9 9 8l3-6z"></path>206 </svg>207 </div>208 </div>209 210 <div class="place-row" style="background:#212224;">211 <div style="width:64px;height:64px;background:#ff7a00;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-top:10px;">212 <span style="color:#fff;font-weight:700;">🚌</span>213 </div>214 <div class="text">215 <div class="place-title">Anand Vihar ISBT Terminal</div>216 <div class="place-sub"></div>217 </div>218 <div class="row-actions">219 <svg class="icon star" viewBox="0 0 24 24">220 <path d="M12 2l3 6 6 .9-4.5 4.4 1 6.7L12 17l-5.5 3 1-6.7L3 8.9 9 8l3-6z"></path>221 </svg>222 </div>223 </div>224 </div>225 226 <!-- Keyboard -->227 <div class="keyboard">228 <div class="kb-tools">229 <div class="tool">◼◼</div>230 <div class="tool">🙂</div>231 <div class="tool">GIF</div>232 <div class="tool">Gx</div>233 <div class="tool">⚙</div>234 <div class="tool">🎨</div>235 </div>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 <div class="kb-row">241 <div class="key wide">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>242 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key wide">l</div>243 </div>244 <div class="kb-row">245 <div class="key wide">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>246 <div class="key">b</div><div class="key">n</div><div class="key">m</div>247 <div class="key wide">⌫</div>248 </div>249 <div class="kb-row">250 <div class="key wide">?123</div>251 <div class="key">,</div>252 <div class="key space"></div>253 <div class="key">.</div>254 <div class="key action">✓</div>255 </div>256 </div>257 258 <div class="bottom-gesture"></div>259</div>260</body>261</html>