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>Recipe Search UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #FFFFFF;20  }21 22  /* Top area spacing to simulate status bar gap */23  .content {24    padding-top: 90px;25  }26 27  /* Search bar */28  .search-row {29    display: flex;30    align-items: center;31    padding: 0 48px;32    height: 140px;33  }34  .search-field {35    flex: 1;36    height: 112px;37    background: #F2F2F2;38    border-radius: 56px;39    display: flex;40    align-items: center;41    padding: 0 36px;42    box-sizing: border-box;43  }44  .caret {45    width: 4px;46    height: 60px;47    background: #2BB9A9;48    border-radius: 2px;49    margin-right: 22px;50  }51  .placeholder {52    color: #9E9E9E;53    font-size: 42px;54  }55  .cancel {56    margin-left: 26px;57    color: #9E9E9E;58    font-size: 40px;59    letter-spacing: 1px;60  }61 62  /* Trending section */63  .section-title {64    font-weight: 700;65    font-size: 52px;66    color: #111;67    padding: 70px 48px 20px 48px;68  }69  .list {70    margin: 0 24px;71    border-top: 1px solid #E0E0E0;72  }73  .row {74    display: flex;75    align-items: center;76    padding: 34px 24px;77    border-bottom: 1px solid #E0E0E0;78  }79  .trend-icon {80    width: 48px;81    height: 48px;82    margin-right: 28px;83    flex-shrink: 0;84  }85  .row-text {86    font-size: 44px;87    color: #222;88  }89 90  /* Keyboard placeholder at bottom */91  .keyboard {92    position: absolute;93    left: 0;94    right: 0;95    bottom: 0;96    height: 660px;97    background: #E0E0E0;98    border-top: 1px solid #BDBDBD;99    display: flex;100    justify-content: center;101    align-items: center;102    color: #757575;103    font-size: 40px;104  }105</style>106</head>107<body>108<div id="render-target">109  <div class="content">110    <div class="search-row">111      <div class="search-field">112        <div class="caret"></div>113        <div class="placeholder">Search Recipes</div>114      </div>115      <div class="cancel">CANCEL</div>116    </div>117 118    <div class="section-title">Trending</div>119 120    <div class="list">121      <div class="row">122        <svg class="trend-icon" viewBox="0 0 48 48">123          <path d="M6 34 L18 22 L28 28 L42 14" stroke="#9E9E9E" stroke-width="3" fill="none" />124        </svg>125        <div class="row-text">Chicken</div>126      </div>127      <div class="row">128        <svg class="trend-icon" viewBox="0 0 48 48">129          <path d="M6 34 L18 22 L28 28 L42 14" stroke="#9E9E9E" stroke-width="3" fill="none" />130        </svg>131        <div class="row-text">Pasta</div>132      </div>133      <div class="row">134        <svg class="trend-icon" viewBox="0 0 48 48">135          <path d="M6 34 L18 22 L28 28 L42 14" stroke="#9E9E9E" stroke-width="3" fill="none" />136        </svg>137        <div class="row-text">Rice</div>138      </div>139      <div class="row">140        <svg class="trend-icon" viewBox="0 0 48 48">141          <path d="M6 34 L18 22 L28 28 L42 14" stroke="#9E9E9E" stroke-width="3" fill="none" />142        </svg>143        <div class="row-text">Salad</div>144      </div>145      <div class="row">146        <svg class="trend-icon" viewBox="0 0 48 48">147          <path d="M6 34 L18 22 L28 28 L42 14" stroke="#9E9E9E" stroke-width="3" fill="none" />148        </svg>149        <div class="row-text">Soup</div>150      </div>151    </div>152  </div>153 154  <div class="keyboard">[IMG: Mobile Keyboard]</div>155</div>156</body>157</html>