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>Cuisines List UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Top status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #2E2E2E;30    color: #fff;31    display: flex;32    align-items: center;33    padding: 0 40px;34    box-sizing: border-box;35    font-size: 36px;36    letter-spacing: 0.5px;37  }38  .status-left {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .status-right {44    margin-left: auto;45    display: flex;46    align-items: center;47    gap: 28px;48  }49  .status-icon {50    width: 44px;51    height: 44px;52  }53 54  /* Content area below status bar */55  .content {56    position: absolute;57    top: 120px;58    left: 0;59    right: 0;60    bottom: 140px; /* leave room for gesture bar */61    overflow-y: hidden;62  }63 64  /* Back row */65  .nav-row {66    height: 110px;67    display: flex;68    align-items: center;69    padding: 0 56px;70    box-sizing: border-box;71  }72  .back-icon {73    width: 64px;74    height: 64px;75    fill: #333;76  }77 78  /* Title */79  .title {80    padding: 0 56px;81    font-size: 86px;82    font-weight: 700;83    color: #333333;84    line-height: 1.2;85    margin-top: 10px;86    margin-bottom: 20px;87  }88 89  /* Cards list */90  .list {91    padding: 0 40px 40px 40px;92    box-sizing: border-box;93  }94  .card {95    background: #FFFFFF;96    border-radius: 28px;97    box-shadow: 0 14px 28px rgba(0,0,0,0.12);98    height: 190px;99    margin: 28px 16px;100    padding: 0 40px;101    display: flex;102    align-items: center;103    justify-content: space-between;104    box-sizing: border-box;105  }106  .card .label {107    font-size: 48px;108    font-weight: 600;109    color: #222222;110  }111  .thumb {112    width: 150px;113    height: 150px;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    border-radius: 50%;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-size: 28px;122    text-align: center;123    padding: 12px;124    box-sizing: border-box;125  }126 127  /* Bottom gesture bar */128  .gesture-bar {129    position: absolute;130    bottom: 0;131    left: 0;132    width: 1080px;133    height: 140px;134    background: #2E2E2E;135    display: flex;136    align-items: center;137    justify-content: center;138  }139  .gesture-pill {140    width: 300px;141    height: 16px;142    background: #CFCFCF;143    border-radius: 999px;144    opacity: 0.85;145  }146</style>147</head>148<body>149<div id="render-target">150  <!-- Status Bar -->151  <div class="status-bar">152    <div class="status-left">153      <span>8:39</span>154      <!-- simple mail icon -->155      <svg class="status-icon" viewBox="0 0 24 24">156        <path fill="#ffffff" d="M3 5h18v14H3V5zm1.6 2l6.4 4.5L17.4 7H4.6z"/>157      </svg>158      <!-- sun/circle icon -->159      <svg class="status-icon" viewBox="0 0 24 24">160        <circle cx="12" cy="12" r="5" fill="#ffffff"/>161      </svg>162    </div>163    <div class="status-right">164      <!-- wifi -->165      <svg class="status-icon" viewBox="0 0 24 24">166        <path fill="#ffffff" d="M12 18l2 2-2 2-2-2 2-2zm-6-6a12 12 0 0 1 12 0l-1.5 1.5a9 9 0 0 0-9 0L6 12zm-3-3a16 16 0 0 1 18 0l-1.7 1.7a13 13 0 0 0-14.6 0L3 9z"/>167      </svg>168      <!-- battery -->169      <svg class="status-icon" viewBox="0 0 24 24">170        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#ffffff"/>171        <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>172      </svg>173    </div>174  </div>175 176  <!-- Content -->177  <div class="content">178    <div class="nav-row">179      <svg class="back-icon" viewBox="0 0 24 24">180        <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>181      </svg>182    </div>183 184    <div class="title">Cuisines</div>185 186    <div class="list">187      <div class="card">188        <div class="label">American</div>189        <div class="thumb">[IMG: Burgers]</div>190      </div>191      <div class="card">192        <div class="label">Barbecue</div>193        <div class="thumb">[IMG: Grilled Meat]</div>194      </div>195      <div class="card">196        <div class="label">Asian</div>197        <div class="thumb">[IMG: Stir Fry]</div>198      </div>199      <div class="card">200        <div class="label">Italian</div>201        <div class="thumb">[IMG: Pasta]</div>202      </div>203      <div class="card">204        <div class="label">Mexican</div>205        <div class="thumb">[IMG: Tacos]</div>206      </div>207      <div class="card">208        <div class="label">French</div>209        <div class="thumb">[IMG: Escargot]</div>210      </div>211      <div class="card">212        <div class="label">Southwestern</div>213        <div class="thumb">[IMG: Quesadilla]</div>214      </div>215      <div class="card">216        <div class="label">Southern</div>217        <div class="thumb">[IMG: Fried Chicken]</div>218      </div>219    </div>220  </div>221 222  <!-- Bottom Gesture Bar -->223  <div class="gesture-bar">224    <div class="gesture-pill"></div>225  </div>226</div>227</body>228</html>