GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Feedback Screen</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#0d0d0d; color:#fff;12 }13 .status-bar {14 height:96px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;15 color:#fff; font-size:40px;16 }17 .status-icons { display:flex; align-items:center; gap:28px; opacity:0.9; }18 .header {19 height:140px; display:flex; align-items:center; gap:28px; padding:0 32px; color:#fff;20 font-weight:bold; font-size:62px;21 }22 .seller-card {23 margin:0 0 24px 0; background:#1c1c1c; padding:36px 32px; display:flex; align-items:center; justify-content:space-between;24 }25 .seller-left { display:flex; align-items:center; gap:28px; }26 .logo-placeholder {27 width:150px; height:70px; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;28 color:#757575; font-size:28px; border-radius:8px;29 }30 .seller-info .name { font-size:54px; font-weight:700; margin-bottom:8px; }31 .seller-info .meta { font-size:36px; color:#bdbdbd; }32 .heart-wrap { width:96px; height:96px; border-radius:48px; background:#111; display:flex; align-items:center; justify-content:center; }33 .tabs-row {34 padding:24px 32px 8px 32px; display:flex; align-items:flex-end; justify-content:space-between; color:#fff;35 }36 .tabs { display:flex; gap:40px; font-size:44px; }37 .tab { color:#cfcfcf; }38 .tab.active { color:#fff; position:relative; }39 .tab.active::after {40 content:""; position:absolute; left:0; bottom:-16px; width:360px; height:6px; background:#fff; border-radius:3px;41 }42 .actions { display:flex; gap:40px; align-items:center; color:#68a3ff; font-size:42px; }43 .divider { height:2px; background:#2a2a2a; margin:16px 0 8px 0; }44 .list { padding:0 32px 0 32px; }45 .item { padding:38px 0; border-bottom:1px solid #2a2a2a; }46 .item-header { display:flex; align-items:center; gap:22px; color:#bdbdbd; font-size:36px; margin-bottom:18px; }47 .item-body { font-size:44px; line-height:1.45; color:#f2f2f2; }48 .green-plus {49 width:44px; height:44px; border-radius:22px; background:#1db954; display:flex; align-items:center; justify-content:center;50 }51 .results-count { text-align:center; color:#cfcfcf; font-size:38px; padding:26px 0; }52 .bottom-nav {53 position:absolute; left:0; bottom:0; width:100%; height:200px; background:#161616; border-top:1px solid #2a2a2a;54 display:flex; align-items:center; justify-content:space-around; padding-bottom:24px;55 }56 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#cfcfcf; font-size:36px; }57 .nav-item.active .icon-bubble { background:#1f2fef; }58 .icon-bubble { width:120px; height:90px; border-radius:28px; background:#222; display:flex; align-items:center; justify-content:center; }59 .badge { position:absolute; right:-8px; top:-8px; width:34px; height:34px; border-radius:17px; background:#ff4d4d; color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; }60 .home-indicator { position:absolute; bottom:210px; left:50%; transform:translateX(-50%); width:280px; height:10px; background:#e6e6e6; border-radius:6px; opacity:0.9; }61 /* Utility */62 svg { display:block; }63</style>64</head>65<body>66<div id="render-target">67 68 <!-- Status bar -->69 <div class="status-bar">70 <div>1:33</div>71 <div class="status-icons">72 <!-- Search icon -->73 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">74 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2"></circle>75 <line x1="15" y1="15" x2="21" y2="21" stroke="#fff" stroke-width="2"></line>76 </svg>77 <!-- Notification dot -->78 <svg width="34" height="34" viewBox="0 0 24 24">79 <circle cx="12" cy="12" r="3" fill="#fff"></circle>80 </svg>81 <!-- Do Not Disturb -->82 <svg width="34" height="34" viewBox="0 0 24 24">83 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"></circle>84 <rect x="7" y="11" width="10" height="2" fill="#fff"></rect>85 </svg>86 <!-- Battery -->87 <svg width="60" height="30" viewBox="0 0 30 16">88 <rect x="1" y="3" width="24" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>89 <rect x="27" y="6" width="2" height="4" fill="#fff"></rect>90 <rect x="3" y="5" width="20" height="6" fill="#fff"></rect>91 </svg>92 <span style="font-size:34px;">100%</span>93 </div>94 </div>95 96 <!-- Header -->97 <div class="header">98 <svg width="48" height="48" viewBox="0 0 24 24">99 <path d="M15 19l-7-7 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>100 </svg>101 <div>Feedback</div>102 </div>103 104 <!-- Seller card -->105 <div class="seller-card">106 <div class="seller-left">107 <div class="logo-placeholder">[IMG: Seller logo]</div>108 <div class="seller-info">109 <div class="name">masvisioninc</div>110 <div class="meta">99% positive feedback (1245)</div>111 </div>112 </div>113 <div class="heart-wrap">114 <svg width="52" height="52" viewBox="0 0 24 24">115 <path d="M12 21s-7-4.7-9-8.3C1.4 10 2.5 7.5 4.9 7.1c1.7-.3 3.3.6 4.1 2 0 0 .7-1.8 3-1.8s3 1.8 3 1.8c.8-1.4 2.4-2.3 4.1-2 2.4.4 3.5 2.9 1.9 5.6C19 16.3 12 21 12 21z" fill="none" stroke="#fff" stroke-width="2" stroke-linejoin="round"></path>116 </svg>117 </div>118 </div>119 120 <!-- Tabs and actions -->121 <div class="tabs-row">122 <div class="tabs">123 <div class="tab active">This item (404)</div>124 <div class="tab">All items (1,273)</div>125 </div>126 <div class="actions">127 <div style="display:flex; align-items:center; gap:10px;">128 <span>Sort</span>129 <svg width="32" height="32" viewBox="0 0 24 24">130 <path d="M7 6l-3 3h6L7 6zM17 18l3-3h-6l3 3z" fill="#6ea8ff"></path>131 </svg>132 </div>133 <div style="display:flex; align-items:center; gap:10px;">134 <span>Filter</span>135 <svg width="34" height="34" viewBox="0 0 24 24">136 <path d="M3 5h18l-6 7v5l-6-3v-2L3 5z" fill="#6ea8ff"></path>137 </svg>138 </div>139 </div>140 </div>141 <div class="divider"></div>142 143 <!-- Feedback list -->144 <div class="list">145 146 <div class="item">147 <div class="item-header">148 <div class="green-plus">149 <svg width="24" height="24" viewBox="0 0 24 24">150 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"></path>151 </svg>152 </div>153 <div>b***8 (707) • Past 6 months</div>154 </div>155 <div class="item-body">156 Perfect precision tool set. Already used to upgrade RAM in laptop. Has a bit for every precision job you will need from working on eyeglasses to computer repair ext. seller sent set quickly and communicated about order.157 </div>158 </div>159 160 <div class="item">161 <div class="item-header">162 <div class="green-plus">163 <svg width="24" height="24" viewBox="0 0 24 24">164 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"></path>165 </svg>166 </div>167 <div>5***e (21) • Past 6 months</div>168 </div>169 <div class="item-body">170 It’s a right handy tool kit with magnetic tips for the little tiny screws my eyes are getting lazy on me and fingers also. The tools help a lot with not loosing screws & nuts & stuff. Thanks Gadev45171 </div>172 </div>173 174 <div class="item">175 <div class="item-header">176 <div class="green-plus">177 <svg width="24" height="24" viewBox="0 0 24 24">178 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"></path>179 </svg>180 </div>181 <div>9***9 (414) • Past 6 months</div>182 </div>183 <div class="item-body">184 GREAT ITEM WIREHARD 62 in 1 Precision Screwdriver Set - Repair Tool Kit - Magnetic Bit Set QND FAST SHIPPING185 </div>186 </div>187 188 <div class="item" style="border-bottom:none;">189 <div class="item-header">190 <div class="green-plus">191 <svg width="24" height="24" viewBox="0 0 24 24">192 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"></path>193 </svg>194 </div>195 <div>***n (341) • Past month</div>196 </div>197 <div class="item-body">198 Good price fast shipping the only thing I suggest is being more clear in the size maybe set it next to something so we can tell the size of bits n stuff my fault for not asking 🤔199 </div>200 </div>201 202 </div>203 204 <div class="results-count">404 results</div>205 206 <!-- Home indicator (gesture bar) -->207 <div class="home-indicator"></div>208 209 <!-- Bottom navigation -->210 <div class="bottom-nav">211 <div class="nav-item active">212 <div class="icon-bubble">213 <svg width="40" height="40" viewBox="0 0 24 24">214 <path d="M3 11l9-7 9 7v9H3v-9z" fill="#fff"></path>215 <rect x="9" y="14" width="6" height="6" fill="#1f2fef"></rect>216 </svg>217 </div>218 <div>Home</div>219 </div>220 221 <div class="nav-item">222 <div class="icon-bubble">223 <svg width="40" height="40" viewBox="0 0 24 24">224 <circle cx="12" cy="8" r="4" fill="#cfcfcf"></circle>225 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="#cfcfcf" stroke-width="2"></path>226 </svg>227 </div>228 <div>My eBay</div>229 </div>230 231 <div class="nav-item">232 <div class="icon-bubble">233 <svg width="40" height="40" viewBox="0 0 24 24">234 <circle cx="10" cy="10" r="6" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>235 <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#cfcfcf" stroke-width="2"></line>236 </svg>237 </div>238 <div>Search</div>239 </div>240 241 <div class="nav-item" style="position:relative;">242 <div class="icon-bubble" style="position:relative;">243 <svg width="40" height="40" viewBox="0 0 24 24">244 <path d="M6 9a6 6 0 0112 0v6l-3 2H9l-3-2V9z" fill="none" stroke="#cfcfcf" stroke-width="2"></path>245 <circle cx="12" cy="18" r="1" fill="#cfcfcf"></circle>246 </svg>247 <div class="badge">1</div>248 </div>249 <div>Inbox</div>250 </div>251 252 <div class="nav-item">253 <div class="icon-bubble">254 <svg width="40" height="40" viewBox="0 0 24 24">255 <path d="M5 5l14 7-7 7-7-14z" fill="none" stroke="#cfcfcf" stroke-width="2"></path>256 <circle cx="15" cy="9" r="2" fill="#cfcfcf"></circle>257 </svg>258 </div>259 <div>Selling</div>260 </div>261 </div>262 263</div>264</body>265</html>