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>Product Details Mock</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, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 120px;24    background: #3a3a3a;25    color: #fff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 32px;30    box-sizing: border-box;31    font-size: 44px;32    letter-spacing: 1px;33  }34  .status-right {35    display: flex;36    align-items: center;37    gap: 26px;38  }39  .status-dot {40    width: 22px; height: 22px;41    background: #bdbdbd; border-radius: 50%;42    display: inline-block;43    opacity: .9;44  }45  .icon-wifi, .icon-battery {46    display: inline-block;47  }48 49  /* App bar */50  .app-bar {51    position: absolute;52    top: 120px; left: 0; right: 0;53    height: 150px;54    background: #232323;55    display: flex;56    align-items: center;57    justify-content: space-between;58    padding: 0 26px;59    box-sizing: border-box;60  }61  .app-left {62    display: flex;63    align-items: center;64    gap: 28px;65  }66  .icon-btn {67    width: 84px; height: 84px;68    display: flex;69    align-items: center; justify-content: center;70  }71  .app-right {72    position: relative;73    margin-right: 8px;74  }75  .cart-badge {76    position: absolute;77    top: -6px; right: -6px;78    min-width: 46px; height: 46px;79    padding: 0 8px;80    background: #ff9800;81    color: #fff;82    border-radius: 23px;83    font-size: 30px;84    display: flex; align-items: center; justify-content: center;85    border: 2px solid #232323;86    box-sizing: border-box;87  }88 89  /* Content */90  .content {91    position: absolute;92    top: 270px;93    left: 0; right: 0;94    bottom: 290px; /* leave space for bottom bar */95    overflow: hidden;96    padding: 20px 40px 320px 40px;97    box-sizing: border-box;98  }99  .content p {100    font-size: 40px;101    line-height: 60px;102    margin: 0 0 16px 0;103    color: #111;104  }105  .section-title {106    font-size: 54px;107    line-height: 70px;108    font-weight: 700;109    margin: 46px 0 16px 0;110  }111 112  /* Bottom navigation */113  .nav-bar {114    position: absolute;115    left: 0; right: 0;116    bottom: 90px; /* keep space for gesture pill */117    height: 200px;118    background: #3a3a3a;119    color: #e0e0e0;120    display: flex;121    align-items: center;122    justify-content: space-around;123    box-shadow: 0 -2px 6px rgba(0,0,0,0.2);124  }125  .nav-item {126    width: 20%;127    height: 100%;128    display: flex;129    flex-direction: column;130    align-items: center;131    justify-content: center;132    gap: 14px;133    font-size: 30px;134    color: #cfcfcf;135  }136  .nav-item svg {137    width: 58px; height: 58px;138    fill: #cfcfcf;139  }140  .nav-flag {141    width: 120px; height: 120px;142    background: #E0E0E0;143    border: 2px solid #BDBDBD;144    border-radius: 50%;145    display: flex; align-items: center; justify-content: center;146    font-size: 36px; color: #757575;147  }148 149  /* Gesture pill */150  .gesture {151    position: absolute;152    left: 50%;153    transform: translateX(-50%);154    bottom: 24px;155    width: 360px; height: 18px;156    background: #ffffff;157    border-radius: 9px;158    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);159    opacity: .95;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status Bar -->167  <div class="status-bar">168    <div>9:26</div>169    <div class="status-right">170      <span class="status-dot"></span>171      <span class="status-dot"></span>172      <div class="icon-wifi">173        <svg width="48" height="48" viewBox="0 0 24 24">174          <path d="M2 8c5.5-5.3 14.5-5.3 20 0M5 11c3.7-3.5 10.3-3.5 14 0M8 14c2-2 6-2 8 0M12 18a2 2 0 1 0 0.001 0z" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>175        </svg>176      </div>177      <div class="icon-battery">178        <svg width="58" height="58" viewBox="0 0 24 24">179          <rect x="1" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>180          <rect x="3" y="8" width="14" height="8" fill="#fff"/>181          <rect x="20" y="10" width="3" height="6" rx="1" fill="#fff"/>182        </svg>183      </div>184    </div>185  </div>186 187  <!-- App Bar -->188  <div class="app-bar">189    <div class="app-left">190      <div class="icon-btn">191        <svg width="64" height="64" viewBox="0 0 24 24">192          <path d="M15 19L8 12l7-7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193        </svg>194      </div>195      <div class="icon-btn">196        <svg width="64" height="64" viewBox="0 0 24 24">197          <path d="M4 7h10M4 12h10M4 17h7" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"/>198        </svg>199      </div>200    </div>201    <div class="app-right">202      <div class="icon-btn">203        <svg width="72" height="72" viewBox="0 0 24 24">204          <path d="M6 7l1-2h10l1 2h-12zM6 7v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"/>205        </svg>206      </div>207      <div class="cart-badge">0</div>208    </div>209  </div>210 211  <!-- Content -->212  <div class="content">213    <p>Arm Type: Square arm</p>214    <p>Toss Pillows: No</p>215    <p>Removable Cushion Cover: Yes for back cushion</p>216    <p>Reversible Cushions: No</p>217    <p>Storage: Yes</p>218    <p>Weight Capacity: 300lbs each seat</p>219    <p>Product Care: Wipe with fabric cleaner</p>220    <p>Warranty: One Year</p>221 222    <div class="section-title">Luxurious and Comfortable Modern Large Sectional Sofa</div>223    <p>The U-shape couch's clean design, lambswool upholstery and thick padded foam base make this sectional sofa perfect for a living room, bedroom or home office.</p>224 225    <div class="section-title">Lasting Comfort</div>226    <p>The solid wood frame features a sturdy pocket coil construction and plastic legs for a premium supportive seating experience.</p>227 228    <div class="section-title">Suitable Backrest</div>229    <p>The U-shaped modular sectional sofa back is designed for your body type to support and relieve your stress while you sit on the sofa.</p>230 231    <div class="section-title">Curved Streamline</div>232    <p>The velvet fabric sectional sofa has smooth curves that allow you to freely position on the sofa and also add a unique personality to your room.</p>233 234    <div class="section-title">Notes:</div>235    <p>Manual measurement has been used, there may be some reasonable error.</p>236    <p>All the pictures are taken by actual samples, slight chromatic aberration may occur due to lighting or display.</p>237  </div>238 239  <!-- Bottom Navigation -->240  <div class="nav-bar">241    <div class="nav-item">242      <svg viewBox="0 0 24 24">243        <path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z"/>244      </svg>245      <div>Explore</div>246    </div>247    <div class="nav-item">248      <svg viewBox="0 0 24 24">249        <path d="M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0zm9-3h2M8 15h2" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>250        <path d="M9 7c-1.5 0-2.5 1.2-2 2.5.6 1.7 2.8 1.6 3.5 3.3.5 1.3-.4 2.2-1.5 2.2" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>251      </svg>252      <div>Deals</div>253    </div>254    <div class="nav-item">255      <div class="nav-flag">US</div>256      <div>US Store</div>257    </div>258    <div class="nav-item">259      <svg viewBox="0 0 24 24">260        <path d="M12 21s-6-4.4-8.5-8C1 9 3 5 6.5 5 8.6 5 10 6.4 12 8.5 14 6.4 15.4 5 17.5 5 21 5 23 9 20.5 13c-2.5 3.6-8.5 8-8.5 8z"/>261      </svg>262      <div>Favorites</div>263    </div>264    <div class="nav-item">265      <svg viewBox="0 0 24 24">266        <circle cx="11" cy="11" r="7" fill="none" stroke="#cfcfcf" stroke-width="2"/>267        <path d="M21 21l-4.3-4.3" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round"/>268      </svg>269      <div>Search</div>270    </div>271  </div>272 273  <!-- Gesture Pill -->274  <div class="gesture"></div>275</div>276</body>277</html>