GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Apple Pie UI</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}7  #render-target{8    width:1080px;height:2400px;9    position:relative;overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar{15    height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;16    color:#222; font-weight:600; font-size:34px;17  }18  .status-right{display:flex; align-items:center; gap:24px;}19  .status-icon{width:34px;height:34px;border-radius:6px;background:#666;}20 21  /* Search bar */22  .search-row{padding:14px 36px 18px; }23  .search-bar{24    height:100px; border-radius:50px; background:#f1f1f1; display:flex; align-items:center;25    padding:0 28px; color:#444; font-size:40px; box-shadow: inset 0 0 0 2px #e3e3e3;26  }27  .back-icon{width:48px;height:48px;margin-right:18px;}28  .back-icon svg{width:100%;height:100%;}29  .search-text{opacity:0.9;}30 31  /* Results header strip */32  .results-strip{33    height:90px; background:#111; color:#fff; display:flex; align-items:center; justify-content:space-between;34    padding:0 36px; letter-spacing:0.4px;35  }36  .results-left{display:flex; align-items:center; gap:26px;}37  .filters-count{color:#ff7a2a; font-weight:700;}38  .filter-right{display:flex; align-items:center; gap:16px;}39  .lock-icon{width:36px;height:36px;}40  .lock-icon svg{width:100%;height:100%;fill:#fff;}41 42  /* Cards */43  .card{44    position:relative; width:100%; height:820px; overflow:hidden;45  }46  .img-ph{47    position:absolute; inset:0;48    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;49    display:flex; justify-content:center; align-items:center; color:#757575; font-size:40px; text-align:center; padding:0 30px;50  }51  .overlay-bottom{52    position:absolute; left:0; right:0; bottom:0;53    padding:28px 36px 36px;54    background:linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.35), rgba(0,0,0,0));55    color:#fff;56  }57  .title{font-size:68px; font-weight:800; margin-bottom:16px;}58  .subtitle{font-size:34px; color:#e9e9e9;}59  .save-row{margin-top:18px; display:flex; align-items:center; gap:14px; color:#fff; font-size:32px;}60  .small-heart{width:34px;height:34px;}61  .small-heart svg{width:100%;height:100%;fill:#fff;}62  .circle-like{63    position:absolute; right:30px; bottom:30px;64    width:104px;height:104px; border-radius:52px; background:#ffffff; box-shadow:0 6px 16px rgba(0,0,0,0.25);65    display:flex; align-items:center; justify-content:center;66  }67  .circle-like svg{width:56px;height:56px; fill:none; stroke:#111; stroke-width:6;}68 69  /* Second card spacing */70  .second-card{margin-top:18px; height:900px;}71  .bottom-gesture{72    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);73    width:320px;height:14px;border-radius:8px;background:#bfbfbf;74  }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status bar -->81  <div class="status-bar">82    <div>2:21</div>83    <div class="status-right">84      <div class="status-icon"></div>85      <div class="status-icon"></div>86      <div class="status-icon"></div>87      <div class="status-icon"></div>88    </div>89  </div>90 91  <!-- Search bar -->92  <div class="search-row">93    <div class="search-bar">94      <div class="back-icon">95        <svg viewBox="0 0 24 24">96          <path d="M15.5 4.5L6 12l9.5 7.5" stroke="#555" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>97        </svg>98      </div>99      <div class="search-text">apple pie</div>100    </div>101  </div>102 103  <!-- Results strip -->104  <div class="results-strip">105    <div class="results-left">106      <div style="opacity:0.85; font-size:34px; font-weight:700;">66K+ RESULTS</div>107      <div class="filters-count">0 FILTERS</div>108    </div>109    <div class="filter-right">110      <div style="font-size:34px; font-weight:700;">FILTER</div>111      <div class="lock-icon">112        <svg viewBox="0 0 24 24">113          <path d="M6 10h12v10H6zM8 10V7a4 4 0 018 0v3" fill="none" stroke="#fff" stroke-width="2"/>114        </svg>115      </div>116    </div>117  </div>118 119  <!-- First card -->120  <div class="card">121    <div class="img-ph">[IMG: Dutch apple pie with crumb topping close-up]</div>122    <div class="overlay-bottom">123      <div class="title">Dutch Apple Pie</div>124      <div class="subtitle">HAPPY HOUR PROJECTS</div>125      <div class="save-row">126        <div class="small-heart">127          <svg viewBox="0 0 24 24">128            <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0119 11c0 5.5-7 10-7 10z"/>129          </svg>130        </div>131        <div>4.6K SAVES</div>132      </div>133    </div>134    <div class="circle-like">135      <svg viewBox="0 0 24 24">136        <path d="M12 21s-7-4.5-7-10a4.5 4.5 0 018-2.9A4.5 4.5 0 0119 11c0 5.5-7 10-7 10z"/>137      </svg>138    </div>139  </div>140 141  <!-- Second card -->142  <div class="card second-card">143    <div class="img-ph">[IMG: Apple pie with golden lattice and sugared crust]</div>144  </div>145 146  <div class="bottom-gesture"></div>147</div>148</body>149</html>