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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0F1A1B; color: #EAEFF2;13    border-radius: 40px;14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    padding: 0 48px;20    display: flex; align-items: center; justify-content: space-between;21    color: #DDE5EA; font-weight: 600; font-size: 48px;22  }23  .sb-left, .sb-right { display: flex; align-items: center; gap: 28px; }24  .sb-dot { width: 14px; height: 14px; background: #9fb1ba; border-radius: 50%; }25  .sb-cloud {26    width: 54px; height: 40px; border-radius: 20px;27    border: 3px solid #9fb1ba; opacity: .7;28  }29  .sb-wifi { width: 50px; height: 36px; border: 3px solid #9fb1ba; border-top-left-radius: 28px; border-top-right-radius: 28px; border-bottom: none; opacity: .8; }30  .sb-battery {31    width: 60px; height: 32px; border: 3px solid #9fb1ba; border-radius: 8px; position: relative;32  }33  .sb-battery:after {34    content: ""; position: absolute; right: -12px; top: 8px; width: 8px; height: 16px; background: #9fb1ba; border-radius: 3px;35  }36 37  /* Header with back + progress */38  .header-row {39    display: flex; align-items: center; gap: 24px;40    padding: 0 48px;41  }42  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }43  .progress-track {44    flex: 1;45    height: 42px;46    background: #2A383E;47    border-radius: 24px;48  }49  .progress-fill {50    height: 100%;51    width: 40%;52    background: #99D646;53    border-radius: 24px;54  }55 56  /* Question area */57  .question-area {58    display: flex; align-items: flex-start; gap: 28px;59    padding: 36px 48px 24px;60  }61  .avatar {62    width: 220px; height: 220px; border-radius: 110px;63    background: #E0E0E0; border: 1px solid #BDBDBD;64    display: flex; align-items: center; justify-content: center;65    color: #757575; font-weight: 600;66  }67  .speech {68    position: relative;69    max-width: 720px;70    background: rgba(34, 46, 50, 0.6);71    border: 3px solid #3B4A50;72    color: #F4F7FA;73    border-radius: 40px;74    padding: 36px 40px;75    font-size: 44px; line-height: 1.35; font-weight: 600;76  }77  .speech:before {78    content: "";79    position: absolute; left: -36px; top: 40px;80    width: 0; height: 0;81    border-top: 24px solid transparent;82    border-bottom: 24px solid transparent;83    border-right: 36px solid #3B4A50;84  }85  .speech:after {86    content: "";87    position: absolute; left: -30px; top: 44px;88    width: 0; height: 0;89    border-top: 20px solid transparent;90    border-bottom: 20px solid transparent;91    border-right: 30px solid rgba(34, 46, 50, 0.6);92  }93 94  /* Options list */95  .options { padding: 12px 48px; display: flex; flex-direction: column; gap: 36px; }96  .option-card {97    display: flex; align-items: center; gap: 28px;98    background: rgba(34, 46, 50, 0.35);99    border: 3px solid #3B4A50;100    height: 160px;101    border-radius: 32px;102    padding: 0 36px;103  }104  .bars {105    display: flex; align-items: flex-end; gap: 10px;106    width: 86px;107  }108  .bar { width: 22px; border-radius: 6px; background: #2B4F65; }109  .bar.low { height: 44px; background: #2D74A0; }110  .bar.mid { height: 68px; }111  .bar.high { height: 92px; background: #20465C; }112  .opt-text { font-size: 44px; font-weight: 700; color: #E8F1F4; }113 114  /* Continue button */115  .footer {116    position: absolute; left: 0; right: 0; bottom: 160px;117    padding: 0 36px;118    display: flex; align-items: center; justify-content: center;119  }120  .continue {121    width: 100%; max-width: 1008px;122    height: 140px;123    background: #36434A;124    border-radius: 36px;125    display: flex; align-items: center; justify-content: center;126    color: #8EA1A9; font-weight: 800; font-size: 44px; letter-spacing: 3px;127  }128 129  /* Gesture bar */130  .gesture {131    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);132    width: 300px; height: 16px; border-radius: 10px; background: #E6E6E6; opacity: .85;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Status Bar -->139  <div class="status-bar">140    <div class="sb-left">141      <div>8:10</div>142      <div class="sb-dot"></div>143      <div class="sb-cloud"></div>144      <div class="sb-dot"></div>145    </div>146    <div class="sb-right">147      <div class="sb-wifi"></div>148      <div class="sb-battery"></div>149    </div>150  </div>151 152  <!-- Back + Progress -->153  <div class="header-row">154    <div class="back-btn">155      <svg width="60" height="60" viewBox="0 0 40 40">156        <path d="M26 8 L12 20 L26 32" stroke="#8EA3A9" stroke-width="4.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>157      </svg>158    </div>159    <div class="progress-track">160      <div class="progress-fill"></div>161    </div>162  </div>163 164  <!-- Question Area -->165  <div class="question-area">166    <div class="avatar">[IMG: Duolingo Owl]</div>167    <div class="speech">How much Japanese do you know?</div>168  </div>169 170  <!-- Options -->171  <div class="options">172    <div class="option-card">173      <div class="bars">174        <div class="bar low"></div>175        <div class="bar mid"></div>176        <div class="bar high"></div>177      </div>178      <div class="opt-text">I'm new to Japanese</div>179    </div>180 181    <div class="option-card">182      <div class="bars">183        <div class="bar low" style="height:54px;"></div>184        <div class="bar mid" style="height:78px;"></div>185        <div class="bar high" style="height:102px;"></div>186      </div>187      <div class="opt-text">I know some words and phrases</div>188    </div>189 190    <div class="option-card">191      <div class="bars">192        <div class="bar low" style="height:56px;"></div>193        <div class="bar mid" style="height:82px;"></div>194        <div class="bar high" style="height:108px;"></div>195      </div>196      <div class="opt-text">I can have simple conversations</div>197    </div>198 199    <div class="option-card">200      <div class="bars">201        <div class="bar low" style="height:64px;"></div>202        <div class="bar mid" style="height:94px;"></div>203        <div class="bar high" style="height:122px;"></div>204      </div>205      <div class="opt-text">I am intermediate or higher</div>206    </div>207  </div>208 209  <!-- Footer -->210  <div class="footer">211    <div class="continue">CONTINUE</div>212  </div>213 214  <div class="gesture"></div>215</div>216</body>217</html>