GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Learn Screen</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;11    color: #111;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #f3f5f8;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 140px;28    background: #212529;29    color: #fff;30    display: flex;31    align-items: center;32    justify-content: space-between;33    padding: 0 40px;34    box-sizing: border-box;35  }36  .status-left {37    font-weight: 600;38    font-size: 42px;39    letter-spacing: 1px;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 28px;45  }46  .status-icon svg {47    display: block;48    height: 48px;49    width: 70px;50    fill: none;51    stroke: #fff;52    stroke-width: 6;53  }54 55  /* Header content */56  .gear {57    position: absolute;58    top: 200px;59    right: 40px;60    width: 70px;61    height: 70px;62  }63  .title {64    position: absolute;65    top: 210px;66    left: 40px;67    font-size: 88px;68    font-weight: 800;69    letter-spacing: 0.5px;70  }71 72  /* Center illustration and messaging */73  .center-wrap {74    position: absolute;75    top: 520px;76    left: 0;77    width: 1080px;78    text-align: center;79    padding: 0 60px;80    box-sizing: border-box;81  }82  .book-blob {83    position: relative;84    width: 220px;85    height: 170px;86    margin: 0 auto 70px auto;87  }88  .blob {89    position: absolute;90    width: 220px;91    height: 150px;92    background: #dfeefa;93    border-radius: 70px;94    left: 0;95    top: 20px;96  }97  .book-icon {98    position: absolute;99    left: 10px;100    top: 0;101    width: 200px;102    height: 170px;103  }104  .headline {105    font-size: 58px;106    font-weight: 800;107    line-height: 1.25;108    margin: 24px 0 22px 0;109  }110  .subhead {111    font-size: 38px;112    color: #6c757d;113    line-height: 1.4;114    margin-bottom: 70px;115  }116  .cta {117    display: inline-block;118    width: 920px;119    height: 140px;120    background: #2f5de7;121    color: #fff;122    font-weight: 800;123    font-size: 46px;124    border-radius: 22px;125    line-height: 140px;126    text-align: center;127    box-shadow: 0 8px 16px rgba(47,93,231,0.25);128  }129 130  /* Bottom navigation */131  .bottom-nav {132    position: absolute;133    bottom: 0;134    left: 0;135    width: 1080px;136    height: 200px;137    background: #f2f2f2;138    border-top: 1px solid #dcdcdc;139    display: flex;140    justify-content: space-around;141    align-items: center;142  }143  .nav-item {144    width: 280px;145    text-align: center;146    color: #8a8f97;147    font-size: 36px;148  }149  .nav-item .icon {150    margin: 0 auto 18px auto;151    width: 64px;152    height: 64px;153  }154  .nav-item.selected {155    color: #2f5de7;156    font-weight: 700;157  }158  .nav-item.selected .icon svg {159    stroke: #2f5de7;160    fill: none;161  }162  .nav-item .icon svg {163    width: 64px;164    height: 64px;165    stroke: #8a8f97;166    stroke-width: 7;167    fill: none;168  }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Status Bar -->175  <div class="status-bar">176    <div class="status-left">8:10</div>177    <div class="status-right">178      <!-- WiFi -->179      <div class="status-icon">180        <svg viewBox="0 0 64 48">181          <path d="M5 12c16-14 38-14 54 0"></path>182          <path d="M13 22c11-9 27-9 38 0"></path>183          <path d="M22 31c6-5 14-5 20 0"></path>184          <circle cx="32" cy="40" r="4" fill="#fff" stroke="none"></circle>185        </svg>186      </div>187      <!-- Battery -->188      <div class="status-icon">189        <svg viewBox="0 0 80 48">190          <rect x="3" y="8" width="64" height="32" rx="6"></rect>191          <rect x="69" y="16" width="8" height="16" rx="2" fill="#fff" stroke="none"></rect>192          <polygon points="32,12 22,28 36,28 28,44 50,20 36,20" fill="#fff" stroke="none"></polygon>193        </svg>194      </div>195    </div>196  </div>197 198  <!-- Gear icon -->199  <div class="gear">200    <svg viewBox="0 0 100 100">201      <circle cx="50" cy="50" r="16" fill="none" stroke="#777" stroke-width="6"></circle>202      <!-- spokes -->203      <rect x="47" y="6" width="6" height="14" fill="#777"></rect>204      <rect x="47" y="80" width="6" height="14" fill="#777"></rect>205      <rect x="6" y="47" width="14" height="6" fill="#777"></rect>206      <rect x="80" y="47" width="14" height="6" fill="#777"></rect>207      <rect x="17" y="17" width="10" height="6" transform="rotate(-45 22 20)" fill="#777"></rect>208      <rect x="73" y="77" width="10" height="6" transform="rotate(-45 78 80)" fill="#777"></rect>209      <rect x="73" y="17" width="10" height="6" transform="rotate(45 78 20)" fill="#777"></rect>210      <rect x="17" y="77" width="10" height="6" transform="rotate(45 22 80)" fill="#777"></rect>211    </svg>212  </div>213 214  <!-- Title -->215  <div class="title">Learn</div>216 217  <!-- Center content -->218  <div class="center-wrap">219    <div class="book-blob">220      <div class="blob"></div>221      <svg class="book-icon" viewBox="0 0 200 170">222        <!-- open book outline -->223        <path d="M20 35 h70 a18 18 0 0 1 18 18 v70 h-88 z" fill="none" stroke="#333" stroke-width="6" />224        <path d="M180 35 h-70 a18 18 0 0 0 -18 18 v70 h88 z" fill="none" stroke="#333" stroke-width="6" />225        <path d="M100 35 v108" stroke="#333" stroke-width="6"/>226        <path d="M20 35 c28 22 60 22 88 0" stroke="#333" stroke-width="6" fill="none"/>227        <path d="M180 35 c-28 22 -60 22 -88 0" stroke="#333" stroke-width="6" fill="none"/>228      </svg>229    </div>230 231    <div class="headline">Enroll in a course to view your progress</div>232    <div class="subhead">Start by enrolling in a course and learn something new.</div>233    <div class="cta">Explore courses</div>234  </div>235 236  <!-- Bottom Navigation -->237  <div class="bottom-nav">238    <div class="nav-item">239      <div class="icon">240        <svg viewBox="0 0 64 64">241          <circle cx="28" cy="28" r="18"></circle>242          <line x1="44" y1="44" x2="60" y2="60" stroke-width="8" stroke="#8a8f97"></line>243        </svg>244      </div>245      <div>Explore</div>246    </div>247    <div class="nav-item selected">248      <div class="icon">249        <svg viewBox="0 0 64 64">250          <path d="M8 14 h22 a8 8 0 0 1 8 8 v24 h-30 z"></path>251          <path d="M56 14 h-22 a8 8 0 0 0 -8 8 v24 h30 z"></path>252          <line x1="32" y1="14" x2="32" y2="54" stroke-width="7"></line>253        </svg>254      </div>255      <div>Learn</div>256    </div>257    <div class="nav-item">258      <div class="icon">259        <svg viewBox="0 0 64 64">260          <circle cx="32" cy="22" r="12"></circle>261          <path d="M12 56 c0-12 12-20 20-20 s20 8 20 20" stroke="#8a8f97" stroke-width="7" fill="none"></path>262        </svg>263      </div>264      <div>Profile</div>265    </div>266  </div>267 268</div>269</body>270</html>