GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Apple Pie Results 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    position:absolute; top:0; left:0; width:100%; height:110px;16    background:#fff;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 36px; box-sizing:border-box;19    color:#333; font-size:40px;20    border-bottom:1px solid #eee;21  }22  .status-left { display:flex; align-items:center; gap:26px; }23  .status-right { display:flex; align-items:center; gap:30px; }24  .icon-dot { width:14px; height:14px; background:#888; border-radius:50%; display:inline-block; }25 26  /* Search header */27  .search-header {28    position:absolute; top:110px; left:0; width:100%; height:150px;29    display:flex; align-items:center; gap:30px;30    padding:0 30px; box-sizing:border-box;31    background:#fff;32  }33  .back-btn {34    width:90px; height:90px; border-radius:45px; background:#f0f0f0;35    display:flex; align-items:center; justify-content:center;36    border:1px solid #d0d0d0;37  }38  .search-pill {39    flex:1; height:100px; border-radius:50px;40    border:1px solid #d9d9d9; background:#fafafa;41    display:flex; align-items:center; padding:0 40px; box-sizing:border-box;42    color:#666; font-size:42px;43  }44 45  /* Results bar */46  .results-bar {47    position:absolute; top:260px; left:0; width:100%; height:90px;48    background:#111; color:#fff;49    display:flex; align-items:center; justify-content:space-between;50    padding:0 30px; box-sizing:border-box;51    letter-spacing:0.5px;52  }53  .results-left { display:flex; align-items:center; gap:30px; font-size:36px; }54  .results-left .orange { color:#ff7a1a; }55  .results-right { display:flex; align-items:center; gap:18px; font-size:38px; }56 57  /* Cards */58  .card {59    position:absolute; left:0; width:100%; height:920px;60    box-sizing:border-box;61  }62  .card .img {63    position:absolute; left:0; top:0; width:100%; height:100%;64    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;65    display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px;66  }67  .card .overlay {68    position:absolute; left:0; bottom:0; width:100%;69    padding:40px 40px 50px 40px; box-sizing:border-box;70    color:#fff;71    background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.15), rgba(0,0,0,0));72  }73  .title { font-size:70px; font-weight:700; margin-bottom:16px; }74  .subtitle { font-size:34px; letter-spacing:1px; opacity:0.9; }75  .saves {76    display:flex; align-items:center; gap:16px; margin-top:22px;77    font-size:34px; color:#fff;78  }79  .bubble-like {80    position:absolute; right:30px; bottom:30px; width:110px; height:110px;81    border-radius:55px; background:#fff; display:flex; align-items:center; justify-content:center;82    box-shadow:0 6px 12px rgba(0,0,0,0.25);83  }84  .heart-outline svg { width:52px; height:52px; }85 86  /* Second card position */87  .card.second { top:1270px; height:920px; }88 89  /* Bottom gesture bar */90  .gesture {91    position:absolute; bottom:35px; left:50%; transform:translateX(-50%);92    width:380px; height:16px; background:#cfcfcf; border-radius:10px;93  }94 95  /* Simple icons */96  .icon-heart-small { width:36px; height:36px; display:inline-block; }97  .icon-lock { width:38px; height:38px; display:inline-block; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div class="status-left">106      <div>2:22</div>107      <div>57°</div>108      <span class="icon-dot"></span>109    </div>110    <div class="status-right">111      <!-- simple status icons -->112      <svg width="40" height="40" viewBox="0 0 24 24" fill="#555"><rect x="3" y="10" width="6" height="8"></rect><rect x="11" y="6" width="6" height="12"></rect><rect x="19" y="2" width="2" height="16"></rect></svg>113      <svg width="40" height="40" viewBox="0 0 24 24" fill="#555"><path d="M12 2l8 8h-5v10H9V10H4l8-8z"/></svg>114      <svg width="40" height="40" viewBox="0 0 24 24" fill="#555"><circle cx="12" cy="12" r="10"/></svg>115    </div>116  </div>117 118  <!-- Search header -->119  <div class="search-header">120    <div class="back-btn">121      <svg width="42" height="42" viewBox="0 0 24 24" fill="#333">122        <path d="M15 18l-6-6 6-6v12z"/>123      </svg>124    </div>125    <div class="search-pill">apple pie</div>126  </div>127 128  <!-- Results bar -->129  <div class="results-bar">130    <div class="results-left">131      <div>66K+ RESULTS</div>132      <div class="orange">0 FILTERS</div>133    </div>134    <div class="results-right">135      <div>FILTER</div>136      <span class="icon-lock">137        <svg viewBox="0 0 24 24" width="38" height="38" fill="#fff">138          <path d="M12 1a5 5 0 015 5v3h2a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8a2 2 0 012-2h2V6a5 5 0 015-5zm3 8V6a3 3 0 00-6 0v3h6z"/>139        </svg>140      </span>141    </div>142  </div>143 144  <!-- First card -->145  <div class="card" style="top:350px;">146    <div class="img">[IMG: Apple pie with crumb topping]</div>147    <div class="overlay">148      <div class="title">Apple Pie</div>149      <div class="subtitle">ITSY BITSY FOODIES</div>150      <div class="saves">151        <span class="icon-heart-small">152          <svg viewBox="0 0 24 24" width="36" height="36" fill="#fff">153            <path d="M12 21s-7-4.35-9.5-8A5.5 5.5 0 017.5 4c1.74 0 3.41.81 4.5 2.09A6.35 6.35 0 0116.5 4 5.5 5.5 0 1121.5 13c-2.5 3.65-9.5 8-9.5 8z"/>154          </svg>155        </span>156        <span>3K SAVES</span>157      </div>158    </div>159    <div class="bubble-like heart-outline">160      <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">161        <path d="M12 21c-5-3.2-9-6.7-9-10.5A4.5 4.5 0 017.5 6a5.5 5.5 0 014.5 3 5.5 5.5 0 014.5-3A4.5 4.5 0 0121 10.5C21 14.3 17 17.8 12 21z"/>162      </svg>163    </div>164  </div>165 166  <!-- Second card -->167  <div class="card second">168    <div class="img">[IMG: Slice of apple pie with vanilla ice cream]</div>169    <div class="overlay">170      <div class="title">Easy Apple Pie</div>171      <div class="subtitle">GROCERYBUDGET101.COM</div>172      <div class="saves">173        <span class="icon-heart-small">174          <svg viewBox="0 0 24 24" width="36" height="36" fill="#fff">175            <path d="M12 21s-7-4.35-9.5-8A5.5 5.5 0 017.5 4c1.74 0 3.41.81 4.5 2.09A6.35 6.35 0 0116.5 4 5.5 5.5 0 1121.5 13c-2.5 3.65-9.5 8-9.5 8z"/>176          </svg>177        </span>178        <span>1.4K SAVES</span>179      </div>180    </div>181    <div class="bubble-like heart-outline">182      <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">183        <path d="M12 21c-5-3.2-9-6.7-9-10.5A4.5 4.5 0 017.5 6a5.5 5.5 0 014.5 3 5.5 5.5 0 014.5-3A4.5 4.5 0 0121 10.5C21 14.3 17 17.8 12 21z"/>184      </svg>185    </div>186  </div>187 188  <!-- Bottom gesture bar -->189  <div class="gesture"></div>190 191</div>192</body>193</html>