GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Groupon UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#ffffff;11 box-shadow: 0 0 0 rgba(0,0,0,0);12 }13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:100px; padding:20px 28px;17 display:flex; align-items:center; justify-content:space-between;18 color:#333; font-size:34px;19 }20 .status-right { display:flex; gap:22px; align-items:center; }21 .icon-dot { width:20px; height:20px; background:#888; border-radius:50%; }22 /* Header search area */23 .header {24 position:absolute; top:100px; left:0; right:0;25 padding:20px 24px;26 display:flex; align-items:center; gap:18px;27 }28 .circle-btn {29 width:72px; height:72px; border-radius:36px; background:#F1F3F4;30 display:flex; align-items:center; justify-content:center; border:1px solid #E0E0E0;31 }32 .search-wrap {33 flex:1;34 background:#F5F7F8; border:1px solid #E0E0E0; border-radius:40px;35 height:96px; display:flex; align-items:center; padding:0 26px; gap:18px;36 }37 .search-text { color:#222; font-size:36px; flex:1; }38 .loc-chip {39 display:flex; align-items:center; gap:10px;40 background:#ffffff; border:1px solid #E0E0E0; border-radius:28px;41 color:#333; padding:10px 18px; font-size:28px;42 }43 .cart-btn { width:72px; height:72px; border-radius:36px; background:#F1F3F4; display:flex; align-items:center; justify-content:center; border:1px solid #E0E0E0; }44 /* List */45 .list {46 position:absolute; top:220px; left:0; right:0; bottom:980px; /* above keyboard */47 overflow:auto; padding-bottom:20px;48 }49 .card {50 display:flex; padding:26px 28px; gap:26px; border-bottom:1px solid #eee;51 }52 .img {53 width:240px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD;54 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center;55 }56 .content { flex:1; }57 .title {58 font-size:42px; font-weight:700; color:#222; line-height:1.15; margin-bottom:8px;59 }60 .subtitle { font-size:30px; color:#666; margin-bottom:6px; }61 .rating { display:flex; align-items:center; gap:12px; margin-bottom:14px; }62 .rating .score { font-size:30px; color:#444; }63 .rating .count { font-size:30px; color:#999; }64 .price-row { display:flex; align-items:center; gap:18px; }65 .orig { font-size:44px; color:#9e9e9e; text-decoration:line-through; }66 .sale { font-size:44px; color:#2e7d32; font-weight:700; }67 .pill {68 padding:10px 18px; border-radius:16px; background:#DFF5D8; color:#2e7d32; font-size:28px; font-weight:700;69 }70 /* Keyboard mock */71 #keyboard {72 position:absolute; left:0; right:0; bottom:120px;73 height:900px; background:#1d1d1f; border-top:1px solid #2b2b2b;74 padding:30px 22px; color:#fff;75 }76 .key-row { display:flex; justify-content:space-between; margin-bottom:26px; }77 .key {78 height:110px; min-width:90px; flex:1;79 margin:0 8px; background:#2b2b2b; border-radius:16px;80 display:flex; align-items:center; justify-content:center;81 font-size:48px; color:#fff;82 }83 .key.small { font-size:38px; }84 .key.wide { flex:2.5; }85 .key.space { flex:6; }86 .key.round {87 width:120px; height:120px; border-radius:60px; background:#E8E7FB; color:#1a1a1a; flex:none;88 }89 .home-indicator {90 position:absolute; bottom:40px; left:50%; transform:translateX(-50%);91 width:420px; height:10px; background:#d9d9d9; border-radius:6px;92 }93 /* SVG helpers */94 .svg { width:36px; height:36px; }95 .star { width:32px; height:32px; }96</style>97</head>98<body>99<div id="render-target">100 101 <!-- Status Bar -->102 <div class="status-bar">103 <div>5:45</div>104 <div class="status-right">105 <div class="icon-dot"></div>106 <div class="icon-dot"></div>107 </div>108 </div>109 110 <!-- Header with back, search, location, cart -->111 <div class="header">112 <div class="circle-btn">113 <svg class="svg" viewBox="0 0 24 24">114 <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>115 </svg>116 </div>117 <div class="search-wrap">118 <svg class="svg" viewBox="0 0 24 24">119 <circle cx="10" cy="10" r="6" fill="none" stroke="#666" stroke-width="2"/>120 <path d="M14 14l6 6" stroke="#666" stroke-width="2" stroke-linecap="round"/>121 </svg>122 <div class="search-text">Search Groupon</div>123 <div class="loc-chip">124 <svg class="svg" viewBox="0 0 24 24">125 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#666"/>126 </svg>127 <span>Michigan, USA</span>128 </div>129 </div>130 <div class="cart-btn">131 <svg class="svg" viewBox="0 0 24 24">132 <path d="M3 4h2l3 12h10l2-8H7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>133 <circle cx="9" cy="20" r="2" fill="#333"/>134 <circle cx="17" cy="20" r="2" fill="#333"/>135 </svg>136 </div>137 </div>138 139 <!-- List of deals -->140 <div class="list">141 <!-- Card 1 -->142 <div class="card">143 <div class="img">[IMG: Bowling with shoes]</div>144 <div class="content">145 <div class="title">Up to 71% Off Bowling with Shoes</div>146 <div class="subtitle">AMF Bowling</div>147 <div class="rating">148 <div class="score">4.8</div>149 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>150 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>151 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>152 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>153 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>154 <div class="count">90,523 Ratings</div>155 </div>156 <div class="price-row">157 <div class="orig">$60</div>158 <div class="sale">$23</div>159 <div class="pill">62% OFF</div>160 </div>161 </div>162 </div>163 164 <!-- Card 2 -->165 <div class="card">166 <div class="img">[IMG: Spartan race participants]</div>167 <div class="content">168 <div class="title">Up to 57% Off Registration to Spartan Race</div>169 <div class="subtitle">Spartan Race</div>170 <div class="rating">171 <div class="score">4.8</div>172 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>173 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>174 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>175 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>176 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>177 <div class="count">253 Ratings</div>178 </div>179 <div class="price-row">180 <div class="orig">$159</div>181 <div class="sale">$69</div>182 <div class="pill">57% OFF</div>183 </div>184 </div>185 </div>186 187 <!-- Card 3 -->188 <div class="card">189 <div class="img">[IMG: Microsoft Office box]</div>190 <div class="content">191 <div class="title">Microsoft Office 2021 Lifetime License</div>192 <div class="subtitle">Microsoft Office 2021</div>193 <div class="rating">194 <div class="score">4.6</div>195 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>196 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>197 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>198 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>199 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FFE082"/></svg>200 <div class="count">91 Ratings</div>201 </div>202 <div class="price-row">203 <div class="orig">$249.99</div>204 <div class="sale">$39.99</div>205 <div class="pill">84% OFF</div>206 </div>207 </div>208 </div>209 210 <!-- Card 4 -->211 <div class="card">212 <div class="img">[IMG: Roller coaster group]</div>213 <div class="content">214 <div class="title">30% Off CJ Barrymore's - Includes Attractions</div>215 <div class="subtitle">CJ Barrymore's</div>216 <div class="rating">217 <div class="score">4.8</div>218 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>219 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>220 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>221 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>222 <svg class="star" viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5 4.7 1.3 7-6.4-3.6-6.4 3.6 1.3-7-5-4.7 7-1L12 2z" fill="#FBC02D"/></svg>223 </div>224 <div class="price-row">225 <div class="orig">$50</div>226 <div class="sale">$35</div>227 <div class="pill">30% OFF</div>228 </div>229 </div>230 </div>231 232 </div>233 234 <!-- Keyboard -->235 <div id="keyboard">236 <!-- Number row -->237 <div class="key-row">238 <div class="key">1</div><div class="key">2</div><div class="key">3</div><div class="key">4</div><div class="key">5</div><div class="key">6</div><div class="key">7</div><div class="key">8</div><div class="key">9</div><div class="key">0</div>239 </div>240 <!-- Row 1 -->241 <div class="key-row">242 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>243 </div>244 <!-- Row 2 -->245 <div class="key-row">246 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>247 </div>248 <!-- Row 3 -->249 <div class="key-row">250 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>251 <div class="key small">⌫</div>252 </div>253 <!-- Bottom row -->254 <div class="key-row">255 <div class="key wide small">?123</div>256 <div class="key small">,</div>257 <div class="key space"></div>258 <div class="key small">.</div>259 <div class="key round">260 <svg class="svg" viewBox="0 0 24 24">261 <circle cx="10" cy="10" r="6" fill="none" stroke="#333" stroke-width="2"/>262 <path d="M14 14l6 6" stroke="#333" stroke-width="2" stroke-linecap="round"/>263 </svg>264 </div>265 </div>266 </div>267 268 <!-- Home indicator -->269 <div class="home-indicator"></div>270 271</div>272</body>273</html>