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 - Mobile Tool Kit</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #1f2937;17  }18 19  /* Header */20  .topbar {21    background: #0a7596; /* teal-blue */22    height: 300px;23    position: relative;24    padding-top: 24px;25    box-sizing: border-box;26  }27  .status-bar {28    height: 70px;29    display: flex;30    align-items: center;31    padding: 0 36px;32    color: #fff;33    font-size: 38px;34    justify-content: space-between;35    opacity: 0.95;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 22px;41  }42  .icon-battery {43    width: 54px; height: 26px;44    border: 3px solid #fff; border-radius: 5px; position: relative;45  }46  .icon-battery::after {47    content: ""; position: absolute; right: -10px; top: 6px;48    width: 6px; height: 12px; background: #fff; border-radius: 2px;49  }50  .icon-battery .level {51    position: absolute; left: 3px; top: 3px; bottom: 3px; right: 10px;52    background: #fff; border-radius: 2px;53  }54 55  .app-bar {56    height: 230px;57    display: flex;58    align-items: center;59    padding: 0 36px;60    gap: 24px;61    box-sizing: border-box;62  }63  .back-btn {64    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;65  }66  .search-pill {67    flex: 1;68    background: #ffffff;69    border-radius: 60px;70    height: 120px;71    box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;72    display: flex; align-items: center;73    padding: 0 28px;74    gap: 18px;75  }76  .search-pill input {77    border: none;78    outline: none;79    font-size: 44px;80    flex: 1;81    color: #6b7280;82  }83  .search-pill .divider {84    width: 2px; height: 60px; background: #e5e7eb; margin: 0 10px;85  }86  .cart-wrap {87    width: 92px; height: 92px; display: flex; align-items: center; justify-content: center;88  }89 90  /* Content */91  .content {92    position: absolute;93    top: 300px;94    bottom: 230px; /* leave room for sticky bar + home indicator */95    left: 0; right: 0;96    overflow-y: auto;97    -webkit-overflow-scrolling: touch;98    padding: 24px 48px 240px;99    box-sizing: border-box;100  }101  .rule {102    height: 2px; background: #e5e7eb; margin: 28px 0;103  }104  .soldby-label {105    font-size: 44px; color: #374151; font-weight: 700; margin-top: 10px;106  }107  .seller {108    font-size: 46px; color: #0a7596; font-weight: 800; letter-spacing: 0.5px; margin-top: 12px;109  }110  .section-title {111    font-size: 56px; font-weight: 800; color: #111827; margin: 24px 0 16px;112  }113  ul.features {114    padding-left: 42px;115    margin: 0;116  }117  ul.features li {118    font-size: 38px;119    line-height: 1.6;120    margin: 14px 0;121    color: #374151;122  }123  .desc {124    font-size: 38px; line-height: 1.7; color: #374151; margin-top: 10px;125  }126 127  /* Sticky bottom bar */128  .bottom-bar {129    position: absolute;130    left: 0; right: 0; bottom: 84px;131    background: #ffffff;132    border-top: 1px solid #e5e7eb;133    height: 220px;134    display: flex; align-items: center; justify-content: space-between;135    padding: 0 44px;136    box-sizing: border-box;137  }138  .more {139    display: flex; flex-direction: column; gap: 10px;140  }141  .more .small {142    font-size: 36px; color: #6b7280;143  }144  .more .link {145    display: flex; align-items: center; gap: 12px;146    color: #0a7596; font-size: 44px; font-weight: 800;147  }148  .cta {149    background: #0a7596;150    color: #fff;151    font-size: 48px; font-weight: 800;152    padding: 34px 80px;153    border-radius: 60px;154    box-shadow: 0 4px 0 rgba(0,0,0,0.08);155  }156 157  /* Home indicator */158  .home-indicator {159    position: absolute;160    bottom: 24px; left: 50%;161    transform: translateX(-50%);162    width: 360px; height: 16px; border-radius: 10px; background: #0f0f0f;163    opacity: 0.9;164  }165 166  /* Helper: SVG sizing */167  .icon { display: inline-block; }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Top header with status bar and search -->174  <div class="topbar">175    <div class="status-bar">176      <div>4:48</div>177      <div class="status-right">178        <svg class="icon" width="30" height="30" viewBox="0 0 24 24" fill="none">179          <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"></circle>180          <circle cx="12" cy="12" r="3" fill="#fff"></circle>181        </svg>182        <svg class="icon" width="30" height="30" viewBox="0 0 24 24" fill="none">183          <path d="M2 10l5-5v14l-5-5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>184        </svg>185        <svg class="icon" width="30" height="30" viewBox="0 0 24 24" fill="none">186          <path d="M3 8h18M3 12h18M3 16h18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>187        </svg>188        <div style="width:10px;height:10px;background:#fff;border-radius:50%;"></div>189        <div class="icon-battery"><div class="level"></div></div>190        <div style="font-size:38px;color:#fff;">100%</div>191      </div>192    </div>193    <div class="app-bar">194      <div class="back-btn">195        <svg class="icon" width="60" height="60" viewBox="0 0 24 24" fill="none">196          <path d="M15 18l-6-6 6-6" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path>197        </svg>198      </div>199      <div class="search-pill">200        <svg class="icon" width="54" height="54" viewBox="0 0 24 24" fill="none">201          <circle cx="11" cy="11" r="7" stroke="#6b7280" stroke-width="2"></circle>202          <path d="M16.5 16.5L21 21" stroke="#6b7280" stroke-width="2" stroke-linecap="round"></path>203        </svg>204        <input type="text" value="Search JioMart" aria-label="Search">205        <div class="divider"></div>206        <svg class="icon" width="50" height="50" viewBox="0 0 24 24" fill="none">207          <rect x="9" y="3" width="6" height="10" rx="3" stroke="#0a7596" stroke-width="2"></rect>208          <path d="M7 10v1a5 5 0 0010 0v-1" stroke="#0a7596" stroke-width="2" stroke-linecap="round"></path>209        </svg>210      </div>211      <div class="cart-wrap">212        <svg class="icon" width="64" height="64" viewBox="0 0 24 24" fill="none">213          <path d="M6 6h14l-2 9H8L6 6z" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"></path>214          <circle cx="9.5" cy="19" r="1.6" fill="#ffffff"></circle>215          <circle cx="17.5" cy="19" r="1.6" fill="#ffffff"></circle>216        </svg>217      </div>218    </div>219  </div>220 221  <!-- Scrollable content -->222  <div class="content">223    <div class="rule"></div>224    <div class="soldby-label">Sold by</div>225    <div class="seller">KALKAJI TRADING</div>226 227    <div class="rule"></div>228 229    <div class="section-title">Features &amp; Details</div>230    <ul class="features">231      <li>Mobile Ripering Tools, Leather wallet holds the screwdrivers, portable and not easy to drop. High-end leather protect screwdrivers from loosing, crush</li>232      <li>Screw Driver for Mobile Phone, Different head size suits different usage</li>233      <li>screwdriver heads are suitable for disassembling computers, smartphones, glasses, watches, etc. All screwdriver heads have been processed with high temperature</li>234      <li>Mobile Screwdriver Tool Set , The grip is made of aviation aluminum, high-quality, durable and convinient to use with the bearing at the tail of the grip</li>235      <li>Usage: repairing computers, smartphones, television, telephone, glasses, CD/VCD/DVD device, optical device. A practical tool for repairing.</li>236      <li>Multi Tool Kit for Home , Screwdriver Rod ?3.95X33mm Electroplate</li>237      <li>Mobile Repairing Tool Kit , Screwdriver Set for Computer, Screw Driver Set for Mobile, Precision Screwdriver Set, Barrel Plating Substitute for Chrome Plating.</li>238    </ul>239 240    <div class="rule"></div>241 242    <div class="section-title">Description</div>243    <div class="desc">244      Leather Wallet Holds the Screwdrivers, Portable and Not Easy to Drop. High-end Leather Protect Screwdrivers From Loosing, Crush.245      25 Screwdriver Heads Are Suitable for Disassembling Computers, Smartphones, Glasses, Watches, Etc. All Screwdriver Heads Have Been246      Processed With High Temperature. The grip is made of aviation aluminum, high-quality, durable and convinient to use with the bearing at the tail of the grip.247      Compatible with ALL iphones 3G to 7 plus, ALL Samsung Galaxy phones and others as well.248      This Pocket Screwdriver Set For Small Appliances Duty.249    </div>250 251    <div class="rule" style="margin-top:40px;"></div>252    <div class="section-title" style="opacity:0.92">Product Information</div>253    <div style="height:400px"></div>254  </div>255 256  <!-- Sticky bottom bar -->257  <div class="bottom-bar">258    <div class="more">259      <div class="small">Explore More!</div>260      <div class="link">View Categories261        <svg class="icon" width="36" height="36" viewBox="0 0 24 24" fill="none">262          <path d="M9 6l6 6-6 6" stroke="#0a7596" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"></path>263        </svg>264      </div>265    </div>266    <div class="cta">Add to Cart</div>267  </div>268 269  <div class="home-indicator"></div>270</div>271</body>272</html>