GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: #1a1a1a; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: #ffffff;14 box-shadow: 0 10px 40px rgba(0,0,0,0.15);15 border-radius: 0;16 }17 18 /* Header */19 .header {20 position: relative;21 width: 100%;22 height: 560px;23 background: #0d2a56;24 color: #ffffff;25 }26 .statusbar {27 height: 90px;28 padding: 0 40px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 font-weight: 600;33 font-size: 36px;34 opacity: 0.95;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 28px;40 }41 .status-icons svg { fill: none; stroke: #ffffff; stroke-width: 4; }42 43 .back-arrow {44 position: absolute;45 top: 120px;46 left: 30px;47 width: 60px;48 height: 60px;49 }50 .title-block {51 position: absolute;52 left: 40px;53 right: 40px;54 top: 200px;55 }56 .title-block .tag {57 font-size: 40px;58 color: #c9d6ea;59 margin-bottom: 12px;60 }61 .title-block .title {62 font-size: 70px;63 line-height: 1.15;64 font-weight: 800;65 }66 67 /* Summary card */68 .summary-card {69 background: #ffffff;70 border-top: 1px solid #e5e8ef;71 border-bottom: 1px solid #e5e8ef;72 padding: 36px 40px 32px 40px;73 }74 .summary-card .big {75 font-size: 60px;76 font-weight: 700;77 color: #3a3a3a;78 }79 .summary-card .muted {80 font-size: 36px;81 color: #8a8a8a;82 margin-top: 8px;83 }84 85 /* "Up next" card */86 .upnext {87 border-top: 8px solid #1e73d8;88 border-bottom: 1px solid #e8e8e8;89 padding: 36px 40px;90 display: flex;91 align-items: center;92 gap: 30px;93 }94 .circle-icon {95 width: 110px;96 height: 110px;97 border-radius: 55px;98 background: #1aa7ad;99 position: relative;100 flex: 0 0 110px;101 }102 .circle-icon .diamond {103 position: absolute;104 top: 22px;105 left: 22px;106 width: 66px;107 height: 66px;108 background: #6fd3d8;109 transform: rotate(45deg);110 border-radius: 8px;111 opacity: 0.9;112 }113 .upnext .text h4 {114 margin: 0;115 font-size: 40px;116 color: #1e73d8;117 font-weight: 700;118 }119 .upnext .text .title {120 font-size: 46px;121 font-weight: 800;122 margin-top: 8px;123 color: #1a1a1a;124 }125 .upnext .text .sub {126 margin-top: 8px;127 font-size: 32px;128 color: #6b6b6b;129 }130 131 /* Lesson list */132 .lesson-list {133 padding: 20px 40px 0 40px;134 }135 .lesson-item {136 font-size: 44px;137 color: #9aa1a9;138 padding: 28px 0;139 border-bottom: 1px solid #f0f0f0;140 }141 142 /* Second section card */143 .section-card {144 border-top: 1px solid #e8e8e8;145 border-bottom: 1px solid #e8e8e8;146 padding: 36px 40px;147 display: flex;148 align-items: center;149 gap: 30px;150 margin-top: 20px;151 background: #ffffff;152 }153 .circle-icon.cube {154 background: #1aa7ad;155 }156 .cube svg { width: 110px; height: 110px; }157 .section-card .title {158 font-size: 46px;159 font-weight: 800;160 margin: 0;161 color: #1a1a1a;162 }163 .section-card .sub {164 margin-top: 8px;165 font-size: 32px;166 color: #6b6b6b;167 }168 169 .simple-list { padding: 0 40px; }170 .simple-item {171 font-size: 46px;172 color: #707a84;173 padding: 30px 0;174 border-bottom: 1px solid #f0f0f0;175 }176 177 /* Bottom nav */178 .tabbar {179 position: absolute;180 bottom: 80px;181 left: 0;182 width: 100%;183 height: 160px;184 border-top: 1px solid #e6e6e6;185 background: #ffffff;186 display: flex;187 justify-content: space-around;188 align-items: center;189 }190 .tab {191 width: 33.33%;192 height: 100%;193 display: flex;194 flex-direction: column;195 align-items: center;196 justify-content: center;197 gap: 16px;198 color: #8a8f99;199 font-size: 34px;200 }201 .tab svg { width: 60px; height: 60px; stroke: #9aa1a9; fill: none; stroke-width: 5; }202 .tab.active svg { stroke: #1e73d8; }203 .tab.active { color: #1e73d8; font-weight: 700; }204 205 /* Gesture bar */206 .gesture {207 position: absolute;208 bottom: 16px;209 left: 50%;210 transform: translateX(-50%);211 width: 380px;212 height: 16px;213 background: #000000;214 border-radius: 10px;215 opacity: 0.22;216 }217</style>218</head>219<body>220<div id="render-target">221 222 <!-- Header with status bar and title -->223 <div class="header">224 <div class="statusbar">225 <div>8:35</div>226 <div class="status-icons">227 <!-- small phone icon -->228 <svg width="40" height="40" viewBox="0 0 48 48">229 <rect x="11" y="6" width="26" height="36" rx="4"></rect>230 <rect x="20" y="35" width="8" height="3"></rect>231 </svg>232 <!-- cloud icon -->233 <svg width="40" height="40" viewBox="0 0 48 48">234 <path d="M14 30c-5 0-9-3-9-7s4-7 9-7c1-6 7-9 12-7 5 2 7 8 5 12h2c4 0 7 3 7 6s-3 7-8 7H14z"></path>235 </svg>236 <!-- wifi icon -->237 <svg width="40" height="40" viewBox="0 0 48 48">238 <path d="M8 20c12-10 20-10 32 0"></path>239 <path d="M14 26c8-7 12-7 20 0"></path>240 <path d="M20 32c4-3 4-3 8 0"></path>241 </svg>242 <!-- battery icon -->243 <svg width="40" height="40" viewBox="0 0 48 48">244 <rect x="6" y="12" width="32" height="20" rx="3"></rect>245 <rect x="39" y="18" width="4" height="8" rx="1" fill="#ffffff" stroke="#ffffff"></rect>246 </svg>247 </div>248 </div>249 250 <!-- Back arrow -->251 <svg class="back-arrow" viewBox="0 0 48 48">252 <path d="M30 8 L14 24 L30 40" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>253 </svg>254 255 <div class="title-block">256 <div class="tag">Math</div>257 <div class="title">Basic geometry and measurement</div>258 </div>259 </div>260 261 <!-- Mastery summary -->262 <div class="summary-card">263 <div class="big">0/12,600 (0%)</div>264 <div class="muted">Mastery Points</div>265 </div>266 267 <!-- Up next card -->268 <div class="upnext">269 <div class="circle-icon">270 <div class="diamond"></div>271 </div>272 <div class="text">273 <h4>Up next for you</h4>274 <div class="title">Intro to area and perimeter</div>275 <div class="sub">0/1,800 possible mastery points</div>276 </div>277 </div>278 279 <!-- Lesson list -->280 <div class="lesson-list">281 <div class="lesson-item">Count unit squares to find area</div>282 <div class="lesson-item">Area formula intuition</div>283 <div class="lesson-item">Multiply to find area</div>284 <div class="lesson-item">Area and the distributive property</div>285 <div class="lesson-item">Decompose figures to find area</div>286 <div class="lesson-item">Perimeter intro</div>287 <div class="lesson-item">Perimeters of polygons with missing side lengths</div>288 <div class="lesson-item">Perimeter word problems</div>289 <div class="lesson-item">Comparing area and perimeter</div>290 <div class="lesson-item">Area versus perimeter</div>291 </div>292 293 <!-- Second section -->294 <div class="section-card">295 <div class="circle-icon cube">296 <svg viewBox="0 0 110 110">297 <g stroke="#e9ffff" stroke-width="4" fill="none">298 <rect x="28" y="28" width="54" height="54"></rect>299 <line x1="28" y1="28" x2="55" y2="12"></line>300 <line x1="82" y1="28" x2="55" y2="12"></line>301 <line x1="82" y1="82" x2="55" y2="96"></line>302 <line x1="28" y1="82" x2="55" y2="96"></line>303 </g>304 </svg>305 </div>306 <div>307 <div class="title">Intro to mass and volume</div>308 <div class="sub">0/400 possible mastery points</div>309 </div>310 </div>311 312 <div class="simple-list">313 <div class="simple-item">Mass</div>314 <div class="simple-item">Volume</div>315 </div>316 317 <!-- Bottom navigation -->318 <div class="tabbar">319 <div class="tab">320 <svg viewBox="0 0 48 48">321 <path d="M24 6 L38 14 L38 34 L10 34 L10 14 Z"></path>322 </svg>323 <div>Home</div>324 </div>325 <div class="tab active">326 <svg viewBox="0 0 48 48">327 <circle cx="20" cy="20" r="12"></circle>328 <line x1="32" y1="32" x2="44" y2="44" stroke-linecap="round"></line>329 </svg>330 <div>Explore</div>331 </div>332 <div class="tab">333 <svg viewBox="0 0 48 48">334 <path d="M14 8 H34 V40 L24 34 L14 40 Z"></path>335 </svg>336 <div>Bookmarks</div>337 </div>338 </div>339 340 <!-- Gesture bar -->341 <div class="gesture"></div>342 343</div>344</body>345</html>