GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Rendered Mobile UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;12    color: #ffffff;13  }14 15  /* Root container must match screenshot bounds */16  #render-target {17    width: 1080px;18    height: 2400px;19    position: relative;20    overflow: hidden;21    background: #0f181b; /* dark app background */22    border-radius: 36px;23    box-shadow: 0 8px 24px rgba(0,0,0,0.25);24  }25 26  /* Top status area */27  .header {28    padding: 40px 48px 0 48px;29    color: #e7eef1;30  }31  .status {32    display: flex;33    justify-content: space-between;34    align-items: center;35    font-size: 42px;36    font-weight: 600;37    opacity: 0.95;38  }39  .icons {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .icons svg {45    width: 48px;46    height: 48px;47    fill: none;48    stroke: #ffffff;49    stroke-width: 3;50  }51 52  /* Navigation + progress bar */53  .nav-progress {54    margin-top: 36px;55    display: flex;56    align-items: center;57    gap: 28px;58  }59  .back-arrow svg {60    width: 60px;61    height: 60px;62    stroke: #9aa7af;63    stroke-width: 6;64    fill: none;65    stroke-linecap: round;66    stroke-linejoin: round;67  }68  .progress-track {69    width: 880px;70    height: 44px;71    background: #3a434a;72    border-radius: 22px;73    overflow: hidden;74  }75  .progress-fill {76    height: 100%;77    width: 68%;78    background: #a6e243;79    border-radius: 22px;80  }81 82  /* Content row: owl + speech bubble */83  .content-row {84    margin-top: 70px;85    padding: 0 48px;86    display: flex;87    align-items: flex-start;88    gap: 36px;89  }90  .img-placeholder {91    width: 220px;92    height: 220px;93    background: #E0E0E0;94    border: 1px solid #BDBDBD;95    color: #757575;96    display: flex;97    justify-content: center;98    align-items: center;99    border-radius: 28px;100    font-weight: 600;101    text-align: center;102  }103  .speech {104    position: relative;105    width: 700px;106    background: #1a2428;107    border: 3px solid #3a454d;108    border-radius: 28px;109    color: #f2f7f9;110    padding: 34px 40px;111    font-size: 44px;112    line-height: 1.3;113  }114  .speech .highlight {115    color: #b785ff;116    font-weight: 800;117  }118  /* Speech bubble pointer (two-layer triangle for border) */119  .speech .tip-wrap {120    position: absolute;121    left: -22px;122    top: 50%;123    transform: translateY(-50%);124    width: 0;125    height: 0;126  }127  .speech .tip-outline {128    position: absolute;129    border-top: 22px solid transparent;130    border-bottom: 22px solid transparent;131    border-right: 22px solid #3a454d;132  }133  .speech .tip-fill {134    position: absolute;135    left: 3px;136    top: 4px;137    border-top: 19px solid transparent;138    border-bottom: 19px solid transparent;139    border-right: 19px solid #1a2428;140  }141 142  /* Bottom CTA */143  .cta-button {144    position: absolute;145    left: 48px;146    right: 48px;147    bottom: 160px;148    height: 140px;149    background: #a7e046;150    border-radius: 44px;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #0c1416;155    font-size: 46px;156    font-weight: 900;157    letter-spacing: 4px;158    text-transform: uppercase;159    box-shadow: 0 22px 0 #79b73a; /* chunky drop shadow */160  }161 162  /* Home indicator */163  .home-indicator {164    position: absolute;165    bottom: 80px;166    left: 50%;167    transform: translateX(-50%);168    width: 320px;169    height: 12px;170    background: #e6e6e6;171    border-radius: 6px;172    opacity: 0.9;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <div class="header">180    <div class="status">181      <div class="time">8:15</div>182      <div class="icons">183        <!-- simple "Calm" text placeholder to mimic status label -->184        <div style="font-size:32px; opacity:0.7;">Calm</div>185        <!-- small dot -->186        <svg viewBox="0 0 24 24">187          <circle cx="12" cy="12" r="4" fill="#ffffff"></circle>188        </svg>189        <!-- wifi icon -->190        <svg viewBox="0 0 24 24">191          <path d="M2 8c5-4 15-4 20 0M6 12c3-3 9-3 12 0M10 16c2-2 4-2 6 0M12 20l2-2" />192        </svg>193        <!-- battery icon -->194        <svg viewBox="0 0 32 24">195          <rect x="2" y="6" width="24" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="3"></rect>196          <rect x="26" y="9" width="4" height="6" rx="1" ry="1" fill="#ffffff" stroke="#ffffff"></rect>197        </svg>198      </div>199    </div>200 201    <div class="nav-progress">202      <div class="back-arrow">203        <svg viewBox="0 0 24 24">204          <path d="M15 4L7 12l8 8" />205        </svg>206      </div>207      <div class="progress-track">208        <div class="progress-fill"></div>209      </div>210    </div>211  </div>212 213  <div class="content-row">214    <div class="img-placeholder">[IMG: Duolingo Owl]</div>215 216    <div class="speech">217      <div class="tip-wrap">218        <div class="tip-outline"></div>219        <div class="tip-fill"></div>220      </div>221      That’s <span class="highlight">50 words</span> in your first week!222    </div>223  </div>224 225  <div class="cta-button">CONTINUE</div>226 227  <div class="home-indicator"></div>228</div>229</body>230</html>