GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Khan Academy - Mock Mobile UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff; color: #222;11  }12 13  /* Status bar */14  .status-bar {15    height: 96px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    font-size: 32px; color: #2b2b2b;17  }18  .status-icons { display: flex; align-items: center; gap: 22px; }19  .icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }20 21  /* App title row */22  .app-title {23    height: 120px; display: flex; align-items: center; justify-content: center; position: relative;24    font-weight: 700; font-size: 52px; color: #1a1a1a;25  }26  .gear {27    position: absolute; right: 36px; top: 50%; transform: translateY(-50%);28    font-size: 48px; color: #1976d2;29  }30 31  /* Sections */32  .section-title {33    font-size: 42px; font-weight: 700; padding: 24px 40px; color: #222;34  }35  .divider { height: 1px; background: #eceff1; margin: 8px 0; }36 37  /* Lesson item */38  .lesson { padding: 24px 40px; display: flex; align-items: flex-start; gap: 24px; position: relative; }39  .icon-circle {40    width: 104px; height: 104px; border-radius: 50%;41    display: flex; align-items: center; justify-content: center;42    border: 1px solid #cfd8dc; background: #eef7f1; color: #2e7d32; font-size: 48px; flex: 0 0 auto;43  }44  .icon-circle.yellow { background: #fff5e0; color: #ef6c00; }45  .kebab {46    width: 58px; height: 58px; border-radius: 14px; background: #f5f5f5; border: 1px solid #e0e0e0;47    display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 28px;48  }49  .lesson .text { flex: 1; }50  .meta { color: #6b7280; font-size: 32px; }51  .title { font-size: 40px; font-weight: 700; line-height: 1.25; margin-top: 6px; }52 53  /* Courses */54  .row-between { display: flex; align-items: center; justify-content: space-between; padding: 8px 40px; }55  .link { color: #2563eb; font-size: 36px; }56 57  .course { padding: 24px 40px; display: flex; align-items: center; gap: 28px; }58  .course .icon-circle { width: 116px; height: 116px; font-size: 54px; }59  .course .label { font-size: 46px; }60 61  /* Promo/Kids card */62  .kids-wrap { margin-top: 18px; }63  .kids-art {64    margin: 0 0; width: 100%; height: 760px; background: #E0E0E0; border: 1px solid #BDBDBD;65    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px; position: relative;66  }67  .close-chip {68    position: absolute; right: 28px; top: 24px;69    width: 72px; height: 72px; border-radius: 50%; background: #ffffff; border: 1px solid #d0d7de;70    display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 40px;71  }72  .kids-title { text-align: center; font-size: 56px; font-weight: 700; padding-top: 28px; }73  .kids-sub { text-align: center; font-size: 38px; color: #374151; padding: 12px 48px 24px; }74 75  /* Bottom nav */76  .nav {77    position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: #fff;78    border-top: 1px solid #e5e7eb; display: flex;79  }80  .nav-item {81    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;82    color: #6b7280; font-size: 30px;83  }84  .nav-item .nav-icon { width: 56px; height: 56px; }85  .nav-item.active { color: #2563eb; }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status Bar -->92  <div class="status-bar">93    <div>9:06</div>94    <div class="status-icons">95      <!-- WiFi -->96      <svg class="icon" viewBox="0 0 24 24">97        <path d="M2 9c5-4 15-4 20 0" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"/>98        <path d="M5 12c3-3 11-3 14 0" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"/>99        <path d="M8 15c2-2 6-2 8 0" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round"/>100        <circle cx="12" cy="18" r="1.6" fill="#424242"/>101      </svg>102      <!-- Battery -->103      <svg class="icon" viewBox="0 0 26 24">104        <rect x="1" y="6" width="20" height="12" rx="2" ry="2" stroke="#424242" fill="none" stroke-width="2"/>105        <rect x="21.5" y="9" width="3.5" height="6" rx="1" fill="#424242"/>106        <polygon points="11,8 8,13 12,13 9,18 16,11 12.5,11 14.5,8" fill="#424242"/>107      </svg>108    </div>109  </div>110 111  <!-- Title -->112  <div class="app-title">113    Khan Academy114    <div class="gear">⚙︎</div>115  </div>116 117  <!-- Recent lessons -->118  <div class="section-title">Recent lessons</div>119 120  <div class="lesson">121    <div style="display:flex; align-items:center; gap:16px;">122      <div class="icon-circle">⚛</div>123      <div class="kebab">124        <svg width="16" height="36" viewBox="0 0 6 18">125          <circle cx="3" cy="3" r="2" fill="#6b7280"></circle>126          <circle cx="3" cy="9" r="2" fill="#6b7280"></circle>127          <circle cx="3" cy="15" r="2" fill="#6b7280"></circle>128        </svg>129      </div>130    </div>131    <div class="text">132      <div class="meta">Units and measurement</div>133      <div class="title">Physical quantities and their measurement</div>134    </div>135  </div>136  <div class="divider"></div>137 138  <div class="lesson">139    <div style="display:flex; align-items:center; gap:16px;">140      <div class="icon-circle yellow">➗</div>141      <div class="kebab">142        <svg width="16" height="36" viewBox="0 0 6 18">143          <circle cx="3" cy="3" r="2" fill="#6b7280"></circle>144          <circle cx="3" cy="9" r="2" fill="#6b7280"></circle>145          <circle cx="3" cy="15" r="2" fill="#6b7280"></circle>146        </svg>147      </div>148    </div>149    <div class="text">150      <div class="meta">Algebraic expressions</div>151      <div class="title">Algebraic expressions and polynomials (intro)</div>152    </div>153  </div>154 155  <!-- My courses -->156  <div class="row-between">157    <div class="section-title" style="padding: 16px 0 16px 0; margin-left: 40px;">My courses</div>158    <div class="link">Edit</div>159  </div>160 161  <div class="course">162    <div class="icon-circle">⚛</div>163    <div class="label">Class 11 Physics (India)</div>164  </div>165 166  <!-- Kids Promo -->167  <div class="kids-wrap">168    <div class="kids-art">169      [IMG: Khan Academy Kids illustration]170      <div class="close-chip">✕</div>171    </div>172    <div class="kids-title">Khan Academy Kids</div>173    <div class="kids-sub">Get our free, award-winning app for kids ages 2-8.</div>174  </div>175 176  <!-- Bottom Navigation -->177  <div class="nav">178    <div class="nav-item active">179      <svg class="nav-icon" viewBox="0 0 24 24">180        <polygon points="12,2 19,6.5 19,17.5 12,22 5,17.5 5,6.5" fill="none" stroke="#2563eb" stroke-width="2"/>181      </svg>182      <div>Home</div>183    </div>184    <div class="nav-item">185      <svg class="nav-icon" viewBox="0 0 24 24">186        <circle cx="11" cy="11" r="7" stroke="#6b7280" stroke-width="2" fill="none"/>187        <line x1="17" y1="17" x2="22" y2="22" stroke="#6b7280" stroke-width="2"/>188      </svg>189      <div>Explore</div>190    </div>191    <div class="nav-item">192      <svg class="nav-icon" viewBox="0 0 24 24">193        <path d="M6 3h12v18l-6-3-6 3V3z" fill="none" stroke="#6b7280" stroke-width="2"/>194      </svg>195      <div>Bookmarks</div>196    </div>197  </div>198 199</div>200</body>201</html>