GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Cuisines List UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F4F4F4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 140px;23    background: #2F2F2F;24    color: #fff;25  }26  .status-content {27    position: absolute;28    top: 36px;29    left: 36px;30    right: 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    font-size: 40px;35  }36  .status-left, .status-right {37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .icon {42    width: 48px; height: 48px;43  }44 45  /* App bar */46  .app-bar {47    position: absolute;48    top: 140px;49    left: 0;50    width: 1080px;51    height: 190px;52    background: #FFFFFF;53    box-shadow: 0 2px 4px rgba(0,0,0,0.08);54  }55  .app-bar-inner {56    position: absolute;57    left: 40px;58    right: 40px;59    top: 50%;60    transform: translateY(-50%);61    display: flex;62    align-items: center;63    gap: 30px;64  }65  .back-icon {66    width: 60px; height: 60px;67  }68  .title {69    font-size: 64px;70    font-weight: 700;71    color: #222;72  }73 74  /* List area */75  .list-area {76    position: absolute;77    top: 330px; /* status(140) + appbar(190) */78    left: 0;79    width: 1080px;80    bottom: 160px; /* space for nav bar */81    padding: 20px 36px 20px 36px;82    box-sizing: border-box;83  }84  .card {85    width: 1008px; /* 1080 - 2*36 */86    height: 180px;87    margin: 26px 0;88    background: #FFFFFF;89    border-radius: 36px;90    box-shadow: 0 12px 24px rgba(0,0,0,0.12);91    display: flex;92    align-items: center;93    justify-content: space-between;94    padding: 0 40px;95    box-sizing: border-box;96  }97  .card .label {98    font-size: 48px;99    font-weight: 700;100    color: #2B2B2B;101  }102  .circle-img {103    width: 160px;104    height: 160px;105    border-radius: 50%;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    display: flex;109    align-items: center;110    justify-content: center;111    color: #757575;112    font-size: 22px;113    text-align: center;114    padding: 8px;115    box-sizing: border-box;116  }117 118  /* Bottom navigation bar */119  .nav-bar {120    position: absolute;121    bottom: 0;122    left: 0;123    width: 1080px;124    height: 160px;125    background: #2F2F2F;126  }127  .home-pill {128    position: absolute;129    left: 50%;130    bottom: 46px;131    transform: translateX(-50%);132    width: 220px;133    height: 16px;134    background: #D0D0D0;135    border-radius: 10px;136    opacity: 0.9;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status Bar -->144  <div class="status-bar">145    <div class="status-content">146      <div class="status-left">147        <div>8:43</div>148        <!-- Simple mail icon -->149        <svg class="icon" viewBox="0 0 24 24">150          <rect x="2" y="4" width="20" height="16" fill="none" stroke="#fff" stroke-width="2"/>151          <path d="M2 6 L12 13 L22 6" fill="none" stroke="#fff" stroke-width="2"/>152        </svg>153        <!-- Simple sun/gear placeholder icon -->154        <svg class="icon" viewBox="0 0 24 24">155          <circle cx="12" cy="12" r="5" fill="none" stroke="#fff" stroke-width="2"/>156          <path d="M12 2 L12 6 M12 18 L12 22 M2 12 L6 12 M18 12 L22 12 M4.5 4.5 L7 7 M17 17 L19.5 19.5 M19.5 4.5 L17 7 M7 17 L4.5 19.5" stroke="#fff" stroke-width="2"/>157        </svg>158      </div>159      <div class="status-right">160        <!-- WiFi icon -->161        <svg class="icon" viewBox="0 0 24 24">162          <path d="M2 8 C8 3,16 3,22 8" fill="none" stroke="#fff" stroke-width="2"/>163          <path d="M5 11 C10 7,14 7,19 11" fill="none" stroke="#fff" stroke-width="2"/>164          <path d="M8 14 C12 12,12 12,16 14" fill="none" stroke="#fff" stroke-width="2"/>165          <circle cx="12" cy="18" r="2" fill="#fff"/>166        </svg>167        <!-- Battery icon -->168        <svg class="icon" viewBox="0 0 28 24">169          <rect x="2" y="6" width="20" height="12" fill="none" stroke="#fff" stroke-width="2"/>170          <rect x="4" y="8" width="14" height="8" fill="#fff"/>171          <rect x="22" y="9" width="4" height="6" fill="#fff"/>172        </svg>173      </div>174    </div>175  </div>176 177  <!-- App Bar -->178  <div class="app-bar">179    <div class="app-bar-inner">180      <!-- Back Arrow -->181      <svg class="back-icon" viewBox="0 0 24 24">182        <path d="M15 5 L7 12 L15 19" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>183      </svg>184      <div class="title">Cuisines</div>185    </div>186  </div>187 188  <!-- List -->189  <div class="list-area">190    <div class="card">191      <div class="label">German</div>192      <div class="circle-img">[IMG: German dishes]</div>193    </div>194 195    <div class="card">196      <div class="label">Moroccan</div>197      <div class="circle-img">[IMG: Moroccan dishes]</div>198    </div>199 200    <div class="card">201      <div class="label">Japanese</div>202      <div class="circle-img">[IMG: Japanese dishes]</div>203    </div>204 205    <div class="card">206      <div class="label">Cuban</div>207      <div class="circle-img">[IMG: Cuban dishes]</div>208    </div>209 210    <div class="card">211      <div class="label">Hawaiian</div>212      <div class="circle-img">[IMG: Hawaiian dishes]</div>213    </div>214 215    <div class="card">216      <div class="label">Swedish</div>217      <div class="circle-img">[IMG: Swedish dishes]</div>218    </div>219 220    <div class="card">221      <div class="label">Portuguese</div>222      <div class="circle-img">[IMG: Portuguese dishes]</div>223    </div>224 225    <div class="card">226      <div class="label">Hungarian</div>227      <div class="circle-img">[IMG: Hungarian dishes]</div>228    </div>229  </div>230 231  <!-- Bottom Navigation Bar -->232  <div class="nav-bar">233    <div class="home-pill"></div>234  </div>235 236</div>237</body>238</html>