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>Apple Pie Grid</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#2f3136; color:#e9e9ea; border-radius:24px;12    box-shadow: 0 20px 40px rgba(0,0,0,0.35);13  }14  .status-bar {15    height:90px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#ffffffcc;16    font-weight:600; font-size:34px;17  }18  .status-left, .status-right { display:flex; align-items:center; gap:24px; }19  .search-area { padding:12px 36px 20px 36px; }20  .search-row { display:flex; align-items:center; gap:24px; }21  .back-btn svg { width:44px; height:44px; }22  .back-btn svg path { fill:#ff6f8a; }23  .search-input {24    flex:1; height:96px; border-radius:48px; background:#3a3c41; border:2px solid #4a4c50;25    display:flex; align-items:center; padding:0 32px; gap:20px; color:#cfd3d8; font-size:36px;26  }27  .search-input .placeholder { color:#cfd3d8; font-weight:600; }28  .search-icon svg, .filter-btn svg { width:40px; height:40px; }29  .filter-btn { margin-left:6px; }30  .filter-btn svg path { stroke:#ff6f8a; stroke-width:8; fill:none; }31  .grid {32    padding:8px 36px 0 36px;33    display:grid; grid-template-columns: 1fr 1fr; grid-gap:38px 38px;34  }35  .card { }36  .thumb {37    width:100%; height:420px; border-radius:22px; overflow:hidden;38    background:#E0E0E0; border:1px solid #BDBDBD;39    display:flex; align-items:center; justify-content:center; color:#757575; font-weight:600; font-size:34px; text-align:center;40  }41  .title {42    margin-top:20px; font-size:40px; font-weight:800; color:#eaeef2;43  }44  .tagline { margin-top:10px; display:flex; align-items:center; gap:14px; color:#79c1c4; font-size:34px; font-weight:700; }45  .tagline svg { width:34px; height:34px; }46  .bottom-bar {47    position:absolute; left:0; right:0; bottom:0; height:200px; background:#3a3a3f; border-top:2px solid #44464b;48    padding:24px 36px; display:flex; align-items:center; justify-content:space-around;49  }50  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#b7bcc3; font-size:32px; font-weight:700; }51  .nav-item.active { color:#ffffff; }52  .nav-icon { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }53  .nav-item.active .nav-icon svg path { fill:#ff6f8a; }54  .nav-item .nav-icon svg path { fill:#9aa0a6; }55  .gesture {56    position:absolute; left:50%; transform:translateX(-50%); bottom:26px;57    width:260px; height:12px; border-radius:12px; background:#f1f1f1;58  }59</style>60</head>61<body>62<div id="render-target">63 64  <!-- Status bar -->65  <div class="status-bar">66    <div class="status-left">67      <div>10:45</div>68      <div>60°</div>69      <!-- simple triangle play/store icon -->70      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#cfd3d8" d="M3 2l18 10-18 10V2z"/></svg>71      <!-- download icon -->72      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#cfd3d8" d="M12 3v9l4-4 2 2-7 7-7-7 2-2 4 4V3h2z"/></svg>73    </div>74    <div class="status-right">75      <!-- wifi -->76      <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#cfd3d8" d="M12 20l-2-2 2-2 2 2-2 2zm-5-5l-2-2c3.9-3.9 10.1-3.9 14 0l-2 2c-2.8-2.8-7.2-2.8-10 0zm-3-4l-2-2c6.1-6.1 16.1-6.1 22.2 0l-2 2c-5-5-13.2-5-18.2 0z"/></svg>77      <!-- battery -->78      <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#cfd3d8" d="M2 7h17v10H2V7zm19 3h1v4h-1v-4z"/></svg>79    </div>80  </div>81 82  <!-- Search area -->83  <div class="search-area">84    <div class="search-row">85      <div class="back-btn">86        <svg viewBox="0 0 24 24">87          <path d="M15.5 3.5L5 12l10.5 8.5v-5.7L9.8 12l5.7-2.8V3.5z"/>88        </svg>89      </div>90      <div class="search-input">91        <div class="search-icon">92          <svg viewBox="0 0 24 24"><path fill="#bfc3c8" d="M15.5 14h-.8l-.3-.3a6.4 6.4 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6.1 0a4.9 4.9 0 110-9.8 4.9 4.9 0 010 9.8z"/></svg>93        </div>94        <div class="placeholder">apple pie</div>95      </div>96      <div class="filter-btn">97        <svg viewBox="0 0 24 24">98          <path d="M4 6h16M8 12h8M10 18h4" />99        </svg>100      </div>101    </div>102  </div>103 104  <!-- Results grid -->105  <div class="grid">106    <!-- Card 1 -->107    <div class="card">108      <div class="thumb">[IMG: Apple Pie Slice with Ice Cream]</div>109      <div class="title">Apple Pie From Scratch</div>110      <div class="tagline">111        <svg viewBox="0 0 24 24"><path fill="#79c1c4" d="M21 13l-9 9-9-9V5a2 2 0 012-2h6l10 10zM7 7a2 2 0 110-4 2 2 0 010 4z"/></svg>112        <span>Affordable</span>113      </div>114    </div>115 116    <!-- Card 2 -->117    <div class="card">118      <div class="thumb">[IMG: Cinnamon Roll Apple Pie Slice]</div>119      <div class="title">Cinnamon Roll Apple Pie</div>120      <div class="tagline">121        <svg viewBox="0 0 24 24"><path fill="#79c1c4" d="M21 13l-9 9-9-9V5a2 2 0 012-2h6l10 10zM7 7a2 2 0 110-4 2 2 0 010 4z"/></svg>122        <span>Affordable</span>123      </div>124    </div>125 126    <!-- Card 3 -->127    <div class="card">128      <div class="thumb">[IMG: Caramel Rose Apple Pie in Skillet]</div>129      <div class="title">Caramel Rose Apple Pie</div>130      <div class="tagline">131        <svg viewBox="0 0 24 24"><path fill="#79c1c4" d="M21 13l-9 9-9-9V5a2 2 0 012-2h6l10 10zM7 7a2 2 0 110-4 2 2 0 010 4z"/></svg>132        <span>Affordable</span>133      </div>134    </div>135 136    <!-- Card 4 -->137    <div class="card">138      <div class="thumb">[IMG: Apple Pie Cheesecake Slice]</div>139      <div class="title">Apple Pie Cheesecake</div>140      <div class="tagline">141        <svg viewBox="0 0 24 24"><path fill="#79c1c4" d="M21 13l-9 9-9-9V5a2 2 0 012-2h6l10 10zM7 7a2 2 0 110-4 2 2 0 010 4z"/></svg>142        <span>Affordable</span>143      </div>144    </div>145 146    <!-- Card 5 -->147    <div class="card">148      <div class="thumb">[IMG: Apple Pie Crumble Blondies Square]</div>149      <div class="title">Apple Pie Crumble Blondies</div>150      <div class="tagline">151        <svg viewBox="0 0 24 24"><path fill="#79c1c4" d="M21 13l-9 9-9-9V5a2 2 0 012-2h6l10 10zM7 7a2 2 0 110-4 2 2 0 010 4z"/></svg>152        <span>Affordable</span>153      </div>154    </div>155 156    <!-- Card 6 -->157    <div class="card">158      <div class="thumb">[IMG: Salted Caramel Apple Pie Top View]</div>159      <div class="title">Salted Caramel Apple Pie</div>160      <div class="tagline">161        <svg viewBox="0 0 24 24"><path fill="#79c1c4" d="M21 13l-9 9-9-9V5a2 2 0 012-2h6l10 10zM7 7a2 2 0 110-4 2 2 0 010 4z"/></svg>162        <span>Affordable</span>163      </div>164    </div>165  </div>166 167  <!-- Bottom navigation -->168  <div class="bottom-bar">169    <div class="nav-item active">170      <div class="nav-icon">171        <svg viewBox="0 0 24 24"><path d="M10 20l-6-6 6-6 6 6-6 6z"/></svg>172      </div>173      <div>Discover</div>174    </div>175    <div class="nav-item">176      <div class="nav-icon">177        <svg viewBox="0 0 24 24"><path d="M12 3l9 6-9 6-9-6 9-6zm0 9.5l6 3.5v4H6v-4l6-3.5z"/></svg>178      </div>179      <div>Community</div>180    </div>181    <div class="nav-item">182      <div class="nav-icon">183        <svg viewBox="0 0 24 24"><path d="M7 7h10l2 12H5L7 7zm2-4h6v3H9V3z"/></svg>184      </div>185      <div>My Cart</div>186    </div>187    <div class="nav-item">188      <div class="nav-icon">189        <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.7-8 6v2h16v-2c0-3.3-3.6-6-8-6z"/></svg>190      </div>191      <div>Profile</div>192    </div>193  </div>194 195  <div class="gesture"></div>196</div>197</body>198</html>