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>Report Screen</title>7<style>8 :root{9 --bg:#F5F6F8;10 --white:#FFFFFF;11 --text:#1E1E1E;12 --muted:#8C8C95;13 --blue:#1560FF;14 --light-blue:#DDE7FF;15 --line:#E8E8EB;16 }17 body{margin:0;padding:0;background:transparent;font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}18 #render-target{19 width:1080px;height:2400px;20 position:relative;overflow:hidden;21 background:var(--bg);22 border-radius:28px;23 box-shadow:0 4px 24px rgba(0,0,0,0.08);24 color:var(--text);25 }26 .status-bar{27 position:absolute;top:24px;left:40px;right:40px;height:64px;display:flex;align-items:center;justify-content:space-between;color:#3a3a3a;font-weight:600;font-size:40px;28 }29 .status-icons{display:flex;gap:24px;align-items:center;}30 /* simple status icons */31 .icon-signal, .icon-battery{width:40px;height:40px;}32 .screen-content{position:absolute;left:48px;right:48px;top:120px;}33 h1.title{font-size:96px;letter-spacing:0.5px;margin:16px 0 28px 0;font-weight:800;}34 .card{35 background:var(--white);36 border-radius:36px;37 box-shadow:0 6px 20px rgba(0,0,0,0.06);38 }39 /* stats card */40 .stats-card{padding:44px 56px;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:36px;}41 .stat{width:30%;text-align:center;}42 .stat .icon-wrap{position:relative;width:88px;height:88px;margin:0 auto 12px auto;}43 .stat .accent{position:absolute;right:-8px;bottom:-8px;width:40px;height:40px;background:#C9D6FF;border-radius:50%;}44 .stat svg{width:88px;height:88px;}45 .stat-value{font-size:112px;font-weight:800;line-height:1;margin-top:4px;}46 .stat-label{font-size:42px;color:var(--muted);margin-top:8px;}47 /* section headers */48 .section-row{display:flex;align-items:center;justify-content:space-between;margin:22px 4px 18px 8px;}49 .section-title{font-size:72px;font-weight:800;}50 .link{font-size:48px;color:var(--blue);font-weight:700;}51 /* calendar card */52 .calendar-card{padding:36px 48px;margin-bottom:36px;}53 .days, .dates{display:flex;justify-content:space-between;align-items:center;}54 .days span{color:#B6B6BD;font-size:42px;width:88px;text-align:center;}55 .dates span{font-size:48px;color:#777;width:88px;text-align:center;}56 .dates .active{width:96px;height:96px;background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;}57 .active-marker{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid var(--blue);margin:18px auto 10px auto;}58 .divider{height:2px;background:var(--line);margin:24px -48px 24px -48px;}59 .streak-row{display:flex;align-items:center;justify-content:space-between;}60 .streak-left{display:flex;align-items:center;gap:18px;font-size:60px;font-weight:700;}61 .streak-left .flame{width:54px;height:54px;}62 .best-right{text-align:right;}63 .best-right .label{color:var(--muted);font-size:42px;}64 .best-right .value{font-size:64px;font-weight:800;margin-top:6px;}65 /* weight header */66 .weight-top{display:flex;align-items:center;justify-content:space-between;margin:22px 4px;}67 .btn{background:var(--blue);color:#fff;border:none;border-radius:28px;padding:26px 42px;font-size:48px;font-weight:800;}68 /* weight card */69 .weight-card{padding:40px 48px;margin-bottom:28px;}70 .weight-stats{display:flex;justify-content:space-between;}71 .current .label{color:var(--muted);font-size:42px;}72 .current .value{font-size:96px;font-weight:900;margin-top:10px;}73 .hl .row{display:flex;justify-content:flex-end;gap:18px;color:var(--text);font-size:48px;}74 .hl .row span.label{color:var(--muted);}75 .chart{margin-top:34px;border-radius:24px;padding:24px 0 40px 0;position:relative;}76 .chart-grid{border-top:2px dashed var(--line);margin-top:18px;}77 .chart .y{color:#889;font-size:44px;padding:20px 0;border-top:2px dashed var(--line);}78 .chart .month{position:absolute;top:8px;right:24px;color:#9AA0AB;font-size:42px;}79 .marker{position:absolute;left:430px;bottom:36px;background:#3E3E49;color:#fff;padding:16px 28px;border-radius:39px;font-size:48px;font-weight:800;}80 .marker:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-24px;width:24px;height:24px;border-radius:50%;background:#0B61FF;border:6px solid #fff;box-shadow:0 0 0 6px #E6EDFF;}81 /* ad banner */82 .ad{background:#ECEDEF;border-top:2px solid #D6D7DC;border-bottom:2px solid #D6D7DC;border-radius:24px;margin:12px 0;padding:24px 24px;display:flex;align-items:center;gap:24px;}83 .img-ph{width:160px;height:120px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#757575;font-size:30px;border-radius:12px;}84 .ad-content{flex:1;}85 .ad-title{font-size:44px;font-weight:800;margin-bottom:8px;}86 .ad-desc{font-size:36px;color:#6F7178;}87 .ad-btn{background:#48B8B0;color:#fff;border:none;border-radius:36px;padding:26px 40px;font-size:44px;font-weight:900;}88 /* bottom nav */89 .bottom-nav{position:absolute;left:0;right:0;bottom:56px;height:190px;background:#fff;border-top:2px solid #E5E6EA;display:flex;justify-content:space-around;align-items:center;}90 .nav-item{display:flex;flex-direction:column;align-items:center;gap:16px;color:#7C7D85;font-size:40px;font-weight:700;}91 .nav-item svg{width:72px;height:72px;}92 .nav-item.active{color:var(--blue);}93 .home-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;width:360px;height:12px;background:#000;border-radius:6px;}94</style>95</head>96<body>97<div id="render-target">98 <div class="status-bar">99 <div>9:55</div>100 <div class="status-icons">101 <svg class="icon-signal" viewBox="0 0 24 24"><path d="M2 20h2v-2H2v2zm4-4h2v-6H6v6zm4-8h2V4h-2v4zm4-6h2v18h-2V2z" fill="#666"/></svg>102 <svg class="icon-battery" viewBox="0 0 32 24"><rect x="2" y="4" width="24" height="16" rx="3" ry="3" fill="#777" opacity="0.2" stroke="#777"/><rect x="4" y="6" width="20" height="12" rx="2" fill="#777"/><rect x="26" y="8" width="4" height="8" rx="1" fill="#777"/></svg>103 </div>104 </div>105 106 <div class="screen-content">107 <h1 class="title">REPORT</h1>108 109 <div class="card stats-card">110 <div class="stat">111 <div class="icon-wrap">112 <span class="accent"></span>113 <svg viewBox="0 0 64 64">114 <circle cx="24" cy="20" r="10" fill="none" stroke="#565B64" stroke-width="3"/>115 <path d="M16 32l8 20 8-20" fill="none" stroke="#565B64" stroke-width="3"/>116 <path d="M34 18h16l-6 10h-10z" fill="none" stroke="#565B64" stroke-width="3"/>117 </svg>118 </div>119 <div class="stat-value">1</div>120 <div class="stat-label">Workout</div>121 </div>122 <div class="stat">123 <div class="icon-wrap">124 <span class="accent"></span>125 <svg viewBox="0 0 64 64">126 <path d="M32 10c8 8 0 14-2 18-3 6 2 10 2 16-8-2-14-8-14-16S22 14 32 10z" fill="none" stroke="#565B64" stroke-width="3"/>127 </svg>128 </div>129 <div class="stat-value">4</div>130 <div class="stat-label">Kcal</div>131 </div>132 <div class="stat">133 <div class="icon-wrap">134 <span class="accent"></span>135 <svg viewBox="0 0 64 64">136 <circle cx="32" cy="32" r="20" fill="none" stroke="#565B64" stroke-width="3"/>137 <path d="M32 32V18M32 32l10 6" stroke="#565B64" stroke-width="3" fill="none"/>138 </svg>139 </div>140 <div class="stat-value">0</div>141 <div class="stat-label">Minute</div>142 </div>143 </div>144 145 <div class="section-row">146 <div class="section-title">History</div>147 <div class="link">All records</div>148 </div>149 150 <div class="card calendar-card">151 <div class="days">152 <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>153 </div>154 <div class="dates" style="margin-top:24px;">155 <span>29</span>156 <div class="active">30</div>157 <span>31</span><span>1</span><span>2</span><span>3</span><span>4</span>158 </div>159 <div class="active-marker"></div>160 <div class="divider"></div>161 <div class="streak-row">162 <div class="streak-left">163 <svg class="flame" viewBox="0 0 32 32">164 <path d="M16 4c2 4-2 7-3 10-2 4 1 7 1 10-6-2-9-6-9-10 0-5 5-8 11-10z" fill="#FF5A2E"/>165 </svg>166 <span>1 Day Streak</span>167 </div>168 <div class="best-right">169 <div class="label">Personal Best</div>170 <div class="value">1 day</div>171 </div>172 </div>173 </div>174 175 <div class="weight-top">176 <div class="section-title">Weight</div>177 <button class="btn">Log</button>178 </div>179 180 <div class="card weight-card">181 <div class="weight-stats">182 <div class="current">183 <div class="label">Current</div>184 <div class="value">165 lb</div>185 </div>186 <div class="hl">187 <div class="row"><span class="label">Heaviest</span><span>165</span></div>188 <div class="row" style="margin-top:10px;"><span class="label">Lightest</span><span>165</span></div>189 </div>190 </div>191 192 <div class="chart">193 <div class="month">November</div>194 <div class="y">165.9</div>195 <div class="y">165.6</div>196 <div class="y">165.3</div>197 <div class="y">165</div>198 <div class="marker">165.0</div>199 </div>200 </div>201 202 <div class="ad">203 <div class="img-ph">[IMG: Ad - Kohler logo]</div>204 <div class="ad-content">205 <div class="ad-title">Spacity by Kohler</div>206 <div class="ad-desc">Give your bathroom a premium essence with the ultimate in bathroom experience</div>207 </div>208 <button class="ad-btn">KNOW MORE!</button>209 </div>210 </div>211 212 <div class="bottom-nav">213 <div class="nav-item">214 <svg viewBox="0 0 64 64">215 <circle cx="32" cy="32" r="28" fill="none" stroke="#7C7D85" stroke-width="4"/>216 <path d="M32 20v14l10 6" stroke="#7C7D85" stroke-width="4" fill="none"/>217 </svg>218 <div>Training</div>219 </div>220 <div class="nav-item">221 <svg viewBox="0 0 64 64">222 <path d="M12 40c8-20 22-22 34-8-6 10-16 16-26 14l-8 6 0-12z" fill="none" stroke="#7C7D85" stroke-width="4"/>223 </svg>224 <div>Discover</div>225 </div>226 <div class="nav-item active">227 <svg viewBox="0 0 64 64">228 <rect x="10" y="36" width="10" height="18" rx="3" fill="#1560FF"/>229 <rect x="27" y="26" width="10" height="28" rx="3" fill="#1560FF"/>230 <rect x="44" y="16" width="10" height="38" rx="3" fill="#1560FF"/>231 </svg>232 <div>Report</div>233 </div>234 <div class="nav-item">235 <svg viewBox="0 0 64 64">236 <circle cx="32" cy="24" r="10" fill="none" stroke="#7C7D85" stroke-width="4"/>237 <path d="M12 54c6-10 34-10 40 0" stroke="#7C7D85" stroke-width="4" fill="none"/>238 </svg>239 <div>Settings</div>240 </div>241 </div>242 243 <div class="home-indicator"></div>244</div>245</body>246</html>