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>Step Tracker UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: linear-gradient(180deg, #0E2347 0%, #1E3A67 60%, #2B4C7D 100%);13 }14 15 /* General */16 .header { padding: 64px 56px 24px 56px; color: #ffffff; }17 .header h1 { margin: 0; font-weight: 700; font-size: 60px; letter-spacing: 0.5px; }18 19 /* Floating check button */20 .float-check {21 position: absolute; right: 48px; top: 132px;22 width: 96px; height: 96px; border-radius: 50%;23 background: #39C16D; box-shadow: 0 8px 20px rgba(0,0,0,0.35);24 display: flex; align-items: center; justify-content: center;25 }26 .float-check svg { width: 48px; height: 48px; }27 .check-dot {28 position: absolute; width: 18px; height: 18px; border-radius: 50%;29 background: #FF4D4D; right: 10px; top: 8px;30 box-shadow: 0 2px 6px rgba(0,0,0,0.3);31 }32 33 .card {34 margin: 12px 36px;35 background: linear-gradient(180deg, rgba(37,64,105,0.95) 0%, rgba(44,77,125,0.95) 100%);36 border-radius: 36px;37 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);38 color: #EAF0FF;39 }40 41 /* Summary card */42 .summary { padding: 56px; position: relative; }43 .big-steps { font-size: 160px; font-weight: 800; line-height: 1; letter-spacing: 2px; }44 .steps-sub { font-size: 42px; color: #B6C3D9; margin-top: 8px; }45 .progress {46 margin-top: 64px; width: 100%; height: 40px; border-radius: 22px;47 background: rgba(255,255,255,0.12);48 overflow: hidden; position: relative;49 }50 .progress .fill {51 width: 5.5%; height: 100%; background: linear-gradient(90deg, #53E27D, #88F39C);52 border-radius: 22px;53 }54 .pause {55 position: absolute; right: 48px; top: 268px;56 width: 108px; height: 108px; border-radius: 54px;57 background: rgba(255,255,255,0.12);58 display: flex; align-items: center; justify-content: center;59 }60 .metrics {61 margin-top: 64px; display: flex; justify-content: space-between;62 }63 .metric { width: 30%; }64 .metric .value { font-size: 56px; font-weight: 700; margin-top: 12px; }65 .metric .label { font-size: 30px; color: #A9B6CC; margin-top: 6px; }66 67 /* Daily average card */68 .avg-card { padding: 48px; }69 .avg-top { font-size: 40px; color: #C8D3E7; }70 .avg-top b { color: #FFFFFF; font-weight: 700; padding-left: 10px; }71 .avg-row { margin-top: 36px; display: flex; justify-content: space-between; padding-right: 40px; }72 .day {73 width: 96px; height: 96px; border-radius: 48px;74 border: 4px solid rgba(255,255,255,0.25);75 display: flex; align-items: center; justify-content: center;76 position: relative;77 }78 .day.active { border-color: rgba(255,255,255,0.6); }79 .day .dot {80 position: absolute; right: 10px; bottom: 10px;81 width: 16px; height: 16px; border-radius: 8px; background: #5DE27A;82 }83 .day-labels { display: flex; justify-content: space-between; margin-top: 20px; padding-right: 40px; }84 .day-labels span { width: 96px; text-align: center; font-size: 30px; color: #9EB0CC; }85 86 /* Water tracker card */87 .water-card { padding: 44px 48px 56px 48px; position: relative; }88 .water-header { display: flex; align-items: center; }89 .water-header h2 { margin: 0 0 0 16px; font-size: 48px; font-weight: 700; }90 .water-close {91 position: absolute; right: 36px; top: 36px; width: 44px; height: 44px;92 border-radius: 22px; color: #C9D5EB; display: flex; align-items: center; justify-content: center;93 }94 .water-desc { margin-top: 22px; font-size: 34px; color: #C9D5EB; line-height: 1.5; }95 .unlock-btn {96 margin: 48px auto 0 auto; width: 640px; height: 120px;97 border-radius: 60px; background: #36C06E; color: #ffffff;98 display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; letter-spacing: 1px;99 box-shadow: 0 8px 20px rgba(0,0,0,0.35);100 }101 .unlock-btn svg { margin-right: 22px; }102 103 /* Ad banner placeholder */104 .ad {105 margin: 18px 0; width: 100%; height: 160px;106 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;107 display: flex; align-items: center; justify-content: center; font-size: 36px;108 }109 110 /* Bottom navigation */111 .nav {112 position: absolute; left: 0; bottom: 0;113 width: 100%; height: 200px;114 background: linear-gradient(180deg, #334F7E 0%, #2E4A78 100%);115 display: flex; align-items: center; justify-content: space-around;116 border-top-left-radius: 36px; border-top-right-radius: 36px;117 box-shadow: 0 -8px 20px rgba(0,0,0,0.25);118 }119 .tab { display: flex; flex-direction: column; align-items: center; color: #BFD0EA; }120 .tab svg { width: 56px; height: 56px; margin-bottom: 12px; }121 .tab span { font-size: 30px; }122 .tab.active span { color: #7EE08B; font-weight: 700; }123 .tab.active svg path, .tab.active svg rect, .tab.active svg circle { fill: #7EE08B; stroke: #7EE08B; }124 125 .gesture {126 position: absolute; bottom: 210px; left: 50%; transform: translateX(-50%);127 width: 240px; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.7);128 }129</style>130</head>131<body>132<div id="render-target">133 134 <!-- Floating check button -->135 <div class="float-check">136 <svg viewBox="0 0 24 24">137 <path d="M5 12l4 4 10-10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 <div class="check-dot"></div>140 </div>141 142 <!-- Header -->143 <div class="header">144 <h1>Today</h1>145 </div>146 147 <!-- Summary card -->148 <div class="card summary">149 <div style="display:flex; align-items:flex-end;">150 <div class="big-steps">69</div>151 <!-- small up tick -->152 <svg viewBox="0 0 24 24" style="width:40px;height:40px;margin:0 0 18px 8px;">153 <path d="M5 16l7-7 7 7" fill="none" stroke="#D7E2F8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>154 </svg>155 </div>156 <div class="steps-sub">/6000 Steps</div>157 158 <div class="progress">159 <div class="fill"></div>160 </div>161 162 <div class="pause">163 <svg viewBox="0 0 24 24">164 <rect x="6" y="5" width="4" height="14" fill="#D7E2F8" opacity="0.8"></rect>165 <rect x="14" y="5" width="4" height="14" fill="#D7E2F8" opacity="0.8"></rect>166 </svg>167 </div>168 169 <div class="metrics">170 <div class="metric">171 <svg viewBox="0 0 24 24" style="width:48px;height:48px;">172 <!-- simple location pin -->173 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#FFD64D"/>174 </svg>175 <div class="value">0.05</div>176 <div class="label">Km</div>177 </div>178 <div class="metric" style="text-align:center;">179 <svg viewBox="0 0 24 24" style="width:48px;height:48px;">180 <!-- simple flame -->181 <path d="M12 2c2 3 1 5-1 7 3-1 5 1 5 4a5 5 0 1 1-10 0c0-3 2-5 6-11z" fill="#FF8A3D"/>182 </svg>183 <div class="value">2.9</div>184 <div class="label">Calories</div>185 </div>186 <div class="metric" style="text-align:right;">187 <svg viewBox="0 0 24 24" style="width:48px;height:48px;">188 <!-- clock -->189 <circle cx="12" cy="12" r="9" fill="#77D2FF"/>190 <path d="M12 6v6l4 2" stroke="#0E2347" stroke-width="2" fill="none" stroke-linecap="round"/>191 </svg>192 <div class="value">0h 0m</div>193 <div class="label">Walking Time</div>194 </div>195 </div>196 </div>197 198 <!-- Daily average card -->199 <div class="card avg-card">200 <div class="avg-top">Daily average:<b>69</b></div>201 <div class="avg-row">202 <div class="day"></div>203 <div class="day"></div>204 <div class="day"></div>205 <div class="day"></div>206 <div class="day"></div>207 <div class="day"></div>208 <div class="day active"><div class="dot"></div></div>209 </div>210 <div class="day-labels">211 <span>F</span><span>S</span><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span>212 </div>213 </div>214 215 <!-- Water tracker card -->216 <div class="card water-card">217 <div class="water-header">218 <svg viewBox="0 0 24 24" style="width:42px;height:42px;">219 <!-- droplet -->220 <path d="M12 2c3 5 6 7 6 11a6 6 0 0 1-12 0c0-4 3-6 6-11z" fill="#77D2FF"/>221 </svg>222 <h2>Water tracker</h2>223 </div>224 <div class="water-close">225 <svg viewBox="0 0 24 24" style="width:24px;height:24px;">226 <path d="M6 6l12 12M18 6L6 18" stroke="#C9D5EB" stroke-width="2" stroke-linecap="round"/>227 </svg>228 </div>229 <div class="water-desc">Keep you healthy and help you lose weight.</div>230 231 <div class="unlock-btn">232 <svg viewBox="0 0 24 24" style="width:38px;height:38px;">233 <path d="M8 10V8a4 4 0 1 1 8 0v2h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h1zm6 0V8a2 2 0 1 0-4 0v2h4z" fill="#ffffff"/>234 </svg>235 UNLOCK236 </div>237 </div>238 239 <!-- Ad banner placeholder -->240 <div class="ad">[IMG: Ad banner - Booking.com]</div>241 242 <!-- Gesture bar -->243 <div class="gesture"></div>244 245 <!-- Bottom navigation -->246 <div class="nav">247 <div class="tab active">248 <svg viewBox="0 0 24 24">249 <path d="M3 11l9-8 9 8v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z" fill="#AFC2DA"/>250 </svg>251 <span>Today</span>252 </div>253 <div class="tab">254 <svg viewBox="0 0 24 24">255 <rect x="4" y="12" width="4" height="8" fill="#AFC2DA"/>256 <rect x="10" y="8" width="4" height="12" fill="#AFC2DA"/>257 <rect x="16" y="4" width="4" height="16" fill="#AFC2DA"/>258 </svg>259 <span>Report</span>260 </div>261 <div class="tab">262 <svg viewBox="0 0 24 24">263 <path d="M12 3c-2 3-6 4-6 8a6 6 0 0 0 12 0c0-4-4-5-6-8z" fill="#AFC2DA"/>264 <circle cx="12" cy="15" r="2.5" fill="#2E4A78"/>265 </svg>266 <span>Health</span>267 </div>268 <div class="tab">269 <svg viewBox="0 0 24 24">270 <path d="M12 2l2 3 3 1-2 3 1 3-3 1-1 3-3-1-2-3-3-1 2-3-1-3 3-1 2-3 3 1z" fill="#AFC2DA"/>271 </svg>272 <span>More</span>273 </div>274 </div>275 276</div>277</body>278</html>