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>Mondly Language Select - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(160deg, #3aa7ff 0%, #2f7bf6 35%, #5b46ef 70%, #5c2cc9 100%);15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16    color: #ffffff;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 24px;23    left: 36px;24    right: 36px;25    height: 64px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    opacity: 0.95;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 24px;37  }38  .icon {39    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;40  }41  .dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 0.6; }42 43  /* Logo */44  .logo {45    position: absolute;46    top: 140px;47    left: 0;48    width: 100%;49    text-align: center;50  }51  .logo .brand {52    font-size: 150px;53    font-weight: 300;54    letter-spacing: 2px;55  }56  .logo .brand .globe {57    display: inline-block;58    width: 100px;59    height: 100px;60    line-height: 100px;61    text-align: center;62    border-radius: 50%;63    border: 2px solid rgba(255,255,255,0.8);64    font-size: 60px;65    margin: 0 12px;66  }67  .logo .sub {68    margin-top: 8px;69    font-size: 38px;70    opacity: 0.9;71  }72 73  /* Content area */74  .content {75    position: absolute;76    left: 0;77    right: 0;78    top: 520px;79    padding: 0 40px 40px;80  }81  .label {82    font-size: 54px;83    font-weight: 700;84    margin: 40px 0 24px 20px;85  }86 87  /* Dropdown and panels */88  .card {89    background: rgba(255,255,255,0.18);90    border-radius: 36px;91    padding: 28px 36px;92    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);93  }94  .dropdown {95    height: 140px;96    display: flex;97    align-items: center;98    justify-content: space-between;99    border-radius: 42px;100    padding: 0 36px;101    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));102  }103  .left {104    display: flex; align-items: center; gap: 28px;105  }106 107  .flag {108    width: 84px; height: 84px; border-radius: 50%;109    background: #E0E0E0;110    border: 1px solid #BDBDBD;111    color: #757575;112    font-size: 22px;113    display: flex; align-items: center; justify-content: center;114  }115  .lang {116    font-size: 54px; font-weight: 700;117  }118  .chev {119    width: 46px; height: 46px;120  }121 122  .big-panel {123    border-radius: 44px;124    overflow: hidden;125    background: linear-gradient(170deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));126  }127  .panel-header {128    height: 140px;129    padding: 0 36px;130    display: flex;131    align-items: center;132    justify-content: space-between;133  }134  .panel-title { font-size: 54px; font-weight: 700; opacity: 0.95; }135 136  .list {137    padding: 8px 0 16px;138  }139  .row {140    display: flex; align-items: center; gap: 28px;141    padding: 26px 36px;142    height: 132px;143  }144  .row .name {145    font-size: 52px; font-weight: 700;146  }147  .row.disabled { opacity: 0.35; }148 149  /* Bottom indicator */150  .home-indicator {151    position: absolute;152    bottom: 34px; left: 50%;153    transform: translateX(-50%);154    width: 360px; height: 14px;155    border-radius: 7px;156    background: rgba(255,255,255,0.85);157  }158</style>159</head>160<body>161<div id="render-target">162 163  <!-- Status bar -->164  <div class="status-bar">165    <div>6:40</div>166    <div class="status-icons">167      <div class="icon">168        <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff" opacity="0.9">169          <path d="M6 8h12v10a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8zm2-4h8l1 2H7l1-2z"/>170        </svg>171      </div>172      <div class="icon">173        <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff" opacity="0.9">174          <path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>175        </svg>176      </div>177      <div class="icon">178        <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff" opacity="0.9">179          <path d="M10 20v-6H6l8-10v6h4l-8 10z"/>180        </svg>181      </div>182      <div class="icon">183        <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff" opacity="0.9">184          <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"/>185        </svg>186      </div>187      <div class="dot"></div>188      <div class="icon">189        <svg viewBox="0 0 24 24" width="28" height="28" fill="#fff" opacity="0.9">190          <path d="M20 8h-3V6a5 5 0 0 0-10 0v2H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2zm-5 0H9V6a3 3 0 0 1 6 0v2z"/>191        </svg>192      </div>193      <div class="icon" style="width:auto; font-size:32px; opacity:0.95;">100%</div>194    </div>195  </div>196 197  <!-- Logo -->198  <div class="logo">199    <div class="brand">m<span class="globe">🌍</span>ndly</div>200    <div class="sub">by Pearson</div>201  </div>202 203  <!-- Main content -->204  <div class="content">205    <div class="label">I speak</div>206    <div class="dropdown">207      <div class="left">208        <div class="flag">[UK]</div>209        <div class="lang">English</div>210      </div>211      <svg class="chev" viewBox="0 0 24 24" fill="#fff" opacity="0.9">212        <path d="M7 10l5 5 5-5H7z"/>213      </svg>214    </div>215 216    <div class="label" style="margin-top: 48px;">I want to learn</div>217    <div class="big-panel">218      <div class="panel-header">219        <div class="panel-title">Select</div>220        <svg class="chev" viewBox="0 0 24 24" fill="#fff" opacity="0.9">221          <path d="M7 14l5-5 5 5H7z"/>222        </svg>223      </div>224      <div class="list">225        <div class="row disabled">226          <div class="flag">[US]</div>227          <div class="name">American English</div>228        </div>229        <div class="row disabled">230          <div class="flag">[UK]</div>231          <div class="name">English</div>232        </div>233        <div class="row">234          <div class="flag">[ES]</div>235          <div class="name">Spanish</div>236        </div>237        <div class="row">238          <div class="flag">[FR]</div>239          <div class="name">French</div>240        </div>241        <div class="row">242          <div class="flag">[DE]</div>243          <div class="name">German</div>244        </div>245        <div class="row">246          <div class="flag">[IT]</div>247          <div class="name">Italian</div>248        </div>249        <div class="row">250          <div class="flag">[RU]</div>251          <div class="name">Russian</div>252        </div>253        <div class="row">254          <div class="flag">[JP]</div>255          <div class="name">Japanese</div>256        </div>257        <div class="row">258          <div class="flag">[KR]</div>259          <div class="name">Korean</div>260        </div>261        <div class="row">262          <div class="flag">[CN]</div>263          <div class="name">Chinese</div>264        </div>265      </div>266    </div>267  </div>268 269  <!-- Home indicator -->270  <div class="home-indicator"></div>271</div>272</body>273</html>