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>Navigation Share UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#000000;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0; height:90px;18 color:#ffffff; font-size:38px; letter-spacing:0.2px;19 padding:18px 32px 0 32px; box-sizing:border-box;20 }21 .status-left { float:left; }22 .status-right { float:right; display:flex; gap:24px; align-items:center; }23 .status-dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.8; }24 25 /* Big dark map area */26 .map-area {27 position:absolute; top:90px; left:0; right:0; height:1050px;28 background:#0b0b0b;29 }30 31 /* U-turn indicator */32 .uturn {33 position:absolute; top:170px; left:60px; color:#9e9e9e;34 display:flex; align-items:center; gap:28px;35 }36 .uturn svg { width:120px; height:120px; opacity:0.35; }37 .uturn .distance { font-size:72px; font-weight:700; color:#9e9e9e; opacity:0.6; }38 39 /* “and then” strip */40 .and-then {41 position:absolute; top:460px; left:0; right:0; height:80px;42 background:#1b1b1b; color:#8e8e8e; font-size:36px;43 padding-left:40px; display:flex; align-items:center; gap:18px;44 }45 .and-then svg { width:36px; height:36px; fill:#8e8e8e; opacity:0.7; }46 47 /* Arrival top card */48 .arrival-card {49 position:absolute; top:560px; left:40px; width:1000px; height:220px;50 background:#f4f4f4; border-radius:40px; box-shadow:0 8px 28px rgba(0,0,0,0.35);51 display:flex; align-items:center; justify-content:center; color:#1d1d1d;52 }53 .arrival-inner {54 width:90%; display:flex; align-items:center; justify-content:space-between;55 }56 .arrival-time { font-size:92px; font-weight:800; text-align:center; width:60%; }57 .arrival-meta { position:absolute; top:150px; left:0; right:0; text-align:center; font-size:40px; color:#666; }58 .arrival-side {59 width:110px; height:110px; background:#e9e9e9; border-radius:40px;60 display:flex; align-items:center; justify-content:center;61 }62 .arrival-side svg { width:64px; height:64px; fill:#777; }63 64 /* Route details card */65 .route-card {66 position:absolute; top:820px; left:40px; width:1000px;67 background:#ffffff; border-radius:32px; box-shadow:0 10px 30px rgba(0,0,0,0.25);68 padding:36px; box-sizing:border-box;69 }70 .route-subtitle { color:#7a7a7a; font-size:36px; text-align:center; }71 .route-title {72 font-size:52px; font-weight:800; color:#121212; text-align:center;73 line-height:1.15; margin:16px 0 24px 0;74 }75 .toll-chip {76 display:inline-flex; gap:10px; align-items:center;77 background:#28313b; color:#e9eef5; font-size:36px; padding:18px 26px;78 border-radius:18px; margin:0 auto; }79 .toll-chip svg { width:28px; height:28px; fill:#c6d0dc; }80 .chip-wrap { display:flex; justify-content:center; }81 .route-line {82 margin:40px auto 28px auto; width:86%; height:22px; background:#d7e8f5;83 border-radius:14px; position:relative;84 }85 .seg { position:absolute; top:0; height:100%; border-radius:14px; }86 .seg.yellow { background:#ffd54f; left:220px; width:160px; }87 .seg.red { background:#ef5350; left:420px; width:120px; }88 .arrow-start {89 position:absolute; left:-24px; top:-16px;90 }91 .pin-end {92 position:absolute; right:-16px; top:-22px;93 }94 .actions-row {95 margin-top:32px; display:flex; gap:36px; justify-content:flex-start; align-items:center;96 }97 .circle-btn {98 width:160px; height:160px; background:#f1f7fb; border-radius:32px;99 display:flex; align-items:center; justify-content:center; color:#1677ff;100 font-weight:700; box-shadow:inset 0 0 0 1px #d7e8f5;101 }102 .circle-icon {103 width:160px; height:160px; background:#f3f6fa; border-radius:32px;104 display:flex; align-items:center; justify-content:center;105 box-shadow:inset 0 0 0 1px #dbe5ef;106 }107 .circle-icon svg { width:64px; height:64px; fill:#2b5dff; }108 .add-text { color:#1966ff; font-size:44px; font-weight:700; }109 110 /* Share bottom sheet */111 .share-sheet {112 position:absolute; left:0; right:0; bottom:110px; height:960px;113 background:#ffffff; border-top-left-radius:42px; border-top-right-radius:42px;114 box-shadow:0 -10px 35px rgba(0,0,0,0.35); padding:40px 42px; box-sizing:border-box;115 }116 .sheet-header {117 display:flex; gap:28px; align-items:flex-start;118 }119 .sheet-img {120 width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;121 border-radius:60px; display:flex; align-items:center; justify-content:center;122 color:#757575; font-size:22px; text-align:center; padding:10px; box-sizing:border-box;123 }124 .sheet-title { font-size:64px; font-weight:800; color:#121212; margin:0; }125 .sheet-desc { font-size:38px; color:#636363; line-height:1.4; margin-top:10px; }126 .share-row {127 margin-top:40px; display:flex; gap:46px; align-items:flex-start;128 flex-wrap:wrap;129 }130 .share-option {131 width:180px; text-align:center;132 }133 .share-circle {134 width:160px; height:160px; border-radius:80px;135 display:flex; align-items:center; justify-content:center; margin:0 auto 18px auto;136 color:#fff; font-weight:800; font-size:46px;137 box-shadow:0 6px 16px rgba(0,0,0,0.12);138 }139 .opt-label { font-size:34px; color:#2c2c2c; }140 .opt-messenger { background:linear-gradient(135deg,#7b48ff,#ff3ca5); }141 .opt-messages { background:#3d6cff; }142 .opt-gmail { background:#ff3b30; }143 .opt-fb { background:#1877f2; }144 .opt-fbgroups { background:#1877f2; }145 .more-options {146 margin-top:40px; text-align:center; font-size:40px; color:#4a66ff; font-weight:700;147 }148 149 /* Gesture pill */150 .gesture {151 position:absolute; bottom:30px; left:50%; transform:translateX(-50%);152 width:300px; height:16px; background:#cfcfcf; border-radius:16px;153 }154</style>155</head>156<body>157<div id="render-target">158 <!-- Status Bar -->159 <div class="status-bar">160 <div class="status-left">12:57</div>161 <div class="status-right">162 <!-- Simple placeholder status icons -->163 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#fff" d="M3 20h18v2H3zM11 2h2v14h-2zM7 8h2v8H7zM15 12h2v4h-2z"/></svg>164 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#fff" d="M12 2l7 7h-4v9H9V9H5z"/></svg>165 <svg viewBox="0 0 24 24" width="36" height="36"><path fill="#fff" d="M3 6h18v12H3zM2 5h20v14H2z"/></svg>166 <div class="status-dot"></div>167 </div>168 </div>169 170 <div class="map-area"></div>171 172 <!-- U-turn indicator -->173 <div class="uturn">174 <svg viewBox="0 0 48 48">175 <path d="M24 6c9 0 16 7 16 16v13h-6V22c0-6-4-10-10-10s-10 4-10 10v20H8V22C8 12 15 6 24 6z" fill="#9e9e9e"/>176 <path d="M31 35l-7 7-7-7h14z" fill="#9e9e9e"/>177 </svg>178 <div class="distance">0 m</div>179 </div>180 181 <!-- And then strip -->182 <div class="and-then">183 <div>and then</div>184 <svg viewBox="0 0 24 24"><path d="M9 4l10 8-10 8V4z"/></svg>185 </div>186 187 <!-- Arrival card -->188 <div class="arrival-card">189 <div class="arrival-inner">190 <div class="arrival-side">191 <!-- Gear icon -->192 <svg viewBox="0 0 24 24">193 <path d="M12 8a4 4 0 100 8 4 4 0 000-8zm10 4l-2.2 1.3.3 2.5-2.4.9-1.4 2.1-2.5-.5L12 20l-1.8-1.7-2.5.5-1.4-2.1-2.4-.9.3-2.5L2 12l2.2-1.3-.3-2.5 2.4-.9 1.4-2.1 2.5.5L12 4l1.8 1.7 2.5-.5 1.4 2.1 2.4.9-.3 2.5L22 12z"/>194 </svg>195 </div>196 <div class="arrival-time">1:52 PM</div>197 <div class="arrival-side">198 <!-- Speaker icon -->199 <svg viewBox="0 0 24 24">200 <path d="M4 9v6h4l5 5V4L8 9H4zm13.5 3a4.5 4.5 0 00-3.3-4.3v8.6a4.5 4.5 0 003.3-4.3z"/>201 </svg>202 </div>203 <div class="arrival-meta">55 min • 25 km</div>204 </div>205 </div>206 207 <!-- Route details card -->208 <div class="route-card">209 <div class="route-subtitle">Lal Qila, Delhi, DL</div>210 <div class="route-title">Via Mathura Rd, Lala Lajpat Rai Rd<br>New Delhi</div>211 <div class="chip-wrap">212 <div class="toll-chip">213 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 15h-2v-2h2zm0-4h-2V7h2z"/></svg>214 <span>TOLL ~ ₹50.00</span>215 </div>216 </div>217 <div class="route-line">218 <div class="seg yellow"></div>219 <div class="seg red"></div>220 <svg class="arrow-start" viewBox="0 0 48 48" width="64" height="64">221 <path d="M10 24l26-10-10 26-4-8-12-8z" fill="#2b9cff"/>222 </svg>223 <svg class="pin-end" viewBox="0 0 32 32" width="56" height="56">224 <path d="M16 2a10 10 0 00-10 10c0 7 10 18 10 18s10-11 10-18A10 10 0 0016 2zm0 14a4 4 0 110-8 4 4 0 010 8z" fill="#ef3b3b"/>225 </svg>226 </div>227 <div class="actions-row">228 <div class="circle-btn"><span class="add-text">Add a stop</span></div>229 <div class="circle-icon">230 <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 7-7-7 7-7z"/></svg>231 </div>232 <div class="circle-icon">233 <svg viewBox="0 0 24 24"><path d="M6 3h12l-1 18H7L6 3zm3 4v10h2V7H9zm6 0v10h-2V7h2z"/></svg>234 </div>235 <div class="circle-icon">236 <svg viewBox="0 0 24 24"><path d="M5 3h14v4H5zM5 9h14v12H5z"/></svg>237 </div>238 </div>239 </div>240 241 <!-- Share sheet -->242 <div class="share-sheet">243 <div class="sheet-header">244 <div class="sheet-img">[IMG: Map/Share Icon]</div>245 <div>246 <h1 class="sheet-title">Share your drive</h1>247 <div class="sheet-desc">248 Anyone with the link can see your drive on the map and share it. You can stop sharing at any time.249 </div>250 </div>251 </div>252 253 <div class="share-row">254 <div class="share-option">255 <div class="share-circle opt-messenger">M</div>256 <div class="opt-label">Messenger</div>257 </div>258 <div class="share-option">259 <div class="share-circle opt-messages">SMS</div>260 <div class="opt-label">Messages</div>261 </div>262 <div class="share-option">263 <div class="share-circle opt-gmail">@</div>264 <div class="opt-label">Gmail</div>265 </div>266 <div class="share-option">267 <div class="share-circle opt-fb">f</div>268 <div class="opt-label">News Feed</div>269 </div>270 <div class="share-option">271 <div class="share-circle opt-fbgroups">f</div>272 <div class="opt-label">Your groups</div>273 </div>274 </div>275 276 <div class="more-options">More options</div>277 </div>278 279 <!-- Gesture bar -->280 <div class="gesture"></div>281</div>282</body>283</html>