GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: linear-gradient(180deg, #4E86FF 0%, #3E6CF3 40%, #3A54E6 70%, #3A34D2 100%);14    font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;15    color: #fff;16  }17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 18px;21    left: 0;22    width: 100%;23    height: 80px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    opacity: 0.95;29  }30  .status-left { font-weight: 600; font-size: 40px; letter-spacing: 0.5px; }31  .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35    font-size: 34px;36  }37  .dot-sep {38    width: 12px; height: 12px; background: rgba(255,255,255,0.6); border-radius: 50%;39  }40  .progress {41    position: absolute;42    top: 140px;43    left: 0; right: 0;44    display: flex;45    justify-content: center;46    gap: 24px;47  }48  .progress .p-dot {49    width: 22px; height: 22px;50    border-radius: 50%;51    background: rgba(255,255,255,0.35);52  }53  .title {54    position: absolute;55    top: 300px;56    left: 60px;57    right: 60px;58    text-align: center;59    font-weight: 800;60    font-size: 96px;61    line-height: 1.15;62    letter-spacing: -0.5px;63    text-shadow: 0 2px 6px rgba(0,0,0,0.15);64  }65 66  /* Illustration hint (hair/shape behind) */67  .hair-shape {68    position: absolute;69    bottom: 520px;70    left: 140px;71    width: 800px;72    height: 480px;73    background: radial-gradient(120% 100% at 50% 20%, #FFB439 0%, #F79A2E 70%, #E07C2A 100%);74    border-radius: 240px 240px 120px 120px;75    box-shadow: 0 30px 80px rgba(0,0,0,0.25);76    transform: rotate(-2deg);77    opacity: 0.95;78  }79 80  /* Bubbles */81  .bubble {82    position: absolute;83    border-radius: 50%;84    display: flex;85    align-items: center;86    justify-content: center;87    font-weight: 800;88    color: #fff;89    text-transform: none;90    box-shadow: 0 12px 28px rgba(0,0,0,0.18);91    background: transparent;92  }93  .bubble span { transform: translateY(2px); }94  .b-yellow { border: 16px solid #F4D64F; }95  .b-red { border: 16px solid #FF4F5A; }96  .b-orange { border: 16px solid #FF9C3D; }97  .b-green { border: 16px solid #43D17B; }98  .b-teal { border: 16px solid #59D6E7; }99  .b-lilac { border: 16px solid #C8A6D6; }100 101  /* Button */102  .cta {103    position: absolute;104    bottom: 160px;105    left: 60px;106    width: 960px;107    height: 160px;108    border-radius: 90px;109    background: linear-gradient(90deg, #FF4FC3 0%, #C343F7 50%, #7D44FF 100%);110    display: flex;111    align-items: center;112    justify-content: center;113    font-weight: 800;114    font-size: 56px;115    letter-spacing: 0.5px;116    color: #fff;117    box-shadow: 0 24px 60px rgba(90, 27, 190, 0.45);118  }119  .home-indicator {120    position: absolute;121    bottom: 62px;122    left: 50%;123    width: 320px;124    height: 16px;125    border-radius: 8px;126    background: rgba(255,255,255,0.85);127    transform: translateX(-50%);128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Status bar -->135  <div class="status-bar">136    <div class="status-left">6:42</div>137    <div class="status-right">138      <!-- Simple icons -->139      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">140        <path d="M2 9c4-4 16-4 20 0" stroke="white" stroke-width="2" stroke-linecap="round"/>141        <path d="M5 12c3-3 11-3 14 0" stroke="white" stroke-width="2" stroke-linecap="round"/>142        <path d="M8 15c2-2 6-2 8 0" stroke="white" stroke-width="2" stroke-linecap="round"/>143      </svg>144      <div class="dot-sep"></div>145      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">146        <path d="M2 7h16c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2H2V7z" stroke="white" stroke-width="2" stroke-linejoin="round"/>147        <rect x="3" y="9" width="14" height="6" fill="white"/>148      </svg>149      <span style="font-weight:700;">100%</span>150    </div>151  </div>152 153  <!-- Progress dots -->154  <div class="progress">155    <div class="p-dot"></div>156    <div class="p-dot"></div>157    <div class="p-dot"></div>158    <div class="p-dot"></div>159    <div class="p-dot"></div>160    <div class="p-dot"></div>161    <div class="p-dot"></div>162    <div class="p-dot"></div>163    <div class="p-dot"></div>164    <div class="p-dot"></div>165  </div>166 167  <!-- Title -->168  <div class="title">Cannot memorize words?</div>169 170  <!-- Decorative hair/shape -->171  <div class="hair-shape"></div>172 173  <!-- Word bubbles -->174  <div class="bubble b-yellow" style="width:190px;height:190px;left:70px;top:990px;">175    <span style="font-size:64px;">cão</span>176  </div>177  <div class="bubble b-yellow" style="width:260px;height:260px;left:40px;top:1140px;">178    <span style="font-size:86px;">gato</span>179  </div>180  <div class="bubble b-red" style="width:240px;height:240px;left:320px;top:1060px;">181    <span style="font-size:80px;">suco</span>182  </div>183  <div class="bubble b-lilac" style="width:200px;height:200px;left:500px;top:1260px;">184    <span style="font-size:60px;">carro</span>185  </div>186  <div class="bubble b-teal" style="width:260px;height:260px;left:640px;top:1200px;">187    <span style="font-size:100px;">dia</span>188  </div>189  <div class="bubble b-orange" style="width:280px;height:280px;right:120px;top:980px;">190    <span style="font-size:104px;">chá</span>191  </div>192  <div class="bubble b-green" style="width:250px;height:250px;right:40px;top:1130px;">193    <span style="font-size:96px;">café</span>194  </div>195  <div class="bubble b-red" style="width:190px;height:190px;right:180px;top:1270px;">196    <span style="font-size:84px;">Oi.</span>197  </div>198 199  <!-- Continue button -->200  <div class="cta">Continue</div>201 202  <!-- Home indicator -->203  <div class="home-indicator"></div>204</div>205</body>206</html>