GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Explore Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f1216; /* deep dark */14    color: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 96px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 40px;28    color: #eaeaea;29    font-weight: 600;30    letter-spacing: 0.3px;31  }32  .status-left { display: flex; align-items: center; gap: 16px; font-size: 40px; }33  .status-right { display: flex; align-items: center; gap: 24px; }34  .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }35  .profile-top {36    position: absolute; right: 40px; top: 130px;37    width: 72px; height: 72px; border-radius: 36px;38    border: 2px solid #3a3f46; display: flex; align-items: center; justify-content: center; color: #bfc4cb;39  }40  /* Page title */41  .page-title {42    position: absolute;43    top: 160px; left: 40px;44    font-size: 100px; font-weight: 800; line-height: 1.05;45  }46 47  /* Cards Row */48  .cards-row {49    position: absolute;50    top: 340px; left: 40px; right: 40px;51    display: flex; gap: 32px;52  }53  .card {54    width: 320px;55    background: #171a20;56    border-radius: 24px;57    overflow: hidden;58  }59  .card-img {60    width: 100%; height: 360px;61    background: #E0E0E0; border-bottom: 1px solid #BDBDBD;62    display: flex; align-items: center; justify-content: center; color: #555;63    font-weight: 600;64  }65  .card-body { padding: 26px; }66  .card-title { font-size: 40px; font-weight: 700; line-height: 1.1; margin-bottom: 14px; }67  .card-sub { font-size: 30px; color: #b0b6c0; }68 69  /* Sections */70  .section {71    position: absolute; left: 40px; right: 40px;72    color: #fff;73  }74  .section-header {75    display: flex; justify-content: space-between; align-items: baseline;76  }77  .section-title { font-size: 60px; font-weight: 800; }78  .see-all { font-size: 40px; color: #93a9ff; font-weight: 700; }79  .section-note { font-size: 42px; color: #b8bec8; margin-top: 14px; }80 81  /* Games section position */82  #games { top: 950px; }83  .games-banner {84    margin-top: 32px;85    width: 100%; height: 420px;86    background: #E0E0E0; border: 1px solid #BDBDBD;87    display: flex; align-items: center; justify-content: center; color: #555; font-weight: 600;88    border-radius: 28px;89  }90 91  /* Magazine section */92  #magazine { top: 1500px; }93  .mag-banner {94    margin-top: 32px; width: 100%; height: 400px;95    background: #E0E0E0; border: 1px solid #BDBDBD;96    border-radius: 28px;97    display: flex; align-items: center; justify-content: center; color: #555; font-weight: 600;98  }99 100  /* Bottom Navigation */101  .bottom-nav {102    position: absolute;103    bottom: 0; left: 0; width: 1080px; height: 200px;104    background: #15181e;105    border-top: 1px solid #232833;106    display: flex; align-items: center; justify-content: space-around;107  }108  .nav-item {109    display: flex; flex-direction: column; align-items: center; gap: 16px;110    color: #cfd5de; font-size: 36px; font-weight: 600;111  }112  .nav-item .icon {113    width: 64px; height: 64px;114  }115  .nav-item.active { color: #ff8a33; }116  .nav-item.active .icon svg { fill: #ff8a33; }117  /* Small overlay +B badge */118  .badge {119    position: absolute; right: 16px; bottom: 16px;120    background: rgba(255,255,255,0.9); color: #111; font-weight: 800;121    font-size: 32px; padding: 6px 12px; border-radius: 10px;122  }123</style>124</head>125<body>126<div id="render-target">127 128  <!-- Status Bar -->129  <div class="status-bar">130    <div class="status-left">131      <div>12:29</div>132      <div style="font-size:32px; color:#b8bec8;">M</div>133    </div>134    <div class="status-right">135      <div class="icon">136        <!-- Wi-Fi icon -->137        <svg viewBox="0 0 24 24" width="40" height="40" fill="#eaeaea">138          <path d="M12 18.2l2.1 2.1L12 22l-2.1-1.7L12 18.2zm0-5.6c2.1 0 4 .8 5.5 2.3l1.4-1.4C17.9 11.7 15.1 10.6 12 10.6s-5.9 1.1-7.9 3.1l1.4 1.4c1.5-1.5 3.4-2.3 5.5-2.3zM12 6c3.7 0 7.1 1.4 9.7 4l1.4-1.4C20.1 5.7 16.2 4 12 4S3.9 5.7.9 8.6L2.3 10C4.9 7.4 8.3 6 12 6z"/>139        </svg>140      </div>141      <div class="icon">142        <!-- Battery icon -->143        <svg viewBox="0 0 24 24" width="40" height="40" fill="#eaeaea">144          <rect x="2" y="7" width="17" height="10" rx="2"></rect>145          <rect x="20" y="9" width="2" height="6"></rect>146          <rect x="4" y="9" width="11" height="6" fill="#7bd16b"></rect>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- Top profile icon -->153  <div class="profile-top">154    <!-- simple user svg -->155    <svg viewBox="0 0 24 24" width="42" height="42" fill="#bfc4cb">156      <circle cx="12" cy="8" r="4"></circle>157      <path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"></path>158    </svg>159  </div>160 161  <!-- Title -->162  <div class="page-title">Explore</div>163 164  <!-- Cards -->165  <div class="cards-row">166    <!-- Card 1 -->167    <div class="card">168      <div class="card-img">[IMG: Course Cover – L'Histoire au jour le jour]</div>169      <div class="badge">+B</div>170      <div class="card-body">171        <div class="card-title">L'Histoire au jour le jour</div>172        <div class="card-sub">Intermediate (B1)</div>173      </div>174    </div>175    <!-- Card 2 -->176    <div class="card">177      <div class="card-img">[IMG: Course Cover – French en route]</div>178      <div class="badge">+B</div>179      <div class="card-body">180        <div class="card-title">French en route</div>181        <div class="card-sub">Beginner (A2) / Intermediate (B1)</div>182      </div>183    </div>184    <!-- Card 3 -->185    <div class="card">186      <div class="card-img">[IMG: Course Cover – Parlez avec nous]</div>187      <div class="badge">+B</div>188      <div class="card-body">189        <div class="card-title">Parlez avec nous</div>190        <div class="card-sub">Newcomer</div>191      </div>192    </div>193  </div>194 195  <!-- Games Section -->196  <div id="games" class="section">197    <div class="section-header">198      <div class="section-title">Games</div>199      <div class="see-all">See all</div>200    </div>201    <div class="section-note">Challenge yourself with quick, fun games.</div>202    <div class="games-banner">[IMG: Mosaic of mini games tiles and playful graphics]</div>203  </div>204 205  <!-- Magazine Section -->206  <div id="magazine" class="section">207    <div class="section-header">208      <div class="section-title">Babbel Magazine</div>209      <div class="see-all">See all</div>210    </div>211    <div class="section-note">Explore articles on language, learning, and culture.</div>212    <div class="mag-banner">[IMG: Magazine articles collage in warm tones]</div>213  </div>214 215  <!-- Bottom Navigation -->216  <div class="bottom-nav">217    <div class="nav-item">218      <div class="icon">219        <svg viewBox="0 0 24 24" width="64" height="64" fill="#cfd5de">220          <path d="M12 3l9 8h-2v9H15v-6H9v6H5v-9H3l9-8z"/>221        </svg>222      </div>223      <div>Home</div>224    </div>225    <div class="nav-item">226      <div class="icon">227        <svg viewBox="0 0 24 24" width="64" height="64" fill="#cfd5de">228          <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"/>229        </svg>230      </div>231      <div>Review</div>232    </div>233    <div class="nav-item">234      <div class="icon">235        <svg viewBox="0 0 24 24" width="64" height="64" fill="#cfd5de">236          <path d="M16 12a4 4 0 11-8 0 4 4 0 018 0zm-9 7h10l3-3-2-2-3 3H8l-3-3-2 2 3 3z"/>237        </svg>238      </div>239      <div>Live</div>240    </div>241    <div class="nav-item active">242      <div class="icon">243        <svg viewBox="0 0 24 24" width="64" height="64">244          <circle cx="12" cy="12" r="9"></circle>245          <path d="M12 7v10M7 12h10" stroke="#0f1216" stroke-width="2" fill="none"/>246        </svg>247      </div>248      <div>Explore</div>249    </div>250  </div>251 252</div>253</body>254</html>