GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Directions UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff; border-radius: 32px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);11  }12 13  /* Map placeholder */14  .map {15    position: absolute; left: 0; top: 0; width: 100%; height: 980px;16    background: #E0E0E0; border-bottom: 1px solid #BDBDBD;17    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; letter-spacing: 0.2px;18  }19  .back-btn {20    position: absolute; left: 28px; top: 350px; width: 92px; height: 92px;21    background: #fff; border-radius: 50%; box-shadow: 0 8px 16px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;22    border: 1px solid #E6E6E6;23  }24  .back-btn svg { width: 48px; height: 48px; stroke: #444; stroke-width: 3; fill: none; }25 26  /* Bottom sheet */27  .sheet {28    position: absolute; left: 0; top: 860px; width: 100%; height: 1540px;29    background: #fff; border-top-left-radius: 28px; border-top-right-radius: 28px;30    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);31  }32  .handle {33    width: 160px; height: 16px; border-radius: 8px; background: #E6E6E6;34    position: absolute; left: 50%; transform: translateX(-50%); top: 16px;35  }36  .sheet-inner { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; padding: 24px 36px 36px 140px; overflow: hidden; }37 38  /* Route summary row */39  .summary-row { display: flex; align-items: center; gap: 28px; padding: 20px 0; border-bottom: 1px solid #EFEFEF; }40  .badge {41    display: inline-flex; align-items: center; gap: 14px; font-size: 34px; color: #333;42  }43  .metro-pill {44    display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px; border-radius: 22px;45    background: #FFEB3B; font-weight: 600; font-size: 34px; color: #333;46  }47  .count { color: #666; font-size: 32px; }48 49  /* Timeline bar on the left */50  .timeline {51    position: absolute; left: 72px; top: 160px; width: 16px; height: 1260px; border-radius: 8px; background: linear-gradient(#2F7CFB 0 50%, #FFD54F 50% 100%);52  }53  .node {54    position: absolute; left: 64px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid #2F7CFB;55  }56  .node.yellow { border-color: #FFCA28; }57 58  /* Sections */59  .section { padding: 26px 0; }60  .title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }61  .title-row h2 { margin: 0; font-size: 44px; font-weight: 700; color: #222; }62  .title-row .time { font-size: 34px; color: #666; }63  .drive-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }64  .drive-row .text { font-size: 36px; color: #333; }65  .chev svg { width: 36px; height: 36px; stroke: #999; stroke-width: 3; fill: none; }66  .start-btn {67    margin-top: 22px; display: inline-flex; align-items: center; gap: 16px;68    padding: 22px 28px; border: 2px solid #E0E0E0; border-radius: 22px; font-size: 34px; color: #2F7CFB; font-weight: 600;69    background: #fff;70  }71  .divider { height: 1px; background: #ECECEC; margin: 30px 0; }72 73  .alt-row { display: flex; align-items: center; gap: 26px; }74  .pill {75    display: inline-flex; align-items: center; gap: 16px; padding: 18px 22px; border: 2px solid #E0E0E0; border-radius: 20px; font-size: 34px; color: #333; background: #fff;76  }77 78  .station-name { font-size: 42px; font-weight: 700; margin: 8px 0 8px; }79  .live { font-size: 32px; color: #C2185B; }80  .subtle { color: #777; font-size: 32px; }81  .line-details { margin-top: 20px; }82  .line-details .metro-pill { font-size: 32px; padding: 10px 18px; }83  .line-info { margin-top: 12px; font-size: 32px; color: #666; }84 85  .question { font-size: 36px; margin: 28px 0 18px; }86  .feedback-row { display: flex; gap: 18px; }87  .dropdown {88    display: inline-flex; align-items: center; gap: 16px; padding: 22px 26px; border: 2px solid #E0E0E0; border-radius: 22px; font-size: 32px;89    background: #fff; color: #333;90  }91  .dropdown .caret { width: 26px; height: 26px; margin-left: 8px; }92 93  /* Footer summary bar */94  .footer {95    position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; background: #fff; border-top: 1px solid #EAEAEA;96    display: flex; align-items: center; justify-content: center; color: #333; font-size: 40px; gap: 12px;97  }98  .footer .dot { width: 10px; height: 10px; background: #C8C8C8; border-radius: 50%; display: inline-block; margin: 0 10px; }99  .home-indicator { position: absolute; left: 50%; transform: translateX(-50%); bottom: 24px; width: 320px; height: 12px; border-radius: 6px; background: #CFCFCF; }100 101  /* Icon defaults */102  .icon { width: 44px; height: 44px; display: inline-block; }103  .icon svg { width: 100%; height: 100%; }104</style>105</head>106<body>107<div id="render-target">108 109  <div class="map">[IMG: Google Map with route]</div>110 111  <div class="back-btn" aria-label="Back">112    <svg viewBox="0 0 24 24">113      <path d="M15 6 L9 12 L15 18" stroke-linecap="round" stroke-linejoin="round"></path>114    </svg>115  </div>116 117  <div class="sheet">118    <div class="handle"></div>119 120    <!-- Timeline bar and nodes -->121    <div class="timeline"></div>122    <div class="node" style="top: 120px;"></div>123    <div class="node yellow" style="top: 620px;"></div>124 125    <div class="sheet-inner">126 127      <!-- Route summary -->128      <div class="summary-row">129        <div class="badge">130          <span class="icon" aria-hidden="true">131            <svg viewBox="0 0 24 24">132              <rect x="4" y="8" width="16" height="7" rx="2" fill="#565D64"></rect>133              <circle cx="7" cy="17" r="2" fill="#565D64"></circle>134              <circle cx="17" cy="17" r="2" fill="#565D64"></circle>135            </svg>136          </span>137          <span class="count">23</span>138        </div>139 140        <div class="badge">141          <span class="icon" aria-hidden="true">142            <svg viewBox="0 0 24 24">143              <circle cx="12" cy="12" r="8" fill="none" stroke="#B71C1C" stroke-width="2"></circle>144              <path d="M7 7 L17 17" stroke="#B71C1C" stroke-width="2"></path>145            </svg>146          </span>147          <span class="metro-pill">Yellow Line</span>148        </div>149 150        <div class="badge">151          <span class="icon" aria-hidden="true">152            <svg viewBox="0 0 24 24">153              <rect x="5" y="9" width="14" height="7" rx="2" fill="#2E7D32"></rect>154              <rect x="9" y="6" width="6" height="4" rx="1" fill="#2E7D32"></rect>155            </svg>156          </span>157          <span class="count">9</span>158        </div>159      </div>160 161      <!-- Your location section -->162      <div class="section">163        <div class="title-row">164          <h2>Your location</h2>165          <div class="time">3:32 PM</div>166        </div>167 168        <div class="drive-row">169          <div class="text">Drive a car <span style="color:#FB8C00; font-weight:600;">23 min</span> (12 km)</div>170          <div class="chev">171            <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke-linecap="round" stroke-linejoin="round"></path></svg>172          </div>173        </div>174 175        <button class="start-btn">176          <span class="icon" aria-hidden="true">177            <svg viewBox="0 0 24 24">178              <path d="M6 5 L18 12 L6 19 Z" fill="#2F7CFB"></path>179            </svg>180          </span>181          Start182        </button>183 184        <div class="divider"></div>185 186        <div class="subtle" style="margin-bottom: 18px;">Also by</div>187        <div class="alt-row">188          <div class="pill">189            <span class="icon" aria-hidden="true">190              <svg viewBox="0 0 24 24">191                <circle cx="12" cy="6" r="2" fill="#424242"></circle>192                <path d="M12 8 L12 16" stroke="#424242" stroke-width="2" stroke-linecap="round"></path>193                <path d="M8 12 L12 10 L16 12" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"></path>194                <path d="M8 20 L12 16 L16 20" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"></path>195              </svg>196            </span>197            1 hr 38 min198          </div>199        </div>200      </div>201 202      <!-- Station details -->203      <div class="section">204        <div class="badge" style="gap:18px; margin-bottom:8px;">205          <span class="icon" aria-hidden="true">206            <svg viewBox="0 0 24 24">207              <circle cx="12" cy="12" r="8" fill="none" stroke="#B71C1C" stroke-width="2"></circle>208              <path d="M7 7 L17 17" stroke="#B71C1C" stroke-width="2"></path>209            </svg>210          </span>211          <span class="station-name">Arjan Garh</span>212        </div>213        <div class="live">214          <span class="icon" aria-hidden="true" style="width:36px;height:36px;">215            <svg viewBox="0 0 24 24">216              <circle cx="7" cy="9" r="2" fill="#C2185B"></circle>217              <circle cx="17" cy="9" r="2" fill="#C2185B"></circle>218              <path d="M5 17 C7 14, 17 14, 19 17" stroke="#C2185B" stroke-width="2" fill="none"></path>219            </svg>220          </span>221          Live: <span style="color:#777; font-weight:600;">Not too busy</span>222          <span class="chev" style="margin-left:auto;">223            <svg viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke-linecap="round" stroke-linejoin="round"></path></svg>224          </span>225        </div>226 227        <div class="divider"></div>228 229        <div class="line-details">230          <span class="metro-pill">Yellow Line</span>231          <span style="margin-left:12px; font-size:36px;">Samaypur Badli</span>232          <div class="line-info">Every 6 min · Platform 2</div>233        </div>234 235        <div class="question">What's it like on board?</div>236        <div class="feedback-row">237          <div class="dropdown">238            <span class="icon" aria-hidden="true">239              <svg viewBox="0 0 24 24">240                <circle cx="8" cy="9" r="2" fill="#455A64"></circle>241                <circle cx="16" cy="9" r="2" fill="#455A64"></circle>242                <path d="M6 17 C9 14, 15 14, 18 17" stroke="#455A64" stroke-width="2" fill="none"></path>243              </svg>244            </span>245            Not too crowded246            <svg class="caret" viewBox="0 0 24 24"><path d="M6 10 L12 16 L18 10" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>247          </div>248 249          <div class="dropdown">250            <span class="icon" aria-hidden="true">251              <svg viewBox="0 0 24 24">252                <circle cx="9" cy="10" r="4" fill="none" stroke="#1565C0" stroke-width="2"></circle>253                <path d="M12 14 L16 14 L18 19" stroke="#1565C0" stroke-width="2" fill="none" stroke-linecap="round"></path>254              </svg>255            </span>256            Accessible257            <svg class="caret" viewBox="0 0 24 24"><path d="M6 10 L12 16 L18 10" fill="none" stroke="#888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>258          </div>259        </div>260      </div>261 262    </div>263  </div>264 265  <!-- Footer summary -->266  <div class="footer">267    <span>5:03 PM</span>268    <span class="dot"></span>269    <span style="font-weight:700;">1 hr 31 min</span>270    <div class="home-indicator"></div>271  </div>272 273</div>274</body>275</html>