GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Runkeeper - Start</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 color: #222;14 }15 16 #render-target {17 width: 1080px;18 height: 2400px;19 position: relative;20 overflow: hidden;21 background: #ffffff;22 }23 24 /* Status bar */25 .status-bar {26 position: absolute;27 top: 0;28 left: 0;29 width: 1080px;30 height: 90px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 padding: 0 32px;35 font-size: 30px;36 color: #555;37 }38 .status-left {39 display: flex;40 align-items: center;41 gap: 18px;42 }43 .status-right {44 display: flex;45 align-items: center;46 gap: 22px;47 }48 .status-dot {49 width: 26px;50 height: 26px;51 border: 4px solid #666;52 border-radius: 50%;53 }54 .cloud {55 width: 46px;56 height: 24px;57 background: #999;58 border-radius: 12px;59 position: relative;60 }61 .cloud:before {62 content: "";63 position: absolute;64 width: 26px;65 height: 26px;66 background: #999;67 border-radius: 50%;68 left: -10px;69 top: -8px;70 }71 72 /* Header */73 .app-header {74 position: absolute;75 top: 90px;76 left: 0;77 width: 1080px;78 height: 120px;79 display: flex;80 align-items: center;81 justify-content: space-between;82 padding: 0 34px;83 box-shadow: 0 1px 0 rgba(0,0,0,0.06);84 background: #fff;85 }86 .logo {87 font-size: 46px;88 color: #4f5bd5;89 font-weight: 600;90 letter-spacing: 0.5px;91 }92 .header-btn {93 width: 72px;94 height: 72px;95 border-radius: 50%;96 display: flex;97 align-items: center;98 justify-content: center;99 color: #1e2d5c;100 }101 .header-btn svg { width: 52px; height: 52px; }102 103 /* Map area */104 .map {105 position: absolute;106 left: 0;107 top: 210px;108 width: 1080px;109 bottom: 680px; /* room for sheet + nav */110 background: #F3F5F7;111 }112 .map .map-placeholder {113 position: absolute;114 inset: 0;115 margin: 24px;116 border: 1px solid #BDBDBD;117 background: #E0E0E0;118 display: flex;119 align-items: center;120 justify-content: center;121 color: #757575;122 font-size: 36px;123 }124 125 /* Floating map controls */126 .fab {127 position: absolute;128 right: 28px;129 width: 104px;130 height: 104px;131 background: #fff;132 border-radius: 52px;133 box-shadow: 0 6px 18px rgba(0,0,0,0.15);134 display: flex;135 align-items: center;136 justify-content: center;137 }138 .fab svg { width: 56px; height: 56px; stroke: #1e2d5c; }139 .fab.locate { top: 520px; }140 .fab.signal { top: 655px; }141 142 .warning {143 position: absolute;144 right: 34px;145 top: 780px;146 width: 80px;147 height: 80px;148 background: #fff;149 border-radius: 18px;150 display: flex;151 align-items: center;152 justify-content: center;153 }154 .warning svg { width: 64px; height: 64px; }155 156 .pill {157 position: absolute;158 left: 44px;159 bottom: 760px;160 background: #fff;161 box-shadow: 0 8px 20px rgba(0,0,0,0.12);162 padding: 22px 28px;163 border-radius: 40px;164 font-size: 34px;165 color: #444;166 display: flex;167 align-items: center;168 gap: 18px;169 }170 .bars {171 display: flex;172 gap: 6px;173 align-items: flex-end;174 }175 .bars span {176 width: 8px;177 background: #9aa0a6;178 border-radius: 3px;179 }180 .bars span:nth-child(1){ height: 10px; }181 .bars span:nth-child(2){ height: 16px; }182 .bars span:nth-child(3){ height: 22px; }183 .bars span:nth-child(4){ height: 28px; }184 185 /* Bottom sheet */186 .sheet {187 position: absolute;188 left: 0;189 right: 0;190 bottom: 160px; /* above nav */191 height: 520px;192 background: #fff;193 border-top-left-radius: 26px;194 border-top-right-radius: 26px;195 box-shadow: 0 -6px 24px rgba(0,0,0,0.08);196 }197 .grid {198 display: grid;199 grid-template-columns: 1fr 1fr;200 column-gap: 0;201 row-gap: 0;202 border-top-left-radius: 26px;203 border-top-right-radius: 26px;204 overflow: hidden;205 }206 .tile {207 padding: 36px 44px;208 border: 1px solid #ECEFF1;209 height: 200px;210 display: flex;211 align-items: center;212 gap: 30px;213 }214 .tile svg { width: 64px; height: 64px; stroke: #1e2d5c; }215 .tile .label {216 display: flex;217 flex-direction: column;218 font-size: 30px;219 color: #555;220 }221 .tile .value {222 font-size: 40px;223 color: #111;224 margin-top: 6px;225 font-weight: 600;226 }227 228 .start-wrap {229 padding: 26px 60px 0;230 }231 .start-btn {232 width: 960px;233 height: 120px;234 border: none;235 background: #4f5bd5;236 color: #fff;237 font-size: 44px;238 font-weight: 700;239 border-radius: 64px;240 box-shadow: 0 12px 22px rgba(79,91,213,0.35);241 letter-spacing: 2px;242 }243 244 /* Bottom navigation */245 .nav {246 position: absolute;247 left: 0;248 bottom: 0;249 width: 1080px;250 height: 160px;251 background: #fff;252 border-top: 1px solid #e6e6e9;253 display: flex;254 align-items: center;255 justify-content: space-around;256 padding-bottom: 10px;257 }258 .nav-item {259 display: flex;260 flex-direction: column;261 align-items: center;262 gap: 10px;263 color: #7a7f86;264 font-size: 26px;265 }266 .nav-item svg { width: 50px; height: 50px; }267 .nav-item.active { color: #1e2d5c; }268 .nav-item.active .dot {269 width: 12px;270 height: 12px;271 background: #e85d5d;272 border-radius: 50%;273 position: absolute;274 top: -6px;275 right: -6px;276 }277 .active svg path, .active svg circle { stroke: #1e2d5c; fill: none; }278 .pin {279 color: #1e2d5c;280 font-weight: 700;281 }282 283 /* Home indicator */284 .home-indicator {285 position: absolute;286 bottom: 8px;287 left: 50%;288 transform: translateX(-50%);289 width: 320px;290 height: 10px;291 background: #000;292 opacity: 0.2;293 border-radius: 6px;294 }295</style>296</head>297<body>298<div id="render-target">299 300 <!-- Status Bar -->301 <div class="status-bar">302 <div class="status-left">303 <div>2:57</div>304 <div class="status-dot"></div>305 <div class="cloud"></div>306 </div>307 <div class="status-right">308 <!-- simple glyphs to hint at location, wifi, battery -->309 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2"><path d="M12 2l3 7h7l-5.5 4 2 7-6.5-4.5L6.5 20l2-7L3 9h7z"/></svg>310 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2"><path d="M2 8c5-5 15-5 20 0"/><path d="M5 11c3-3 11-3 14 0"/><path d="M8 14c2-2 6-2 8 0"/></svg>311 <svg width="38" height="38" viewBox="0 0 24 24" fill="#777"><rect x="16" y="3" width="4" height="18" rx="1"/><rect x="10" y="9" width="4" height="12" rx="1"/><rect x="4" y="13" width="4" height="8" rx="1"/></svg>312 </div>313 </div>314 315 <!-- Header -->316 <div class="app-header">317 <div class="header-btn">318 <!-- Gear icon -->319 <svg viewBox="0 0 24 24" fill="none" stroke="#1e2d5c" stroke-width="2">320 <circle cx="12" cy="12" r="3"></circle>321 <path d="M12 2v3M12 19v3M4.9 4.9l2.1 2.1M16.9 16.9l2.1 2.1M2 12h3M19 12h3M4.9 19.1l2.1-2.1M16.9 7.1l2.1-2.1"></path>322 </svg>323 </div>324 <div class="logo">Runkeeper</div>325 <div class="header-btn">326 <!-- Plus icon -->327 <svg viewBox="0 0 24 24" fill="none" stroke="#1e2d5c" stroke-width="2">328 <path d="M12 5v14M5 12h14"></path>329 </svg>330 </div>331 </div>332 333 <!-- Map Area -->334 <div class="map">335 <div class="map-placeholder">[IMG: Google Map]</div>336 337 <!-- Floating buttons -->338 <div class="fab locate">339 <!-- Paper-plane/navigation -->340 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">341 <path d="M3 11l18-8-8 18-2-7-8-3z" stroke="#1e2d5c"></path>342 </svg>343 </div>344 <div class="fab signal">345 <!-- Broadcast waves -->346 <svg viewBox="0 0 24 24" fill="none" stroke="#1e2d5c" stroke-width="2">347 <circle cx="12" cy="12" r="1.5"></circle>348 <path d="M7 12a5 5 0 0 1 5-5M12 17a5 5 0 0 0 5-5"></path>349 <path d="M4 12a8 8 0 0 1 8-8M12 20a8 8 0 0 0 8-8"></path>350 </svg>351 </div>352 353 <div class="warning">354 <!-- Warning triangle -->355 <svg viewBox="0 0 24 24" fill="#d3543f">356 <path d="M12 2l10 18H2L12 2z"></path>357 <rect x="11" y="9" width="2" height="6" fill="#fff"></rect>358 <rect x="11" y="16.5" width="2" height="2" fill="#fff"></rect>359 </svg>360 </div>361 362 <div class="pill">363 <span>Searching</span>364 <div class="bars">365 <span></span><span></span><span></span><span></span>366 </div>367 </div>368 </div>369 370 <!-- Bottom Sheet -->371 <div class="sheet">372 <div class="grid">373 <div class="tile">374 <!-- Running shoe -->375 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">376 <path d="M3 14c4 0 5-3 7-3l3 3h6" stroke="#1e2d5c"></path>377 <path d="M3 14l2 4h13l1-3" stroke="#1e2d5c"></path>378 <path d="M9 11l-2-2M12 12l-3-3" stroke="#1e2d5c"></path>379 </svg>380 <div class="label">381 <div>Activity</div>382 <div class="value">Biking</div>383 </div>384 </div>385 <div class="tile">386 <!-- Clipboard -->387 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">388 <rect x="6" y="4" width="12" height="16" rx="2" stroke="#1e2d5c"></rect>389 <rect x="9" y="2" width="6" height="4" rx="1" stroke="#1e2d5c"></rect>390 <path d="M8 10h8M8 14h6" stroke="#1e2d5c"></path>391 </svg>392 <div class="label">393 <div>Workout</div>394 <div class="value">None</div>395 </div>396 </div>397 <div class="tile">398 <!-- Music note -->399 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">400 <path d="M9 18a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" stroke="#1e2d5c"></path>401 <path d="M12 4v10" stroke="#1e2d5c"></path>402 <path d="M12 4l8-2v10" stroke="#1e2d5c"></path>403 <circle cx="18" cy="16" r="3" stroke="#1e2d5c"></circle>404 </svg>405 <div class="label">406 <div>Music</div>407 <div class="value">Select</div>408 </div>409 </div>410 <div class="tile">411 <!-- Speaker -->412 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">413 <path d="M3 10h4l5-4v12l-5-4H3z" stroke="#1e2d5c"></path>414 <path d="M16 9a4 4 0 0 1 0 6" stroke="#1e2d5c"></path>415 <path d="M18.5 6a7 7 0 0 1 0 12" stroke="#1e2d5c"></path>416 </svg>417 <div class="label">418 <div>Audio Stats</div>419 <div class="value">Time</div>420 </div>421 </div>422 </div>423 <div class="start-wrap">424 <button class="start-btn">START</button>425 </div>426 </div>427 428 <!-- Bottom Navigation -->429 <div class="nav">430 <div class="nav-item">431 <!-- Smile -->432 <svg viewBox="0 0 24 24" fill="none" stroke="#7a7f86" stroke-width="2">433 <circle cx="12" cy="12" r="9"></circle>434 <path d="M8 15c1.5 1 6.5 1 8 0"></path>435 <path d="M9 10h.01M15 10h.01"></path>436 </svg>437 <div>Me</div>438 </div>439 <div class="nav-item">440 <!-- Calendar -->441 <svg viewBox="0 0 24 24" fill="none" stroke="#7a7f86" stroke-width="2">442 <rect x="3" y="5" width="18" height="16" rx="2"></rect>443 <path d="M8 3v4M16 3v4M3 10h18"></path>444 <circle cx="8" cy="14" r="1.5" fill="#e85d5d" stroke="none"></circle>445 </svg>446 <div>Training</div>447 </div>448 <div class="nav-item pin active">449 <!-- Location pin -->450 <svg viewBox="0 0 24 24" fill="none" stroke="#1e2d5c" stroke-width="2">451 <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"></path>452 <circle cx="12" cy="10" r="3"></circle>453 </svg>454 <div>Start</div>455 </div>456 <div class="nav-item">457 <!-- Group -->458 <svg viewBox="0 0 24 24" fill="none" stroke="#7a7f86" stroke-width="2">459 <circle cx="8" cy="10" r="3"></circle>460 <circle cx="16" cy="10" r="3"></circle>461 <path d="M3 20c0-3 3-5 5-5M13 15c2 0 5 2 5 5"></path>462 </svg>463 <div>Community</div>464 </div>465 <div class="nav-item">466 <!-- Mountains -->467 <svg viewBox="0 0 24 24" fill="none" stroke="#7a7f86" stroke-width="2">468 <path d="M3 20l6-10 6 10z"></path>469 <path d="M10 20l4-7 4 7z"></path>470 </svg>471 <div>Explore</div>472 </div>473 </div>474 475 <div class="home-indicator"></div>476</div>477</body>478</html>