GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Progress</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff;12 }13 14 /* Status bar */15 .statusbar {16 position:absolute; top:0; left:0; right:0; height:110px;17 background:#b33a11; color:#fff; font-size:34px; display:flex; align-items:center; justify-content:space-between;18 padding:0 32px;19 }20 .status-icons { display:flex; gap:28px; align-items:center; }21 .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:.7; }22 23 /* App bar */24 .appbar {25 position:absolute; top:110px; left:0; right:0; height:320px;26 background:#ff5a1f; color:#fff;27 box-shadow:0 6px 14px rgba(0,0,0,0.15);28 }29 .title-row {30 display:flex; align-items:center; justify-content:space-between;31 padding:30px 36px 0 36px;32 }33 .title-row .you { font-size:72px; font-weight:700; }34 .title-actions { display:flex; gap:28px; align-items:center; }35 .circle-chip {36 width:72px; height:72px; border-radius:50%; background:#2a2fcc; display:flex; align-items:center; justify-content:center; font-weight:700;37 border:3px solid rgba(255,255,255,0.9);38 }39 40 /* Tabs */41 .tabs {42 display:flex; gap:80px; padding:40px 36px 0 36px; align-items:flex-end;43 font-weight:800; letter-spacing:1px;44 }45 .tab { font-size:40px; opacity:.55; color:#fff; }46 .tab.active { opacity:1; position:relative; }47 .tab.active::after {48 content:""; position:absolute; left:0; bottom:-18px; width:260px; height:8px; background:#fff; border-radius:4px;49 }50 51 /* Content area */52 .content {53 position:absolute; top:430px; left:0; right:0; bottom:170px; overflow:auto; background:#f7f7f7;54 }55 56 .card {57 background:#fff; margin:24px 18px; border-radius:18px; box-shadow:0 4px 10px rgba(0,0,0,0.08);58 padding:34px;59 }60 .week-head {61 display:flex; align-items:center; gap:22px; font-size:42px; font-weight:700; color:#333;62 }63 .metrics {64 display:flex; gap:50px; align-items:flex-start; margin-top:30px; margin-bottom:10px;65 }66 .metric { min-width:260px; }67 .metric .label { color:#6b6b6b; font-size:34px; margin-bottom:10px; }68 .metric .value { color:#222; font-size:64px; font-weight:700; }69 .v-sep {70 width:2px; background:#ddd; height:90px; align-self:center;71 }72 73 /* Chart */74 .chart {75 margin-top:24px; height:360px; border:2px solid #e6e6e6; border-radius:10px; position:relative; overflow:hidden;76 background:77 repeating-linear-gradient(to right, #ececec, #ececec 2px, transparent 2px, transparent 120px),78 repeating-linear-gradient(to top, #ececec, #ececec 2px, transparent 2px, transparent 120px);79 }80 .chart svg { position:absolute; inset:0; }81 .chart-label {82 position:absolute; right:16px; top:16px; color:#ff5a1f; font-weight:700; font-size:36px;83 }84 .axis-labels {85 position:absolute; left:10px; bottom:8px; display:flex; width:100%; justify-content:space-between; color:#8a8a8a; font-size:28px;86 padding:0 16px;87 }88 89 /* Promo block */90 .promo {91 background:#fff; margin:22px 0; padding:40px 36px 48px 36px;92 }93 .promo h2 { font-size:74px; line-height:1.1; color:#222; margin:0 0 36px 0; }94 .cta {95 background:#ff5a1f; color:#fff; font-size:44px; font-weight:800; text-align:center; padding:32px 20px; border-radius:16px; margin:0 18px;96 box-shadow:0 4px 8px rgba(255,90,31,0.3);97 }98 .img-placeholder {99 margin:34px 18px 0 18px; height:240px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;100 display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;101 }102 103 /* Bottom nav */104 .bottom-nav {105 position:absolute; left:0; right:0; bottom:0; height:170px; background:#ffffff; border-top:1px solid #e5e5e5;106 display:flex; justify-content:space-around; align-items:center;107 }108 .nav-item { display:flex; flex-direction:column; align-items:center; color:#6d6d6d; font-size:30px; }109 .nav-item.active { color:#ff5a1f; font-weight:800; }110 .icon { width:60px; height:60px; }111</style>112</head>113<body>114<div id="render-target">115 116 <!-- Status bar -->117 <div class="statusbar">118 <div>12:49</div>119 <div class="status-icons">120 <div class="dot"></div>121 <div class="dot"></div>122 <svg width="36" height="36" viewBox="0 0 24 24" fill="#fff"><path d="M12 4l-8 6h3v8h10v-8h3z"/></svg>123 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 18h18v2H3zM6 6h12v10l-6-3-6 3z"/></svg>124 </div>125 </div>126 127 <!-- App bar -->128 <div class="appbar">129 <div class="title-row">130 <div class="you">You</div>131 <div class="title-actions">132 <div class="circle-chip">C</div>133 <!-- Search -->134 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">135 <circle cx="10" cy="10" r="6"></circle>136 <path d="M14.5 14.5L20 20"></path>137 </svg>138 <!-- Settings -->139 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">140 <circle cx="12" cy="12" r="3"></circle>141 <path d="M4 12h2M18 12h2M12 4v2M12 18v2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M17 7l1.4-1.4M5.6 18.4L7 17"></path>142 </svg>143 </div>144 </div>145 <div class="tabs">146 <div class="tab active">PROGRESS</div>147 <div class="tab">ACTIVITIES</div>148 </div>149 </div>150 151 <!-- Content -->152 <div class="content">153 <!-- Weekly card -->154 <div class="card" style="margin-top:28px;">155 <div class="week-head">156 <svg width="56" height="56" viewBox="0 0 24 24" fill="#333"><path d="M4 15c1 0 3-1 4-2l3 2c2 0 3 2 5 2h3v2h-4c-2 0-4-1-6-1H5c-1 0-1-.9-1-1zM9 10l2-3 3 2-2 3z"/></svg>157 <div>This week</div>158 </div>159 160 <div class="metrics">161 <div class="metric">162 <div class="label">Distance</div>163 <div class="value">3 km</div>164 </div>165 <div class="v-sep"></div>166 <div class="metric">167 <div class="label">Time</div>168 <div class="value">2h</div>169 </div>170 <div class="v-sep"></div>171 <div class="metric">172 <div class="label">Elevation Gain</div>173 <div class="value">0 m</div>174 </div>175 </div>176 177 <div class="chart">178 <div class="chart-label">3 km</div>179 <!-- simple baseline circles -->180 <svg viewBox="0 0 100 100" preserveAspectRatio="none">181 <!-- orange line -->182 <polyline points="2,90 12,90 22,90 32,90 42,90 52,90 62,90 72,90 82,90 92,20"183 fill="none" stroke="#ff5a1f" stroke-width="2"></polyline>184 <!-- small circles -->185 <g fill="#fff" stroke="#ff5a1f" stroke-width="2">186 <circle cx="2" cy="90" r="2.5"/>187 <circle cx="12" cy="90" r="2.5"/>188 <circle cx="22" cy="90" r="2.5"/>189 <circle cx="32" cy="90" r="2.5"/>190 <circle cx="42" cy="90" r="2.5"/>191 <circle cx="52" cy="90" r="2.5"/>192 <circle cx="62" cy="90" r="2.5"/>193 <circle cx="72" cy="90" r="2.5"/>194 <circle cx="82" cy="90" r="2.5"/>195 <circle cx="92" cy="20" r="4.5"/>196 </g>197 </svg>198 <div class="axis-labels">199 <div style="color:#8a8a8a;">0 km</div>200 <div style="color:#8a8a8a; transform:translateY(-6px);">NOV</div>201 <div style="color:#8a8a8a; transform:translateY(-6px);">DEC</div>202 <div style="color:#8a8a8a; text-align:right;">JAN 2024</div>203 </div>204 </div>205 </div>206 207 <!-- Promo block -->208 <div class="promo">209 <h2>Unlock more ways to track your progress.</h2>210 <div class="cta">Subscribe Now</div>211 <div class="img-placeholder">[IMG: Features preview]</div>212 </div>213 </div>214 215 <!-- Bottom Navigation -->216 <div class="bottom-nav">217 <div class="nav-item">218 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">219 <path d="M3 11l9-7 9 7"></path>220 <path d="M5 10v9h14v-9"></path>221 </svg>222 <div>Home</div>223 </div>224 <div class="nav-item">225 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">226 <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z"></path>227 <path d="M9 4v16M15 6v14"></path>228 </svg>229 <div>Maps</div>230 </div>231 <div class="nav-item">232 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">233 <circle cx="12" cy="12" r="7"></circle>234 <circle cx="12" cy="12" r="3"></circle>235 </svg>236 <div>Record</div>237 </div>238 <div class="nav-item">239 <svg class="icon" viewBox="0 0 24 24" fill="currentColor">240 <circle cx="6" cy="8" r="2"></circle>241 <circle cx="12" cy="12" r="2"></circle>242 <circle cx="18" cy="8" r="2"></circle>243 <circle cx="6" cy="16" r="2"></circle>244 <circle cx="18" cy="16" r="2"></circle>245 </svg>246 <div>Groups</div>247 </div>248 <div class="nav-item active">249 <svg class="icon" viewBox="0 0 24 24" fill="#ff5a1f">250 <rect x="3" y="3" width="18" height="18" rx="2" ry="2" fill="none" stroke="#ff5a1f" stroke-width="2"></rect>251 <rect x="6" y="14" width="3" height="5"></rect>252 <rect x="11" y="10" width="3" height="9"></rect>253 <rect x="16" y="6" width="3" height="13"></rect>254 </svg>255 <div>You</div>256 </div>257 </div>258 259</div>260</body>261</html>