GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Washing Machine</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff; border-radius: 0; box-shadow: none;11  }12 13  /* Status bar */14  .statusbar {15    height: 100px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    color: #333; font-size: 40px; box-sizing: border-box;17  }18  .status-left { display: flex; align-items: center; gap: 24px; }19  .status-right { display: flex; align-items: center; gap: 24px; }20  .status-icon {21    width: 44px; height: 44px; border-radius: 8px; background: #F0F0F0; display: flex; align-items: center; justify-content: center;22  }23 24  /* Header with search */25  .header {26    height: 150px; display: flex; align-items: center; padding: 0 24px; box-sizing: border-box; gap: 20px;27  }28  .back-btn {29    width: 80px; height: 80px; border-radius: 40px; display: flex; align-items: center; justify-content: center;30  }31  .search-box {32    flex: 1; height: 92px; background: #F4F5F7; border-radius: 46px; display: flex; align-items: center; padding: 0 32px; box-sizing: border-box;33    color: #777; font-size: 40px;34  }35  .search-box .label { color: #777; }36  .header-actions { display: flex; align-items: center; gap: 26px; }37  .action-icon {38    width: 80px; height: 80px; border-radius: 40px; background: #F5F5F5; display: flex; align-items: center; justify-content: center; position: relative;39  }40  .badge-dot {41    position: absolute; top: 6px; right: 8px; width: 16px; height: 16px; background: #E53935; border-radius: 50%;42  }43  .coin-badge {44    position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%; background: #FFD54F; border: 3px solid #fff;45  }46 47  /* Tabs */48  .tabs {49    height: 100px; display: flex; align-items: center; gap: 60px; padding: 0 36px; box-sizing: border-box; border-bottom: 1px solid #EEE;50    font-size: 42px; color: #666;51  }52  .tab { cursor: default; }53  .tab.active { color: #000; font-weight: 700; position: relative; }54  .tab.active:after {55    content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 4px; background: #FFB300;56    border-radius: 2px;57  }58  .tab-icon {59    display: inline-flex; vertical-align: middle; margin-right: 12px;60  }61 62  /* Content */63  .content { padding: 24px; box-sizing: border-box; }64  .product-card {65    background: #fff; border: 1px solid #E0E0E0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);66    overflow: hidden;67  }68  .product-image {69    width: 100%; height: 1500px; background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;70    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 44px; text-align: center; padding: 20px; box-sizing: border-box;71  }72 73  /* Floating scroll-to-top */74  .scroll-top {75    position: absolute; right: 36px; top: 1700px; width: 120px; height: 120px; border-radius: 60px;76    border: 1px solid #E0E0E0; background: #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);77    display: flex; align-items: center; justify-content: center;78  }79 80  /* Bottom action bar */81  .bottom-bar {82    position: absolute; left: 0; bottom: 90px; width: 100%; height: 240px;83    background: #fff; border-top: 1px solid #EEE; box-sizing: border-box;84    display: flex; align-items: center; gap: 24px; padding: 24px 36px;85  }86  .mini-btn {87    width: 160px; height: 160px; border: 1px solid #E0E0E0; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center;88    gap: 12px;89  }90  .mini-btn span { font-size: 34px; color: #333; }91  .cta {92    flex: 1; height: 160px; border-radius: 80px; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700; cursor: default;93  }94  .cta.cart {95    background: #FFF3CD; color: #222; border: 3px solid #FFD54F; position: relative;96  }97  .cta.cart .coin {98    position: absolute; right: 60px; top: 30px; width: 70px; height: 70px; border-radius: 50%; background: #FFC107; border: 3px solid #fff;99  }100  .cta.buy { background: #FFC107; color: #000; }101  .home-indicator {102    position: absolute; left: 50%; transform: translateX(-50%);103    bottom: 24px; width: 360px; height: 18px; background: #1A1A1A; border-radius: 9px; opacity: 0.7;104  }105 106  /* Simple helpers for icons */107  svg { display: block; }108</style>109</head>110<body>111<div id="render-target">112 113  <!-- Status bar -->114  <div class="statusbar">115    <div class="status-left">116      <div>10:23</div>117      <div class="status-icon">LR</div>118      <div class="status-icon">119        <svg width="28" height="28" viewBox="0 0 24 24">120          <circle cx="11" cy="11" r="9" stroke="#888" stroke-width="2" fill="none"></circle>121          <line x1="17" y1="17" x2="22" y2="22" stroke="#888" stroke-width="2"></line>122        </svg>123      </div>124      <div class="status-icon">S</div>125      <div class="status-icon">•</div>126    </div>127    <div class="status-right">128      <div class="status-icon">129        <svg width="28" height="28" viewBox="0 0 24 24">130          <path d="M12 2l5 5-5 5-5-5 5-5z" fill="#666"></path>131        </svg>132      </div>133      <div class="status-icon">134        <svg width="28" height="28" viewBox="0 0 24 24">135          <path d="M6 8h12l-1 10H7L6 8z" stroke="#666" stroke-width="2" fill="none"></path>136          <circle cx="9" cy="20" r="1.5" fill="#666"></circle>137          <circle cx="15" cy="20" r="1.5" fill="#666"></circle>138        </svg>139      </div>140      <div class="status-icon" style="position: relative;">141        <div class="badge-dot"></div>142        <svg width="6" height="28" viewBox="0 0 6 24">143          <circle cx="3" cy="5" r="2" fill="#666"></circle>144          <circle cx="3" cy="12" r="2" fill="#666"></circle>145          <circle cx="3" cy="19" r="2" fill="#666"></circle>146        </svg>147      </div>148    </div>149  </div>150 151  <!-- Header -->152  <div class="header">153    <div class="back-btn">154      <svg width="54" height="54" viewBox="0 0 24 24">155        <path d="M15 19L8 12l7-7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>156      </svg>157    </div>158    <div class="search-box">159      <svg width="44" height="44" viewBox="0 0 24 24" style="margin-right: 18px;">160        <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"></circle>161        <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#777" stroke-width="2"></line>162      </svg>163      <span class="label">washing machine</span>164    </div>165    <div class="header-actions">166      <div class="action-icon" style="background:#FFF8E1;">167        <div class="coin-badge"></div>168        <svg width="34" height="34" viewBox="0 0 24 24">169          <circle cx="12" cy="12" r="9" fill="#FFC107"></circle>170          <text x="12" y="16" text-anchor="middle" font-size="12" fill="#000" font-weight="700">$</text>171        </svg>172      </div>173      <div class="action-icon">174        <svg width="40" height="40" viewBox="0 0 24 24">175          <path d="M6 8h12l-1 10H7L6 8z" stroke="#555" stroke-width="2" fill="none"></path>176          <circle cx="9" cy="20" r="1.6" fill="#555"></circle>177          <circle cx="15" cy="20" r="1.6" fill="#555"></circle>178        </svg>179      </div>180      <div class="action-icon" style="position: relative;">181        <div class="badge-dot" style="background:#D50000;"></div>182        <svg width="6" height="40" viewBox="0 0 6 24">183          <circle cx="3" cy="5" r="2" fill="#555"></circle>184          <circle cx="3" cy="12" r="2" fill="#555"></circle>185          <circle cx="3" cy="19" r="2" fill="#555"></circle>186        </svg>187      </div>188    </div>189  </div>190 191  <!-- Tabs -->192  <div class="tabs">193    <div class="tab">Overview</div>194    <div class="tab active">195      <span class="tab-icon">196        <svg width="36" height="36" viewBox="0 0 24 24">197          <path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#FF9800"></path>198        </svg>199      </span>200      Description201    </div>202    <div class="tab">Recommend</div>203  </div>204 205  <!-- Content area -->206  <div class="content">207    <div class="product-card">208      <div class="product-image">[IMG: Washing machine with dimensions and specs sheet]</div>209    </div>210 211    <button class="scroll-top">212      <svg width="42" height="42" viewBox="0 0 24 24">213        <path d="M6 14l6-6 6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>214      </svg>215    </button>216  </div>217 218  <!-- Bottom action bar -->219  <div class="bottom-bar">220    <div class="mini-btn">221      <svg width="56" height="56" viewBox="0 0 24 24">222        <path d="M3 9l9-6 9 6v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z" stroke="#333" stroke-width="2" fill="none"></path>223        <rect x="7" y="12" width="10" height="7" fill="#FFD54F"></rect>224      </svg>225      <span>Store</span>226    </div>227    <div class="mini-btn">228      <svg width="56" height="56" viewBox="0 0 24 24">229        <path d="M3 5h18v12H8l-5 5V5z" stroke="#333" stroke-width="2" fill="none"></path>230      </svg>231      <span>Chat</span>232    </div>233    <div class="cta cart">234      Add to Cart235      <div class="coin"></div>236    </div>237    <div class="cta buy">Buy Now</div>238  </div>239 240  <!-- Home indicator -->241  <div class="home-indicator"></div>242 243</div>244</body>245</html>