GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Positive Start UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #1f262d;14 color: #fff;15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0; left: 0;20 width: 100%;21 height: 120px;22 background: #212a31;23 display: flex;24 align-items: center;25 padding: 0 40px;26 box-sizing: border-box;27 }28 .status-left { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: 44px; letter-spacing: 0.5px; }29 .status-left .dot {30 width: 36px; height: 36px; border-radius: 50%; border: 3px solid #cfd8dc;31 opacity: 0.8;32 }33 .status-right {34 margin-left: auto; display: flex; align-items: center; gap: 28px;35 }36 .status-icon svg { width: 42px; height: 42px; fill: none; stroke: #cfd8dc; stroke-width: 3; }37 38 /* Hero */39 .hero {40 position: absolute;41 top: 120px; left: 0;42 width: 100%;43 height: 880px;44 background: #e6e7ea;45 }46 .top-nav {47 position: absolute;48 top: 40px; left: 30px; right: 30px;49 display: flex; align-items: center; justify-content: space-between;50 }51 .nav-left, .nav-right { display: flex; align-items: center; gap: 40px; }52 .nav-icon svg { width: 56px; height: 56px; fill: none; stroke: #ffffff; stroke-width: 4; }53 .hero-title {54 position: absolute;55 left: 270px; top: 270px;56 font-size: 84px; font-weight: 700; color: #ffffff;57 text-shadow: 0 3px 8px rgba(0,0,0,0.25);58 }59 .plant-placeholder {60 position: absolute;61 left: 200px; top: 320px;62 width: 680px; height: 360px;63 background: #E0E0E0; border: 1px solid #BDBDBD;64 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;65 }66 .play-fab {67 position: absolute;68 right: 60px; bottom: 60px;69 width: 180px; height: 180px; border-radius: 50%;70 background: #9fd8d2; box-shadow: 0 10px 20px rgba(0,0,0,0.25);71 display: flex; align-items: center; justify-content: center;72 }73 .play-fab svg { width: 80px; height: 80px; fill: #ffffff; }74 75 /* Download bar */76 .download-bar {77 position: absolute;78 top: 1000px; left: 0;79 width: 100%; height: 160px;80 background: #212a31;81 display: flex; align-items: center; justify-content: space-between;82 padding: 0 40px; box-sizing: border-box;83 }84 .download-text { font-size: 48px; font-weight: 600; }85 .toggle {86 width: 140px; height: 68px; border-radius: 34px;87 background: #3a454e; position: relative;88 }89 .toggle .knob {90 position: absolute; top: 6px; right: 6px;91 width: 56px; height: 56px; border-radius: 50%;92 background: #cfd8dc;93 }94 95 /* Content area */96 .content {97 position: absolute;98 top: 1160px; left: 0;99 width: 100%; height: 1240px;100 background: #1f262d;101 padding: 40px; box-sizing: border-box;102 }103 .instructor {104 display: flex; align-items: center; gap: 28px; margin-bottom: 20px;105 }106 .avatar {107 width: 120px; height: 120px; border-radius: 50%;108 background: #E0E0E0; border: 1px solid #BDBDBD;109 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center;110 }111 .instructor .name {112 font-size: 44px; font-weight: 600; color: #cfe3ea;113 }114 .description {115 margin-top: 20px; color: #b0bec5; font-size: 42px; line-height: 1.35;116 }117 .section-title {118 margin-top: 40px; font-size: 46px; letter-spacing: 1px; font-weight: 700;119 }120 .session-list { margin-top: 18px; }121 .session-item {122 display: flex; align-items: center; justify-content: space-between;123 padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08);124 font-size: 46px; color: #e2e7ea;125 }126 .left-part { display: flex; align-items: center; gap: 28px; }127 .num { width: 40px; text-align: center; opacity: 0.9; }128 .title { font-weight: 600; }129 .right-part { display: flex; align-items: center; gap: 24px; color: #b7c6cf; }130 .lock svg { width: 42px; height: 42px; fill: none; stroke: #b7c6cf; stroke-width: 4; }131 /* Bottom home indicator (visual) */132 .home-indicator {133 position: absolute; bottom: 36px; left: 50%;134 transform: translateX(-50%);135 width: 360px; height: 10px; background: #e6e6e6; border-radius: 6px; opacity: 0.7;136 }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- Status bar -->143 <div class="status-bar">144 <div class="status-left">145 <div>10:47</div>146 <div class="dot"></div>147 </div>148 <div class="status-right">149 <div class="status-icon">150 <!-- WiFi icon -->151 <svg viewBox="0 0 24 24">152 <path d="M2 8c5-4 15-4 20 0"></path>153 <path d="M5 11c4-3 10-3 14 0"></path>154 <path d="M8 14c3-2 5-2 8 0"></path>155 <circle cx="12" cy="17" r="1.8" fill="#cfd8dc" stroke="none"></circle>156 </svg>157 </div>158 <div class="status-icon">159 <!-- Battery icon -->160 <svg viewBox="0 0 28 24">161 <rect x="1" y="5" width="22" height="14" rx="2"></rect>162 <rect x="24" y="9" width="3" height="6" rx="1"></rect>163 <rect x="3" y="7" width="18" height="10" fill="#cfd8dc" stroke="none"></rect>164 </svg>165 </div>166 </div>167 </div>168 169 <!-- Hero section -->170 <div class="hero">171 <div class="top-nav">172 <div class="nav-left">173 <!-- Back arrow -->174 <div class="nav-icon">175 <svg viewBox="0 0 24 24">176 <path d="M15 5l-7 7 7 7"></path>177 </svg>178 </div>179 </div>180 <div class="nav-right">181 <!-- Plus -->182 <div class="nav-icon">183 <svg viewBox="0 0 24 24">184 <path d="M12 4v16"></path>185 <path d="M4 12h16"></path>186 </svg>187 </div>188 <!-- Share -->189 <div class="nav-icon">190 <svg viewBox="0 0 24 24">191 <circle cx="18" cy="5" r="3"></circle>192 <circle cx="6" cy="12" r="3"></circle>193 <circle cx="18" cy="19" r="3"></circle>194 <path d="M8.8 11l7.4-5.5"></path>195 <path d="M8.8 13l7.4 5.5"></path>196 </svg>197 </div>198 </div>199 </div>200 201 <div class="hero-title">Positive Start</div>202 203 <div class="plant-placeholder">[IMG: Green Plant]</div>204 205 <div class="play-fab">206 <svg viewBox="0 0 24 24">207 <path d="M8 5l12 7-12 7z"></path>208 </svg>209 </div>210 </div>211 212 <!-- Download bar -->213 <div class="download-bar">214 <div class="download-text">Download</div>215 <div class="toggle"><div class="knob"></div></div>216 </div>217 218 <!-- Content -->219 <div class="content">220 <div class="instructor">221 <div class="avatar">[IMG: Instructor Avatar]</div>222 <div class="name">Deborah Eden Tull</div>223 </div>224 <div class="description">225 Set a positive mood and intention for the day ahead with this 7-day series. It's going to be a great week.226 </div>227 228 <div class="section-title">SESSIONS</div>229 230 <div class="session-list">231 <div class="session-item">232 <div class="left-part">233 <div class="num">1</div>234 <div class="title">Mindful Awareness</div>235 </div>236 <div class="right-part"><div>10:20</div></div>237 </div>238 239 <div class="session-item">240 <div class="left-part">241 <div class="num">2</div>242 <div class="title">Intention</div>243 </div>244 <div class="right-part"><div>10:16</div></div>245 </div>246 247 <div class="session-item">248 <div class="left-part">249 <div class="num">3</div>250 <div class="title">Stop</div>251 </div>252 <div class="right-part">253 <div class="lock">254 <svg viewBox="0 0 24 24">255 <rect x="5" y="10" width="14" height="10" rx="2"></rect>256 <path d="M8 10V7a4 4 0 018 0v3"></path>257 </svg>258 </div>259 <div>10:07</div>260 </div>261 </div>262 263 <div class="session-item">264 <div class="left-part">265 <div class="num">4</div>266 <div class="title">Second Arrow</div>267 </div>268 <div class="right-part">269 <div class="lock">270 <svg viewBox="0 0 24 24">271 <rect x="5" y="10" width="14" height="10" rx="2"></rect>272 <path d="M8 10V7a4 4 0 018 0v3"></path>273 </svg>274 </div>275 <div>10:16</div>276 </div>277 </div>278 279 <div class="session-item">280 <div class="left-part">281 <div class="num">5</div>282 <div class="title">Body Awareness</div>283 </div>284 <div class="right-part">285 <div class="lock">286 <svg viewBox="0 0 24 24">287 <rect x="5" y="10" width="14" height="10" rx="2"></rect>288 <path d="M8 10V7a4 4 0 018 0v3"></path>289 </svg>290 </div>291 <div>15:09</div>292 </div>293 </div>294 295 <div class="session-item">296 <div class="left-part">297 <div class="num">6</div>298 <div class="title">Kindness</div>299 </div>300 <div class="right-part">301 <div class="lock">302 <svg viewBox="0 0 24 24">303 <rect x="5" y="10" width="14" height="10" rx="2"></rect>304 <path d="M8 10V7a4 4 0 018 0v3"></path>305 </svg>306 </div>307 <div>10:13</div>308 </div>309 </div>310 </div>311 </div>312 313 <div class="home-indicator"></div>314</div>315</body>316</html>