GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Explore - Mobile UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px; position: relative; overflow: hidden;9    background: #F6F7FB; color: #111;10  }11 12  /* Status bar */13  .status-bar {14    position: absolute; top: 0; left: 0; width: 100%; height: 120px;15    background: #2B2D31; color: #fff;16  }17  .status-inner {18    position: absolute; top: 36px; left: 40px; right: 40px; height: 48px;19    display: flex; align-items: center; justify-content: space-between;20    font-weight: 600; font-size: 36px;21  }22  .status-icons { display: flex; gap: 22px; align-items: center; }23  .icon { width: 40px; height: 40px; display: inline-block; }24  .icon svg { width: 100%; height: 100%; fill: #fff; }25 26  /* Page content */27  .page {28    position: absolute; top: 120px; left: 0; right: 0; bottom: 180px;29    overflow: hidden;30  }31  .content {32    padding: 36px 48px 24px;33  }34  .title {35    font-size: 72px; font-weight: 800; margin-bottom: 36px;36  }37 38  /* Search */39  .search-bar {40    display: flex; align-items: center; gap: 24px;41    background: #fff; border: 2px solid #E3E6EA; border-radius: 24px;42    height: 120px; padding: 0 36px; box-shadow: 0 2px 0 rgba(0,0,0,0.02);43    margin-bottom: 40px;44  }45  .search-input {46    font-size: 40px; color: #6A717A; flex: 1;47  }48  .search-icon svg { fill: #7A8699; }49 50  /* Section headers */51  .section-row {52    display: flex; align-items: baseline; justify-content: space-between;53    margin-top: 16px; margin-bottom: 24px;54  }55  .section-title {56    font-size: 54px; font-weight: 800;57  }58  .see-all {59    font-size: 40px; color: #6A717A; font-weight: 600;60  }61 62  /* Topic pills */63  .pill-row { display: flex; gap: 24px; margin-bottom: 40px; }64  .pill {65    padding: 28px 36px; border-radius: 24px; font-size: 42px; font-weight: 800; color: #fff;66  }67  .pill.blue { background: #3D73E3; }68  .pill.teal { background: #225D78; }69  .pill.green { background: #2A7B53; }70 71  /* Cards */72  .cards-row { display: flex; gap: 28px; margin-top: 16px; }73  .card {74    width: 330px; background: #fff; border-radius: 24px; overflow: hidden;75    box-shadow: 0 1px 0 rgba(0,0,0,0.03); border: 1px solid #E7EAF0;76  }77  .card-img {78    height: 200px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;79    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px; text-align: center; padding: 10px;80  }81  .card-body { padding: 22px 22px 28px; }82  .card-title { font-size: 44px; font-weight: 800; line-height: 1.2; margin-bottom: 14px; }83  .card-sub { font-size: 34px; color: #333; margin-bottom: 6px; }84  .card-note { font-size: 34px; color: #666; margin-bottom: 18px; }85  .rating { font-size: 38px; color: #111; }86  .rating .star { color: #111; margin-right: 10px; }87 88  /* Degree cards */89  .degree-row { display: flex; gap: 28px; margin-top: 16px; }90  .degree-card {91    width: 330px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;92    border-radius: 18px; display: flex; align-items: center; justify-content: center;93    color: #757575; font-size: 32px; text-align: center; padding: 10px;94  }95 96  /* Bottom nav */97  .bottom-bar {98    position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: #FFFFFF;99    border-top: 1px solid #E2E6EC;100  }101  .nav-inner { height: 140px; display: flex; justify-content: space-around; align-items: center; }102  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #6A717A; }103  .nav-item.active { color: #2549D8; }104  .nav-icon { width: 72px; height: 72px; }105  .nav-icon svg { width: 100%; height: 100%; }106  .nav-label { font-size: 34px; font-weight: 700; }107  .home-indicator {108    position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);109    width: 420px; height: 12px; background: #0F0F0F; border-radius: 8px; opacity: 0.8;110  }111</style>112</head>113<body>114<div id="render-target">115  <!-- Status Bar -->116  <div class="status-bar">117    <div class="status-inner">118      <div>8:11</div>119      <div class="status-icons">120        <!-- Wi-Fi -->121        <span class="icon">122          <svg viewBox="0 0 24 24">123            <path d="M12 20c.9 0 1.7-.8 1.7-1.7S12.9 16.6 12 16.6s-1.7.8-1.7 1.7.8 1.7 1.7 1.7zM2 8.4l2 2c2.5-2.5 5.8-3.9 9.4-3.9s6.9 1.4 9.4 3.9l2-2C21.2 5.5 16.8 3.9 13.4 3.9 10 3.9 5.6 5.5 2 8.4zm4 4l2 2c1.9-1.9 4.4-3 7-3s5.1 1.1 7 3l2-2c-2.5-2.5-5.8-3.9-9-3.9-3.2 0-6.5 1.4-9 3.9z"/>124          </svg>125        </span>126        <!-- Battery -->127        <span class="icon">128          <svg viewBox="0 0 24 24">129            <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>130            <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>131            <rect x="20" y="9" width="2" height="6"></rect>132          </svg>133        </span>134      </div>135    </div>136  </div>137 138  <!-- Page content -->139  <div class="page">140    <div class="content">141      <div class="title">Explore</div>142 143      <!-- Search -->144      <div class="search-bar">145        <span class="search-icon icon">146          <svg viewBox="0 0 24 24">147            <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"></path>148          </svg>149        </span>150        <div class="search-input">Search Catalog</div>151      </div>152 153      <!-- Topics -->154      <div class="section-row">155        <div class="section-title">Topics</div>156        <div class="see-all">See All</div>157      </div>158      <div class="pill-row">159        <div class="pill blue">Arts and Humanities</div>160        <div class="pill teal">Business</div>161        <div class="pill green">Computer Science</div>162      </div>163 164      <!-- My Coursera -->165      <div class="section-title" style="margin-top: 20px;">My Coursera</div>166 167      <!-- Most Popular Certificates -->168      <div class="section-row" style="margin-top: 32px;">169        <div class="section-title">Most Popular Certificates</div>170        <div class="see-all">See All</div>171      </div>172 173      <div class="cards-row">174        <!-- Card 1 -->175        <div class="card">176          <div class="card-img">[IMG: Workspace with monitors]</div>177          <div class="card-body">178            <div class="card-title">Google Data Analytics</div>179            <div class="card-sub">Google</div>180            <div class="card-note">Professional Certificate</div>181            <div class="rating"><span class="star">★</span>4.8 (116k)</div>182          </div>183        </div>184 185        <!-- Card 2 -->186        <div class="card">187          <div class="card-img">[IMG: People collaborating at desk]</div>188          <div class="card-body">189            <div class="card-title">Google IT Support</div>190            <div class="card-sub">Google</div>191            <div class="card-note">Professional Certificate</div>192            <div class="rating"><span class="star">★</span>4.8 (162k)</div>193          </div>194        </div>195 196        <!-- Card 3 -->197        <div class="card">198          <div class="card-img">[IMG: Casual outdoor portrait]</div>199          <div class="card-body">200            <div class="card-title">Google Project Management</div>201            <div class="card-sub">Google</div>202            <div class="card-note">Professional Certificate</div>203            <div class="rating"><span class="star">★</span>4.8 (86k)</div>204          </div>205        </div>206      </div>207 208      <!-- Earn Your Degree -->209      <div class="section-row" style="margin-top: 64px;">210        <div class="section-title">Earn Your Degree</div>211        <div class="see-all">See All</div>212      </div>213      <div class="degree-row">214        <div class="degree-card">[IMG: University hallway flags]</div>215        <div class="degree-card">[IMG: City skyline tower]</div>216        <div class="degree-card">[IMG: London sign board]</div>217      </div>218    </div>219  </div>220 221  <!-- Bottom Navigation -->222  <div class="bottom-bar">223    <div class="nav-inner">224      <div class="nav-item active">225        <div class="nav-icon">226          <svg viewBox="0 0 24 24">227            <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" fill="#2549D8"></path>228          </svg>229        </div>230        <div class="nav-label">Explore</div>231      </div>232      <div class="nav-item">233        <div class="nav-icon">234          <svg viewBox="0 0 24 24">235            <path d="M6 4h12v2H6zm0 4h12v2H6zm0 4h12v2H6zm0 4h12v2H6z" fill="#6A717A"></path>236          </svg>237        </div>238        <div class="nav-label">Learn</div>239      </div>240      <div class="nav-item">241        <div class="nav-icon">242          <svg viewBox="0 0 24 24">243            <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z" fill="#6A717A"></path>244          </svg>245        </div>246        <div class="nav-label">Profile</div>247      </div>248    </div>249    <div class="home-indicator"></div>250  </div>251</div>252</body>253</html>