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>Plan Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 border-radius: 44px;16 box-shadow: 0 10px 40px rgba(0,0,0,0.5);17 color: #FFFFFF;18 }19 20 /* Status bar */21 .statusbar {22 height: 110px;23 padding: 0 48px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #EDEDED;28 font-weight: 600;29 font-size: 40px;30 letter-spacing: 0.5px;31 }32 .sb-left { display: flex; align-items: center; gap: 18px; }33 .sb-center { display: flex; align-items: center; gap: 18px; opacity: 0.8; }34 .dot { width: 18px; height: 18px; background: #EDEDED; border-radius: 50%; }35 .sb-right { display: flex; align-items: center; gap: 18px; }36 .icon-wifi, .icon-battery {37 width: 48px; height: 48px;38 }39 .icon-wifi path, .icon-battery path, .icon-battery rect { stroke: #FFFFFF; fill: none; stroke-width: 6; }40 41 /* Header */42 .header {43 position: relative;44 padding: 12px 48px 20px 48px;45 }46 .title-plan {47 font-size: 86px;48 font-weight: 800;49 letter-spacing: 1px;50 margin: 20px 0 10px 0;51 }52 .search {53 position: absolute;54 right: 40px;55 top: 30px;56 width: 72px; height: 72px;57 display: flex; align-items: center; justify-content: center;58 opacity: 0.95;59 }60 .search svg { width: 64px; height: 64px; stroke: #FFFFFF; fill: none; stroke-width: 6; }61 62 /* Section headings */63 .section {64 padding: 0 48px;65 }66 .section h2 {67 font-size: 62px;68 font-weight: 800;69 margin: 28px 0 28px 0;70 }71 72 /* Cards */73 .card {74 position: relative;75 width: calc(100% - 96px);76 height: 560px;77 margin: 0 48px 32px 48px;78 border-radius: 36px;79 overflow: hidden;80 box-shadow: 0 8px 24px rgba(0,0,0,0.35);81 background: #1E1E1E;82 }83 .img-placeholder {84 position: absolute;85 inset: 0;86 background: #E0E0E0;87 border: 1px solid #BDBDBD;88 display: flex;89 align-items: center;90 justify-content: center;91 color: #757575;92 font-weight: 600;93 font-size: 36px;94 text-align: center;95 padding: 16px;96 }97 .darken {98 position: absolute;99 inset: 0;100 background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.55));101 }102 .card .title {103 position: absolute;104 left: 40px;105 bottom: 190px;106 font-size: 78px;107 font-weight: 900;108 line-height: 92%;109 text-transform: uppercase;110 }111 .start-btn {112 position: absolute;113 left: 80px;114 right: 80px;115 bottom: 60px;116 height: 120px;117 border: none;118 border-radius: 30px;119 background: #CF5B52;120 color: #FFFFFF;121 font-size: 46px;122 font-weight: 800;123 letter-spacing: 0.4px;124 box-shadow: 0 6px 16px rgba(207,91,82,0.45);125 }126 .progress-dot {127 position: absolute;128 left: 22px;129 bottom: 18px;130 width: 22px; height: 22px;131 background: #2F7DF6;132 border-radius: 50%;133 }134 135 /* Ad banner */136 .ad-banner {137 margin: 28px 48px 40px 48px;138 background: #1E1E1E;139 border-radius: 28px;140 padding: 28px;141 display: flex; align-items: center;142 gap: 28px;143 box-shadow: 0 8px 24px rgba(0,0,0,0.35);144 }145 .ad-logo {146 width: 180px; height: 120px;147 background: #1E5BE7;148 border-radius: 18px;149 display: flex; align-items: center; justify-content: center;150 color: #FFFFFF; font-weight: 800; font-size: 42px;151 }152 .ad-content {153 flex: 1;154 }155 .ad-title {156 font-size: 44px; font-weight: 800; color: #FFFFFF; margin-bottom: 6px;157 }158 .ad-sub {159 font-size: 32px; color: #B5B5B5;160 }161 .ad-right {162 display: flex; align-items: center; gap: 16px;163 }164 .ad-pill {165 height: 54px; padding: 0 20px; border-radius: 16px;166 background: #2C2C2C; color: #A9D3FF; font-size: 28px; font-weight: 800; display: flex; align-items: center;167 }168 .ad-open {169 height: 90px; padding: 0 40px; border-radius: 22px;170 background: #3A3A3A; color: #FFFFFF; font-size: 38px; font-weight: 800; border: 2px solid #4A4A4A;171 }172 173 /* Secondary cards (All Plans) */174 .subcard {175 position: relative;176 width: calc(100% - 96px);177 height: 500px;178 margin: 0 48px 28px 48px;179 border-radius: 36px;180 overflow: hidden;181 box-shadow: 0 8px 24px rgba(0,0,0,0.35);182 background: #1E1E1E;183 }184 .subcard .img-placeholder { font-size: 32px; }185 .subcard .darken { background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.65)); }186 .badge-free {187 position: absolute; right: 30px; top: 30px;188 background: #2F7DF6; color: #FFFFFF; font-weight: 900; font-size: 34px;189 height: 70px; padding: 0 26px; border-radius: 16px; display: flex; align-items: center;190 box-shadow: 0 6px 14px rgba(47,125,246,0.45);191 }192 .sub-title {193 position: absolute; left: 40px; bottom: 140px;194 font-size: 66px; font-weight: 900; text-transform: uppercase; line-height: 96%;195 }196 .sub-meta {197 position: absolute; left: 40px; bottom: 70px;198 font-size: 34px; color: #D9D9D9; font-weight: 600; opacity: 0.95;199 }200 201 /* Bottom navigation */202 .navbar {203 position: absolute;204 left: 0; right: 0; bottom: 130px;205 height: 170px;206 background: #141414;207 border-top: 1px solid #242424;208 display: grid;209 grid-template-columns: repeat(4, 1fr);210 align-items: center;211 padding: 0 28px;212 }213 .nav-item {214 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;215 color: #9EA3A8; font-size: 30px; font-weight: 800;216 }217 .nav-item.active { color: #FFFFFF; }218 .nav-icon { width: 64px; height: 64px; }219 .nav-icon svg { width: 64px; height: 64px; fill: none; stroke-width: 6; }220 .nav-item.active svg { stroke: #FFFFFF; }221 .nav-item svg { stroke: #9EA3A8; }222 223 /* Home indicator */224 .home-indicator {225 position: absolute;226 left: 50%; transform: translateX(-50%);227 bottom: 56px;228 width: 360px; height: 14px; background: #FFFFFF; border-radius: 8px; opacity: 0.9;229 }230</style>231</head>232<body>233<div id="render-target">234 235 <!-- Status bar -->236 <div class="statusbar">237 <div class="sb-left">9:46</div>238 <div class="sb-center">239 <span class="dot"></span>240 <span class="dot" style="opacity:0.6;"></span>241 <span class="dot" style="opacity:0.4;"></span>242 <span class="dot" style="width:10px; height:10px; opacity:0.8;"></span>243 </div>244 <div class="sb-right">245 <svg class="icon-wifi" viewBox="0 0 24 24">246 <path d="M2 8c5-5 15-5 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0M12 20h0"></path>247 </svg>248 <svg class="icon-battery" viewBox="0 0 28 24">249 <rect x="2" y="5" width="20" height="14" rx="2"></rect>250 <path d="M24 9v6"></path>251 </svg>252 </div>253 </div>254 255 <!-- Header -->256 <div class="header">257 <div class="title-plan">PLAN</div>258 <div class="search">259 <svg viewBox="0 0 24 24">260 <circle cx="10" cy="10" r="7"></circle>261 <path d="M16 16l6 6"></path>262 </svg>263 </div>264 </div>265 266 <!-- In Progress -->267 <div class="section">268 <h2>IN PROGRESS</h2>269 </div>270 271 <div class="card">272 <div class="img-placeholder">[IMG: Man exercising at home]</div>273 <div class="darken"></div>274 <div class="title">TOTAL FAT<br>BURNING</div>275 <button class="start-btn">DAY 1 · START</button>276 <div class="progress-dot"></div>277 </div>278 279 <!-- Ad banner -->280 <div class="ad-banner">281 <div class="ad-logo">Booking</div>282 <div class="ad-content">283 <div class="ad-title">Booking.com: Hotels & …</div>284 <div class="ad-sub">Download the highest rated travel app and join thousands of people finding great deals.</div>285 </div>286 <div class="ad-right">287 <div class="ad-pill">AD</div>288 <button class="ad-open">OPEN</button>289 </div>290 </div>291 292 <!-- All Plans -->293 <div class="section">294 <h2>All Plans</h2>295 </div>296 297 <div class="subcard">298 <div class="img-placeholder">[IMG: Person planking on a mat in living room]</div>299 <div class="darken"></div>300 <div class="badge-free">FREE</div>301 <div class="sub-title">IMMUNE SYSTEM<br>BOOSTER</div>302 <div class="sub-meta">3 levels · 7–15 min</div>303 </div>304 305 <div class="subcard">306 <div class="img-placeholder">[IMG: Person doing sit-ups in gym]</div>307 <div class="darken"></div>308 <div class="badge-free">FREE</div>309 <div class="sub-title">ABS BLASTER</div>310 </div>311 312 <!-- Bottom Navigation -->313 <div class="navbar">314 <div class="nav-item active">315 <div class="nav-icon">316 <svg viewBox="0 0 24 24">317 <rect x="3" y="5" width="18" height="5" rx="1"></rect>318 <rect x="3" y="14" width="18" height="5" rx="1"></rect>319 </svg>320 </div>321 <div>PLAN</div>322 </div>323 <div class="nav-item">324 <div class="nav-icon">325 <svg viewBox="0 0 24 24">326 <path d="M12 20c-6-4-6-9 0-12 6 3 6 8 0 12z"></path>327 </svg>328 </div>329 <div>WORKOUTS</div>330 </div>331 <div class="nav-item">332 <div class="nav-icon">333 <svg viewBox="0 0 24 24">334 <rect x="3" y="5" width="18" height="16" rx="2"></rect>335 <path d="M7 3v4M17 3v4M6 11h12M6 15h8"></path>336 </svg>337 </div>338 <div>DAILY</div>339 </div>340 <div class="nav-item">341 <div class="nav-icon">342 <svg viewBox="0 0 24 24">343 <circle cx="12" cy="8" r="4"></circle>344 <path d="M4 21c2-4 6-6 8-6s6 2 8 6"></path>345 </svg>346 </div>347 <div>ME</div>348 </div>349 </div>350 351 <div class="home-indicator"></div>352</div>353</body>354</html>