GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Steps UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 font-family: Arial, Helvetica, sans-serif;16 color: #212121;17 }18 19 /* Status bar */20 .status-bar {21 height: 90px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-size: 34px;27 color: #616161;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-right { display: flex; align-items: center; gap: 28px; }31 .status-icon {32 width: 36px; height: 36px;33 display: inline-flex; align-items: center; justify-content: center;34 color: #616161;35 }36 37 /* App bar */38 .app-bar {39 height: 120px;40 padding: 0 36px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 }45 .app-left { display: flex; align-items: center; gap: 24px; }46 .title { font-size: 64px; font-weight: 600; }47 .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }48 49 /* Tabs */50 .tabs {51 height: 120px;52 display: flex;53 align-items: end;54 gap: 64px;55 padding: 0 36px 0 36px;56 border-bottom: 1px solid #E0E0E0;57 }58 .tab {59 font-size: 40px;60 color: #757575;61 padding-bottom: 22px;62 }63 .tab.active {64 color: #2F7F7A;65 border-bottom: 8px solid #2F7F7A;66 }67 68 /* Day header (Today) */69 .day-header {70 display: grid;71 grid-template-columns: 80px 1fr 80px;72 align-items: center;73 padding: 24px 36px;74 font-size: 40px;75 color: #616161;76 }77 .day-center {78 display: flex; flex-direction: column;79 }80 .day-center .label { font-weight: 600; color: #212121; }81 .day-center .sub { font-size: 34px; color: #757575; margin-top: 8px; }82 83 /* Chart area */84 .chart {85 position: relative;86 height: 520px;87 margin: 0 24px 30px 24px;88 border-bottom: 1px solid #DADADA;89 }90 .grid-line {91 position: absolute; left: 24px; right: 120px;92 height: 1px; background: #E0E0E0;93 }94 .grid-line.top { top: 60px; }95 .grid-line.mid { top: 240px; }96 .grid-line.bot { bottom: 60px; }97 .y-labels {98 position: absolute; top: 40px; right: 36px; width: 80px;99 display: flex; flex-direction: column; gap: 160px;100 align-items: flex-end; color: #757575; font-size: 34px;101 }102 .bar {103 position: absolute; bottom: 60px; width: 16px; height: 200px;104 background: #2F7F7A; left: 66%;105 border-radius: 8px;106 }107 .x-labels {108 position: absolute; bottom: 0; left: 24px; right: 24px;109 height: 120px;110 display: flex; align-items: flex-end; justify-content: space-between;111 color: #757575; font-size: 32px;112 }113 .x-labels div { transform: translateY(18px); }114 115 /* Week summary bar */116 .summary {117 height: 96px;118 background: #2F7F7A;119 color: #FFFFFF;120 display: flex;121 align-items: center;122 justify-content: space-between;123 padding: 0 36px;124 font-size: 44px;125 font-weight: 600;126 }127 .summary .value { font-weight: 700; }128 129 /* List */130 .list { }131 .list-item {132 display: flex; align-items: center; justify-content: space-between;133 padding: 32px 36px;134 border-bottom: 1px solid #EEEEEE;135 background: #FFFFFF;136 }137 .list-item .left { font-size: 44px; font-weight: 700; color: #212121; }138 .list-item .right { font-size: 40px; color: #212121; display: flex; align-items: baseline; gap: 10px; }139 .steps-label { font-size: 34px; color: #757575; }140 .mute { color: #9E9E9E; font-weight: 600; }141 .subheader {142 height: 96px;143 background: #2F7F7A;144 color: #FFFFFF;145 display: flex; align-items: center; justify-content: space-between;146 padding: 0 36px;147 font-size: 40px;148 font-weight: 700;149 }150 151 /* Bottom gesture bar */152 .gesture {153 position: absolute; bottom: 32px; left: 50%;154 width: 360px; height: 14px; background: #000;155 border-radius: 10px;156 transform: translateX(-50%);157 opacity: 0.9;158 }159 160 /* Simple arrows */161 .chev {162 width: 64px; height: 64px;163 display: inline-flex; align-items: center; justify-content: center;164 }165 .chev svg { width: 40px; height: 40px; stroke: #616161; stroke-width: 6; fill: none; }166 .back svg { stroke: #212121; }167 .gear svg { width: 56px; height: 56px; fill: #212121; }168</style>169</head>170<body>171<div id="render-target">172 173 <!-- Status bar -->174 <div class="status-bar">175 <div class="status-left">176 <div>4:05</div>177 <div class="status-icon">☁️</div>178 </div>179 <div class="status-right">180 <div class="status-icon">⌖</div>181 <div class="status-icon">📶</div>182 <div class="status-icon">🔋</div>183 </div>184 </div>185 186 <!-- App bar -->187 <div class="app-bar">188 <div class="app-left">189 <div class="icon-btn back">190 <svg viewBox="0 0 24 24"><path d="M15 4 L5 12 L15 20"/></svg>191 </div>192 <div class="title">Steps</div>193 </div>194 <div class="icon-btn gear" aria-label="Settings">195 <!-- Simple gear icon -->196 <svg viewBox="0 0 24 24">197 <path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4-2.2.6.6 2.2-1.8 1.3-1.6-1.2-2.1.8-.6 2.2h-2.2l-.6-2.2-2.1-.8-1.6 1.2-1.8-1.3.6-2.2L3 12l2.2-.6-.6-2.2 1.8-1.3 1.6 1.2 2.1-.8.6-2.2h2.2l.6 2.2 2.1.8 1.6-1.2 1.8 1.3-.6 2.2z"/>198 </svg>199 </div>200 </div>201 202 <!-- Tabs -->203 <div class="tabs">204 <div class="tab active">DAY</div>205 <div class="tab">WEEK</div>206 <div class="tab">MONTH</div>207 <div class="tab">YEAR</div>208 </div>209 210 <!-- Today header with chevrons -->211 <div class="day-header">212 <div class="chev">213 <svg viewBox="0 0 24 24"><path d="M15 4 L7 12 L15 20"/></svg>214 </div>215 <div class="day-center">216 <div class="label">Today</div>217 <div class="sub">20 steps</div>218 </div>219 <div class="chev">220 <svg viewBox="0 0 24 24"><path d="M9 4 L17 12 L9 20"/></svg>221 </div>222 </div>223 224 <!-- Chart -->225 <div class="chart">226 <div class="grid-line top"></div>227 <div class="grid-line mid"></div>228 <div class="grid-line bot"></div>229 230 <div class="y-labels">231 <div>20</div>232 <div>10</div>233 <div>0</div>234 </div>235 236 <div class="bar"></div>237 238 <div class="x-labels">239 <div>12 AM</div>240 <div>4 AM</div>241 <div>8 AM</div>242 <div>12 PM</div>243 <div>4 PM</div>244 <div>8 PM</div>245 <div>12 AM</div>246 </div>247 </div>248 249 <!-- Week summary strip -->250 <div class="summary">251 <div>This Week</div>252 <div class="value">20 steps</div>253 </div>254 255 <!-- List of days -->256 <div class="list">257 <div class="list-item">258 <div class="left">Today</div>259 <div class="right"><span>20</span><span class="steps-label">steps</span></div>260 </div>261 <div class="list-item">262 <div class="left mute">Wed</div>263 <div class="right"><span>0</span><span class="steps-label">steps</span></div>264 </div>265 <div class="list-item">266 <div class="left mute">Tue</div>267 <div class="right"><span>0</span><span class="steps-label">steps</span></div>268 </div>269 <div class="list-item">270 <div class="left mute">Mon</div>271 <div class="right"><span>0</span><span class="steps-label">steps</span></div>272 </div>273 <div class="list-item">274 <div class="left mute">Sun</div>275 <div class="right"><span>0</span><span class="steps-label">steps</span></div>276 </div>277 278 <div class="subheader">279 <div>Jul 16 - Jul 22</div>280 <div>0 steps</div>281 </div>282 283 <div class="list-item">284 <div class="left mute">Sat</div>285 <div class="right"><span>0</span><span class="steps-label">steps</span></div>286 </div>287 </div>288 289 <!-- Bottom gesture pill -->290 <div class="gesture"></div>291</div>292</body>293</html>