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>Yonex Badminton Racket - UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #F2F4F7; color: #111;11 }12 13 /* Top bar */14 .topbar {15 position: absolute; top: 0; left: 0; width: 100%; height: 220px;16 background: #202325; color: #fff; box-sizing: border-box; padding: 16px 28px;17 }18 .status-row {19 height: 60px; display: flex; align-items: center; justify-content: space-between;20 font-weight: 600; font-size: 28px;21 }22 .status-icons { display: flex; gap: 18px; align-items: center; }23 .dot { width: 18px; height: 18px; background: #fff; opacity: .8; border-radius: 50%; }24 .search-row { margin-top: 12px; display: flex; align-items: center; gap: 18px; }25 .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }26 .icon-btn svg { fill: #fff; width: 36px; height: 36px; }27 .search-box {28 flex: 1; background: #2A2E33; border-radius: 50px; height: 88px; display: flex;29 align-items: center; padding: 0 28px; box-sizing: border-box; gap: 18px;30 font-size: 32px; color: #EDEDED;31 }32 .search-box .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }33 .search-box svg { fill: #BFC6CE; }34 35 /* Notice */36 .notice {37 position: absolute; top: 220px; left: 0; width: 100%; text-align: center;38 font-size: 30px; color: #7B838C; padding: 18px 60px; box-sizing: border-box;39 }40 41 /* Accordion */42 .accordion {43 position: absolute; top: 300px; left: 0; width: 100%;44 box-sizing: border-box;45 }46 .acc-item {47 background: #FFFFFF; border-top: 1px solid #E3E6EA; border-bottom: 1px solid #E3E6EA;48 padding: 40px; display: flex; align-items: center; justify-content: space-between;49 font-size: 42px; font-weight: 600;50 }51 .acc-plus { width: 48px; height: 48px; }52 .acc-plus svg { stroke: #333; stroke-width: 6; }53 54 /* Viewed Together section */55 .viewed {56 position: absolute; top: 660px; left: 0; width: 100%;57 background: #E9EDF2; box-sizing: border-box; padding: 32px 24px 40px;58 }59 .viewed h2 {60 margin: 0 0 24px; font-size: 54px; font-weight: 800; letter-spacing: 1px;61 }62 .dots { display: flex; gap: 18px; padding: 6px 18px 26px; }63 .dots span {64 width: 10px; height: 10px; background: #B7BDC5; display: inline-block; border-radius: 2px;65 }66 67 /* Carousel */68 .carousel {69 display: flex; gap: 36px; overflow-x: auto; padding: 0 12px 36px;70 }71 .card {72 min-width: 690px; width: 690px; background: #fff; border: 1px solid #D7DDE3;73 border-radius: 8px; box-sizing: border-box; display: flex; flex-direction: column;74 box-shadow: 0 1px 0 #E3E6EA;75 }76 .card .img {77 height: 760px; margin: 40px; background: #E0E0E0; border: 1px solid #BDBDBD;78 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;79 }80 .card .content { padding: 0 40px 28px; }81 .brand { font-size: 40px; font-weight: 700; margin-bottom: 12px; }82 .title { font-size: 38px; line-height: 1.25; color: #2B2F33; margin-bottom: 12px; }83 .price-row { display: flex; gap: 22px; align-items: baseline; margin: 14px 0 24px; }84 .price { font-size: 44px; font-weight: 800; color: #DA2B25; }85 .rrp { font-size: 34px; color: #9AA1A9; text-decoration: line-through; }86 .card .cta {87 margin-top: auto; background: #0F1113; color: #fff; height: 120px; display: flex;88 align-items: center; justify-content: center; font-size: 40px; font-weight: 800;89 }90 91 /* Bottom controls */92 .bottom-controls {93 position: absolute; bottom: 160px; left: 0; width: 100%; display: flex; justify-content: space-between;94 padding: 0 36px; box-sizing: border-box;95 }96 .round-btn {97 width: 90px; height: 90px; background: #fff; border: 1px solid #DADFE5; border-radius: 50%;98 display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 #E6E9ED;99 }100 .round-btn svg { width: 44px; height: 44px; fill: #1F2327; }101 102 /* Gesture bar */103 .gesture {104 position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);105 width: 600px; height: 16px; background: #0F1113; border-radius: 12px; opacity: .85;106 }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Top bar -->113 <div class="topbar">114 <div class="status-row">115 <div>12:22</div>116 <div class="status-icons">117 <div class="dot"></div>118 <div class="dot"></div>119 <div class="dot"></div>120 </div>121 </div>122 <div class="search-row">123 <!-- Back arrow -->124 <div class="icon-btn" aria-label="Back">125 <svg viewBox="0 0 24 24">126 <path d="M15 18l-6-6 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>127 </svg>128 </div>129 <!-- Hamburger -->130 <div class="icon-btn" aria-label="Menu">131 <svg viewBox="0 0 24 24">132 <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>133 </svg>134 </div>135 136 <!-- Search box -->137 <div class="search-box">138 <svg viewBox="0 0 24 24">139 <path d="M10 2a8 8 0 105.3 14.3l4.4 4.4 1.3-1.3-4.4-4.4A8 8 0 0010 2z"></path>140 </svg>141 <div class="label">Yonex Badminton Racket</div>142 <svg viewBox="0 0 24 24" aria-label="QR">143 <path d="M3 3h7v7H3V3zm2 2v3h3V5H5zm11-2h5v5h-5V3zm2 2v1h1V5h-1zM3 14h7v7H3v-7zm2 2v3h3v-3H5zm12-2h2v2h-2v-2zm2 4h2v2h-2v-2zm-4-2h2v2h-2v-2z" fill="#BFC6CE"></path>144 </svg>145 </div>146 </div>147 </div>148 149 <!-- Notice text -->150 <div class="notice">In some cases, our online prices may differ from those in-store</div>151 152 <!-- Accordion items -->153 <div class="accordion">154 <div class="acc-item">155 <div>Description</div>156 <div class="acc-plus">157 <svg viewBox="0 0 24 24">158 <path d="M4 12h16M12 4v16" fill="none"></path>159 </svg>160 </div>161 </div>162 <div class="acc-item">163 <div>Delivery Information</div>164 <div class="acc-plus">165 <svg viewBox="0 0 24 24">166 <path d="M4 12h16M12 4v16" fill="none"></path>167 </svg>168 </div>169 </div>170 <div class="acc-item">171 <div>Returns</div>172 <div class="acc-plus">173 <svg viewBox="0 0 24 24">174 <path d="M4 12h16M12 4v16" fill="none"></path>175 </svg>176 </div>177 </div>178 </div>179 180 <!-- Viewed Together -->181 <div class="viewed">182 <h2>VIEWED TOGETHER</h2>183 <div class="dots">184 <span></span><span></span><span></span><span></span><span></span>185 <span></span><span></span><span></span><span></span><span></span>186 <span></span><span></span><span></span><span></span><span></span>187 <span></span><span></span><span></span><span></span><span></span>188 </div>189 190 <div class="carousel">191 <!-- Card 1 -->192 <div class="card">193 <div class="img">[IMG: Yonex Badminton Racket - Red/White]</div>194 <div class="content">195 <div class="brand">Yonex</div>196 <div class="title">Muscle Power 5 Badminton Racket</div>197 <div class="price-row">198 <div class="price">£24.99</div>199 <div class="rrp">RRP £29.99</div>200 </div>201 </div>202 <div class="cta">VIEW PRODUCT</div>203 </div>204 205 <!-- Card 2 -->206 <div class="card">207 <div class="img">[IMG: Yonex Racket - Astrox Series]</div>208 <div class="content">209 <div class="brand">Yonex</div>210 <div class="title">Astrox GS Badminton Racket</div>211 <div class="price-row">212 <div class="price">£72.99</div>213 <div class="rrp">RRP £84.99</div>214 </div>215 </div>216 <div class="cta">VIEW PRODUCT</div>217 </div>218 </div>219 </div>220 221 <!-- Bottom controls -->222 <div class="bottom-controls">223 <div class="round-btn" aria-label="Back">224 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"></path></svg>225 </div>226 <div class="round-btn" aria-label="Forward">227 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>228 </div>229 </div>230 231 <!-- Gesture bar -->232 <div class="gesture"></div>233 234</div>235</body>236</html>