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>Explore - Khan Academy UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #222;17  }18 19  /* Top search section */20  .search-wrap {21    padding: 36px 40px 24px 40px;22  }23  .search-bar {24    height: 120px;25    background: #F0F0F0;26    border-radius: 24px;27    display: flex;28    align-items: center;29    padding: 0 32px;30    box-sizing: border-box;31  }32  .search-left {33    display: flex;34    align-items: center;35    gap: 20px;36    color: #7A7A7A;37    font-size: 40px;38  }39  .search-right {40    margin-left: auto;41    color: #9A9A9A;42    font-size: 40px;43  }44  .search-icon {45    width: 54px; height: 54px;46  }47  .title-row {48    display: flex;49    align-items: center;50    justify-content: space-between;51    padding: 10px 40px 0 40px;52  }53  .title-row h1 {54    margin: 0;55    font-size: 54px;56    font-weight: 700;57    letter-spacing: 0.2px;58  }59  .title-row .link {60    font-size: 46px;61    color: #1E73FF;62    font-weight: 600;63  }64 65  /* List */66  .list {67    margin-top: 16px;68  }69  .item {70    display: flex;71    align-items: center;72    padding: 40px;73    gap: 32px;74  }75  .item + .item {76    border-top: 1px solid #E6E6E6;77  }78  .icon-circle {79    width: 120px;80    height: 120px;81    border-radius: 60px;82    background: #E0E0E0;83    border: 1px solid #BDBDBD;84    display: flex;85    align-items: center;86    justify-content: center;87    color: #757575;88    font-size: 26px;89    text-align: center;90    box-sizing: border-box;91  }92  .item .label {93    font-size: 48px;94    font-weight: 500;95    color: #222;96  }97 98  /* Bottom nav */99  .tabbar {100    position: absolute;101    left: 0; right: 0; bottom: 120px;102    height: 220px;103    background: #F7F7F9;104    border-top: 1px solid #E6E6E9;105    display: flex;106    align-items: center;107    justify-content: space-around;108  }109  .tab {110    width: 33.33%;111    text-align: center;112    color: #8A8A8A;113    font-size: 36px;114  }115  .tab .ico {116    margin: 0 auto 16px auto;117    width: 72px; height: 72px;118    display: block;119  }120  .tab.active {121    color: #1E73FF;122  }123  .gesture {124    position: absolute;125    left: 0; bottom: 0;126    width: 100%;127    height: 120px;128    background: #000;129    display: flex;130    align-items: center;131    justify-content: center;132  }133  .gesture .pill {134    width: 240px; height: 14px; border-radius: 7px; background: #BDBDBD;135    opacity: 0.8;136  }137</style>138</head>139<body>140<div id="render-target">141  <div class="search-wrap">142    <div class="search-bar">143      <div class="search-left">144        <svg class="search-icon" viewBox="0 0 24 24">145          <circle cx="11" cy="11" r="7" stroke="#9A9A9A" stroke-width="2" fill="none"></circle>146          <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#9A9A9A" stroke-width="2" stroke-linecap="round"></line>147        </svg>148        <span>Search</span>149      </div>150      <div class="search-right">Filter</div>151    </div>152  </div>153 154  <div class="title-row">155    <h1>Browse Khan Academy</h1>156    <div class="link">Surprise me!</div>157  </div>158 159  <div class="list">160    <div class="item" style="border-top: 1px solid #E6E6E6;">161      <div class="icon-circle">[IMG: Math Icon]</div>162      <div class="label">Math</div>163    </div>164    <div class="item">165      <div class="icon-circle">[IMG: Science Icon]</div>166      <div class="label">Science</div>167    </div>168    <div class="item">169      <div class="icon-circle">[IMG: Economics Icon]</div>170      <div class="label">Economics</div>171    </div>172    <div class="item">173      <div class="icon-circle">[IMG: Arts & Humanities Icon]</div>174      <div class="label">Arts and humanities</div>175    </div>176    <div class="item">177      <div class="icon-circle">[IMG: Computing Icon]</div>178      <div class="label">Computing</div>179    </div>180    <div class="item">181      <div class="icon-circle">[IMG: Test Prep Icon]</div>182      <div class="label">Test prep</div>183    </div>184    <div class="item">185      <div class="icon-circle">[IMG: Partner Content Icon]</div>186      <div class="label">Partner content</div>187    </div>188    <div class="item">189      <div class="icon-circle">[IMG: Life Skills Icon]</div>190      <div class="label">Life skills</div>191    </div>192  </div>193 194  <div class="tabbar">195    <div class="tab">196      <svg class="ico" viewBox="0 0 24 24">197        <path d="M3 10 L12 3 L21 10 V21 H14 V14 H10 V21 H3 Z" fill="none" stroke="#8A8A8A" stroke-width="2" stroke-linejoin="round"></path>198      </svg>199      <div>Home</div>200    </div>201    <div class="tab active">202      <svg class="ico" viewBox="0 0 24 24">203        <circle cx="11" cy="11" r="6.5" stroke="#1E73FF" stroke-width="2" fill="none"></circle>204        <line x1="16.2" y1="16.2" x2="22" y2="22" stroke="#1E73FF" stroke-width="2" stroke-linecap="round"></line>205      </svg>206      <div>Explore</div>207    </div>208    <div class="tab">209      <svg class="ico" viewBox="0 0 24 24">210        <path d="M6 3 H18 V21 L12 17 L6 21 Z" fill="none" stroke="#8A8A8A" stroke-width="2" stroke-linejoin="round"></path>211      </svg>212      <div>Bookmarks</div>213    </div>214  </div>215 216  <div class="gesture">217    <div class="pill"></div>218  </div>219</div>220</body>221</html>