GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Explore - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#F6F8FB; color:#1a1a1a;11  }12 13  /* Top status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:120px; background:#2E3238; color:#fff;17    display:flex; align-items:center; padding:0 32px; box-sizing:border-box;18    font-weight:600; letter-spacing:0.2px;19  }20  .status-left { flex:1; font-size:40px; }21  .status-right { display:flex; gap:28px; align-items:center; }22  .status-icon svg { width:44px; height:44px; fill:#fff; }23 24  /* Scrollable content */25  .content {26    position:absolute; left:0; right:0; top:120px; bottom:240px;27    overflow-y:auto; padding-bottom:60px;28  }29 30  /* Headings */31  .page-title { font-size:78px; font-weight:800; padding:36px 32px 12px; }32  .section-title { font-size:56px; font-weight:800; padding:28px 32px 8px; }33  .subsection-title { font-size:50px; font-weight:800; padding:26px 32px 8px; }34  .see-all {35    position:absolute; right:32px; font-size:42px; color:#3A3D45; opacity:0.9;36  }37 38  /* Search */39  .search-wrap { padding:16px 32px 16px; }40  .search {41    display:flex; align-items:center; gap:22px;42    background:#fff; border:1px solid #E3E6EA; border-radius:24px;43    height:120px; padding:0 32px; box-sizing:border-box;44    font-size:44px; color:#6b6f76;45  }46  .search svg { width:56px; height:56px; fill:#6b6f76; }47 48  /* Chips */49  .chips { display:flex; align-items:center; gap:24px; padding:18px 32px 14px; }50  .chip {51    display:inline-flex; align-items:center; padding:26px 34px; border-radius:22px;52    color:#fff; font-size:44px; font-weight:700;53  }54  .chip.green { background:#2E8B57; }55  .chip.purple { background:#4B3F98; }56  .chip.red { background:#A22B3B; }57 58  /* Cards grid */59  .cards-section { position:relative; }60  .cards {61    display:flex; gap:32px; padding:16px 32px 10px; flex-wrap:nowrap;62  }63  .card {64    width:320px; background:#fff; border-radius:26px; overflow:hidden;65    box-shadow:0 6px 18px rgba(0,0,0,0.08);66  }67  .card-img {68    width:100%; height:220px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;69    display:flex; align-items:center; justify-content:center; color:#757575;70    font-size:40px; text-align:center; padding:12px; box-sizing:border-box;71  }72  .card-body { padding:22px; }73  .card-title { font-size:44px; font-weight:800; line-height:1.2; }74  .card-sub { font-size:40px; color:#5a5f66; margin-top:8px; }75  .card-sub2 { font-size:40px; color:#5a5f66; margin-top:2px; }76  .rating { display:flex; align-items:center; gap:12px; margin-top:18px; font-size:40px; }77  .rating svg { width:40px; height:40px; fill:#000; }78 79  /* Degree row */80  .degree-row { display:flex; gap:32px; padding:12px 32px 20px; }81  .degree-img {82    width:320px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD;83    display:flex; align-items:center; justify-content:center; color:#757575;84    font-size:36px; text-align:center; padding:12px; box-sizing:border-box; border-radius:18px;85  }86 87  /* Bottom nav */88  .bottom-nav {89    position:absolute; left:0; right:0; bottom:60px; height:190px;90    background:#fff; border-top:1px solid #E3E6EA;91    display:flex; align-items:center; justify-content:space-around;92  }93  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#7b7f86; }94  .nav-item svg { width:64px; height:64px; }95  .nav-item.active { color:#2A5EEA; font-weight:700; }96  .nav-item.active svg { fill:#2A5EEA; }97  .nav-item svg { fill:#7b7f86; }98 99  .home-indicator {100    position:absolute; left:50%; transform:translateX(-50%);101    bottom:16px; width:360px; height:18px; background:#0E0E10; border-radius:10px; opacity:0.85;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Top Status Bar -->109  <div class="status-bar">110    <div class="status-left">8:12</div>111    <div class="status-right">112      <div class="status-icon">113        <!-- Wi-Fi Icon -->114        <svg viewBox="0 0 24 24"><path d="M12 18.5c.9 0 1.7.7 1.7 1.5S12.9 21.5 12 21.5 10.3 20.8 10.3 20s.8-1.5 1.7-1.5zM2 8.5C6.3 5.6 10.6 4.8 12 4.8s5.7.8 10 3.7l-1.7 2C17.3 8 14 7.5 12 7.5s-5.3.5-8.3 3.1L2 8.5zm4.1 5c2.5-1.9 4.8-2.3 5.9-2.3s3.4.4 5.9 2.3l-1.7 2c-2-.9-3.2-1.2-4.2-1.2s-2.2.3-4.2 1.2l-1.7-2z"/></svg>115      </div>116      <div class="status-icon">117        <!-- Battery Icon -->118        <svg viewBox="0 0 24 24"><path d="M18 7h2v10h-2V7zm-1 0H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm1 8H4V9h14v6z"/></svg>119      </div>120    </div>121  </div>122 123  <!-- Scrollable Content -->124  <div class="content">125    <div class="page-title">Explore</div>126 127    <!-- Search -->128    <div class="search-wrap">129      <div class="search">130        <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 015.9 13.6l4.2 4.2-1.4 1.4-4.2-4.2A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z"/></svg>131        <span>Search Catalog</span>132      </div>133    </div>134 135    <!-- Topics -->136    <div class="section-title" style="position:relative;">137      Topics138      <span class="see-all" style="top:32px;">See All</span>139    </div>140    <div class="chips">141      <div class="chip green">Computer Science</div>142      <div class="chip purple">Data Science</div>143      <div class="chip red">Information Technology</div>144    </div>145 146    <!-- My Coursera -->147    <div class="subsection-title">My Coursera</div>148 149    <!-- Most Popular Certificates -->150    <div class="section-title cards-section" style="margin-top:20px;">151      Most Popular Certificates152      <span class="see-all" style="top:36px;">See All</span>153    </div>154 155    <div class="cards">156      <!-- Card 1 -->157      <div class="card">158        <div class="card-img">[IMG: Home office desk with monitors]</div>159        <div class="card-body">160          <div class="card-title">Google Data Analytics</div>161          <div class="card-sub">Google</div>162          <div class="card-sub2">Professional Certificate</div>163          <div class="rating">164            <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-.9L12 2z"/></svg>165            <span>4.8 (116k)</span>166          </div>167        </div>168      </div>169 170      <!-- Card 2 -->171      <div class="card">172        <div class="card-img">[IMG: Team meeting at desk with laptop]</div>173        <div class="card-body">174          <div class="card-title">Google IT Support</div>175          <div class="card-sub">Google</div>176          <div class="card-sub2">Professional Certificate</div>177          <div class="rating">178            <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-.9L12 2z"/></svg>179            <span>4.8 (162k)</span>180          </div>181        </div>182      </div>183 184      <!-- Card 3 -->185      <div class="card">186        <div class="card-img">[IMG: Person standing outdoors in jacket]</div>187        <div class="card-body">188          <div class="card-title">Google Project Management</div>189          <div class="card-sub">Google</div>190          <div class="card-sub2">Professional Certificate</div>191          <div class="rating">192            <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 .9-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-.9L12 2z"/></svg>193            <span>4.8 (84k)</span>194          </div>195        </div>196      </div>197    </div>198 199    <!-- Earn Your Degree -->200    <div class="section-title" style="margin-top:40px; position:relative;">201      Earn Your Degree202      <span class="see-all" style="top:36px;">See All</span>203    </div>204    <div class="degree-row">205      <div class="degree-img">[IMG: University hallway with flags]</div>206      <div class="degree-img">[IMG: Blue tower and sky]</div>207      <div class="degree-img">[IMG: London sign and building]</div>208    </div>209 210  </div>211 212  <!-- Bottom Navigation -->213  <div class="bottom-nav">214    <div class="nav-item active">215      <!-- Search Icon -->216      <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 015.9 13.6l4.2 4.2-1.4 1.4-4.2-4.2A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z"/></svg>217      <div>Explore</div>218    </div>219    <div class="nav-item">220      <!-- Book Icon -->221      <svg viewBox="0 0 24 24"><path d="M6 3h11c1.1 0 2 .9 2 2v15H7c-1.7 0-3 .8-3 2V5c0-1.1.9-2 2-2zm0 15c.6-.4 1.3-.7 2-.7h9V5H6v13z"/></svg>222      <div>Learn</div>223    </div>224    <div class="nav-item">225      <!-- User Icon -->226      <svg viewBox="0 0 24 24"><path d="M12 3a5 5 0 110 10 5 5 0 010-10zm0 12c4.4 0 8 2.2 8 5v2H4v-2c0-2.8 3.6-5 8-5z"/></svg>227      <div>Profile</div>228    </div>229  </div>230 231  <div class="home-indicator"></div>232</div>233</body>234</html>