GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Khan Academy - Mock UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;15    color: #212121;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 92px;23    background: #ffffff;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 36px;28    color: #616161;29    font-size: 30px;30    letter-spacing: 0.2px;31  }32  .status-left, .status-right {33    display: flex;34    align-items: center;35    gap: 18px;36  }37  .status-icon { width: 28px; height: 28px; }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 92px; left: 0; right: 0;43    height: 170px;44    background: #ffffff;45    display: flex;46    align-items: center;47    justify-content: center;48    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);49  }50  .app-title {51    font-size: 46px;52    font-weight: 600;53    color: #1f2937;54    margin: 0;55  }56  .settings-btn {57    position: absolute;58    right: 36px;59    top: 50%;60    transform: translateY(-50%);61    width: 64px;62    height: 64px;63    cursor: default;64  }65 66  /* Content area */67  .content {68    position: absolute;69    top: 262px; /* 92 + 170 */70    left: 0; right: 0;71    bottom: 320px; /* tab + home indicator */72    background: #F5F7FA;73  }74  .spinner {75    position: absolute;76    left: 50%;77    top: 57%;78    transform: translate(-50%, -50%);79    width: 220px;80    height: 220px;81    border-radius: 50%;82    border: 18px solid #EFF2F7;83    border-right-color: #E6EAF0;84    border-top-color: #E6EAF0;85    opacity: 0.9;86  }87 88  /* Bottom tab bar */89  .tab-bar {90    position: absolute;91    left: 0; right: 0;92    bottom: 120px;93    height: 200px;94    background: #ffffff;95    border-top: 1px solid #eaecef;96    display: flex;97    align-items: center;98    justify-content: space-around;99  }100  .tab {101    width: 33.33%;102    text-align: center;103    color: #9AA0A6;104  }105  .tab svg { display: block; margin: 0 auto 10px auto; }106  .tab span {107    font-size: 34px;108  }109  .tab.active {110    color: #1976FF;111  }112 113  /* Home indicator area */114  .os-home {115    position: absolute;116    left: 0; right: 0;117    bottom: 0;118    height: 120px;119    background: #000000;120  }121  .home-pill {122    position: absolute;123    width: 320px;124    height: 14px;125    background: #D1D5DB;126    border-radius: 14px;127    left: 50%;128    top: 26px;129    transform: translateX(-50%);130    opacity: 0.85;131  }132</style>133</head>134<body>135<div id="render-target">136  <!-- Status Bar -->137  <div class="status-bar">138    <div class="status-left">139      <div>8:31</div>140      <!-- simple gear icon -->141      <svg class="status-icon" viewBox="0 0 24 24" fill="#757575">142        <circle cx="12" cy="12" r="3"></circle>143        <path d="M12 1.8l1 .6 1.3-.3.8 1.4-1 .8.2 1.3 1.2.7-.2 1.6-1.4.3-.6 1.1.6 1.1 1.4.3.2 1.6-1.2.7-.2 1.3 1 .8-.8 1.4-1.3-.3-1 .6-1-.6-1.3.3-.8-1.4 1-.8-.2-1.3-1.2-.7.2-1.6 1.4-.3.6-1.1-.6-1.1-1.4-.3-.2-1.6 1.2-.7.2-1.3-1-.8.8-1.4 1.3.3 1-.6z" fill="#757575" opacity="0.6"></path>144      </svg>145      <!-- download rectangle icon -->146      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#757575" stroke-width="2">147        <rect x="3" y="3" width="18" height="18" rx="2"></rect>148        <path d="M12 7v8"></path>149        <path d="M9 12l3 3 3-3"></path>150      </svg>151    </div>152    <div class="status-right">153      <!-- battery with bolt -->154      <svg class="status-icon" viewBox="0 0 28 18" fill="none" stroke="#757575" stroke-width="2">155        <rect x="1" y="3" width="22" height="12" rx="2"></rect>156        <rect x="23" y="6" width="3" height="6" rx="1" fill="#757575" stroke="none"></rect>157        <path d="M11 5l-3 5h3l-2 4 6-7h-3l1-2z" fill="#757575" stroke="none"></path>158      </svg>159    </div>160  </div>161 162  <!-- App Bar -->163  <div class="app-bar">164    <h1 class="app-title">Khan Academy</h1>165    <div class="settings-btn">166      <!-- blue cog icon -->167      <svg viewBox="0 0 24 24" width="64" height="64">168        <circle cx="12" cy="12" r="3.2" fill="#1A73E8"></circle>169        <path d="M12 2l1.2.6 1.6-.3.8 1.5-1.2.9.2 1.6 1.4.8-.2 1.8-1.7.4-.7 1.2.7 1.2 1.7.4.2 1.8-1.4.8-.2 1.6 1.2.9-.8 1.5-1.6-.3-1.2.6-1.2-.6-1.6.3-.8-1.5 1.2-.9-.2-1.6-1.4-.8.2-1.8 1.7-.4.7-1.2-.7-1.2-1.7-.4-.2-1.8 1.4-.8.2-1.6-1.2-.9.8-1.5 1.6.3 1.2-.6z" fill="#1A73E8" opacity="0.9"></path>170      </svg>171    </div>172  </div>173 174  <!-- Content -->175  <div class="content">176    <div class="spinner"></div>177  </div>178 179  <!-- Bottom Tab Bar -->180  <div class="tab-bar">181    <div class="tab active">182      <!-- hexagon/home icon -->183      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">184        <path d="M7 3l10 0 4 5-4 13H7L3 8z"></path>185      </svg>186      <span>Home</span>187    </div>188    <div class="tab">189      <!-- search icon -->190      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">191        <circle cx="11" cy="11" r="7"></circle>192        <path d="M20 20l-4-4"></path>193      </svg>194      <span>Explore</span>195    </div>196    <div class="tab">197      <!-- bookmark icon -->198      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">199        <path d="M7 3h10a1 1 0 0 1 1 1v17l-6-4-6 4V4a1 1 0 0 1 1-1z"></path>200      </svg>201      <span>Bookmarks</span>202    </div>203  </div>204 205  <!-- OS Home Indicator -->206  <div class="os-home">207    <div class="home-pill"></div>208  </div>209</div>210</body>211</html>