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>UI Render</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Inter", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: linear-gradient(180deg, #4db1ff 0%, #4e64ff 40%, #5a3ee3 70%, #4a21c9 100%);20  }21 22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    color: #ffffff;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 40px;33    box-sizing: border-box;34    font-weight: 600;35    letter-spacing: 0.2px;36  }37  .status-left {38    display: flex;39    align-items: center;40    gap: 18px;41    font-size: 36px;42  }43  .status-right {44    display: flex;45    align-items: center;46    gap: 26px;47    font-size: 28px;48  }49  .icon {50    width: 36px;51    height: 36px;52  }53  .battery {54    width: 60px;55    height: 30px;56  }57  .top-progress {58    position: absolute;59    top: 120px;60    left: 0;61    width: 1080px;62    height: 12px;63  }64  .progress-track {65    width: 92%;66    height: 6px;67    margin: 0 auto;68    border-radius: 6px;69    background: rgba(255,255,255,0.25);70  }71  .progress-fill {72    width: 32%;73    height: 6px;74    border-radius: 6px;75    background: #34d1c6;76  }77 78  .stars-row {79    position: absolute;80    top: 170px;81    left: 0;82    width: 100%;83    display: flex;84    justify-content: center;85    gap: 26px;86    align-items: center;87  }88  .star {89    width: 80px;90    height: 80px;91  }92  .skip-link {93    position: absolute;94    top: 185px;95    right: 44px;96    color: #e8f0ff;97    font-size: 36px;98    text-decoration: underline;99    opacity: 0.95;100  }101 102  .title-row {103    position: absolute;104    top: 270px;105    left: 48px;106    right: 48px;107    display: flex;108    align-items: center;109    gap: 26px;110  }111  .avatar {112    width: 132px;113    height: 132px;114    border-radius: 50%;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-weight: 600;122  }123  .title-text {124    color: #ffffff;125    font-size: 58px;126    line-height: 1.15;127    font-weight: 800;128    letter-spacing: 0.3px;129  }130 131  .cards {132    position: absolute;133    top: 510px;134    left: 48px;135    right: 48px;136    display: grid;137    grid-template-columns: 1fr 1fr;138    gap: 40px 40px;139  }140  .card {141    height: 580px;142    border: 2px solid rgba(200, 220, 255, 0.55);143    border-radius: 28px;144    overflow: hidden;145    position: relative;146    backdrop-filter: saturate(120%);147  }148  .img-placeholder {149    width: 100%;150    height: 470px;151    background: #E0E0E0;152    border-bottom: 1px solid #BDBDBD;153    display: flex;154    justify-content: center;155    align-items: center;156    color: #757575;157    font-weight: 600;158    font-size: 34px;159    text-align: center;160    padding: 0 20px;161    box-sizing: border-box;162  }163  .card-footer {164    position: absolute;165    bottom: 0;166    left: 0;167    width: 100%;168    height: 110px;169    display: flex;170    align-items: center;171    padding: 0 28px;172    box-sizing: border-box;173    color: #ffffff;174    font-size: 44px;175    font-weight: 800;176    background: rgba(85, 117, 255, 0.25);177  }178  .muted {179    color: rgba(255,255,255,0.7);180    font-weight: 700;181    margin-right: 10px;182  }183 184  /* Dragged word pill */185  .drag-pill {186    position: absolute;187    bottom: 130px;188    left: 36px;189    padding: 18px 30px;190    border-radius: 24px;191    background: #6a5953;192    color: #f5f3f2;193    font-size: 42px;194    font-weight: 800;195    box-shadow: 0 4px 10px rgba(0,0,0,0.25);196    border: 2px solid rgba(255,255,255,0.2);197    letter-spacing: 0.2px;198  }199  .drag-pill .small {200    color: rgba(255,255,255,0.85);201    font-weight: 700;202    margin-right: 8px;203  }204 205  /* Pointer hand overlay */206  .hand {207    position: absolute;208    bottom: 10px;209    right: -6px;210    width: 240px;211    height: 240px;212    opacity: 0.95;213  }214 215  /* Bottom home indicator */216  .home-indicator {217    position: absolute;218    bottom: 44px;219    left: 50%;220    transform: translateX(-50%);221    width: 360px;222    height: 10px;223    background: rgba(255,255,255,0.85);224    border-radius: 8px;225  }226</style>227</head>228<body>229<div id="render-target">230 231  <div class="status-bar">232    <div class="status-left">233      <div>6:43</div>234    </div>235    <div class="status-right">236      <!-- Simple icons -->237      <svg class="icon" viewBox="0 0 24 24" fill="none">238        <path d="M2 18l10-12 10 12" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>239      </svg>240      <svg class="icon" viewBox="0 0 24 24" fill="none">241        <path d="M2 16c4-4 16-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>242        <path d="M6 16c3-3 9-3 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>243        <circle cx="12" cy="16" r="1.6" fill="#fff"/>244      </svg>245      <svg class="battery" viewBox="0 0 36 18" fill="none">246        <rect x="1" y="3" width="30" height="12" rx="3" stroke="#fff" stroke-width="2"></rect>247        <rect x="3" y="5" width="24" height="8" rx="2" fill="#fff"></rect>248        <rect x="31" y="6" width="4" height="6" rx="1" fill="#fff"></rect>249      </svg>250      <div style="font-size:28px; font-weight:700;">100%</div>251    </div>252  </div>253 254  <div class="top-progress">255    <div class="progress-track">256      <div class="progress-fill"></div>257    </div>258  </div>259 260  <div class="stars-row">261    <svg class="star" viewBox="0 0 24 24">262      <path d="M12 2l3.1 6.7 7.4.7-5.5 4.8 1.7 7.1L12 17.9 5.3 21.3l1.7-7.1L1.5 9.4l7.4-.7L12 2z" fill="#FFD34D"></path>263    </svg>264    <svg class="star" viewBox="0 0 24 24">265      <path d="M12 2l3.1 6.7 7.4.7-5.5 4.8 1.7 7.1L12 17.9 5.3 21.3l1.7-7.1L1.5 9.4l7.4-.7L12 2z" fill="#FFD34D"></path>266    </svg>267    <svg class="star" viewBox="0 0 24 24">268      <path d="M12 2l3.1 6.7 7.4.7-5.5 4.8 1.7 7.1L12 17.9 5.3 21.3l1.7-7.1L1.5 9.4l7.4-.7L12 2z" fill="#FFD34D"></path>269    </svg>270  </div>271  <div class="skip-link">Skip</div>272 273  <div class="title-row">274    <div class="avatar">[IMG: Avatar]</div>275    <div class="title-text">Move the word to the correct answer</div>276  </div>277 278  <div class="cards">279    <!-- Card 1: suco -->280    <div class="card">281      <div class="img-placeholder">[IMG: Orange juice with oranges]</div>282      <div class="card-footer">283        <span class="muted">(um)</span>284        suco285      </div>286    </div>287 288    <!-- Card 2: chá + drag pill + hand -->289    <div class="card">290      <div class="img-placeholder">[IMG: Tea being poured into cup]</div>291      <div class="drag-pill"><span class="small">(a)</span>tea</div>292      <svg class="hand" viewBox="0 0 120 120" fill="none">293        <path d="M32 74c-3 4-4 9-2 14 3 7 10 10 17 8l28-8c6-2 10-8 10-15 0-5-3-10-8-12l-6-2-1-19c0-4-4-7-8-6-3 1-5 4-5 7l1 14-4-1-1-17c0-4-3-7-7-7-4 0-7 3-7 7l1 17-4-1-1-13c0-4-3-7-7-7-5 0-8 4-8 8l2 30z"294              stroke="#ffffff" stroke-width="3" fill="rgba(255,255,255,0.20)" stroke-linejoin="round"/>295      </svg>296      <div class="card-footer">297        <span class="muted">(um)</span>298        chá299      </div>300    </div>301 302    <!-- Card 3: vinho -->303    <div class="card">304      <div class="img-placeholder">[IMG: Red wine glasses outdoors]</div>305      <div class="card-footer">vinho</div>306    </div>307 308    <!-- Card 4: café -->309    <div class="card">310      <div class="img-placeholder">[IMG: Coffee cup on newspaper]</div>311      <div class="card-footer">312        <span class="muted">(um)</span>313        café314      </div>315    </div>316  </div>317 318  <div class="home-indicator"></div>319</div>320</body>321</html>