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>Survey Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #10191B; /* dark teal/charcoal background */15    color: #EAF2F3;16  }17 18  /* Status bar */19  .statusbar {20    height: 110px;21    padding: 30px 40px 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #DDE6E8;26    font-weight: 600;27    letter-spacing: 1px;28  }29  .status-left { display: flex; align-items: center; gap: 18px; }30  .status-right { display: flex; align-items: center; gap: 24px; }31  .dot { width: 10px; height: 10px; border-radius: 50%; background: #DDE6E8; opacity: 0.7; }32  .wifi {33    width: 38px; height: 24px; position: relative;34  }35  .wifi:before, .wifi:after {36    content: ""; position: absolute; left: 0; right: 0; margin: auto; border: 3px solid #DDE6E8; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; border-radius: 50%;37  }38  .wifi:before { width: 34px; height: 34px; top: -10px; opacity: 0.5; }39  .wifi:after { width: 22px; height: 22px; top: -4px; }40  .battery {41    width: 40px; height: 20px; border: 3px solid #DDE6E8; border-radius: 4px; position: relative;42  }43  .battery:after {44    content: ""; position: absolute; right: -8px; top: 4px; width: 6px; height: 12px; background: #DDE6E8; border-radius: 2px;45  }46  .battery .level { position: absolute; left: 3px; top: 3px; height: 12px; width: 26px; background: #DDE6E8; border-radius: 2px; }47 48  /* Top bar with back + progress */49  .top-controls {50    display: flex; align-items: center; gap: 26px;51    padding: 10px 42px 0 42px;52  }53  .back-btn { width: 64px; height: 64px; display: grid; place-items: center; }54  .progress {55    flex: 1; height: 30px; background: #2B3538; border-radius: 20px; position: relative;56  }57  .progress .fill {58    position: absolute; left: 0; top: 0; height: 100%; width: 280px; background: #9AD93A; border-radius: 20px;59  }60 61  /* Avatar + question bubble */62  .hero {63    display: flex; align-items: center; gap: 28px; padding: 30px 40px 10px 40px;64  }65  .img-placeholder {66    width: 180px; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD;67    display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 24px;68    font-weight: 600;69  }70  .speech {71    position: relative; color: #DDE6E8; font-size: 48px; line-height: 1.3;72    padding: 34px 40px; border: 4px solid #3A4649; border-radius: 28px; background: transparent;73    max-width: 760px;74  }75  .speech .tail {76    position: absolute; left: -22px; top: 40px; width: 36px; height: 36px; background: #10191B;77    border-left: 4px solid #3A4649; border-bottom: 4px solid #3A4649; transform: rotate(45deg); border-bottom-left-radius: 8px;78  }79 80  /* Options list */81  .options {82    padding: 10px 36px 280px 36px; /* leave space for footer */83  }84  .option {85    background: #162125;86    border: 4px solid #2C3B40;87    border-radius: 42px;88    padding: 28px 36px;89    display: flex; align-items: center; gap: 32px;90    margin: 26px 0;91    box-shadow: 0 3px 0 rgba(0,0,0,0.25) inset;92  }93  .option.selected { border-color: #4FA1D8; }94  .option .label {95    font-size: 44px; font-weight: 700; color: #F3F7F8;96  }97  .icon-box {98    width: 120px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;99    display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 12px;100    font-size: 28px; font-weight: 700;101  }102 103  /* Footer with CTA */104  .footer {105    position: absolute; left: 0; right: 0; bottom: 0;106    height: 280px; background: rgba(8, 12, 13, 0.92);107    padding: 30px 40px;108    box-shadow: 0 -10px 24px rgba(0,0,0,0.6);109  }110  .cta {111    width: 100%; height: 140px; background: #A8E61F; color: #0A0F10;112    font-size: 48px; font-weight: 900; letter-spacing: 2px;113    border-radius: 36px; display: flex; align-items: center; justify-content: center;114    box-shadow: 0 8px 0 #78B71A;115  }116  .home-indicator {117    position: absolute; left: 50%; transform: translateX(-50%);118    bottom: 16px; width: 220px; height: 10px; background: #DDE6E8; border-radius: 5px; opacity: 0.65;119  }120 121  /* SVG icon styling (back arrow) */122  .back-svg { width: 48px; height: 48px; }123  .back-svg path { stroke: #AEB9BC; stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }124</style>125</head>126<body>127<div id="render-target">128  <!-- Status bar -->129  <div class="statusbar">130    <div class="status-left">131      <div style="font-size:46px;">8:09</div>132      <div style="font-size:26px; opacity:.8;">Calm</div>133      <div class="dot"></div>134      <div class="dot" style="opacity:.5;"></div>135    </div>136    <div class="status-right">137      <div class="wifi"></div>138      <div class="battery"><div class="level"></div></div>139    </div>140  </div>141 142  <!-- Back + Progress -->143  <div class="top-controls">144    <div class="back-btn">145      <svg class="back-svg viewBox" viewBox="0 0 48 48">146        <path d="M32 8 L16 24 L32 40"></path>147      </svg>148    </div>149    <div class="progress"><div class="fill"></div></div>150  </div>151 152  <!-- Hero row -->153  <div class="hero">154    <div class="img-placeholder">[IMG: Duolingo Owl]</div>155    <div class="speech">156      <div class="tail"></div>157      How did you hear about<br>Duolingo?158    </div>159  </div>160 161  <!-- Options -->162  <div class="options">163    <div class="option selected">164      <div class="icon-box">[ICON: Play]</div>165      <div class="label">App store</div>166    </div>167 168    <div class="option">169      <div class="icon-box">[ICON: YouTube]</div>170      <div class="label">YouTube</div>171    </div>172 173    <div class="option">174      <div class="icon-box">[ICON: News]</div>175      <div class="label">News/article/blog</div>176    </div>177 178    <div class="option">179      <div class="icon-box">[ICON: TikTok]</div>180      <div class="label">TikTok</div>181    </div>182 183    <div class="option">184      <div class="icon-box">[ICON: TV]</div>185      <div class="label">TV</div>186    </div>187 188    <div class="option">189      <div class="icon-box">[ICON: Google]</div>190      <div class="label">Google Search</div>191    </div>192 193    <div class="option">194      <div class="icon-box">[ICON: Facebook/IG]</div>195      <div class="label">Facebook/Instagram</div>196    </div>197 198    <div class="option">199      <div class="icon-box">[ICON: Friend]</div>200      <div class="label">Friend/family</div>201    </div>202  </div>203 204  <!-- Footer CTA -->205  <div class="footer">206    <div class="cta">CONTINUE</div>207    <div class="home-indicator"></div>208  </div>209</div>210</body>211</html>