GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Filter Screen</title>7<style>8  :root{9    --bg:#000000;10    --text:#ffffff;11    --muted:#cfcfcf;12    --card:#1d1d1f;13    --card2:#232325;14    --accent:#ff6b2e;15    --teal:#6ee7c8;16    --divider:#2c2c2e;17  }18  body{ margin:0; padding:0; background:transparent; }19  #render-target{20    width:1080px; height:2400px; position:relative; overflow:hidden;21    background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;22  }23  .screen{ padding:36px 56px 0 56px; }24  .status{25    height:54px; display:flex; align-items:center; justify-content:space-between;26    color:#eaeaea; font-size:32px; opacity:.9;27  }28  .status .icons{ display:flex; align-items:center; gap:18px; }29  .topbar{30    display:flex; align-items:center; justify-content:space-between;31    margin-top:18px; padding:14px 8px 10px;32  }33  .topbar .title{ font-weight:700; font-size:64px; letter-spacing:.2px; }34  .link-orange{ color:var(--accent); font-size:40px; }35  .section{36    margin-top:48px;37  }38  .section h3{39    margin:0 0 16px 0; font-size:44px; font-weight:700;40  }41  .row{42    display:flex; align-items:center; justify-content:space-between; gap:20px;43  }44  .row .value{45    color:var(--muted); font-size:40px;46    display:flex; align-items:center; gap:12px;47  }48  .chev{49    width:28px; height:28px; fill:var(--accent);50  }51  .grid{52    margin-top:18px;53    display:grid; grid-template-columns:repeat(3, 1fr);54    gap:28px;55  }56  .card{57    background:var(--card); border-radius:36px; height:230px;58    display:flex; flex-direction:column; align-items:center; justify-content:center;59    color:#e8e8e8; border:1px solid #2b2b2d;60  }61  .card .label{ margin-top:16px; font-size:38px; font-weight:600; }62  .card.selected{63    border:3px solid var(--accent); color:var(--accent); background:#1b1b1c;64  }65  .list-item{66    padding:34px 0; border-bottom:1px solid transparent;67    display:flex; align-items:center; justify-content:space-between;68  }69  .list-item h4{ margin:0; font-size:46px; font-weight:700; }70  .list-item .chev{ transform:rotate(0deg); }71  .list-item.up .chev{ transform:rotate(180deg); }72  .spacer{ height:340px; }73  .bottom-bar{74    position:absolute; bottom:0; left:0; width:100%;75    border-top:1px solid var(--divider); padding:26px 44px 40px;76    background:rgba(0,0,0,0.85);77  }78  .bottom-inner{79    display:flex; align-items:center; justify-content:space-between;80  }81  .btn-outline{82    padding:24px 40px; border:2px solid var(--teal); color:var(--teal);83    border-radius:48px; font-size:38px; font-weight:600; background:transparent;84  }85  .results{ color:#dddddd; font-size:38px; }86  .home-indicator{87    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);88    width:280px; height:10px; background:#e6e6e6; border-radius:8px; opacity:.9;89  }90  /* Simple icon styles */91  .ico{ width:72px; height:72px; stroke:#ffffff; fill:none; stroke-width:3; }92  .selected .ico{ stroke:var(--accent); }93</style>94</head>95<body>96<div id="render-target">97  <div class="screen">98    <!-- Status bar -->99    <div class="status">100      <div>8:52</div>101      <div class="icons">102        <!-- simple wifi and battery placeholders -->103        <svg width="28" height="22" viewBox="0 0 20 14" fill="none" stroke="#fff" stroke-width="2"><path d="M1 5c5-5 13-5 18 0M4 8c3-3 9-3 12 0M7 11c2-2 6-2 8 0"/><circle cx="11" cy="12" r="1.5" fill="#fff" stroke="none"/></svg>104        <svg width="22" height="22" viewBox="0 0 20 14" fill="none" stroke="#fff" stroke-width="2"><rect x="1" y="3" width="16" height="8" rx="2"/><path d="M19 6v2"/></svg>105      </div>106    </div>107 108    <!-- Top bar -->109    <div class="topbar">110      <div class="link-orange">Cancel</div>111      <div class="title">Filter</div>112      <div class="link-orange">Show results</div>113    </div>114 115    <!-- Sort by -->116    <div class="section">117      <div class="row">118        <h3>Sort by</h3>119        <div class="value">120          <span>Relevance</span>121          <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>122        </div>123      </div>124    </div>125 126    <!-- Category -->127    <div class="section">128      <div class="row">129        <h3>Category</h3>130        <svg class="chev" viewBox="0 0 24 24" style="transform:rotate(180deg)"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>131      </div>132 133      <div class="grid">134        <!-- Starter -->135        <div class="card">136          <svg class="ico" viewBox="0 0 64 64">137            <path d="M12 38h40l-4 10H16z"/>138            <path d="M20 20c0 4 4 4 4 8M32 20c0 4 4 4 4 8M26 26c0 3 3 3 3 6" />139          </svg>140          <div class="label">Starter</div>141        </div>142        <!-- Main -->143        <div class="card">144          <svg class="ico" viewBox="0 0 64 64">145            <circle cx="32" cy="32" r="22"/>146            <path d="M24 28h16M32 20v24"/>147          </svg>148          <div class="label">Main</div>149        </div>150        <!-- Dessert -->151        <div class="card">152          <svg class="ico" viewBox="0 0 64 64">153            <path d="M16 36h32l-3 8H19z"/>154            <path d="M22 30c3-6 17-6 20 0" />155            <circle cx="32" cy="24" r="3"/>156          </svg>157          <div class="label">Dessert</div>158        </div>159        <!-- Snack (selected) -->160        <div class="card selected">161          <svg class="ico" viewBox="0 0 64 64">162            <path d="M14 34c8-10 28-10 36 0" />163            <path d="M22 30l6 4M32 28l6 4M26 37l6 4" />164            <rect x="14" y="32" width="36" height="10" rx="5"/>165          </svg>166          <div class="label">Snack</div>167        </div>168        <!-- Breakfast -->169        <div class="card">170          <svg class="ico" viewBox="0 0 64 64">171            <path d="M16 36h26a8 8 0 0 1-8 8H22a6 6 0 0 1-6-8z"/>172            <path d="M42 36h6a6 6 0 0 1-6 6"/>173            <path d="M22 22c0 3 3 3 3 6M30 22c0 3 3 3 3 6"/>174          </svg>175          <div class="label">Breakfast</div>176        </div>177        <!-- Drink -->178        <div class="card">179          <svg class="ico" viewBox="0 0 64 64">180            <path d="M22 14h20l-4 38H26z"/>181            <path d="M22 20h20"/>182            <path d="M24 30l16-4"/>183          </svg>184          <div class="label">Drink</div>185        </div>186      </div>187    </div>188 189    <!-- Collapsible list -->190    <div class="section">191      <div class="list-item">192        <h4>Diet</h4>193        <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>194      </div>195      <div class="list-item">196        <h4>Cuisine</h4>197        <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>198      </div>199      <div class="list-item">200        <h4>Main ingredients</h4>201        <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>202      </div>203      <div class="list-item">204        <h4>Occasion</h4>205        <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>206      </div>207      <div class="list-item">208        <h4>Appliances</h4>209        <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>210      </div>211      <div class="list-item">212        <h4>Type</h4>213        <svg class="chev" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="var(--accent)" stroke-width="2" fill="none"/></svg>214      </div>215    </div>216 217    <div class="spacer"></div>218  </div>219 220  <!-- Bottom bar -->221  <div class="bottom-bar">222    <div class="bottom-inner">223      <div class="btn-outline">Reset filter</div>224      <div class="results">50 results</div>225    </div>226    <div class="home-indicator"></div>227  </div>228</div>229</body>230</html>