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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0D0F10;15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    color: #FFFFFF;26    font-weight: 600;27  }28  .status-left { position: absolute; left: 40px; top: 32px; font-size: 44px; letter-spacing: 1px; }29  .status-right { position: absolute; right: 40px; top: 36px; display: flex; align-items: center; gap: 24px; }30  .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #FFFFFF; stroke-width: 6; }31 32  /* Back arrow and progress bar */33  .back-arrow {34    position: absolute;35    top: 170px;36    left: 36px;37    width: 72px;38    height: 72px;39    display: flex;40    align-items: center;41    justify-content: center;42  }43  .back-arrow svg { width: 60px; height: 60px; stroke: #888F8B; stroke-width: 10; fill: none; }44 45  .progress-track {46    position: absolute;47    top: 190px;48    left: 160px;49    width: 760px;50    height: 52px;51    background: #2B3031;52    border-radius: 26px;53  }54  .progress-fill {55    position: absolute;56    top: 190px;57    left: 160px;58    width: 620px;59    height: 52px;60    background: #5E7E2B;61    border-radius: 26px;62  }63 64  /* Owl and speech bubble */65  .owl {66    position: absolute;67    top: 320px;68    left: 90px;69    width: 240px;70    height: 240px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    border-radius: 24px;74    display: flex;75    align-items: center;76    justify-content: center;77    color: #757575;78    font-weight: 600;79  }80 81  .speech {82    position: absolute;83    top: 340px;84    left: 380px;85    width: 620px;86    min-height: 260px;87    padding: 40px 48px;88    border-radius: 36px;89    background: rgba(35, 38, 40, 0.6);90    border: 2px solid #2C3233;91    color: #AEB5B2;92    font-size: 44px;93    line-height: 1.35;94  }95  .speech::before {96    content: "";97    position: absolute;98    left: -50px;99    top: 100px;100    width: 0; height: 0;101    border-top: 30px solid transparent;102    border-bottom: 30px solid transparent;103    border-right: 50px solid rgba(35, 38, 40, 0.6);104  }105 106  /* Modal */107  .modal {108    position: absolute;109    left: 60px;110    top: 980px;111    width: 960px;112    background: #34383B;113    border-radius: 56px;114    box-shadow: 0 24px 60px rgba(0,0,0,0.6);115  }116  .modal-inner {117    padding: 64px 70px 70px;118    text-align: center;119  }120  .modal-bell {121    width: 84px;122    height: 84px;123    margin: 0 auto 28px;124  }125  .modal-bell svg { width: 84px; height: 84px; fill: #C9DA78; }126 127  .modal-title {128    font-size: 52px;129    line-height: 1.2;130    font-weight: 700;131    color: #FFFFFF;132    margin-bottom: 54px;133  }134  .modal-title .duo { color: #C9DA78; font-weight: 800; }135 136  .modal-btn {137    width: 820px;138    height: 132px;139    margin: 0 auto 30px;140    background: #DDE88F;141    color: #141717;142    font-size: 44px;143    font-weight: 700;144    border: none;145    border-radius: 32px;146    display: flex;147    align-items: center;148    justify-content: center;149  }150 151  /* Continue button at bottom */152  .continue {153    position: absolute;154    left: 40px;155    bottom: 220px;156    width: 1000px;157    height: 128px;158    background: #3F5A22;159    border-radius: 36px;160    color: #0E0F10;161    display: flex;162    align-items: center;163    justify-content: center;164    font-weight: 900;165    letter-spacing: 4px;166    font-size: 44px;167    text-transform: uppercase;168    box-shadow: 0 14px 0 rgba(0,0,0,0.25) inset;169  }170 171  /* Bottom gesture bar */172  .gesture {173    position: absolute;174    bottom: 110px;175    left: 410px;176    width: 260px;177    height: 12px;178    border-radius: 10px;179    background: #D9D9D9;180    opacity: 0.9;181  }182</style>183</head>184<body>185<div id="render-target">186  <!-- Status Bar -->187  <div class="status-bar">188    <div class="status-left">8:16</div>189    <div class="status-right">190      <span class="status-icon">191        <!-- Alarm icon -->192        <svg viewBox="0 0 24 24">193          <path d="M6 2l-3 3M18 2l3 3" stroke="#FFFFFF" stroke-width="2"/>194          <circle cx="12" cy="13" r="7" />195          <path d="M12 9v5l3 2" />196        </svg>197      </span>198      <span class="status-icon">199        <!-- Cloud icon -->200        <svg viewBox="0 0 24 24">201          <path d="M6 15h10a4 4 0 0 0 0-8 6 6 0 0 0-11 2 4 4 0 0 0 1 6z" />202        </svg>203      </span>204      <span class="status-icon">205        <!-- Dot -->206        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" /></svg>207      </span>208      <span class="status-icon">209        <!-- WiFi -->210        <svg viewBox="0 0 24 24">211          <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 5-2 8 0" />212          <circle cx="12" cy="19" r="1.7" fill="#FFFFFF" stroke="none"/>213        </svg>214      </span>215      <span class="status-icon">216        <!-- Battery -->217        <svg viewBox="0 0 28 24">218          <rect x="2" y="6" width="20" height="12" rx="2" />219          <rect x="23" y="9" width="3" height="6" rx="1" />220          <rect x="4" y="8" width="12" height="8" fill="#FFFFFF" stroke="none"/>221        </svg>222      </span>223    </div>224  </div>225 226  <!-- Back Arrow & Progress -->227  <div class="back-arrow">228    <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" /></svg>229  </div>230  <div class="progress-track"></div>231  <div class="progress-fill"></div>232 233  <!-- Owl image placeholder -->234  <div class="owl">[IMG: Duolingo Owl]</div>235 236  <!-- Speech bubble -->237  <div class="speech">I’ll remind you to practice so it becomes a habit!</div>238 239  <!-- Modal -->240  <div class="modal">241    <div class="modal-inner">242      <div class="modal-bell">243        <svg viewBox="0 0 24 24">244          <path d="M12 3a5 5 0 0 0-5 5v3c0 .9-.6 1.8-1.3 2.4L5 14h14l-.7-.6c-.7-.6-1.3-1.5-1.3-2.4V8a5 5 0 0 0-5-5z" />245          <path d="M9 17a3 3 0 0 0 6 0" />246        </svg>247      </div>248      <div class="modal-title">Allow <span class="duo">Duolingo</span> to send you notifications?</div>249      <div class="modal-btn">Allow</div>250      <div class="modal-btn">Don’t allow</div>251    </div>252  </div>253 254  <!-- Continue button -->255  <div class="continue">CONTINUE</div>256 257  <!-- Gesture bar -->258  <div class="gesture"></div>259</div>260</body>261</html>