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>Search - Impact Drill</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #263238;17  }18 19  /* Top search header */20  .header {21    padding: 56px 36px 0 36px;22  }23  .search-row {24    display: flex;25    align-items: center;26    gap: 24px;27  }28  .icon-btn {29    width: 64px;30    height: 64px;31    display: flex;32    align-items: center;33    justify-content: center;34    cursor: default;35  }36  .icon-btn svg { width: 40px; height: 40px; fill: #757575; }37 38  .search-bar {39    flex: 1;40    background: #F1F3F4;41    height: 110px;42    border-radius: 24px;43    display: flex;44    align-items: center;45    padding: 0 32px;46    color: #616161;47    font-size: 42px;48  }49 50  .filter-row {51    margin: 36px 0 14px 8px;52    display: flex;53    align-items: center;54    gap: 20px;55    color: #5E7380;56    font-size: 40px;57    font-weight: 500;58  }59  .filter-row svg { width: 44px; height: 44px; fill: #5E7380; }60 61  /* List */62  .list {63    padding: 12px 36px 120px 36px;64  }65  .item {66    display: flex;67    gap: 36px;68    padding: 32px 0;69    align-items: flex-start;70    border-bottom: 0px solid transparent;71  }72  .thumb {73    width: 190px;74    height: 140px;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    border-radius: 8px;78    display: flex;79    align-items: center;80    justify-content: center;81    font-size: 28px;82    color: #757575;83    text-align: center;84    padding: 8px;85    line-height: 1.2;86  }87  .info {88    flex: 1;89    padding-top: 8px;90  }91  .title {92    font-size: 46px;93    font-weight: 700;94    color: #263238;95    margin-bottom: 12px;96  }97  .price {98    font-size: 40px;99    color: #7B8A95;100  }101  .price .old {102    margin-left: 20px;103    color: #B0BEC5;104    text-decoration: line-through;105  }106 107  /* Bottom gesture bar */108  .gesture {109    position: absolute;110    bottom: 24px;111    left: 50%;112    transform: translateX(-50%);113    width: 360px;114    height: 12px;115    background: #777;116    border-radius: 12px;117    opacity: 0.6;118  }119</style>120</head>121<body>122<div id="render-target">123  <div class="header">124    <div class="search-row">125      <div class="icon-btn" aria-hidden="true">126        <svg viewBox="0 0 24 24"><path d="M15.4 3.4 13.99 2 4 12l9.99 10 1.41-1.41L7.83 12z"/></svg>127      </div>128      <div class="search-bar">Impact drill</div>129      <div class="icon-btn" aria-hidden="true">130        <svg viewBox="0 0 24 24"><path d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.3 19.71 2.89 18.3 9.17 12 2.89 5.71 4.3 4.3 10.59 10.6l6.3-6.3z"/></svg>131      </div>132    </div>133 134    <div class="filter-row">135      <svg viewBox="0 0 24 24"><path d="M11 3h2v18h-2zM3 11h18v2H3z"/></svg>136      <div>Filter</div>137    </div>138  </div>139 140  <div class="list">141    <div class="item">142      <div class="thumb">[IMG: Orange Hammer Drill]</div>143      <div class="info">144        <div class="title">Wokin Hammer Drill 650W/750W</div>145        <div class="price">1,560.00</div>146      </div>147    </div>148 149    <div class="item">150      <div class="thumb">[IMG: Wokin Rotary Hammer]</div>151      <div class="info">152        <div class="title">Wokin Rotary Hammer</div>153        <div class="price">3,900.00</div>154      </div>155    </div>156 157    <div class="item">158      <div class="thumb">[IMG: Red Impact Drill]</div>159      <div class="info">160        <div class="title">Impact Drill</div>161        <div class="price">1,149.00 <span class="old">1,299.00</span></div>162      </div>163    </div>164 165    <div class="item">166      <div class="thumb">[IMG: Blue Bosch Impact Drill]</div>167      <div class="info">168        <div class="title">Bosch GSB 550 Impact Drill</div>169        <div class="price">3,107.00</div>170      </div>171    </div>172 173    <div class="item">174      <div class="thumb">[IMG: Lotus LID13RE Impact Drill]</div>175      <div class="info">176        <div class="title">Lotus LID13RE Impact Drill</div>177        <div class="price">1,950.00</div>178      </div>179    </div>180  </div>181 182  <div class="gesture"></div>183</div>184</body>185</html>