GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Data Science UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 border-radius: 0;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #2c2c2c;24 color: #fff;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 40px;29 box-sizing: border-box;30 font-size: 40px;31 letter-spacing: 0.5px;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .icon-wifi, .icon-battery {39 width: 48px; height: 48px;40 }41 42 /* Header */43 .header {44 position: absolute;45 top: 120px;46 left: 0;47 width: 1080px;48 height: 140px;49 background: #ffffff;50 display: flex;51 align-items: center;52 box-sizing: border-box;53 padding: 0 28px;54 border-bottom: 1px solid #e9e9e9;55 }56 .back-btn {57 width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;58 }59 .title {60 font-size: 54px; font-weight: 700; color: #222;61 }62 .header-spacer { flex: 1; }63 .link {64 font-size: 40px; color: #6b6b6b;65 }66 67 /* Content area */68 .content {69 position: absolute;70 top: 260px;71 left: 0;72 width: 1080px;73 height: 1940px;74 overflow: hidden;75 box-sizing: border-box;76 padding: 32px;77 background: #ffffff;78 }79 80 /* Chips */81 .chip-row {82 display: flex;83 gap: 24px;84 margin-top: 8px;85 margin-bottom: 28px;86 }87 .chip {88 padding: 28px 36px;89 border-radius: 20px;90 font-size: 40px;91 font-weight: 700;92 color: #fff;93 white-space: nowrap;94 }95 .chip.blue { background: #3f7bf3; }96 .chip.navy { background: #1f536f; }97 .chip.green { background: #357c4f; }98 99 /* Section headers */100 .section-header {101 display: flex;102 align-items: center;103 margin-top: 18px;104 margin-bottom: 22px;105 }106 .section-title {107 font-size: 54px;108 font-weight: 800;109 color: #111;110 line-height: 1.2;111 }112 .section-header .spacer { flex: 1; }113 .section-header .see-all {114 font-size: 40px;115 color: #6b6b6b;116 }117 118 /* Horizontal list */119 .h-scroll {120 display: flex;121 gap: 28px;122 overflow: hidden;123 padding-bottom: 8px;124 }125 126 /* Course cards */127 .card {128 width: 640px;129 border-radius: 20px;130 background: #fff;131 border: 1px solid #e1e1e1;132 box-shadow: 0 2px 6px rgba(0,0,0,0.06);133 }134 .img {135 width: 100%;136 height: 260px;137 background: #E0E0E0;138 border-bottom: 1px solid #BDBDBD;139 display: flex;140 align-items: center;141 justify-content: center;142 color: #757575;143 font-size: 32px;144 }145 .card-body {146 padding: 24px;147 }148 .course-title {149 font-size: 44px;150 font-weight: 700;151 color: #222;152 line-height: 1.15;153 margin-bottom: 18px;154 }155 .meta {156 font-size: 36px;157 color: #666;158 margin-bottom: 8px;159 }160 .rating {161 display: flex;162 align-items: center;163 gap: 14px;164 font-size: 36px;165 color: #222;166 margin-top: 10px;167 }168 .star { width: 36px; height: 36px; }169 170 /* Degree cards */171 .degree-card .img { height: 280px; }172 .degree-title {173 font-size: 44px;174 font-weight: 700;175 color: #222;176 line-height: 1.15;177 margin-bottom: 10px;178 }179 .degree-meta {180 font-size: 36px;181 color: #666;182 }183 184 /* Bottom navigation */185 .bottom-nav {186 position: absolute;187 bottom: 80px;188 left: 0;189 width: 1080px;190 height: 180px;191 background: #ffffff;192 border-top: 1px solid #e6e6e6;193 display: flex;194 align-items: center;195 justify-content: space-around;196 }197 .nav-item {198 display: flex;199 flex-direction: column;200 align-items: center;201 gap: 14px;202 color: #7a7a7a;203 font-size: 34px;204 }205 .nav-item.active { color: #000; }206 .nav-icon { width: 60px; height: 60px; }207 208 /* Home bar indicator */209 .home-indicator {210 position: absolute;211 bottom: 20px;212 left: 50%;213 transform: translateX(-50%);214 width: 720px;215 height: 16px;216 background: #000000;217 border-radius: 10px;218 opacity: 0.8;219 }220</style>221</head>222<body>223<div id="render-target">224 225 <!-- Status Bar -->226 <div class="status-bar">227 <div>8:12</div>228 <div class="status-right">229 <!-- WiFi -->230 <svg class="icon-wifi" viewBox="0 0 24 24">231 <path d="M12 19c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6.2-6.2l1.4 1.4C8.4 12 10.2 12 12 12s3.6 0 4.8 2.2l1.4-1.4C16.7 10.1 14.4 9 12 9s-4.7 1.1-6.2 3.8zM3 8l1.4 1.4C6.5 6.9 9.2 6 12 6s5.5.9 7.6 3.4L21 8C18.4 5.2 15.3 4 12 4S5.6 5.2 3 8z" fill="#fff"/>232 </svg>233 <!-- Battery -->234 <svg class="icon-battery" viewBox="0 0 24 24">235 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>236 <rect x="4" y="8" width="14" height="8" fill="#fff"/>237 <rect x="20" y="10" width="2" height="4" fill="#fff"/>238 </svg>239 </div>240 </div>241 242 <!-- Header -->243 <div class="header">244 <div class="back-btn">245 <svg viewBox="0 0 24 24" width="60" height="60">246 <path d="M15 18l-6-6 6-6" stroke="#000" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>247 </svg>248 </div>249 <div class="title">Data Science</div>250 <div class="header-spacer"></div>251 <div class="link">See All</div>252 </div>253 254 <!-- Content -->255 <div class="content">256 257 <!-- Chips -->258 <div class="chip-row">259 <div class="chip blue">Data Analysis</div>260 <div class="chip navy">Machine Learning</div>261 <div class="chip green">Probability and Statistics</div>262 </div>263 264 <!-- Section: Foundations -->265 <div class="section-header">266 <div class="section-title">Get Started with Data Science<br/>Foundations</div>267 <div class="spacer"></div>268 <div class="see-all">See All</div>269 </div>270 271 <div class="h-scroll">272 <!-- Card 1 -->273 <div class="card">274 <div class="img">[IMG: IBM Data Science Graphic]</div>275 <div class="card-body">276 <div class="course-title">What is Data Science?</div>277 <div class="meta">IBM</div>278 <div class="meta">Course</div>279 <div class="rating">280 <svg class="star" viewBox="0 0 24 24">281 <path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z" fill="#000"/>282 </svg>283 <div>4.7 (63k)</div>284 </div>285 </div>286 </div>287 288 <!-- Card 2 -->289 <div class="card">290 <div class="img">[IMG: Question Mark Graphic]</div>291 <div class="card-body">292 <div class="course-title">Ask Questions to Make Data-Driven Decisions</div>293 <div class="meta">Google</div>294 <div class="meta">Course</div>295 <div class="rating">296 <svg class="star" viewBox="0 0 24 24">297 <path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z" fill="#000"/>298 </svg>299 <div>4.7 (26k)</div>300 </div>301 </div>302 </div>303 304 <!-- Card 3 -->305 <div class="card">306 <div class="img">[IMG: Analytics Chart Graphic]</div>307 <div class="card-body">308 <div class="course-title">Introduction to Data Analytics</div>309 <div class="meta">IBM</div>310 <div class="meta">Course</div>311 <div class="rating">312 <svg class="star" viewBox="0 0 24 24">313 <path d="M12 2l3 6 6 .9-4.4 4.3 1 6-5.6-3-5.6 3 1-6L3 8.9 9 8z" fill="#000"/>314 </svg>315 <div>4.8 (—)</div>316 </div>317 </div>318 </div>319 </div>320 321 <!-- Section: Earn Your Degree -->322 <div class="section-header" style="margin-top: 42px;">323 <div class="section-title">Earn Your Degree</div>324 <div class="spacer"></div>325 <div class="see-all">See All</div>326 </div>327 328 <div class="h-scroll">329 <!-- Degree 1 -->330 <div class="card degree-card">331 <div class="img">[IMG: Campus Building]</div>332 <div class="card-body">333 <div class="degree-title">Bachelor of Science in Data Science & AI</div>334 <div class="degree-meta">Indian Institute of Technology</div>335 </div>336 </div>337 338 <!-- Degree 2 -->339 <div class="card degree-card">340 <div class="img">[IMG: Campus Scene]</div>341 <div class="card-body">342 <div class="degree-title">Master of Data Science</div>343 <div class="degree-meta">Illinois Tech</div>344 </div>345 </div>346 347 <!-- Degree 3 -->348 <div class="card degree-card">349 <div class="img">[IMG: University Grounds]</div>350 <div class="card-body">351 <div class="degree-title">Master of Data Science</div>352 <div class="degree-meta">Arizona State University</div>353 </div>354 </div>355 </div>356 357 </div>358 359 <!-- Bottom Navigation -->360 <div class="bottom-nav">361 <div class="nav-item active">362 <svg class="nav-icon" viewBox="0 0 24 24">363 <circle cx="11" cy="11" r="8" stroke="#000" stroke-width="2" fill="none"/>364 <path d="M20 20l3 3" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round"/>365 </svg>366 <div>Explore</div>367 </div>368 <div class="nav-item">369 <svg class="nav-icon" viewBox="0 0 24 24">370 <rect x="4" y="3" width="16" height="18" rx="2" ry="2" stroke="#7a7a7a" stroke-width="2" fill="none"/>371 <line x1="6" y1="8" x2="18" y2="8" stroke="#7a7a7a" stroke-width="2"/>372 <line x1="6" y1="12" x2="18" y2="12" stroke="#7a7a7a" stroke-width="2"/>373 <line x1="6" y1="16" x2="14" y2="16" stroke="#7a7a7a" stroke-width="2"/>374 </svg>375 <div>Learn</div>376 </div>377 <div class="nav-item">378 <svg class="nav-icon" viewBox="0 0 24 24">379 <circle cx="12" cy="8" r="4" stroke="#7a7a7a" stroke-width="2" fill="none"/>380 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke="#7a7a7a" stroke-width="2" fill="none"/>381 </svg>382 <div>Profile</div>383 </div>384 </div>385 386 <!-- Home indicator -->387 <div class="home-indicator"></div>388 389</div>390</body>391</html>