GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Meditate - Series</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 :root{9 --bg:#1f2631;10 --header:#2c3441;11 --card:#28303c;12 --muted:#9aa6b2;13 --text:#e8edf3;14 --accent:#8fd2d3;15 --play:#a9cfcf;16 --divider:#3a4452;17 --chip:#d5a6b4;18 }19 body{ margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }20 #render-target{21 width:1080px; height:2400px;22 position:relative; overflow:hidden;23 background:var(--bg);24 color:var(--text);25 }26 /* Status bar */27 .status-bar{28 position:absolute; left:0; top:0; width:100%; height:100px;29 background:#1b212b;30 color:#c7d0db; font-size:34px; letter-spacing:0.5px;31 display:flex; align-items:center; justify-content:space-between;32 padding:0 36px;33 }34 .status-icons{ display:flex; gap:22px; align-items:center; }35 .dot{ width:10px; height:10px; background:#cbd5df; border-radius:50%; display:inline-block; opacity:.8; }36 .battery{37 width:44px; height:22px; border:3px solid #cbd5df; border-radius:4px; position:relative;38 }39 .battery::after{ content:""; position:absolute; right:-8px; top:6px; width:6px; height:10px; background:#cbd5df; border-radius:2px; }40 .battery .lvl{ position:absolute; left:3px; top:3px; height:14px; width:24px; background:#cbd5df; }41 42 /* Header */43 .header{44 position:absolute; left:0; top:100px; width:100%; height:260px;45 background:var(--header);46 padding:36px 36px 0 36px;47 box-sizing:border-box;48 }49 .header h1{ margin:18px 0 24px; font-size:72px; font-weight:700; color:#eaf1f7; }50 .search-btn{51 position:absolute; right:32px; top:56px; width:72px; height:72px; display:flex; align-items:center; justify-content:center; opacity:.9;52 }53 .tabs{54 display:flex; gap:64px; align-items:center;55 padding:0 0 0 4px; height:70px;56 border-bottom:2px solid var(--divider);57 }58 .tab{ font-size:36px; color:#97a3b0; letter-spacing:1px; }59 .tab.active{ color:#eaf1f7; position:relative; }60 .tab.active::after{61 content:""; position:absolute; left:-6px; bottom:-20px; width:200px; height:6px; background:var(--accent); border-radius:6px;62 }63 64 /* Content area */65 .content{ position:absolute; left:0; top:360px; right:0; bottom:180px; overflow:hidden; }66 .scroller{ position:absolute; left:0; right:0; top:0; bottom:0; overflow-y:auto; padding:24px 24px 120px; box-sizing:border-box; }67 .section-title{ font-size:54px; font-weight:600; margin:20px 12px 24px; }68 69 /* Big card */70 .big-card{71 margin:0 12px 48px;72 background:var(--card);73 border-radius:24px;74 padding:16px;75 }76 .img-placeholder{77 width:100%; height:640px;78 background:#E0E0E0;79 border:1px solid #BDBDBD;80 border-radius:20px;81 display:flex; align-items:center; justify-content:center;82 color:#757575; font-size:40px;83 position:relative; overflow:hidden;84 }85 .img-overlay-title{86 position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);87 font-size:64px; font-weight:600; color:#f4fbff; text-shadow:0 2px 8px rgba(0,0,0,.4);88 }89 .play-pill{90 position:absolute; left:50%; top:60%; transform:translate(-50%,-50%);91 background:var(--play); color:#1f2a2e;92 padding:24px 46px; border-radius:60px; font-size:44px; font-weight:600;93 display:flex; align-items:center; gap:18px;94 box-shadow:0 6px 16px rgba(0,0,0,.25);95 }96 .corner-plus{97 position:absolute; right:24px; top:24px; width:70px; height:70px; border-radius:16px;98 background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center;99 }100 .time-meta{101 position:absolute; right:26px; bottom:22px; font-size:34px; color:#e9f2f7; text-shadow:0 2px 6px rgba(0,0,0,.5);102 }103 104 /* Horizontal cards */105 .h-list{ display:flex; gap:24px; padding:0 12px; }106 .tile{107 width:320px; background:var(--card); border-radius:22px; padding:14px; box-sizing:border-box;108 }109 .tile .thumb{110 height:330px; border-radius:18px; background:#E0E0E0; border:1px solid #BDBDBD;111 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; position:relative;112 }113 .tile .thumb .corner-plus{ width:56px; height:56px; }114 .tile .caption{115 font-size:34px; color:#dde6ee; margin:16px 6px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;116 }117 118 /* Unlock all bar */119 .unlock{120 position:absolute; left:0; right:0; bottom:184px; height:100px; background:var(--header);121 display:flex; align-items:center; gap:22px; padding:0 28px; box-sizing:border-box; border-top:1px solid var(--divider);122 }123 .crown{124 width:64px; height:64px; background:#f0c3d0; border-radius:50%; display:flex; align-items:center; justify-content:center;125 }126 .unlock span{ font-size:40px; font-weight:600; }127 128 /* Upgrade chip */129 .upgrade{130 position:absolute; right:36px; bottom:248px;131 background:var(--chip); color:#fff; font-weight:700; font-size:38px;132 padding:18px 28px; border-radius:8px; box-shadow:0 8px 18px rgba(0,0,0,.3);133 }134 135 /* Bottom nav */136 .bottom-nav{137 position:absolute; left:0; right:0; bottom:0; height:184px; background:#2a313e;138 border-top:1px solid var(--divider);139 display:flex; align-items:center; justify-content:space-around;140 }141 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#9eabb9; font-size:30px; }142 .nav-item.active{ color:#e9f2f8; }143 .home-handle{144 position:absolute; left:50%; transform:translateX(-50%);145 bottom:14px; width:240px; height:10px; background:#ffffff; opacity:.5; border-radius:8px;146 }147 148 /* SVG helpers */149 svg{ display:block; }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status Bar -->156 <div class="status-bar">157 <div>3:56</div>158 <div class="status-icons">159 <span class="dot"></span><span class="dot"></span>160 <span class="dot"></span>161 <div class="battery"><div class="lvl"></div></div>162 </div>163 </div>164 165 <!-- Header -->166 <div class="header">167 <div class="search-btn" aria-label="Search">168 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">169 <circle cx="11" cy="11" r="7" stroke="#dfe7ef" stroke-width="2"></circle>170 <path d="M20 20 L16 16" stroke="#dfe7ef" stroke-width="2" stroke-linecap="round"></path>171 </svg>172 </div>173 <h1>Meditate</h1>174 <div class="tabs">175 <div class="tab">ON THE GO</div>176 <div class="tab active">SERIES</div>177 <div class="tab">TEACHERS</div>178 </div>179 </div>180 181 <!-- Content -->182 <div class="content">183 <div class="scroller">184 <div class="section-title">Continue listening</div>185 186 <div class="big-card">187 <div class="img-placeholder">188 <div>[IMG: Ocean underwater]</div>189 <div class="corner-plus">190 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">191 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>192 </svg>193 </div>194 <div class="img-overlay-title">Ocean</div>195 <div class="play-pill">196 <svg width="38" height="38" viewBox="0 0 24 24" fill="#1f2a2e">197 <path d="M8 5l10 7-10 7V5z"></path>198 </svg>199 <span>Play</span>200 </div>201 <div class="time-meta">10·20·80 mins</div>202 </div>203 </div>204 205 <div class="section-title">For your afternoon</div>206 207 <div class="h-list">208 <div class="tile">209 <div class="thumb">210 <div>[IMG: Person holding mug]</div>211 <div class="corner-plus">212 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">213 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>214 </svg>215 </div>216 </div>217 <div class="caption">For Leaders & Execs</div>218 </div>219 220 <div class="tile">221 <div class="thumb">222 <div>[IMG: People doing yoga]</div>223 <div class="corner-plus">224 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">225 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>226 </svg>227 </div>228 </div>229 <div class="caption">Meditation for Focus</div>230 </div>231 232 <div class="tile">233 <div class="thumb">234 <div>[IMG: Green wellness card]</div>235 <div class="corner-plus">236 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">237 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>238 </svg>239 </div>240 </div>241 <div class="caption">15 Min Reset</div>242 </div>243 </div>244 245 <div style="height:220px;"></div>246 </div>247 </div>248 249 <!-- Unlock all bar -->250 <div class="unlock">251 <div class="crown">252 <svg width="34" height="34" viewBox="0 0 24 24" fill="#8b5f6b">253 <path d="M3 17l1-7 5 3 3-6 3 6 5-3 1 7H3z"></path>254 </svg>255 </div>256 <span>Unlock all</span>257 </div>258 259 <!-- Upgrade chip -->260 <div class="upgrade">UPGRADE</div>261 262 <!-- Bottom Navigation -->263 <div class="bottom-nav">264 <div class="nav-item active">265 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">266 <circle cx="12" cy="12" r="10" stroke="#e9f2f8" stroke-width="2"></circle>267 <path d="M9 7l8 5-8 5V7z" fill="#e9f2f8"></path>268 </svg>269 <div>Meditate</div>270 </div>271 <div class="nav-item">272 <svg width="46" height="46" viewBox="0 0 24 24" fill="none">273 <circle cx="12" cy="8" r="4" stroke="#9eabb9" stroke-width="2"></circle>274 <path d="M4 20c1.5-4 6-4 8-4s6 .2 8 4" stroke="#9eabb9" stroke-width="2" fill="none" stroke-linecap="round"></path>275 </svg>276 <div>Me</div>277 </div>278 <div class="nav-item">279 <svg width="46" height="46" viewBox="0 0 24 24" fill="#9eabb9">280 <circle cx="5" cy="12" r="2"></circle>281 <circle cx="12" cy="12" r="2"></circle>282 <circle cx="19" cy="12" r="2"></circle>283 </svg>284 <div>More</div>285 </div>286 <div class="home-handle"></div>287 </div>288 289</div>290</body>291</html>