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>Duolingo Notification Prompt Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1d22;15    border-radius: 36px;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17    color: #e8f0f4;18  }19 20  /* Top navigation and progress */21  .topbar {22    position: absolute;23    top: 120px;24    left: 48px;25    right: 48px;26    height: 140px;27  }28  .back-icon {29    position: absolute;30    left: 0;31    top: 10px;32    width: 64px;33    height: 64px;34    fill: none;35    stroke: #8aa0a9;36    stroke-width: 10;37  }38  .progress-track {39    position: absolute;40    left: 96px;41    right: 0;42    top: 0;43    height: 44px;44    background: #2c3b40;45    border-radius: 22px;46  }47  .progress-fill {48    width: 74%;49    height: 100%;50    background: #9bdd3a;51    border-radius: 22px;52    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);53  }54 55  /* Owl + speech bubble */56  .intro {57    position: absolute;58    top: 300px;59    left: 60px;60    right: 60px;61    display: flex;62    align-items: center;63    gap: 40px;64  }65  .img-placeholder {66    width: 220px;67    height: 220px;68    background: #E0E0E0;69    border: 1px solid #BDBDBD;70    border-radius: 24px;71    display: flex;72    justify-content: center;73    align-items: center;74    color: #757575;75    font-weight: 600;76    text-align: center;77  }78  .bubble {79    position: relative;80    flex: 1;81    padding: 36px 40px;82    border: 3px solid #2b3a40;83    border-radius: 28px;84    color: #dfe7eb;85    line-height: 1.45;86    font-size: 44px;87    max-width: 700px;88    background: transparent;89  }90  .bubble-point {91    position: absolute;92    left: -46px;93    top: 50%;94    width: 0; height: 0;95    border-top: 22px solid transparent;96    border-bottom: 22px solid transparent;97    border-right: 46px solid #2b3a40;98    transform: translateY(-50%);99  }100 101  /* Card prompt */102  .card {103    position: absolute;104    top: 920px;105    left: 60px;106    width: 960px;107    background: rgba(19,31,36,0.35);108    border: 3px solid #2b3a40;109    border-radius: 48px;110    padding: 80px 64px 64px;111    box-sizing: border-box;112  }113  .bell {114    width: 64px;115    height: 64px;116    margin: 0 auto 36px auto;117    display: block;118    fill: none;119    stroke: #8aa0a9;120    stroke-width: 10;121    opacity: 0.9;122  }123  .card-title {124    text-align: center;125    font-size: 52px;126    font-weight: 700;127    letter-spacing: 0.2px;128    margin-bottom: 64px;129    color: #eef6fa;130  }131  .card-title .duo { color: #ffffff; font-weight: 900; }132 133  .cta-group { position: relative; }134  .btn {135    width: 832px;136    height: 150px;137    border-radius: 36px;138    margin: 0 auto;139    display: block;140    font-size: 48px;141    font-weight: 800;142    letter-spacing: 0.5px;143    border: none;144    cursor: pointer;145  }146  .btn-primary {147    background: #1f2b31;148    color: #5ab0eb;149    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25);150  }151  .divider {152    width: 832px;153    height: 3px;154    background: #2b3a40;155    margin: 0 auto;156  }157  .btn-secondary {158    background: #1b262b;159    color: #8aa0a9;160    margin-top: 24px;161    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.2);162  }163  .hint-arrow {164    position: absolute;165    right: 16px;166    top: 36px;167    width: 64px;168    height: 64px;169    fill: none;170    stroke: #66b4ee;171    stroke-width: 14;172  }173 174  /* Bottom continue */175  .bottom {176    position: absolute;177    left: 60px;178    right: 60px;179    bottom: 220px;180  }181  .continue {182    width: 960px;183    height: 140px;184    border-radius: 32px;185    background: #a9e64a;186    color: #0e1a1f;187    font-size: 48px;188    font-weight: 900;189    letter-spacing: 3px;190    border: none;191    box-shadow: 0 18px 0 rgba(108,167,33,0.6);192    cursor: pointer;193  }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Top bar with back arrow and progress -->200  <div class="topbar">201    <svg class="back-icon" viewBox="0 0 24 24">202      <path d="M15 4 L7 12 L15 20" />203    </svg>204    <div class="progress-track">205      <div class="progress-fill"></div>206    </div>207  </div>208 209  <!-- Intro section: owl and speech bubble -->210  <div class="intro">211    <div class="img-placeholder">[IMG: Duolingo Owl]</div>212    <div class="bubble">213      I’ll remind you to practice so it becomes a habit!214      <div class="bubble-point"></div>215    </div>216  </div>217 218  <!-- Card asking for notification permission -->219  <div class="card">220    <svg class="bell" viewBox="0 0 24 24">221      <path d="M12 4 C9 4 8 7 8 10 V14 L6 16 H18 L16 14 V10 C16 7 15 4 12 4" />222      <circle cx="12" cy="18.5" r="1.2" />223    </svg>224    <div class="card-title">Allow <span class="duo">Duolingo</span> to send you notifications?</div>225 226    <div class="cta-group">227      <button class="btn btn-primary">Allow</button>228      <svg class="hint-arrow" viewBox="0 0 24 24">229        <path d="M8 5 L16 12 L8 19" />230      </svg>231      <div class="divider"></div>232      <button class="btn btn-secondary">Don’t allow</button>233    </div>234  </div>235 236  <!-- Bottom continue button -->237  <div class="bottom">238    <button class="continue">CONTINUE</button>239  </div>240 241</div>242</body>243</html>