GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Switch FWD Running Shoes - Mock UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 font-family: Arial, Helvetica, sans-serif;14 color: #111;15 }16 17 /* Global spacing helpers */18 .screen-padding { padding: 0 60px; }19 20 /* Status bar */21 .status-bar {22 height: 90px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 padding: 0 28px;27 box-sizing: border-box;28 }29 .status-time {30 font-size: 34px;31 font-weight: 700;32 letter-spacing: 0.5px;33 }34 .status-icons {35 display: flex;36 align-items: center;37 gap: 18px;38 }39 .status-icon { width: 40px; height: 40px; }40 41 /* Header with title, price, and close */42 .header {43 display: flex;44 align-items: center;45 justify-content: space-between;46 padding: 18px 60px 10px 60px;47 }48 .title {49 font-size: 44px;50 font-weight: 800;51 letter-spacing: 2px;52 text-transform: uppercase;53 }54 .price-pill {55 border: 2px solid #111;56 border-radius: 12px;57 padding: 14px 28px;58 font-size: 36px;59 font-weight: 800;60 }61 .close-btn {62 margin-left: 18px;63 width: 60px;64 height: 60px;65 display: inline-flex;66 align-items: center;67 justify-content: center;68 }69 70 /* Thumbnails carousel */71 .thumbs-row {72 margin-top: 18px;73 padding: 0 60px;74 display: flex;75 gap: 28px;76 }77 .thumb {78 width: 180px;79 height: 110px;80 background: #E0E0E0;81 border: 1px solid #BDBDBD;82 border-radius: 12px;83 display: flex;84 align-items: center;85 justify-content: center;86 color: #555;87 font-size: 22px;88 text-align: center;89 padding: 8px;90 box-sizing: border-box;91 }92 .thumb.selected {93 outline: 3px solid #bdbdbd;94 background: #D8D8D8;95 }96 97 /* Section headings */98 .section-title {99 font-size: 54px;100 font-weight: 900;101 letter-spacing: 1px;102 padding: 32px 60px 10px 60px;103 }104 105 .desc {106 font-size: 32px;107 line-height: 46px;108 color: #222;109 padding: 0 60px;110 }111 112 /* Share section */113 .share-title {114 font-size: 64px;115 font-weight: 900;116 letter-spacing: 1px;117 padding: 80px 60px 30px 60px;118 text-transform: uppercase;119 }120 .photo-frame {121 margin: 0 auto;122 width: 860px;123 height: 1160px;124 background: #E0E0E0;125 border: 1px solid #BDBDBD;126 border-radius: 12px;127 display: flex;128 align-items: center;129 justify-content: center;130 color: #555;131 font-size: 30px;132 text-align: center;133 box-shadow: 0 6px 0 rgba(0,0,0,0.05);134 }135 136 /* Ratings section */137 .ratings-title {138 font-size: 56px;139 font-weight: 900;140 padding: 70px 60px 10px 60px;141 letter-spacing: 1px;142 }143 .ratings-row {144 display: flex;145 gap: 70px;146 padding: 20px 60px;147 align-items: baseline;148 }149 .rating-number {150 font-size: 120px;151 font-weight: 800;152 line-height: 1;153 }154 .rating-label {155 font-size: 34px;156 color: #666;157 }158 159 /* Utility separator (subtle) */160 .divider {161 height: 1px;162 background: #eee;163 margin: 20px 0;164 }165</style>166</head>167<body>168<div id="render-target">169 <!-- Status bar -->170 <div class="status-bar">171 <div class="status-time">5:13</div>172 <div class="status-icons">173 <!-- Cellular icon -->174 <svg class="status-icon" viewBox="0 0 24 24">175 <rect x="2" y="16" width="3" height="6" fill="#111"></rect>176 <rect x="7" y="12" width="3" height="10" fill="#111"></rect>177 <rect x="12" y="8" width="3" height="14" fill="#111"></rect>178 <rect x="17" y="4" width="3" height="18" fill="#111"></rect>179 </svg>180 <!-- Wi-Fi icon -->181 <svg class="status-icon" viewBox="0 0 24 24">182 <path d="M2 8c5-4 15-4 20 0" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>183 <path d="M5 12c3-3 11-3 14 0" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>184 <path d="M9 16c2-2 4-2 6 0" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>185 <circle cx="12" cy="20" r="2" fill="#111"></circle>186 </svg>187 <!-- Battery icon -->188 <svg class="status-icon" viewBox="0 0 28 24">189 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#111" stroke-width="2" fill="none"></rect>190 <rect x="4" y="8" width="14" height="8" fill="#111"></rect>191 <rect x="22" y="10" width="4" height="4" fill="#111"></rect>192 </svg>193 </div>194 </div>195 196 <!-- Header row -->197 <div class="header">198 <div class="title">SWITCH FWD RUNNING SHOES</div>199 <div style="display:flex; align-items:center; gap:16px;">200 <div class="price-pill">$140.00</div>201 <div class="close-btn" aria-label="Close">202 <svg viewBox="0 0 24 24">203 <path d="M4 4 L20 20 M20 4 L4 20" stroke="#111" stroke-width="2" stroke-linecap="round"/>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Shoe thumbnails -->210 <div class="thumbs-row">211 <div class="thumb">[IMG: Switch FWD shoe - neon green]</div>212 <div class="thumb">[IMG: Switch FWD shoe - pink]</div>213 <div class="thumb">[IMG: Switch FWD shoe - black]</div>214 <div class="thumb">[IMG: Switch FWD shoe - beige]</div>215 <div class="thumb selected">[IMG: Switch FWD shoe - grey/green]</div>216 </div>217 218 <!-- Continental outsole section -->219 <div class="section-title">CONTINENTAL™ OUTSOLE</div>220 <div class="desc">221 The durable and lightweight Continental™ outsole features a high-performance compound for optimized grip in all conditions.222 </div>223 224 <!-- Divider -->225 <div class="divider" style="margin: 40px 60px 0 60px;"></div>226 227 <!-- Share section -->228 <div class="share-title">SHARE HOW YOU WEAR IT</div>229 <div class="photo-frame">230 [IMG: Person wearing Switch FWD shoes doing a warm-up on a street]231 </div>232 233 <!-- Ratings section -->234 <div class="ratings-title">RATINGS & REVIEWS</div>235 <div class="ratings-row">236 <div>237 <div class="rating-number">4.7</div>238 <div class="rating-label">Average Rating</div>239 </div>240 <div>241 <div class="rating-number">96%</div>242 <div class="rating-label">Would recommend</div>243 </div>244 </div>245</div>246</body>247</html>