GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Learning Content UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #FFFFFF;13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 88px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 40px;27 font-weight: 600;28 font-size: 40px;29 color: #333;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon {37 width: 48px;38 height: 48px;39 }40 41 /* Header */42 .header {43 position: absolute;44 top: 88px;45 left: 0;46 width: 1080px;47 padding: 24px 40px 16px 40px;48 }49 .header-row {50 display: flex;51 align-items: center;52 justify-content: space-between;53 }54 .title-wrap {55 display: flex;56 align-items: center;57 gap: 24px;58 }59 .back-btn {60 width: 64px; height: 64px; border-radius: 16px;61 display: flex; align-items: center; justify-content: center;62 background: #F3F4F6;63 }64 .page-title {65 font-size: 64px;66 font-weight: 700;67 color: #222;68 }69 .header-actions {70 display: flex; align-items: center; gap: 24px;71 }72 .search-btn, .avatar {73 width: 64px; height: 64px; border-radius: 32px;74 display: flex; align-items: center; justify-content: center;75 }76 .search-btn { background: #F3F4F6; }77 .avatar { background: #EEE; border: 2px solid #DDD; font-size: 26px; color: #333; }78 79 /* Content area */80 .content {81 position: absolute;82 top: 230px;83 left: 0;84 width: 1080px;85 padding: 0 36px 36px 36px;86 }87 88 /* Top cards grid */89 .cards-grid {90 display: grid;91 grid-template-columns: 1fr 1fr;92 gap: 28px;93 margin-top: 16px;94 }95 .card {96 border-radius: 28px;97 padding: 28px;98 min-height: 220px;99 position: relative;100 }101 .card h3 {102 margin: 0;103 font-size: 44px;104 font-weight: 800;105 color: #234;106 }107 .card p {108 margin: 10px 0 0 0;109 font-size: 32px;110 line-height: 42px;111 color: #4b5563;112 max-width: 520px;113 }114 .img-ph {115 position: absolute;116 right: 22px;117 bottom: 18px;118 width: 220px;119 height: 120px;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 border-radius: 16px;123 display: flex; align-items: center; justify-content: center;124 color: #757575; font-size: 24px;125 }126 .mint { background: #E6FBF5; }127 .beige { background: #FFF6EA; }128 .blue { background: #E7F6FF; }129 130 /* Language chips */131 .lang-section {132 margin-top: 40px;133 }134 .langs-grid {135 display: grid;136 grid-template-columns: repeat(5, 1fr);137 gap: 34px 28px;138 padding: 10px 0;139 }140 .lang-item {141 display: flex;142 flex-direction: column;143 align-items: center;144 gap: 18px;145 }146 .lang-circle {147 width: 120px; height: 120px; border-radius: 60px;148 display: flex; align-items: center; justify-content: center;149 font-size: 42px; font-weight: 800; color: #fff;150 box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;151 }152 .lang-label {153 font-size: 30px; color: #374151; font-weight: 600;154 }155 .indicator {156 width: 120px; height: 12px; background: #E5E7EB; border-radius: 6px;157 margin: 10px auto 0 auto;158 position: relative;159 }160 .indicator::after {161 content: "";162 position: absolute;163 left: 70px; top: 0;164 width: 120px; height: 12px; background: #E5E7EB; border-radius: 6px;165 }166 167 /* Tabs */168 .tabs {169 display: flex;170 gap: 44px;171 margin-top: 34px;172 font-size: 36px; font-weight: 700;173 color: #4B5563;174 }175 .tab {176 padding: 18px 8px;177 border-bottom: 6px solid transparent;178 }179 .tab.active {180 color: #111827;181 border-bottom-color: #4A90E2;182 }183 184 /* Section heading */185 .section-title {186 margin-top: 36px;187 font-size: 48px; font-weight: 800; color: #111827;188 }189 190 /* HelloWords big block */191 .hello-words {192 margin-top: 18px;193 background: #E7FBF5;194 border-radius: 32px;195 padding: 28px;196 }197 .hw-top {198 display: flex; align-items: center; justify-content: space-between;199 }200 .hw-title {201 display: flex; align-items: center; gap: 18px;202 }203 .hw-title h4 {204 font-size: 48px; margin: 0; font-weight: 800; color: #0F172A;205 }206 .chevron {207 width: 48px; height: 48px; background: #D4F4EA; border-radius: 24px;208 display: flex; align-items: center; justify-content: center;209 }210 .hw-sub {211 margin-top: 12px; font-size: 32px; color: #475569;212 }213 .hw-grid {214 display: grid;215 grid-template-columns: repeat(3, 1fr);216 gap: 28px;217 margin-top: 24px;218 }219 .small-card {220 background: #FFF; border-radius: 24px; padding: 26px;221 box-shadow: 0 1px 0 rgba(0,0,0,0.04);222 }223 .small-top {224 display: flex; align-items: center; gap: 16px;225 }226 .mini-icon {227 width: 72px; height: 72px; border-radius: 20px; background: #EAF5F0;228 display: flex; align-items: center; justify-content: center;229 color: #2F855A; font-weight: 800; font-size: 30px;230 }231 .small-title {232 font-size: 40px; font-weight: 800; margin: 0; color: #1F2937;233 }234 .small-sub {235 font-size: 32px; color: #6B7280; margin-top: 8px;236 }237</style>238</head>239<body>240<div id="render-target">241 242 <!-- Status Bar -->243 <div class="status-bar">244 <div>12:30</div>245 <div class="status-right">246 <!-- Simple wifi icon -->247 <svg class="icon" viewBox="0 0 24 24">248 <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none" />249 <path d="M5 11c4-3 10-3 14 0" stroke="#333" stroke-width="2" fill="none" />250 <path d="M8 14c2-2 6-2 8 0" stroke="#333" stroke-width="2" fill="none" />251 <circle cx="12" cy="18" r="2" fill="#333"></circle>252 </svg>253 <!-- Battery icon -->254 <svg class="icon" viewBox="0 0 24 24">255 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"></rect>256 <rect x="4" y="8" width="12" height="8" fill="#333"></rect>257 <rect x="20" y="10" width="2" height="4" fill="#333"></rect>258 </svg>259 </div>260 </div>261 262 <!-- Header -->263 <div class="header">264 <div class="header-row">265 <div class="title-wrap">266 <div class="back-btn">267 <svg width="36" height="36" viewBox="0 0 24 24">268 <path d="M15 18l-6-6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>269 </svg>270 </div>271 <div class="page-title">Learning Content</div>272 </div>273 <div class="header-actions">274 <div class="search-btn">275 <svg width="36" height="36" viewBox="0 0 24 24">276 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"></circle>277 <path d="M21 21l-5-5" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>278 </svg>279 </div>280 <div class="avatar">Pass</div>281 </div>282 </div>283 </div>284 285 <!-- Content -->286 <div class="content">287 288 <!-- Top cards -->289 <div class="cards-grid">290 <div class="card mint">291 <h3>HelloWords</h3>292 <p>Learn a new set of words for free!</p>293 <div class="img-ph">[IMG: Timer & Calendar]</div>294 </div>295 <div class="card mint">296 <h3>HelloItalian</h3>297 <p>Embark on an audio language journey!</p>298 <div class="img-ph">[IMG: Headphones & Bag]</div>299 </div>300 <div class="card beige">301 <h3>Pro Partner</h3>302 <p>Summer Sale: Super Discount is On!</p>303 <div class="img-ph">[IMG: Watermelon & Float]</div>304 </div>305 <div class="card blue">306 <h3>1-on-1 LiveClass</h3>307 <p>Up to 45% OFF LiveClass</p>308 <div class="img-ph">[IMG: Beach & Watermelon]</div>309 </div>310 </div>311 312 <!-- Languages -->313 <div class="lang-section">314 <div class="langs-grid">315 <div class="lang-item">316 <div class="lang-circle" style="background:#34D399;">IT</div>317 <div class="lang-label">Italian</div>318 </div>319 <div class="lang-item">320 <div class="lang-circle" style="background:#7C83FD;">EN</div>321 <div class="lang-label">English</div>322 </div>323 <div class="lang-item">324 <div class="lang-circle" style="background:#F59EB0;">가</div>325 <div class="lang-label">Korean</div>326 </div>327 <div class="lang-item">328 <div class="lang-circle" style="background:#F75555;">あ</div>329 <div class="lang-label">Japanese</div>330 </div>331 <div class="lang-item">332 <div class="lang-circle" style="background:#FFB74D;">ES</div>333 <div class="lang-label">Spanish</div>334 </div>335 336 <div class="lang-item">337 <div class="lang-circle" style="background:#F87171;">中</div>338 <div class="lang-label">Chinese</div>339 </div>340 <div class="lang-item">341 <div class="lang-circle" style="background:#5A93FF;">FR</div>342 <div class="lang-label">French</div>343 </div>344 <div class="lang-item">345 <div class="lang-circle" style="background:#F0C84E;">DE</div>346 <div class="lang-label">German</div>347 </div>348 <div class="lang-item">349 <div class="lang-circle" style="background:#66B3FF;">RU</div>350 <div class="lang-label">Russian</div>351 </div>352 <div class="lang-item">353 <div class="lang-circle" style="background:#FA7E3D;">AR</div>354 <div class="lang-label">Arabic</div>355 </div>356 </div>357 <div class="indicator"></div>358 </div>359 360 <!-- Tabs -->361 <div class="tabs">362 <div class="tab active">All</div>363 <div class="tab">Words</div>364 <div class="tab">LiveClass</div>365 <div class="tab">Listening</div>366 <div class="tab">Alphabet</div>367 </div>368 369 <!-- Words section -->370 <div class="section-title">Words</div>371 372 <div class="hello-words">373 <div class="hw-top">374 <div class="hw-title">375 <h4>HelloWords</h4>376 </div>377 <div class="chevron">378 <svg width="26" height="26" viewBox="0 0 24 24">379 <path d="M9 6l6 6-6 6" stroke="#0F172A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>380 </svg>381 </div>382 </div>383 <div class="hw-sub">Play words game</div>384 385 <div class="hw-grid">386 <div class="small-card">387 <div class="small-top">388 <div class="mini-icon">S</div>389 <h5 class="small-title">Sports</h5>390 </div>391 <div class="small-sub">Competition</div>392 </div>393 394 <div class="small-card">395 <div class="small-top">396 <div class="mini-icon">S</div>397 <h5 class="small-title">Sports</h5>398 </div>399 <div class="small-sub">Sports</div>400 </div>401 402 <div class="small-card">403 <div class="small-top">404 <div class="mini-icon">A</div>405 <h5 class="small-title">Animals</h5>406 </div>407 <div class="small-sub">Pets</div>408 </div>409 </div>410 </div>411 412 </div>413 414</div>415</body>416</html>