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 - Location Unavailable</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: #f6f7fb;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 96px;19 background: #8f939a;20 color: #fff;21 display: flex; align-items: center; padding: 0 36px;22 font-weight: 600; font-size: 34px;23 letter-spacing: 0.3px;24 }25 .status-spacer { flex: 1; }26 .status-icons { display: flex; gap: 24px; align-items: center; }27 .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; }28 .status-cloud {29 width: 40px; height: 24px; border-radius: 12px; border: 3px solid #fff;30 position: relative;31 }32 .status-cloud::after {33 content: ""; position: absolute; right: -12px; top: 2px;34 width: 18px; height: 18px; border-radius: 50%;35 border: 3px solid #fff; background: transparent;36 }37 38 /* App bar */39 .app-bar {40 position: absolute; top: 96px; left: 0; right: 0;41 height: 140px; background: #f0f1f4;42 display: flex; align-items: center; padding: 0 36px;43 box-shadow: 0 2px 4px rgba(0,0,0,0.1);44 }45 .app-title {46 flex: 1; text-align: center; color: #204b8c; font-size: 46px; font-weight: 700; font-style: italic;47 }48 .icon-btn { width: 96px; height: 96px; border-radius: 48px; display: flex; justify-content: center; align-items: center; }49 .gear {50 font-size: 52px; color: #173963;51 border: 2px solid #173963; border-radius: 50%; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;52 }53 .plus {54 width: 84px; height: 84px; border-radius: 50%;55 border: 2px solid #173963; display: flex; align-items: center; justify-content: center;56 }57 .plus svg { width: 48px; height: 48px; }58 .plus svg path { stroke: #173963; stroke-width: 8; stroke-linecap: round; }59 60 /* Map area placeholder */61 .map-area {62 position: absolute; top: 236px; left: 0; right: 0; bottom: 260px;63 padding: 0 24px;64 }65 .map-img {66 width: 100%; height: 100%;67 background: #E0E0E0; border: 1px solid #BDBDBD;68 display: flex; align-items: center; justify-content: center;69 color: #757575; font-size: 38px; font-weight: 600;70 }71 72 /* Floating controls */73 .fab { position: absolute; right: 36px; width: 120px; height: 120px; border-radius: 60px; background: #fff;74 box-shadow: 0 10px 20px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }75 .fab svg { width: 64px; height: 64px; }76 .fab.nav { top: 620px; }77 .fab.rss { top: 780px; }78 .warn {79 position: absolute; right: 56px; top: 1100px;80 width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;81 }82 .warn svg { width: 96px; height: 96px; }83 84 /* Dim overlay for modal */85 .scrim {86 position: absolute; inset: 0;87 background: rgba(0,0,0,0.35);88 }89 90 /* Modal */91 .modal {92 position: absolute; left: 50%; transform: translateX(-50%);93 top: 980px; width: 920px;94 background: #fff; border-radius: 18px;95 box-shadow: 0 18px 40px rgba(0,0,0,0.25);96 padding: 44px 48px 36px;97 }98 .modal h2 { margin: 0 0 24px; font-size: 46px; color: #222; }99 .modal p { margin: 0 0 32px; font-size: 34px; line-height: 1.45; color: #333; }100 .modal .actions { display: flex; justify-content: flex-end; gap: 44px; }101 .modal .action {102 font-size: 34px; color: #3c4a9b; font-weight: 700; letter-spacing: 0.5px;103 }104 105 /* Bottom info panel */106 .info-panel {107 position: absolute; left: 0; right: 0; bottom: 240px;108 margin: 0 24px; background: #fff; border-radius: 14px;109 box-shadow: 0 8px 26px rgba(0,0,0,0.18);110 height: 460px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; overflow: hidden;111 }112 .info-cell {113 border-top: 1px solid #e6e6e9; border-right: 1px solid #e6e6e9;114 padding: 36px;115 display: flex; gap: 24px; align-items: center;116 }117 .info-cell:nth-child(2n) { border-right: none; }118 .cell-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }119 .cell-text { display: flex; flex-direction: column; gap: 8px; }120 .cell-text .label { font-size: 30px; color: #666; }121 .cell-text .value { font-size: 36px; color: #0f2b5c; font-weight: 700; }122 123 /* Start button */124 .start-btn {125 position: absolute; left: 60px; right: 60px; bottom: 360px;126 height: 120px; border-radius: 60px; background: #2f3f95;127 box-shadow: 0 14px 26px rgba(0,0,0,0.25);128 display: flex; align-items: center; justify-content: center;129 color: #fff; font-size: 42px; font-weight: 800; letter-spacing: 1px;130 }131 132 /* Bottom navigation */133 .bottom-nav {134 position: absolute; left: 0; right: 0; bottom: 80px; height: 160px;135 background: #fff; box-shadow: 0 -6px 18px rgba(0,0,0,0.1);136 display: flex; align-items: center; justify-content: space-around;137 }138 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #8a8fa1; font-size: 28px; }139 .nav-item svg { width: 52px; height: 52px; }140 .nav-item.active { color: #223e86; font-weight: 700; }141 .gesture {142 position: absolute; left: 50%; transform: translateX(-50%);143 bottom: 20px; width: 280px; height: 12px; background: #cfd3da; border-radius: 6px;144 }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status bar -->151 <div class="status-bar">152 <div>2:57</div>153 <div style="margin-left: 24px; display:flex; align-items:center; gap:16px;">154 <span class="status-dot"></span>155 <div class="status-cloud"></div>156 </div>157 <div class="status-spacer"></div>158 <div class="status-icons">159 <!-- simple pin -->160 <svg viewBox="0 0 64 64" fill="none">161 <path d="M32 8c-9 0-16 7-16 16 0 14 16 32 16 32s16-18 16-32c0-9-7-16-16-16z" stroke="#fff" stroke-width="4"/>162 <circle cx="32" cy="24" r="6" fill="#fff"/>163 </svg>164 <!-- wifi -->165 <svg viewBox="0 0 64 64" fill="none">166 <path d="M8 24c8-8 40-8 48 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>167 <path d="M16 32c6-6 26-6 32 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>168 <path d="M24 40c4-4 16-4 20 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>169 <circle cx="34" cy="48" r="4" fill="#fff"/>170 </svg>171 <!-- battery -->172 <svg viewBox="0 0 64 64" fill="none">173 <rect x="8" y="20" width="44" height="24" rx="4" stroke="#fff" stroke-width="4"/>174 <rect x="12" y="24" width="24" height="16" fill="#fff"/>175 <rect x="54" y="26" width="6" height="12" rx="2" fill="#fff"/>176 </svg>177 </div>178 </div>179 180 <!-- App bar -->181 <div class="app-bar">182 <div class="icon-btn">183 <div class="gear">⚙</div>184 </div>185 <div class="app-title">Runkeeper</div>186 <div class="icon-btn">187 <div class="plus">188 <svg viewBox="0 0 64 64">189 <path d="M32 12v40M12 32h40" />190 </svg>191 </div>192 </div>193 </div>194 195 <!-- Map area -->196 <div class="map-area">197 <div class="map-img">[IMG: Map - GlobalLogic Technologies and nearby]</div>198 </div>199 200 <!-- Floating map controls -->201 <div class="fab nav">202 <svg viewBox="0 0 64 64">203 <path d="M12 52 L52 12 L38 38 L12 52 Z" fill="#2a4696"/>204 </svg>205 </div>206 <div class="fab rss">207 <svg viewBox="0 0 64 64">208 <circle cx="16" cy="48" r="8" fill="#2a4696"/>209 <path d="M12 28c12-12 28-12 40 0" stroke="#2a4696" stroke-width="6" stroke-linecap="round" fill="none"/>210 <path d="M12 40c8-8 20-8 28 0" stroke="#2a4696" stroke-width="6" stroke-linecap="round" fill="none"/>211 </svg>212 </div>213 <div class="warn">214 <svg viewBox="0 0 100 100">215 <path d="M50 10 L92 86 H8 Z" fill="#c9561c"/>216 <rect x="47" y="36" width="6" height="28" fill="#fff"/>217 <rect x="47" y="70" width="6" height="6" fill="#fff"/>218 </svg>219 </div>220 221 <!-- Dim overlay -->222 <div class="scrim"></div>223 224 <!-- Modal -->225 <div class="modal">226 <h2>Location Unavailable</h2>227 <p>GPS accuracy is poor in your current location. For Runkeeper to correctly track your progress you need to be outdoors with direct line of sight to the sky. You can continue, but your activity may not be accurate.</p>228 <div class="actions">229 <div class="action">CONTINUE</div>230 <div class="action">WAIT</div>231 </div>232 </div>233 234 <!-- Bottom info panel -->235 <div class="info-panel">236 <div class="info-cell">237 <div class="cell-icon">238 <svg viewBox="0 0 64 64">239 <path d="M12 44 L20 32 L28 44 L40 20 L52 44" stroke="#0f2b5c" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>240 </svg>241 </div>242 <div class="cell-text">243 <div class="label">Activity</div>244 <div class="value">Biking</div>245 </div>246 </div>247 <div class="info-cell">248 <div class="cell-icon">249 <svg viewBox="0 0 64 64">250 <rect x="10" y="14" width="44" height="40" rx="6" stroke="#0f2b5c" stroke-width="5" fill="none"/>251 <rect x="14" y="22" width="10" height="8" fill="#0f2b5c"/>252 <rect x="28" y="22" width="10" height="8" fill="#0f2b5c"/>253 <rect x="42" y="22" width="10" height="8" fill="#0f2b5c"/>254 </svg>255 </div>256 <div class="cell-text">257 <div class="label">Workout</div>258 <div class="value">None</div>259 </div>260 </div>261 <div class="info-cell">262 <div class="cell-icon">263 <svg viewBox="0 0 64 64">264 <path d="M10 52 L10 20 L28 32 L46 20 L46 52" stroke="#0f2b5c" stroke-width="5" fill="none" stroke-linejoin="round"/>265 <circle cx="28" cy="32" r="4" fill="#0f2b5c"/>266 </svg>267 </div>268 <div class="cell-text">269 <div class="label">Music</div>270 <div class="value">Select</div>271 </div>272 </div>273 <div class="info-cell">274 <div class="cell-icon">275 <svg viewBox="0 0 64 64">276 <path d="M14 36c8-8 26-8 34 0" stroke="#0f2b5c" stroke-width="6" stroke-linecap="round" fill="none"/>277 <path d="M22 44c6-6 18-6 24 0" stroke="#0f2b5c" stroke-width="6" stroke-linecap="round" fill="none"/>278 <circle cx="18" cy="48" r="4" fill="#0f2b5c"/>279 </svg>280 </div>281 <div class="cell-text">282 <div class="label">Audio Stats</div>283 <div class="value">Time</div>284 </div>285 </div>286 </div>287 288 <!-- Start button -->289 <div class="start-btn">START</div>290 291 <!-- Bottom navigation -->292 <div class="bottom-nav">293 <div class="nav-item">294 <svg viewBox="0 0 64 64" fill="none">295 <circle cx="32" cy="28" r="18" stroke="#8a8fa1" stroke-width="4"/>296 <circle cx="24" cy="26" r="3" fill="#8a8fa1"/>297 <circle cx="40" cy="26" r="3" fill="#8a8fa1"/>298 <path d="M22 36c6 6 14 6 20 0" stroke="#8a8fa1" stroke-width="4" stroke-linecap="round"/>299 </svg>300 <div>Me</div>301 </div>302 <div class="nav-item">303 <svg viewBox="0 0 64 64" fill="none">304 <rect x="10" y="12" width="44" height="40" rx="6" stroke="#8a8fa1" stroke-width="4"/>305 <path d="M10 24h44" stroke="#8a8fa1" stroke-width="4"/>306 <circle cx="20" cy="18" r="4" fill="#8a8fa1"/>307 <circle cx="32" cy="18" r="4" fill="#8a8fa1"/>308 </svg>309 <div>Training</div>310 </div>311 <div class="nav-item active">312 <svg viewBox="0 0 64 64" fill="none">313 <path d="M32 10c-9 0-16 7-16 16 0 14 16 28 16 28s16-14 16-28c0-9-7-16-16-16z" stroke="#223e86" stroke-width="4"/>314 <circle cx="32" cy="26" r="6" fill="#223e86"/>315 </svg>316 <div>Start</div>317 </div>318 <div class="nav-item">319 <svg viewBox="0 0 64 64" fill="none">320 <circle cx="20" cy="28" r="8" stroke="#8a8fa1" stroke-width="4"/>321 <circle cx="44" cy="28" r="8" stroke="#8a8fa1" stroke-width="4"/>322 <path d="M12 48c8-8 32-8 40 0" stroke="#8a8fa1" stroke-width="4" stroke-linecap="round"/>323 </svg>324 <div>Community</div>325 </div>326 <div class="nav-item">327 <svg viewBox="0 0 64 64" fill="none">328 <path d="M8 48 L24 24 L36 48 Z" stroke="#8a8fa1" stroke-width="4" fill="none"/>329 <path d="M30 48 L44 20 L56 48 Z" stroke="#8a8fa1" stroke-width="4" fill="none"/>330 </svg>331 <div>Explore</div>332 </div>333 </div>334 335 <div class="gesture"></div>336</div>337</body>338</html>