GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>View Product Details</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #ECECEC;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 36px;29 box-sizing: border-box;30 font-size: 38px;31 color: #111;32 }33 .sb-left {34 display: flex;35 align-items: center;36 gap: 22px;37 }38 .sb-dots span {39 display: inline-block;40 width: 26px;41 height: 26px;42 background: #BDBDBD;43 border-radius: 50%;44 margin-right: 12px;45 }46 .sb-right {47 display: flex;48 align-items: center;49 gap: 24px;50 }51 .sb-icon {52 width: 40px; height: 40px;53 }54 .sb-icon svg { width: 100%; height: 100%; }55 56 /* Header */57 .header {58 position: absolute;59 top: 120px;60 left: 0;61 width: 1080px;62 height: 140px;63 display: flex;64 align-items: center;65 padding: 0 36px;66 box-sizing: border-box;67 border-bottom: 1px solid #eee;68 background: #fff;69 }70 .back-btn {71 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px;72 }73 .header-title {74 font-size: 60px;75 font-weight: 700;76 color: #222;77 }78 79 /* Content */80 .content {81 position: absolute;82 top: 260px;83 left: 0;84 right: 0;85 bottom: 120px;86 overflow-y: auto;87 -webkit-overflow-scrolling: touch;88 padding: 24px 48px 120px;89 box-sizing: border-box;90 }91 .intro {92 font-size: 36px;93 line-height: 1.55;94 color: #666;95 margin-bottom: 40px;96 }97 .section-title {98 font-size: 54px;99 font-weight: 800;100 margin: 48px 0 18px;101 }102 .section-text {103 font-size: 36px;104 line-height: 1.6;105 color: #666;106 }107 .bullet-list {108 margin-top: 8px;109 margin-bottom: 10px;110 }111 .bullet-list .item {112 font-size: 36px;113 line-height: 1.6;114 color: #666;115 margin: 6px 0;116 }117 .bullet-list .item::before {118 content: "•";119 margin-right: 12px;120 color: #333;121 }122 123 /* Bottom indicator */124 .home-indicator {125 position: absolute;126 bottom: 24px;127 left: 50%;128 transform: translateX(-50%);129 width: 320px;130 height: 16px;131 background: #000;132 border-radius: 10px;133 opacity: 0.85;134 }135</style>136</head>137<body>138<div id="render-target">139 140 <!-- Status Bar -->141 <div class="status-bar">142 <div class="sb-left">143 <div class="time">8:10</div>144 <div class="sb-dots">145 <span></span><span></span><span></span><span></span><span></span>146 </div>147 </div>148 <div class="sb-right">149 <!-- Wi-Fi icon -->150 <div class="sb-icon">151 <svg viewBox="0 0 24 24" fill="#555">152 <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5zM2.3 9.7a15 15 0 0 1 19.4 0l-1.7 1.7a12.6 12.6 0 0 0-16 0L2.3 9.7zm3.6 3.6a9.6 9.6 0 0 1 12.2 0l-1.7 1.7a7.1 7.1 0 0 0-8.8 0l-1.7-1.7zm3.6 3.6a4.2 4.2 0 0 1 5 0l-1.7 1.7a1.7 1.7 0 0 0-1.6 0l-1.7-1.7z"/>153 </svg>154 </div>155 <!-- Battery icon -->156 <div class="sb-icon">157 <svg viewBox="0 0 24 24" fill="#555">158 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#555" fill="none"/>159 <rect x="20" y="9" width="2" height="6" fill="#555"/>160 <rect x="4" y="8" width="12" height="8" fill="#555"/>161 </svg>162 </div>163 </div>164 </div>165 166 <!-- Header -->167 <div class="header">168 <div class="back-btn">169 <svg viewBox="0 0 24 24" width="48" height="48" fill="#222">170 <path d="M15.5 4.5L7 12l8.5 7.5-1.7 2L3.5 12 13.8 2.5l1.7 2z"/>171 </svg>172 </div>173 <div class="header-title">View Product Details</div>174 </div>175 176 <!-- Content -->177 <div class="content">178 <p class="intro">179 Find your go-to fit and comfort with our Nike Go leggings. Squat-proof—even during your toughest workouts—their sleek, midweight InfinaLock fabric feels compressive and supportive in all the right places. Multiple pockets let you carry everything you could need, whether you're hitting the trail, the gym or the mat.180 </p>181 182 <div class="section">183 <div class="section-title">Extra-Wide Waistband</div>184 <div class="section-text">185 Designed to help reduce rolling, pinching and sliding, the waistband helps hold you up and smooths the waist.186 </div>187 </div>188 189 <div class="section">190 <div class="section-title">6 (Yes, 6) Pockets</div>191 <div class="section-text">192 Keep everything you could need close by with the help of multiple pockets: 2 angled, seamless side pockets for easy access, 3 drop-in pockets on the back of the waist and a zip pocket on the thigh. They're ready to hold everything from a key to your phone, lip balm and more.193 </div>194 </div>195 196 <div class="section">197 <div class="section-title">More Benefits</div>198 <div class="bullet-list">199 <div class="item">Nike Dri-FIT Technology moves sweat away from your skin for quicker evaporation, helping you stay dry and comfortable.</div>200 <div class="item">Internal drawcord lets you adjust the waist when you're on the move.</div>201 </div>202 </div>203 204 <div class="section">205 <div class="section-title">Product Details</div>206 <div class="bullet-list">207 <div class="item">Body: 68% nylon/32% elastane. Waist lining: 68% nylon/32% elastane. Gusset lining: 84% nylon/16% elastane.</div>208 <div class="item">High-rise waistband</div>209 <div class="item">Machine wash</div>210 <div class="item">Imported</div>211 <div class="item">Not intended for use as Personal Protective Equipment (PPE)</div>212 </div>213 </div>214 </div>215 216 <!-- Home indicator -->217 <div class="home-indicator"></div>218</div>219</body>220</html>