GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Khan Academy Explore - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2937; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 0; box-shadow: none;13  }14 15  /* Top system/status bar */16  .statusbar {17    height: 120px;18    padding: 26px 40px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #555;23    font-size: 38px;24  }25  .status-icons { display: flex; align-items: center; gap: 26px; }26  .dot { width: 16px; height: 16px; background:#777; border-radius:50%; display:inline-block; }27  .wifi svg, .battery svg { display:block; }28  .battery-text { font-size: 34px; color:#555; margin-left: 8px; }29 30  /* Search and filter row */31  .search-row {32    padding: 0 40px;33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .search-box {38    flex: 1;39    height: 110px;40    border-radius: 28px;41    background: #f3f4f6;42    border: 1px solid #e5e7eb;43    display: flex;44    align-items: center;45    padding: 0 28px;46    gap: 22px;47    color: #9ca3af;48    font-size: 40px;49  }50  .filter-text {51    font-size: 40px;52    color: #9ca3af;53  }54 55  /* Heading */56  .heading {57    padding: 44px 40px 24px 40px;58    display: flex;59    align-items: baseline;60    justify-content: space-between;61  }62  .heading h1 {63    margin: 0;64    font-size: 54px;65    font-weight: 700;66    color: #0f172a;67  }68  .surprise {69    font-size: 42px;70    color: #1a73e8;71    text-decoration: none;72    font-weight: 600;73  }74 75  /* List */76  .list { padding: 8px 0 220px 0; }77  .item {78    display: flex;79    align-items: center;80    padding: 28px 40px;81  }82  .icon-wrap {83    width: 120px; display:flex; justify-content:center; align-items:center;84  }85  .img-placeholder {86    width: 92px; height: 92px; background:#E0E0E0; border:1px solid #BDBDBD;87    border-radius: 50%;88    display:flex; align-items:center; justify-content:center;89    color:#757575; font-size: 22px; text-align: center; padding: 8px;90  }91  .item-title {92    font-size: 46px; color:#111827;93  }94  .divider {95    height: 1px; background:#e5e7eb; margin: 14px 0 14px 200px;96  }97 98  /* Bottom nav */99  .bottom-nav {100    position: absolute; left: 0; bottom: 0;101    width: 1080px; height: 190px;102    background: #f8f9fb;103    border-top: 1px solid #e5e7eb;104    display: flex; align-items: center; justify-content: space-around;105    padding-bottom: 18px;106  }107  .nav-item {108    display: flex; flex-direction: column; align-items: center; gap: 16px;109    color: #6b7280; font-size: 34px;110  }111  .nav-item.active { color: #1a73e8; }112  .nav-item svg { width: 56px; height: 56px; }113  .gesture {114    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);115    width: 180px; height: 10px; background: #c7c7c7; border-radius: 8px;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="statusbar">124    <div class="status-left">8:48</div>125    <div class="status-icons">126      <span class="dot"></span>127      <span class="dot"></span>128      <span class="dot"></span>129      <span class="dot"></span>130      <span class="dot"></span>131      <div class="wifi">132        <svg width="42" height="42" viewBox="0 0 24 24">133          <path d="M2 8c5-4 15-4 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>134          <circle cx="12" cy="19" r="2" fill="#555"/>135        </svg>136      </div>137      <div style="display:flex; align-items:center;">138        <div class="battery">139          <svg width="42" height="42" viewBox="0 0 28 18">140            <rect x="1" y="3" width="22" height="12" rx="2" stroke="#555" stroke-width="2" fill="none"/>141            <rect x="3" y="5" width="14" height="8" fill="#555"/>142            <rect x="24" y="7" width="3" height="4" rx="1" fill="#555"/>143          </svg>144        </div>145        <span class="battery-text">43%</span>146      </div>147    </div>148  </div>149 150  <!-- Search row -->151  <div class="search-row">152    <div class="search-box">153      <svg width="44" height="44" viewBox="0 0 24 24">154        <circle cx="11" cy="11" r="7" stroke="#9ca3af" stroke-width="2" fill="none"/>155        <path d="M20 20l-4.5-4.5" stroke="#9ca3af" stroke-width="2" stroke-linecap="round"/>156      </svg>157      <span>Search</span>158    </div>159    <div class="filter-text">Filter</div>160  </div>161 162  <!-- Heading -->163  <div class="heading">164    <h1>Browse Khan Academy</h1>165    <a href="#" class="surprise">Surprise me!</a>166  </div>167 168  <!-- Category list -->169  <div class="list">170 171    <div class="item">172      <div class="icon-wrap">173        <div class="img-placeholder">[IMG: Math icon]</div>174      </div>175      <div class="item-title">Math</div>176    </div>177    <div class="divider"></div>178 179    <div class="item">180      <div class="icon-wrap">181        <div class="img-placeholder">[IMG: Science icon]</div>182      </div>183      <div class="item-title">Science</div>184    </div>185    <div class="divider"></div>186 187    <div class="item">188      <div class="icon-wrap">189        <div class="img-placeholder">[IMG: Economics icon]</div>190      </div>191      <div class="item-title">Economics</div>192    </div>193    <div class="divider"></div>194 195    <div class="item">196      <div class="icon-wrap">197        <div class="img-placeholder">[IMG: Arts & humanities icon]</div>198      </div>199      <div class="item-title">Arts and humanities</div>200    </div>201    <div class="divider"></div>202 203    <div class="item">204      <div class="icon-wrap">205        <div class="img-placeholder">[IMG: Computing icon]</div>206      </div>207      <div class="item-title">Computing</div>208    </div>209    <div class="divider"></div>210 211    <div class="item">212      <div class="icon-wrap">213        <div class="img-placeholder">[IMG: Test prep icon]</div>214      </div>215      <div class="item-title">Test prep</div>216    </div>217    <div class="divider"></div>218 219    <div class="item">220      <div class="icon-wrap">221        <div class="img-placeholder">[IMG: Partner content icon]</div>222      </div>223      <div class="item-title">Partner content</div>224    </div>225    <div class="divider"></div>226 227    <div class="item">228      <div class="icon-wrap">229        <div class="img-placeholder">[IMG: Life skills icon]</div>230      </div>231      <div class="item-title">Life skills</div>232    </div>233 234  </div>235 236  <!-- Bottom navigation -->237  <div class="bottom-nav">238    <div class="nav-item">239      <svg viewBox="0 0 24 24">240        <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4H9v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" fill="#9ca3af"/>241      </svg>242      <div>Home</div>243    </div>244    <div class="nav-item active">245      <svg viewBox="0 0 24 24">246        <circle cx="11" cy="11" r="7" stroke="#1a73e8" stroke-width="2" fill="none"/>247        <path d="M20 20l-4.5-4.5" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/>248      </svg>249      <div>Explore</div>250    </div>251    <div class="nav-item">252      <svg viewBox="0 0 24 24">253        <path d="M6 2h12a2 2 0 0 1 2 2v18l-8-4-8 4V4a2 2 0 0 1 2-2z" fill="#9ca3af"/>254      </svg>255      <div>Bookmarks</div>256    </div>257  </div>258  <div class="gesture"></div>259 260</div>261</body>262</html>