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>Mock UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #0f1a1d;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 24px;26    left: 36px;27    right: 36px;28    height: 90px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #e9eef2;33  }34  .status-left {35    font-size: 44px;36    letter-spacing: 1px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .status-icon {44    width: 44px;45    height: 44px;46    fill: none;47    stroke: #e9eef2;48    stroke-width: 3.5;49  }50  .battery {51    width: 62px;52    height: 36px;53  }54 55  /* Top row: back + progress */56  .top-row {57    position: absolute;58    top: 150px;59    left: 36px;60    right: 36px;61    display: flex;62    align-items: center;63    gap: 26px;64  }65  .back-icon {66    width: 64px;67    height: 64px;68    stroke: #7c8a92;69    stroke-width: 10;70    fill: none;71  }72  .progress-track {73    flex: 1;74    height: 42px;75    background: #2e3a40;76    border-radius: 24px;77    overflow: hidden;78  }79  .progress-fill {80    width: 62%;81    height: 100%;82    background: #a5d63f;83    border-radius: 24px;84  }85 86  /* Owl + speech bubble */87  .owl-wrap {88    position: absolute;89    top: 330px;90    left: 70px;91    display: flex;92    align-items: center;93    gap: 36px;94  }95  .img-placeholder {96    width: 190px;97    height: 190px;98    background: #E0E0E0;99    border: 1px solid #BDBDBD;100    display: flex;101    justify-content: center;102    align-items: center;103    color: #757575;104    border-radius: 24px;105    font-size: 26px;106    text-align: center;107    padding: 10px;108  }109  .bubble {110    position: relative;111    color: #e9eef2;112    border: 4px solid #38444a;113    border-radius: 28px;114    padding: 32px 40px;115    font-size: 48px;116    line-height: 1.2;117    max-width: 650px;118    background: rgba(0,0,0,0.08);119  }120  .bubble-tail {121    position: absolute;122    left: -26px;123    top: 46%;124    width: 0;125    height: 0;126    border-top: 18px solid transparent;127    border-bottom: 18px solid transparent;128    border-right: 26px solid #38444a;129  }130  .bubble-tail::after {131    content: "";132    position: absolute;133    left: 3px;134    top: -16px;135    width: 0;136    height: 0;137    border-top: 16px solid transparent;138    border-bottom: 16px solid transparent;139    border-right: 22px solid rgba(0,0,0,0.08);140  }141 142  /* Continue button */143  .cta {144    position: absolute;145    left: 60px;146    right: 60px;147    bottom: 210px;148    height: 140px;149    border-radius: 44px;150    border: none;151    background: #A8E63E;152    box-shadow: 0 18px 0 #5ea836;153    color: #0f1a1d;154    font-weight: 800;155    font-size: 52px;156    letter-spacing: 2px;157    text-transform: uppercase;158    cursor: pointer;159  }160 161  /* Home indicator */162  .home-indicator {163    position: absolute;164    bottom: 90px;165    left: 50%;166    transform: translateX(-50%);167    width: 220px;168    height: 12px;169    background: #e7e7e7;170    border-radius: 8px;171    opacity: 0.9;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    <div class="status-left">8:12</div>181    <div class="status-right">182      <!-- small dot (notification) -->183      <svg class="status-icon" viewBox="0 0 24 24">184        <circle cx="12" cy="12" r="8" fill="#e9eef2"></circle>185      </svg>186      <!-- cloud/weather (simple) -->187      <svg class="status-icon" viewBox="0 0 48 48">188        <path d="M15 30h18a8 8 0 0 0 0-16c-1 0-2 0-3 1a10 10 0 0 0-19 5" stroke-linecap="round" stroke-linejoin="round"></path>189      </svg>190      <!-- timer -->191      <svg class="status-icon" viewBox="0 0 48 48">192        <circle cx="24" cy="26" r="14"></circle>193        <path d="M24 26l0-8M18 10h12" stroke-linecap="round"></path>194      </svg>195      <!-- wifi -->196      <svg class="status-icon" viewBox="0 0 48 48">197        <path d="M6 18c8-8 28-8 36 0M12 24c6-6 18-6 24 0M18 30c4-4 12-4 16 0"></path>198        <circle cx="26" cy="36" r="2" fill="#e9eef2" stroke="none"></circle>199      </svg>200      <!-- battery -->201      <svg class="battery" viewBox="0 0 60 36">202        <rect x="2" y="6" width="50" height="24" rx="4" ry="4" stroke="#e9eef2" fill="none" stroke-width="3"></rect>203        <rect x="52" y="12" width="6" height="12" rx="2" ry="2" fill="#e9eef2"></rect>204        <rect x="6" y="10" width="34" height="16" fill="#e9eef2"></rect>205      </svg>206    </div>207  </div>208 209  <!-- Back + Progress -->210  <div class="top-row">211    <svg class="back-icon" viewBox="0 0 64 64">212      <path d="M42 12 L18 32 L42 52" stroke-linecap="round" stroke-linejoin="round"></path>213    </svg>214    <div class="progress-track">215      <div class="progress-fill"></div>216    </div>217  </div>218 219  <!-- Owl and message -->220  <div class="owl-wrap">221    <div class="img-placeholder">[IMG: Duolingo Owl]</div>222    <div class="bubble">223      <span class="bubble-tail" aria-hidden="true"></span>224      Okay, we’ll start fresh!225    </div>226  </div>227 228  <!-- Continue Button -->229  <button class="cta">CONTINUE</button>230 231  <!-- Home indicator -->232  <div class="home-indicator"></div>233 234</div>235</body>236</html>