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>Activity Tracking Map</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13 color: #fff;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #1f1f1f;21 border-radius: 0;22 box-shadow: none;23 }24 25 /* Map area */26 .map-placeholder {27 position: absolute;28 top: 0;29 left: 0;30 width: 1080px;31 height: 1730px;32 background: #E0E0E0;33 border: 1px solid #BDBDBD;34 display: flex;35 align-items: center;36 justify-content: center;37 color: #757575;38 font-weight: 600;39 letter-spacing: 0.3px;40 text-transform: none;41 }42 43 /* Status bar */44 .status-bar {45 position: absolute;46 top: 0;47 left: 0;48 width: 1080px;49 height: 110px;50 display: flex;51 align-items: center;52 padding: 0 40px;53 box-sizing: border-box;54 color: #ffffff;55 mix-blend-mode: normal;56 }57 .status-left {58 display: flex;59 align-items: center;60 gap: 24px;61 font-size: 38px;62 font-weight: 600;63 }64 .status-right {65 margin-left: auto;66 display: flex;67 align-items: center;68 gap: 28px;69 }70 .status-icon {71 width: 36px;72 height: 36px;73 }74 .temp {75 font-size: 32px;76 opacity: 0.9;77 }78 79 /* Floating controls on map */80 .close-x {81 position: absolute;82 top: 130px;83 left: 40px;84 font-size: 68px;85 line-height: 68px;86 color: #ffffff;87 opacity: 0.85;88 }89 .blue-dot {90 position: absolute;91 top: 930px;92 left: 530px;93 width: 22px;94 height: 22px;95 border-radius: 50%;96 background: #4e7ff6;97 box-shadow: 0 0 0 6px rgba(78,127,246,0.35);98 border: 2px solid #e4f0ff;99 }100 101 /* Bottom panel */102 .bottom-panel {103 position: absolute;104 left: 0;105 bottom: 0;106 width: 1080px;107 height: 670px;108 background: #262626;109 box-shadow: 0 -2px 8px rgba(0,0,0,0.35);110 }111 112 .activity-card {113 width: 980px;114 margin: 40px auto 0;115 padding: 26px 30px 30px;116 box-sizing: border-box;117 border: 2px solid rgba(255,255,255,0.35);118 border-radius: 20px;119 background: rgba(0,0,0,0.12);120 }121 .card-label {122 color: #b7b7b7;123 font-size: 30px;124 margin-bottom: 22px;125 }126 .activity-row {127 display: flex;128 align-items: center;129 justify-content: space-between;130 }131 .activity-left {132 display: flex;133 align-items: center;134 gap: 26px;135 }136 .walk-icon {137 font-size: 48px;138 color: #8ab4f8;139 }140 .walk-text {141 font-size: 40px;142 color: #eaeaea;143 font-weight: 600;144 }145 .dot {146 color: #9aa0a6;147 margin: 0 14px;148 font-weight: 700;149 }150 .recent {151 color: #b7b7b7;152 font-weight: 500;153 }154 .chevron {155 width: 36px;156 height: 36px;157 opacity: 0.8;158 }159 160 /* Start button */161 .start-area {162 width: 100%;163 text-align: center;164 margin-top: 120px;165 }166 .play-icon {167 width: 96px;168 height: 96px;169 margin: 0 auto 30px;170 display: block;171 }172 .start-text {173 font-size: 66px;174 color: #8ab4f8;175 font-weight: 500;176 letter-spacing: 0.2px;177 }178 179 /* Gesture bar */180 .gesture-bar {181 position: absolute;182 bottom: 26px;183 left: 50%;184 transform: translateX(-50%);185 width: 300px;186 height: 12px;187 border-radius: 12px;188 background: #e6e6e6;189 opacity: 0.9;190 }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Map placeholder (semantic image label) -->197 <div class="map-placeholder">[IMG: Dark Map of Orléans]</div>198 199 <!-- Status bar overlay -->200 <div class="status-bar">201 <div class="status-left">202 <span>3:22</span>203 <!-- Small icons to suggest notifications -->204 <svg class="status-icon" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">205 <path d="M3 7h18v2H3zm0 4h14v2H3zm0 4h10v2H3z"></path>206 </svg>207 </div>208 <div class="status-right">209 <span class="temp">83°</span>210 <!-- Wi-Fi -->211 <svg class="status-icon" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">212 <path d="M12 20l-1.5-1.5a4 4 0 015 0L14 20zm-4-4l-1.5-1.5a8 8 0 0111 0L16 16zm-4-4L2.5 9.5a12 12 0 0119 0L20 12z"></path>213 </svg>214 <!-- Battery -->215 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" aria-hidden="true">216 <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>217 <rect x="4" y="9" width="12" height="6" fill="#ffffff"></rect>218 <rect x="20" y="10" width="2" height="4" fill="#ffffff"></rect>219 </svg>220 </div>221 </div>222 223 <!-- Close X and a blue location dot on the map -->224 <div class="close-x">×</div>225 <div class="blue-dot"></div>226 227 <!-- Bottom interaction panel -->228 <div class="bottom-panel">229 <div class="activity-card">230 <div class="card-label">Activity type</div>231 <div class="activity-row">232 <div class="activity-left">233 <div class="walk-icon">🚶</div>234 <div>235 <span class="walk-text">Walking</span>236 <span class="dot">•</span>237 <span class="recent">Recent</span>238 </div>239 </div>240 <!-- Chevron -->241 <svg class="chevron" viewBox="0 0 24 24" fill="#cfcfcf" aria-hidden="true">242 <path d="M7 10l5 5 5-5z"></path>243 </svg>244 </div>245 </div>246 247 <div class="start-area">248 <!-- Play icon -->249 <svg class="play-icon" viewBox="0 0 64 64" aria-hidden="true">250 <polygon points="22,16 50,32 22,48" fill="#8ab4f8"></polygon>251 </svg>252 <div class="start-text">Start walking</div>253 </div>254 255 <div class="gesture-bar"></div>256 </div>257 258</div>259</body>260</html>