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>Goal Selection - Portuguese</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Inter, Arial, Helvetica, sans-serif; }9  * { box-sizing: border-box; }10 11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #ffffff;17  }18 19  /* Hero */20  .hero {21    position: relative;22    width: 100%;23    height: 1120px;24  }25  .hero-img {26    position: absolute;27    inset: 0;28    background: #E0E0E0;29    border-bottom: 1px solid #BDBDBD;30    display: flex;31    align-items: center;32    justify-content: center;33    color: #757575;34    font-size: 36px;35    letter-spacing: 0.2px;36  }37  .hero-scrim {38    position: absolute;39    inset: 0;40    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 38%, rgba(0,0,0,0.55) 100%);41    pointer-events: none;42  }43 44  /* Status bar */45  .status-bar {46    position: absolute;47    top: 0;48    left: 0;49    right: 0;50    height: 100px;51    padding: 0 32px;52    display: flex;53    align-items: center;54    justify-content: space-between;55    color: #ffffff;56    font-weight: 600;57    font-size: 34px;58  }59  .sb-left { display: flex; align-items: center; gap: 18px; opacity: 0.95; }60  .sb-right { display: flex; align-items: center; gap: 22px; opacity: 0.95; }61  .sb-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; }62 63  /* Close button */64  .close-btn {65    position: absolute;66    top: 140px;67    left: 32px;68    width: 84px;69    height: 84px;70    border: none;71    background: transparent;72    color: #ffffff;73    opacity: 0.95;74    cursor: default;75  }76  .close-btn svg { width: 84px; height: 84px; }77 78  /* Title over hero */79  .hero-title {80    position: absolute;81    left: 48px;82    right: 48px;83    top: 380px;84    color: #ffffff;85    font-weight: 800;86    font-size: 82px;87    line-height: 96px;88    letter-spacing: -0.5px;89    text-shadow: 0 2px 6px rgba(0,0,0,0.35);90  }91 92  /* Bottom sheet list */93  .sheet {94    position: relative;95    margin-top: -20px;96    background: #ffffff;97    border-top-left-radius: 28px;98    border-top-right-radius: 28px;99    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);100    padding-top: 18px;101    min-height: 1180px;102  }103  .list { margin-top: 6px; }104  .item {105    position: relative;106    height: 200px;107    display: flex;108    align-items: center;109    padding: 0 40px 0 48px;110  }111  .label {112    flex: 1;113    color: #37474F;114    font-size: 44px;115    font-weight: 500;116  }117  .chevron {118    width: 56px;119    height: 56px;120    color: #9EABB4;121  }122  .divider {123    height: 1px;124    background: #E7ECEF;125    margin-left: 48px;126  }127 128  /* Bottom gesture bar */129  .gesture {130    position: absolute;131    left: 50%;132    transform: translateX(-50%);133    bottom: 36px;134    width: 260px;135    height: 14px;136    background: #C7C7C7;137    border-radius: 8px;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <div class="hero">145    <div class="hero-img">[IMG: Lisbon city street photo]</div>146    <div class="hero-scrim"></div>147 148    <div class="status-bar">149      <div class="sb-left">150        <span>5:43</span>151      </div>152      <div class="sb-right">153        <div class="sb-icon" aria-hidden="true">154          <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="white" stroke-width="2">155            <path d="M2 18c4-4 16-4 20 0" />156            <path d="M6 18c3-3 9-3 12 0" />157            <path d="M10 18c1-1 3-1 4 0" />158            <circle cx="12" cy="18" r="1.2" fill="white"/>159          </svg>160        </div>161        <div class="sb-icon" aria-hidden="true">162          <svg viewBox="0 0 24 24" width="38" height="38" fill="none" stroke="white" stroke-width="2">163            <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="white" stroke="white"/>164            <rect x="3" y="7" width="10" height="10" rx="2" ry="2" fill="#00C853" stroke="#00C853"/>165            <rect x="20" y="10" width="2" height="4" fill="white" stroke="white"/>166          </svg>167        </div>168        <span>95%</span>169      </div>170    </div>171 172    <button class="close-btn" aria-label="Close dialog">173      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round">174        <path d="M5 5 L19 19 M19 5 L5 19" />175      </svg>176    </button>177 178    <div class="hero-title">179      What is your main goal in180      learning Portuguese?181    </div>182  </div>183 184  <div class="sheet">185    <div class="list">186      <div class="item">187        <div class="label">Develop professionally</div>188        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">189          <path d="M8 4 L16 12 L8 20" />190        </svg>191      </div>192      <div class="divider"></div>193 194      <div class="item">195        <div class="label">Communicate with friends and family</div>196        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">197          <path d="M8 4 L16 12 L8 20" />198        </svg>199      </div>200      <div class="divider"></div>201 202      <div class="item">203        <div class="label">Help with my education</div>204        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">205          <path d="M8 4 L16 12 L8 20" />206        </svg>207      </div>208      <div class="divider"></div>209 210      <div class="item">211        <div class="label">Learn for fun and culture</div>212        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">213          <path d="M8 4 L16 12 L8 20" />214        </svg>215      </div>216      <div class="divider"></div>217 218      <div class="item">219        <div class="label">Feel like a local when I travel</div>220        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">221          <path d="M8 4 L16 12 L8 20" />222        </svg>223      </div>224    </div>225  </div>226 227  <div class="gesture"></div>228</div>229</body>230</html>