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>Runkeeper Start Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 border-radius: 0;16 box-shadow: none;17 }18 /* Top navigation */19 .topbar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 170px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 48px;29 box-sizing: border-box;30 background: #fff;31 }32 .brand {33 font-size: 48px;34 font-style: italic;35 color: #596dd1;36 letter-spacing: 0.5px;37 display: flex;38 align-items: center;39 gap: 18px;40 }41 .brand .logo-mark {42 width: 50px;43 height: 50px;44 border-radius: 50%;45 border: 3px solid #596dd1;46 display: inline-block;47 position: relative;48 }49 .brand .logo-mark:after {50 content: "";51 position: absolute;52 width: 28px; height: 10px;53 border-radius: 10px;54 background: #596dd1;55 top: 18px; left: 10px;56 transform: rotate(25deg);57 }58 .icon-btn {59 width: 90px; height: 90px;60 border-radius: 45px;61 border: 3px solid #25336a;62 display: flex; align-items: center; justify-content: center;63 }64 .icon-plus {65 width: 90px; height: 90px;66 border-radius: 45px;67 border: 3px solid #25336a;68 color: #25336a;69 font-size: 64px; line-height: 90px; text-align: center;70 }71 72 /* Map area */73 .map {74 position: absolute;75 top: 170px;76 left: 0;77 width: 1080px;78 height: calc(2400px - 170px - 180px);79 background: #E0E0E0;80 border-top: 1px solid #BDBDBD;81 border-bottom: 1px solid #BDBDBD;82 display: flex; align-items: center; justify-content: center;83 color: #757575;84 font-size: 36px;85 }86 .map .label {87 background: rgba(255,255,255,0.85);88 padding: 10px 18px;89 border-radius: 16px;90 border: 1px solid #BDBDBD;91 }92 /* Floating map controls */93 .fab {94 position: absolute;95 right: 30px;96 width: 110px; height: 110px;97 border-radius: 55px;98 background: #fff;99 box-shadow: 0 8px 16px rgba(0,0,0,0.2);100 display: flex; align-items: center; justify-content: center;101 }102 .fab.top { top: 360px; }103 .fab.mid { top: 500px; }104 .warning {105 position: absolute;106 right: 34px;107 top: 710px;108 width: 96px; height: 96px;109 background: #fff;110 border-radius: 20px;111 display: flex; align-items: center; justify-content: center;112 }113 .warning .triangle {114 width: 0; height: 0;115 border-left: 38px solid transparent;116 border-right: 38px solid transparent;117 border-bottom: 66px solid #cc5a2f;118 position: relative;119 }120 .warning .triangle:after {121 content: "!";122 position: absolute;123 top: 16px; left: -8px;124 color: #fff; font-weight: 700; font-size: 40px;125 }126 .search-bubble {127 position: absolute;128 left: 40px;129 bottom: 470px;130 background: #fff;131 border-radius: 26px;132 box-shadow: 0 6px 16px rgba(0,0,0,0.15);133 padding: 18px 26px;134 font-size: 34px;135 color: #4a4a4a;136 }137 138 /* Bottom information card */139 .bottom-card {140 position: absolute;141 left: 24px;142 right: 24px;143 bottom: 260px;144 background: #fff;145 border-radius: 28px;146 box-shadow: 0 10px 28px rgba(0,0,0,0.15);147 overflow: hidden;148 }149 .grid {150 display: grid;151 grid-template-columns: 1fr 1fr;152 gap: 0;153 }154 .grid-item {155 border-right: 1px solid #ECEFF1;156 border-bottom: 1px solid #ECEFF1;157 padding: 36px 40px;158 min-height: 180px;159 }160 .grid-item:nth-child(2n) { border-right: none; }161 .grid-item:nth-last-child(-n + 2) { border-bottom: none; }162 .item-title {163 display: flex; align-items: center; gap: 20px;164 color: #1c2b5c; font-weight: 600; font-size: 36px;165 }166 .item-value {167 margin-top: 12px;168 font-size: 44px;169 color: #121212;170 font-weight: 700;171 }172 .item-sub {173 margin-top: 12px; font-size: 40px; color: #121212; font-weight: 600;174 }175 .blue {176 color: #1c2b5c;177 }178 179 /* Start button */180 .start-wrap {181 position: absolute;182 left: 40px; right: 40px;183 bottom: 190px;184 display: flex; align-items: center; justify-content: center;185 }186 .start-btn {187 width: 100%;188 height: 130px;189 background: #4f5bd5;190 color: #fff;191 font-weight: 800;192 font-size: 48px;193 border: none;194 border-radius: 65px;195 box-shadow: 0 16px 24px rgba(79,91,213,0.35);196 letter-spacing: 2px;197 }198 199 /* Bottom navigation */200 .bottom-nav {201 position: absolute;202 left: 0; bottom: 0;203 width: 1080px; height: 180px;204 background: #fafafa;205 border-top: 1px solid #E0E0E0;206 display: flex; align-items: center; justify-content: space-around;207 }208 .nav-item {209 display: flex; flex-direction: column; align-items: center; justify-content: center;210 color: #6b6b6b; font-size: 32px;211 }212 .nav-item.active { color: #1c2b5c; }213 .nav-icon {214 width: 64px; height: 64px; margin-bottom: 14px;215 }216 217 /* Simple SVG styling */218 svg { display: block; }219</style>220</head>221<body>222<div id="render-target">223 224 <!-- Top bar -->225 <div class="topbar">226 <div class="icon-btn" aria-label="Settings">227 <svg width="44" height="44" viewBox="0 0 24 24">228 <path d="M12 8.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm8.2 3.5c0-.4-.1-.8-.2-1.2l2-1.6-2-3.5-2.5 1c-.6-.5-1.2-.8-1.9-1.1L13.3 1h-2.6L9.4 4.6c-.7.3-1.3.6-1.9 1.1l-2.5-1-2 3.5 2 1.6c-.1.4-.2.8-.2 1.2s.1.8.2 1.2l-2 1.6 2 3.5 2.5-1c.6.5 1.2.8 1.9 1.1L10.7 23h2.6l1.3-3.6c.7-.3 1.3-.6 1.9-1.1l2.5 1 2-3.5-2-1.6c.1-.4.2-.8.2-1.2Z" fill="none" stroke="#25336a" stroke-width="1.5"/>229 </svg>230 </div>231 232 <div class="brand">233 <span class="logo-mark"></span>234 <span>Runkeeper</span>235 </div>236 237 <div class="icon-plus">+</div>238 </div>239 240 <!-- Map area -->241 <div class="map">242 <div class="label">[IMG: Google Map centered]</div>243 244 <!-- Floating controls -->245 <div class="fab top" aria-label="Direction">246 <svg width="60" height="60" viewBox="0 0 24 24">247 <path d="M12 2l6 20-6-6-6 6 6-20Z" fill="#1c2b5c"/>248 </svg>249 </div>250 <div class="fab mid" aria-label="Signal">251 <svg width="60" height="60" viewBox="0 0 24 24">252 <path d="M12 18a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" fill="#1c2b5c"/>253 <path d="M4 12a8 8 0 0 1 16 0" fill="none" stroke="#1c2b5c" stroke-width="2" stroke-linecap="round"/>254 <path d="M7 12a5 5 0 0 1 10 0" fill="none" stroke="#1c2b5c" stroke-width="2" stroke-linecap="round"/>255 </svg>256 </div>257 258 <div class="warning">259 <div class="triangle"></div>260 </div>261 262 <div class="search-bubble">Searching …</div>263 </div>264 265 <!-- Bottom options card -->266 <div class="bottom-card">267 <div class="grid">268 <div class="grid-item">269 <div class="item-title">270 <svg class="nav-icon" viewBox="0 0 24 24">271 <path d="M3 14l5-10 5 10-5 0Z" fill="none" stroke="#1c2b5c" stroke-width="2"/>272 <circle cx="12" cy="18" r="2" fill="#1c2b5c"/>273 </svg>274 <span>Activity</span>275 </div>276 <div class="item-value">Running</div>277 </div>278 279 <div class="grid-item">280 <div class="item-title">281 <svg class="nav-icon" viewBox="0 0 24 24">282 <rect x="5" y="4" width="14" height="16" rx="2" ry="2" fill="none" stroke="#1c2b5c" stroke-width="2"/>283 <line x1="8" y1="8" x2="16" y2="8" stroke="#1c2b5c" stroke-width="2"/>284 </svg>285 <span>Workout</span>286 </div>287 <div class="item-sub">None</div>288 </div>289 290 <div class="grid-item">291 <div class="item-title">292 <svg class="nav-icon" viewBox="0 0 24 24">293 <path d="M4 6v12l10-6-10-6Z" fill="none" stroke="#1c2b5c" stroke-width="2"/>294 <path d="M18 6v12" stroke="#1c2b5c" stroke-width="2"/>295 </svg>296 <span>Music</span>297 </div>298 <div class="item-sub">Select</div>299 </div>300 301 <div class="grid-item">302 <div class="item-title">303 <svg class="nav-icon" viewBox="0 0 24 24">304 <path d="M5 18V6l10-2v12" fill="none" stroke="#1c2b5c" stroke-width="2"/>305 <circle cx="15" cy="18" r="3" fill="#1c2b5c"/>306 </svg>307 <span>Audio Stats</span>308 </div>309 <div class="item-sub">Time</div>310 </div>311 </div>312 </div>313 314 <!-- Start button -->315 <div class="start-wrap">316 <button class="start-btn">START</button>317 </div>318 319 <!-- Bottom navigation -->320 <div class="bottom-nav">321 <div class="nav-item">322 <svg class="nav-icon" viewBox="0 0 24 24">323 <circle cx="12" cy="8" r="4" fill="#969696"/>324 <path d="M4 21c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#969696" stroke-width="2"/>325 </svg>326 <div>Me</div>327 </div>328 <div class="nav-item">329 <svg class="nav-icon" viewBox="0 0 24 24">330 <rect x="3" y="4" width="18" height="14" rx="2" fill="none" stroke="#969696" stroke-width="2"/>331 <path d="M7 8h10" stroke="#969696" stroke-width="2"/>332 </svg>333 <div>Training</div>334 </div>335 <div class="nav-item active">336 <svg class="nav-icon" viewBox="0 0 24 24">337 <path d="M12 2l6 6-6 6-6-6 6-6Z" fill="#1c2b5c"/>338 </svg>339 <div>Start</div>340 </div>341 <div class="nav-item">342 <svg class="nav-icon" viewBox="0 0 24 24">343 <circle cx="6" cy="12" r="3" fill="none" stroke="#969696" stroke-width="2"/>344 <circle cx="12" cy="12" r="3" fill="none" stroke="#969696" stroke-width="2"/>345 <circle cx="18" cy="12" r="3" fill="none" stroke="#969696" stroke-width="2"/>346 </svg>347 <div>Community</div>348 </div>349 <div class="nav-item">350 <svg class="nav-icon" viewBox="0 0 24 24">351 <path d="M12 3l8 18H4L12 3Z" fill="none" stroke="#969696" stroke-width="2"/>352 <path d="M12 9l4 9H8l4-9Z" fill="#969696"/>353 </svg>354 <div>Explore</div>355 </div>356 </div>357 358</div>359</body>360</html>