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 Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #111A1D; /* deep, dark blue-gray */19    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;20    color: #E7F0F4;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 24px;27    left: 32px;28    right: 32px;29    height: 64px;30  }31  .status-time {32    position: absolute;33    left: 0;34    top: 0;35    font-weight: 600;36    font-size: 42px;37    letter-spacing: 0.5px;38    color: #E9F2F6;39  }40  .status-icons {41    position: absolute;42    right: 0;43    top: 6px;44    display: flex;45    align-items: center;46    gap: 26px;47  }48  .icon {49    width: 42px;50    height: 42px;51    display: inline-block;52  }53  .icon svg {54    width: 100%;55    height: 100%;56  }57  .icon--wifi svg path { fill: #E9F2F6; }58  .icon--battery svg path { fill: none; stroke: #E9F2F6; stroke-width: 6; }59  .icon--dot {60    width: 16px;61    height: 16px;62    border-radius: 8px;63    background: #CFE0E7;64    opacity: 0.8;65  }66 67  /* Back arrow */68  .back-btn {69    position: absolute;70    left: 28px;71    top: 214px;72    width: 72px;73    height: 72px;74    display: flex;75    align-items: center;76    justify-content: center;77    opacity: 0.7;78  }79  .back-btn svg path {80    fill: none; stroke: #90A0A8; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round;81  }82 83  /* Speech bubble */84  .bubble {85    position: absolute;86    left: 108px;87    top: 770px;88    width: 864px;89    min-height: 240px;90    border: 4px solid #3A474F;91    border-radius: 36px;92    background: rgba(58, 71, 79, 0.12);93    box-shadow: 0 2px 0 rgba(0,0,0,0.3) inset;94    color: #EAF4F7;95    font-size: 44px;96    line-height: 64px;97    padding: 38px 44px;98  }99  .bubble:after {100    content: "";101    position: absolute;102    left: 50%;103    transform: translateX(-50%);104    bottom: -30px;105    width: 0;106    height: 0;107    border-left: 24px solid transparent;108    border-right: 24px solid transparent;109    border-top: 30px solid #3A474F; /* border color */110  }111  .bubble:before {112    content: "";113    position: absolute;114    left: 50%;115    transform: translateX(-50%);116    bottom: -26px;117    width: 0;118    height: 0;119    border-left: 20px solid transparent;120    border-right: 20px solid transparent;121    border-top: 26px solid rgba(58,71,79,0.12); /* inner fill to match bubble bg */122  }123 124  /* Owl area */125  .owl-wrap {126    position: absolute;127    left: 360px;128    top: 1060px;129    width: 360px;130    height: 360px;131  }132  .owl-shadow {133    position: absolute;134    left: 36px;135    bottom: 4px;136    width: 288px;137    height: 120px;138    background: #2A3338;139    border-radius: 60px / 40px;140    opacity: 0.8;141  }142  .owl-img {143    position: absolute;144    left: 0;145    top: 0;146    width: 360px;147    height: 360px;148    background: #E0E0E0;149    border: 1px solid #BDBDBD;150    border-radius: 24px;151    display: flex;152    align-items: center;153    justify-content: center;154    color: #757575;155    font-weight: 600;156    text-align: center;157  }158 159  /* Continue button */160  .cta {161    position: absolute;162    left: 40px;163    right: 40px;164    bottom: 190px;165    height: 156px;166    background: #39444B;167    border-radius: 78px;168    display: flex;169    align-items: center;170    justify-content: center;171    color: #8FA0A8;172    font-size: 46px;173    font-weight: 800;174    letter-spacing: 4px;175    text-transform: uppercase;176    opacity: 0.85;177  }178 179  /* Gesture bar */180  .gesture {181    position: absolute;182    width: 320px;183    height: 12px;184    border-radius: 6px;185    background: #DDE3E6;186    left: 50%;187    transform: translateX(-50%);188    bottom: 64px;189    opacity: 0.9;190  }191</style>192</head>193<body>194<div id="render-target">195 196  <!-- Status bar -->197  <div class="status-bar">198    <div class="status-time">8:18</div>199    <div class="status-icons">200      <!-- small app indicator icon -->201      <div class="icon">202        <svg viewBox="0 0 24 24">203          <path d="M5 7h14v10H5z" fill="#E9F2F6"/>204        </svg>205      </div>206      <!-- clock icon -->207      <div class="icon">208        <svg viewBox="0 0 24 24">209          <circle cx="12" cy="12" r="10" fill="none" stroke="#E9F2F6" stroke-width="2"></circle>210          <path d="M12 6v6l4 2" fill="none" stroke="#E9F2F6" stroke-width="2" stroke-linecap="round"/>211        </svg>212      </div>213      <!-- weather cloud -->214      <div class="icon">215        <svg viewBox="0 0 24 24">216          <path d="M7 14h9a4 4 0 0 0 0-8 5 5 0 0 0-9 2 3 3 0 0 0 0 6z" fill="#E9F2F6"/>217        </svg>218      </div>219      <div class="icon--dot"></div>220      <!-- wifi icon -->221      <div class="icon icon--wifi">222        <svg viewBox="0 0 24 24">223          <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M11 18a1.5 1.5 0 1 0 2 0a1.5 1.5 0 1 0-2 0" />224        </svg>225      </div>226      <!-- battery icon -->227      <div class="icon icon--battery">228        <svg viewBox="0 0 26 24">229          <path d="M2 7h18v10H2zM22 10v4" />230        </svg>231      </div>232    </div>233  </div>234 235  <!-- Back arrow -->236  <div class="back-btn" aria-label="Back">237    <svg viewBox="0 0 48 48">238      <path d="M30 10L16 24l14 14" />239    </svg>240  </div>241 242  <!-- Speech bubble -->243  <div class="bubble">244    It can be hard to stay m245  </div>246 247  <!-- Owl character placeholder -->248  <div class="owl-wrap">249    <div class="owl-shadow"></div>250    <div class="owl-img">[IMG: Duolingo Owl Character]</div>251  </div>252 253  <!-- Continue button -->254  <div class="cta">CONTINUE</div>255 256  <!-- Gesture bar -->257  <div class="gesture"></div>258</div>259</body>260</html>