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>Level Selection UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Hero / background image area */18  .hero {19    position: absolute;20    left: 0; top: 0;21    width: 1080px; height: 1280px;22  }23  .hero .photo {24    position: absolute; inset: 0;25    background: #E0E0E0;26    border-bottom: 1px solid #BDBDBD;27    display: flex; align-items: flex-end; justify-content: center;28    color: #757575; font-size: 32px; letter-spacing: 0.5px;29  }30  .hero .darken {31    position: absolute; inset: 0;32    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.15));33    pointer-events: none;34  }35 36  /* Status bar */37  .status-bar {38    position: absolute; top: 0; left: 0; width: 100%; height: 120px;39    color: #fff; padding: 0 40px; box-sizing: border-box;40    display: flex; align-items: center; justify-content: space-between;41  }42  .status-left { font-size: 44px; font-weight: 500; }43  .status-right { display: flex; align-items: center; gap: 28px; }44  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3.5; }45  .battery { display: flex; align-items: center; gap: 10px; font-size: 36px; }46 47  /* Close */48  .close-btn {49    position: absolute; top: 140px; left: 36px;50    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;51  }52  .close-btn svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 6; fill: none; }53 54  /* Title */55  .hero-title {56    position: absolute; left: 64px; top: 420px; width: 920px;57    color: #fff; font-weight: 700; line-height: 1.1; font-size: 78px;58  }59 60  /* White sheet with levels */61  .sheet {62    position: absolute; left: 0; top: 1180px; width: 100%; height: 1020px;63    background: #fff;64    border-top-left-radius: 18px; border-top-right-radius: 18px;65    box-shadow: 0 -2px 6px rgba(0,0,0,0.08);66  }67  .levels {68    position: relative; padding: 60px 64px 0 220px; box-sizing: border-box;69  }70  .levels::before {71    content: ''; position: absolute; left: 140px; top: 40px; width: 2px; height: 840px; background: #CFD8DC;72  }73  .level { position: relative; padding: 44px 0; }74  .level + .level { border-top: 1px solid #E0E0E0; }75 76  .badge {77    position: absolute; left: -140px; top: 28px;78    width: 96px; height: 96px; border-radius: 50%;79    display: flex; align-items: center; justify-content: center;80    font-weight: 700; font-size: 34px;81    box-shadow: 0 3px 8px rgba(0,0,0,0.2);82  }83  .badge.blue { background: #1E88E5; color: #fff; }84  .badge.gray { background: #F5F5F5; color: #616161; border: 1px solid #DADADA; }85 86  .label {87    font-weight: 700; font-size: 30px; letter-spacing: 1px;88    color: #9E9E9E; margin-bottom: 12px;89  }90  .desc { font-size: 36px; color: #212121; }91 92  /* CTA + gesture bar */93  .cta {94    position: absolute; left: 0; bottom: 160px;95    width: 100%; height: 160px; background: #2D75F8;96    color: #fff; display: flex; align-items: center; justify-content: center;97    font-size: 44px; font-weight: 700;98  }99  .gesture {100    position: absolute; left: 50%; transform: translateX(-50%);101    bottom: 80px; width: 300px; height: 16px; border-radius: 10px; background: #C0C0C0;102  }103</style>104</head>105<body>106<div id="render-target">107  <div class="hero">108    <div class="photo">[IMG: Outdoor travel scene inside vehicle]</div>109    <div class="darken"></div>110 111    <div class="status-bar">112      <div class="status-left">5:43</div>113      <div class="status-right">114        <div class="status-icon">115          <!-- Cellular -->116          <svg viewBox="0 0 24 24"><path d="M3 21h3v-6H3zM9 21h3v-10H9zM15 21h3V5h-3z"/></svg>117        </div>118        <div class="status-icon">119          <!-- WiFi -->120          <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">121            <path d="M2 8c6-4 14-4 20 0"></path>122            <path d="M5 12c4-3 10-3 14 0"></path>123            <path d="M8 16c3-2 7-2 10 0"></path>124            <circle cx="12" cy="20" r="1.7" fill="#fff" stroke="none"></circle>125          </svg>126        </div>127        <div class="status-icon">128          <!-- Notification dot -->129          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"></circle></svg>130        </div>131        <div class="battery">132          <div class="status-icon">133            <!-- Battery -->134            <svg viewBox="0 0 24 24">135              <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>136              <rect x="20" y="10" width="2" height="4"></rect>137            </svg>138          </div>139          <span>95%</span>140        </div>141      </div>142    </div>143 144    <div class="close-btn">145      <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"></path></svg>146    </div>147 148    <div class="hero-title">What level do you want to achieve?</div>149  </div>150 151  <div class="sheet">152    <div class="levels">153      <div class="level">154        <div class="badge blue">A1</div>155        <div class="label">BEGINNER</div>156        <div class="desc">Order a meal in a restaurant and understand signs</div>157      </div>158      <div class="level">159        <div class="badge gray">A2</div>160        <div class="label">ELEMENTARY</div>161        <div class="desc">Make small talk with locals and talk about my life</div>162      </div>163      <div class="level">164        <div class="badge gray">B1</div>165        <div class="label">INTERMEDIATE</div>166        <div class="desc">Find my way around on my own</div>167      </div>168      <div class="level">169        <div class="badge gray">B2</div>170        <div class="label">UPPER INTERMEDIATE</div>171        <div class="desc">Understand local radio and TV</div>172      </div>173    </div>174  </div>175 176  <div class="cta">Continue</div>177  <div class="gesture"></div>178</div>179</body>180</html>