GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Duolingo Style UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: linear-gradient(#5bbd98, #46a07f);14    border-radius: 20px;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    padding: 0 32px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #ffffff;29    font-weight: 600;30    font-size: 40px;31    opacity: 0.95;32  }33  .status-left, .status-right {34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .status-icon {39    width: 36px;40    height: 36px;41    border-radius: 8px;42    background: rgba(255,255,255,0.25);43  }44 45  /* Top navigation chips */46  .top-nav {47    position: absolute;48    top: 110px;49    left: 32px;50    width: 1016px;51    height: 120px;52    display: flex;53    align-items: center;54    gap: 26px;55  }56  .flag-square {57    width: 110px;58    height: 110px;59    border-radius: 24px;60    background: #f6f6f6;61    border: 2px solid #dcdcdc;62    display: flex;63    align-items: center;64    justify-content: center;65    color: #757575;66    font-size: 26px;67  }68  .chip {69    display: flex;70    align-items: center;71    gap: 12px;72    background: rgba(255,255,255,0.18);73    color: #fff;74    padding: 16px 22px;75    border-radius: 26px;76    font-weight: 700;77    font-size: 34px;78  }79  .chip svg { width: 40px; height: 40px; }80 81  /* Hero image placeholder */82  .hero-img {83    position: absolute;84    top: 340px;85    left: 140px;86    width: 800px;87    height: 600px;88    background: #E0E0E0;89    border: 1px solid #BDBDBD;90    border-radius: 30px;91    display: flex;92    align-items: center;93    justify-content: center;94    color: #757575;95    font-size: 32px;96  }97 98  /* Section Card */99  .section-card {100    position: absolute;101    top: 1000px;102    left: 72px;103    width: 936px;104    background: rgba(0,0,0,0.15);105    border-radius: 60px;106    padding: 60px 60px 40px 60px;107    color: #ffffff;108  }109  .section-title {110    font-size: 72px;111    font-weight: 800;112    margin-bottom: 18px;113  }114  .units {115    font-size: 40px;116    letter-spacing: 2px;117    color: #d7f3e6;118    margin-bottom: 36px;119  }120  .progress {121    width: 816px;122    height: 56px;123    background: rgba(255,255,255,0.18);124    border-radius: 32px;125    position: relative;126    margin-bottom: 46px;127  }128  .progress-fill {129    position: absolute;130    top: 6px;131    left: 6px;132    height: 44px;133    width: 4%;134    background: #6ad3b1;135    border-radius: 28px;136  }137  .desc {138    font-size: 42px;139    line-height: 1.35;140    color: #eafaf4;141    max-width: 820px;142    margin-bottom: 46px;143  }144  .cta {145    width: 820px;146    height: 120px;147    background: #0c1e1b;148    border-radius: 36px;149    display: flex;150    align-items: center;151    justify-content: center;152    color: #7bd6b8;153    font-weight: 800;154    font-size: 50px;155    box-shadow: 0 16px 0 rgba(0,0,0,0.25) inset;156  }157 158  /* Dots */159  .dots {160    position: absolute;161    top: 1950px;162    width: 1080px;163    display: flex;164    align-items: center;165    justify-content: center;166    gap: 22px;167  }168  .dot {169    width: 18px;170    height: 18px;171    background: rgba(255,255,255,0.6);172    border-radius: 50%;173  }174  .dot.active { background: #0c1e1b; }175 176  /* Bottom nav bar */177  .bottom-bar {178    position: absolute;179    bottom: 0;180    left: 0;181    width: 1080px;182    height: 230px;183    background: #0e1415;184    border-top-left-radius: 24px;185    border-top-right-radius: 24px;186    padding: 36px 40px 40px;187    display: flex;188    align-items: flex-end;189    justify-content: space-between;190  }191  .nav-item {192    width: 150px;193    height: 150px;194    background: #162223;195    border-radius: 28px;196    display: flex;197    align-items: center;198    justify-content: center;199  }200  .nav-item svg { width: 76px; height: 76px; }201</style>202</head>203<body>204<div id="render-target">205 206  <!-- Status Bar -->207  <div class="status-bar">208    <div class="status-left">209      <div>10:55</div>210      <div class="status-icon"></div>211      <div class="status-icon"></div>212      <div class="status-icon"></div>213    </div>214    <div class="status-right">215      <div class="status-icon"></div>216      <div class="status-icon"></div>217    </div>218  </div>219 220  <!-- Top navigation metrics -->221  <div class="top-nav">222    <div class="flag-square">[IMG: Japan Flag]</div>223 224    <div class="chip">225      <svg viewBox="0 0 24 24">226        <path fill="#ff9b2f" d="M12 2c-1 3-5 4-5 8 0 3 2 5 5 5s5-2 5-5c0-4-4-5-5-8z"></path>227      </svg>228      <span>1</span>229    </div>230 231    <div class="chip">232      <svg viewBox="0 0 24 24">233        <polygon points="12,2 20,8 20,16 12,22 4,16 4,8" fill="#7ec7ff"></polygon>234      </svg>235      <span>505</span>236    </div>237 238    <div class="chip">239      <svg viewBox="0 0 24 24">240        <path fill="#ff5a72" d="M12 21s-7-4.4-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 11c0 5.6-7 10-7 10z"></path>241      </svg>242      <span>5</span>243    </div>244  </div>245 246  <!-- Hero owl image -->247  <div class="hero-img">[IMG: Duolingo Owl with Map]</div>248 249  <!-- Section Card -->250  <div class="section-card">251    <div class="section-title">Section 1: Rookie</div>252    <div class="units">0 / 8 UNITS</div>253    <div class="progress">254      <div class="progress-fill"></div>255    </div>256    <div class="desc">257      Start with essential phrases and simple grammar concepts258    </div>259    <div class="cta">CONTINUE</div>260  </div>261 262  <!-- Page dots -->263  <div class="dots">264    <div class="dot active"></div>265    <div class="dot"></div>266    <div class="dot"></div>267    <div class="dot"></div>268    <div class="dot"></div>269  </div>270 271  <!-- Bottom navigation bar -->272  <div class="bottom-bar">273    <div class="nav-item">274      <!-- Home icon -->275      <svg viewBox="0 0 24 24">276        <path fill="#ffcf67" d="M12 3l9 8h-3v10H6V11H3z"></path>277      </svg>278    </div>279    <div class="nav-item">280      <!-- Kana (あ) -->281      <svg viewBox="0 0 24 24">282        <text x="5" y="18" font-size="16" fill="#69b7ff">あ</text>283      </svg>284    </div>285    <div class="nav-item">286      <!-- Shield -->287      <svg viewBox="0 0 24 24">288        <path fill="#caa476" d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"></path>289      </svg>290    </div>291    <div class="nav-item">292      <!-- Profile -->293      <svg viewBox="0 0 24 24">294        <circle cx="12" cy="8" r="4" fill="#a892ff"></circle>295        <path d="M4 21c2-5 14-5 16 0" fill="#fed49f"></path>296      </svg>297    </div>298    <div class="nav-item">299      <!-- Chest -->300      <svg viewBox="0 0 24 24">301        <rect x="3" y="8" width="18" height="12" rx="2" fill="#f7c15a"></rect>302        <rect x="6" y="6" width="12" height="4" rx="1" fill="#e39c34"></rect>303      </svg>304    </div>305    <div class="nav-item">306      <!-- Bell -->307      <svg viewBox="0 0 24 24">308        <path fill="#ffb04d" d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm7-6V11a7 7 0 0 0-14 0v5l-2 2h18l-2-2z"></path>309      </svg>310    </div>311  </div>312 313</div>314</body>315</html>