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 - Plan</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12 color: #fff;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #000;20 }21 22 /* Top red header area */23 .topbar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 380px;29 background: linear-gradient(#b31616, #c61d1d);30 }31 .status-row {32 position: absolute;33 top: 22px;34 left: 36px;35 right: 36px;36 display: flex;37 align-items: center;38 justify-content: space-between;39 color: #fff;40 font-weight: 600;41 font-size: 38px;42 opacity: 0.95;43 }44 .status-icons {45 display: flex;46 gap: 24px;47 align-items: center;48 }49 .status-dot {50 width: 10px;51 height: 10px;52 background: #fff;53 border-radius: 50%;54 opacity: 0.85;55 }56 .icon-wifi, .icon-battery {57 width: 42px;58 height: 28px;59 }60 .icon-battery rect { fill: none; stroke: #fff; stroke-width: 3; }61 .icon-battery line { stroke: #fff; stroke-width: 3; }62 .icon-wifi path { fill: none; stroke: #fff; stroke-width: 3; }63 64 .header-row {65 position: absolute;66 top: 110px;67 left: 0;68 width: 100%;69 text-align: center;70 font-size: 64px;71 font-weight: 600;72 color: #fff;73 letter-spacing: 0.5px;74 }75 .swap-btn {76 position: absolute;77 top: 108px;78 right: 38px;79 width: 90px;80 height: 66px;81 display: flex;82 align-items: center;83 justify-content: center;84 }85 .swap-btn svg path { stroke: #fff; stroke-width: 6; fill: none; }86 87 /* Tabs */88 .tabs {89 position: absolute;90 top: 180px;91 left: 36px;92 right: 36px;93 display: flex;94 gap: 28px;95 }96 .tab {97 flex: 1;98 height: 120px;99 border-radius: 60px;100 display: flex;101 align-items: center;102 justify-content: center;103 font-size: 48px;104 font-weight: 600;105 color: #fff;106 background: rgba(255,255,255,0.12);107 }108 .tab.active {109 background: rgba(255,255,255,0.22);110 }111 112 /* Search card */113 .search-card {114 position: absolute;115 top: 340px;116 left: 36px;117 width: 1008px;118 height: 330px;119 background: #1c1c1c;120 border-radius: 44px;121 box-shadow: 0 14px 30px rgba(0,0,0,0.35);122 padding: 40px 48px;123 }124 .route-rail {125 position: absolute;126 left: 40px;127 top: 44px;128 width: 18px;129 height: 250px;130 }131 .route-rail .line {132 position: absolute;133 left: 8px;134 top: 40px;135 bottom: 40px;136 width: 2px;137 background: #e6e6e6;138 opacity: 0.6;139 }140 .route-rail .dot {141 position: absolute;142 left: 0;143 width: 18px;144 height: 18px;145 border-radius: 50%;146 border: 3px solid #e6e6e6;147 }148 .route-rail .dot.start { top: 0; }149 .route-rail .dot.end { bottom: 0; }150 151 .input-row {152 margin-left: 56px;153 height: 120px;154 border-bottom: 2px solid #303030;155 display: flex;156 align-items: center;157 font-size: 46px;158 color: #bfbfbf;159 }160 .input-row:last-child {161 border-bottom: none;162 color: #9f9f9f;163 }164 165 /* Main dark body area */166 .content-area {167 position: absolute;168 top: 700px;169 left: 0;170 right: 0;171 bottom: 180px;172 background: #000;173 }174 175 /* Floating action button (list + plus) */176 .fab {177 position: absolute;178 right: 42px;179 bottom: 280px;180 width: 152px;181 height: 152px;182 border-radius: 50%;183 background: #262626;184 box-shadow: 0 10px 24px rgba(0,0,0,0.45);185 display: flex;186 align-items: center;187 justify-content: center;188 }189 .fab svg { width: 86px; height: 86px; }190 .fab svg path, .fab svg rect, .fab svg line { stroke: #e6e6e6; stroke-width: 8; fill: none; }191 192 /* Bottom navigation */193 .bottom-nav {194 position: absolute;195 left: 0;196 right: 0;197 bottom: 0;198 height: 180px;199 background: #1a1a1a;200 display: flex;201 align-items: center;202 justify-content: space-around;203 padding: 0 24px;204 }205 .nav-item {206 width: 160px;207 height: 140px;208 display: flex;209 flex-direction: column;210 align-items: center;211 justify-content: center;212 color: #bfbfbf;213 font-size: 34px;214 gap: 12px;215 }216 .nav-item.active {217 color: #ffffff;218 }219 .nav-icon {220 width: 88px;221 height: 88px;222 }223 .nav-icon path, .nav-icon rect, .nav-icon line, .nav-icon circle {224 stroke: currentColor;225 stroke-width: 6;226 fill: none;227 }228</style>229</head>230<body>231<div id="render-target">232 233 <!-- Top red bar -->234 <div class="topbar">235 <div class="status-row">236 <div>10:36</div>237 <div class="status-icons">238 <!-- simple icons for status bar -->239 <svg class="icon-wifi" viewBox="0 0 24 24">240 <path d="M2 7c5-4 15-4 20 0"/>241 <path d="M5 11c3-3 11-3 14 0"/>242 <path d="M9 15c2-2 6-2 8 0"/>243 <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>244 </svg>245 <svg class="icon-battery" viewBox="0 0 28 18">246 <rect x="1.5" y="1.5" width="20" height="15" rx="2"></rect>247 <line x1="23" y1="6" x2="26" y2="6"></line>248 <line x1="23" y1="12" x2="26" y2="12"></line>249 <rect x="4" y="4" width="14" height="10" fill="#fff" stroke="none"></rect>250 </svg>251 </div>252 </div>253 254 <div class="header-row">Plan</div>255 256 <div class="swap-btn">257 <svg viewBox="0 0 80 60">258 <path d="M10 45h45"></path>259 <path d="M40 15h30"></path>260 <path d="M55 33l10 12-10 12"></path>261 <path d="M25 27L15 15 25 3"></path>262 </svg>263 </div>264 265 <div class="tabs">266 <div class="tab active">Timetable</div>267 <div class="tab">Touch timetable</div>268 <div class="tab">Map</div>269 </div>270 </div>271 272 <!-- Search card -->273 <div class="search-card">274 <div class="route-rail">275 <div class="dot start"></div>276 <div class="line"></div>277 <div class="dot end"></div>278 </div>279 <div class="input-row">From</div>280 <div class="input-row">To</div>281 </div>282 283 <!-- Main black content area -->284 <div class="content-area"></div>285 286 <!-- Floating Action Button -->287 <div class="fab">288 <svg viewBox="0 0 100 100">289 <!-- list icon -->290 <line x1="14" y1="28" x2="70" y2="28"></line>291 <line x1="14" y1="48" x2="70" y2="48"></line>292 <line x1="14" y1="68" x2="70" y2="68"></line>293 <!-- plus -->294 <line x1="72" y1="40" x2="92" y2="40"></line>295 <line x1="82" y1="30" x2="82" y2="50"></line>296 </svg>297 </div>298 299 <!-- Bottom navigation -->300 <div class="bottom-nav">301 <div class="nav-item active">302 <svg class="nav-icon" viewBox="0 0 48 48">303 <line x1="8" y1="12" x2="40" y2="12"></line>304 <line x1="8" y1="22" x2="30" y2="22"></line>305 <circle cx="36" cy="22" r="6"></circle>306 </svg>307 <div>Plan</div>308 </div>309 <div class="nav-item">310 <svg class="nav-icon" viewBox="0 0 48 48">311 <rect x="8" y="16" width="32" height="16" rx="3"></rect>312 <line x1="12" y1="32" x2="36" y2="32"></line>313 <circle cx="16" cy="36" r="3"></circle>314 </svg>315 </div>316 <div class="nav-item">317 <svg class="nav-icon" viewBox="0 0 48 48">318 <rect x="10" y="20" width="28" height="8" rx="4"></rect>319 <circle cx="12" cy="24" r="3"></circle>320 <circle cx="36" cy="24" r="3"></circle>321 </svg>322 </div>323 <div class="nav-item">324 <svg class="nav-icon" viewBox="0 0 48 48">325 <rect x="10" y="10" width="28" height="28" rx="4"></rect>326 <line x1="18" y1="18" x2="30" y2="18"></line>327 <line x1="18" y1="24" x2="30" y2="24"></line>328 <line x1="18" y1="30" x2="30" y2="30"></line>329 </svg>330 </div>331 <div class="nav-item">332 <svg class="nav-icon" viewBox="0 0 48 48">333 <rect x="10" y="14" width="28" height="20" rx="4"></rect>334 <path d="M10 14l8-8h12l8 8" stroke-linejoin="round"></path>335 </svg>336 </div>337 <div class="nav-item">338 <svg class="nav-icon" viewBox="0 0 48 48">339 <circle cx="24" cy="18" r="8"></circle>340 <path d="M8 40c4-8 28-8 32 0" stroke-linecap="round"></path>341 </svg>342 </div>343 </div>344 345</div>346</body>347</html>