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 - Duolingo Style</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #0f1719; color: #e6f0f0;13  }14 15  /* Status bar (top) */16  .status {17    height: 90px;18    padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #cfd7d9; font-weight: 600; font-size: 34px;21    opacity: 0.9;22  }23  .status-icons { display: flex; align-items: center; gap: 22px; }24  .status-icon { width: 30px; height: 30px; border-radius: 50%; background: #cfd7d9; opacity: 0.85; }25  .battery {26    width: 44px; height: 26px; border-radius: 6px; border: 3px solid #cfd7d9; position: relative;27  }28  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #cfd7d9; border-radius: 2px; }29  .battery .level { position: absolute; left: 3px; top: 3px; right: 10px; bottom: 3px; background: #cfd7d9; border-radius: 4px; }30 31  /* Back + progress */32  .top-controls { position: relative; padding: 10px 40px 0 40px; }33  .back-arrow {34    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;35    margin-left: 10px;36  }37  .progress {38    height: 30px; border-radius: 18px; background: #2a3236; margin: 14px 10px 0 90px; position: relative;39  }40  .progress .fill {41    position: absolute; left: 0; top: 0; bottom: 0; width: 28%;42    background: #78d34c; border-radius: 18px;43  }44 45  /* Prompt area */46  .prompt {47    display: flex; align-items: flex-start; gap: 24px; padding: 30px 40px 10px 40px;48  }49  .avatar {50    width: 170px; height: 170px;51    background: #E0E0E0; border: 1px solid #BDBDBD;52    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 24px;53    font-weight: 700;54  }55  .bubble {56    flex: 1; position: relative; padding: 36px 40px; border-radius: 34px;57    background: #182224; border: 3px solid #2a3336; color: #e9f1f1; font-size: 44px; font-weight: 700;58  }59  .bubble .arrow {60    position: absolute; left: -26px; top: 40px; width: 24px; height: 24px;61    background: #182224; border-left: 3px solid #2a3336; border-bottom: 3px solid #2a3336;62    transform: rotate(45deg); border-bottom-left-radius: 6px;63  }64 65  /* Options list */66  .options { padding: 10px 40px 220px 40px; }67  .option {68    background: #162024; border: 3px solid #2a3336; border-radius: 40px;69    padding: 28px 34px; margin-bottom: 28px;70    display: flex; align-items: center; gap: 28px;71    box-shadow: 0 2px 0 rgba(0,0,0,0.35);72  }73  .option .label { font-size: 42px; font-weight: 800; color: #ffffff; letter-spacing: 0.2px; }74 75  .icon {76    width: 96px; height: 96px; border-radius: 22px; display: flex; align-items: center; justify-content: center;77    background: #141c1f; border: 2px solid #2d373b;78  }79  .icon svg { width: 74px; height: 74px; }80 81  /* Bottom sticky button */82  .footer {83    position: absolute; left: 0; right: 0; bottom: 0;84    padding: 22px 40px 44px;85    background: linear-gradient(to top, rgba(12,18,20,0.95), rgba(12,18,20,0.65) 60%, rgba(12,18,20,0));86  }87  .cta {88    height: 140px; border-radius: 40px;89    background: #2a3236; border: 3px solid #3a4347; color: #9aa7aa;90    display: flex; align-items: center; justify-content: center;91    font-size: 40px; font-weight: 900; letter-spacing: 4px;92  }93 94  /* Utility colors for brand hints within simple shapes */95  .c-red { fill: #ea4335; }96  .c-white { fill: #ffffff; }97  .c-grey { fill: #9aa7aa; }98  .c-blue { fill: #4285f4; }99  .c-green { fill: #34a853; }100  .c-yellow { fill: #fbbc04; }101  .c-pink { fill: #ff3b6b; }102  .c-teal { fill: #26c6da; }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status">110    <div class="time">8:09</div>111    <div class="status-icons">112      <div class="status-icon" title="Calm"></div>113      <div class="status-icon" style="width: 10px; height: 10px;"></div>114      <svg width="34" height="30" viewBox="0 0 24 24" fill="#cfd7d9" aria-label="Wifi">115        <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/>116      </svg>117      <div class="battery"><div class="level"></div></div>118    </div>119  </div>120 121  <!-- Back and progress -->122  <div class="top-controls">123    <div class="back-arrow">124      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#9aa7aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-label="Back">125        <path d="M15 18l-6-6 6-6"/>126      </svg>127    </div>128    <div class="progress">129      <div class="fill"></div>130    </div>131  </div>132 133  <!-- Prompt -->134  <div class="prompt">135    <div class="avatar">[IMG: Duolingo Owl]</div>136    <div class="bubble">137      <div class="arrow"></div>138      How did you hear about Duolingo?139    </div>140  </div>141 142  <!-- Options -->143  <div class="options">144 145    <!-- App store -->146    <div class="option">147      <div class="icon" aria-hidden="true">148        <svg viewBox="0 0 24 24">149          <!-- Simple multi-color play-style triangle (not actual logo) -->150          <polygon points="4,4 20,12 4,20" class="c-blue"></polygon>151          <polygon points="6,6 12,12 6,18" class="c-green" opacity="0.85"></polygon>152          <polygon points="10,9 14,12 10,15" class="c-yellow" opacity="0.9"></polygon>153        </svg>154      </div>155      <div class="label">App store</div>156    </div>157 158    <!-- YouTube -->159    <div class="option">160      <div class="icon">161        <svg viewBox="0 0 24 24">162          <rect x="3" y="6" width="18" height="12" rx="3" class="c-red"></rect>163          <polygon points="10,9 16,12 10,15" class="c-white"></polygon>164        </svg>165      </div>166      <div class="label">YouTube</div>167    </div>168 169    <!-- News/article/blog -->170    <div class="option">171      <div class="icon">172        <svg viewBox="0 0 24 24">173          <rect x="3" y="4" width="18" height="16" rx="2" class="c-grey" opacity="0.8"></rect>174          <rect x="5" y="6" width="8" height="6" class="c-white"></rect>175          <rect x="14" y="6" width="5" height="2.5" class="c-white" opacity="0.9"></rect>176          <rect x="14" y="9.5" width="5" height="2.5" class="c-white" opacity="0.9"></rect>177          <rect x="5" y="13.5" width="14" height="2.5" class="c-white" opacity="0.9"></rect>178        </svg>179      </div>180      <div class="label">News/article/blog</div>181    </div>182 183    <!-- TikTok -->184    <div class="option">185      <div class="icon">186        <svg viewBox="0 0 24 24">187          <!-- Simple musical note with two accent colors -->188          <path d="M10 6v8a3 3 0 1 1-2-2.8V6h2zm8 3c-2 0-4-1-5-3v10a3 3 0 1 0 2.5-2.9V7.7c1.2 1 2.5 1.3 2.5 1.3z" class="c-white"></path>189          <circle cx="8" cy="16" r="2.8" class="c-teal" opacity="0.9"></circle>190          <circle cx="16" cy="17" r="2.6" class="c-pink" opacity="0.85"></circle>191        </svg>192      </div>193      <div class="label">TikTok</div>194    </div>195 196    <!-- TV -->197    <div class="option">198      <div class="icon">199        <svg viewBox="0 0 24 24">200          <rect x="3" y="5" width="18" height="12" rx="2" class="c-grey"></rect>201          <rect x="10" y="18" width="4" height="2" class="c-grey"></rect>202        </svg>203      </div>204      <div class="label">TV</div>205    </div>206 207    <!-- Google Search -->208    <div class="option">209      <div class="icon">210        <svg viewBox="0 0 24 24">211          <circle cx="12" cy="12" r="10" fill="#222a2e"></circle>212          <text x="12" y="16" text-anchor="middle" font-size="13" font-weight="900" fill="#4285f4">G</text>213          <circle cx="5" cy="5" r="2" class="c-red"></circle>214          <circle cx="19" cy="5" r="2" class="c-yellow"></circle>215          <circle cx="5" cy="19" r="2" class="c-green"></circle>216        </svg>217      </div>218      <div class="label">Google Search</div>219    </div>220 221    <!-- Facebook/Instagram -->222    <div class="option">223      <div class="icon">224        <svg viewBox="0 0 24 24">225          <!-- two small symbols to hint FB + IG -->226          <circle cx="8" cy="12" r="7" fill="#1877f2"></circle>227          <text x="8" y="15" text-anchor="middle" font-size="10" font-weight="900" fill="#ffffff">f</text>228          <rect x="13" y="6" width="8" height="12" rx="3" fill="#ff7e6d"></rect>229          <circle cx="17" cy="12" r="3" fill="#ffffff" opacity="0.9"></circle>230        </svg>231      </div>232      <div class="label">Facebook/Instagram</div>233    </div>234 235  </div>236 237  <!-- Footer CTA -->238  <div class="footer">239    <div class="cta">CONTINUE</div>240  </div>241</div>242</body>243</html>