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.0">6<title>Product Viewer - Sofa</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #111111;15 font-family: Arial, Helvetica, sans-serif;16 color: #FFFFFF;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 100%;25 height: 90px;26 background: #000000;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 36px;31 box-sizing: border-box;32 font-size: 34px;33 color: #e0e0e0;34 letter-spacing: 0.5px;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 22px;40 color: #dcdcdc;41 }42 .status-dot {43 width: 10px; height: 10px; background: #bdbdbd; border-radius: 50%;44 display: inline-block;45 }46 .status-icon svg { width: 42px; height: 42px; fill: #e0e0e0; opacity: 0.9; }47 48 /* App bar */49 .app-bar {50 position: absolute;51 top: 90px;52 left: 0;53 width: 100%;54 height: 150px;55 background: #242424;56 display: flex;57 align-items: center;58 justify-content: space-between;59 padding: 0 28px;60 box-sizing: border-box;61 }62 .left-icons { display: flex; align-items: center; gap: 28px; }63 .icon-btn {64 width: 90px; height: 90px;65 display: flex; align-items: center; justify-content: center;66 background: transparent; border: none; padding: 0; margin: 0; cursor: default;67 }68 .icon-btn svg { width: 60px; height: 60px; fill: #bdbdbd; }69 .cart-wrap { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }70 .cart-wrap svg { width: 60px; height: 60px; fill: #cfcfcf; }71 .badge {72 position: absolute; top: -4px; right: -6px;73 background: #FFB000; color: #111;74 font-weight: 700; font-size: 28px;75 padding: 6px 12px; border-radius: 20px;76 border: 2px solid #2b2b2b;77 }78 79 /* Image area */80 .image-area {81 position: absolute;82 top: 240px;83 left: 0;84 width: 100%;85 height: 980px;86 background: #3a3a3a; /* side gutters */87 display: flex;88 align-items: center;89 justify-content: center;90 }91 .image-placeholder {92 width: 960px;93 height: 940px;94 background: #E0E0E0;95 border: 1px solid #BDBDBD;96 color: #757575;97 display: flex; align-items: center; justify-content: center;98 text-align: center;99 font-size: 40px;100 line-height: 1.3;101 }102 .page-indicator {103 position: absolute;104 right: 36px;105 top: 34px;106 background: rgba(0,0,0,0.6);107 color: #ffffff;108 font-size: 38px;109 padding: 12px 22px;110 border-radius: 16px;111 }112 113 /* Floating action button (center-bottom on image) */114 .fab {115 position: absolute;116 bottom: 34px;117 left: 50%;118 transform: translateX(-50%);119 width: 142px; height: 142px;120 border-radius: 50%;121 background: #FFB000;122 border: 12px solid #FFFFFF;123 box-shadow: 0 8px 20px rgba(0,0,0,0.35);124 display: flex; align-items: center; justify-content: center;125 }126 .fab svg { width: 64px; height: 64px; fill: #ffffff; }127 128 /* Title section */129 .title-section {130 position: absolute;131 top: 1220px;132 left: 0;133 width: 100%;134 background: #161616;135 padding: 44px 36px 36px;136 box-sizing: border-box;137 }138 .title {139 color: #d6d6d6;140 font-size: 54px;141 line-height: 1.25;142 letter-spacing: 0.2px;143 }144 145 /* Spacer for rest of page */146 .bottom-fill {147 position: absolute;148 top: 1530px;149 left: 0;150 right: 0;151 bottom: 0;152 background: #111111;153 }154 155 /* Gesture bar */156 .gesture {157 position: absolute;158 left: 50%;159 bottom: 28px;160 transform: translateX(-50%);161 width: 220px;162 height: 12px;163 background: #EDEDED;164 border-radius: 12px;165 opacity: 0.9;166 }167</style>168</head>169<body>170<div id="render-target">171 <!-- Status bar -->172 <div class="status-bar">173 <div>9:24</div>174 <div class="status-icons">175 <div class="status-icon">176 <!-- small clock icon -->177 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5h-2v6l5 3 1-1-4-2V7z"/></svg>178 </div>179 <div class="status-icon">180 <!-- info dot -->181 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>182 </div>183 <span class="status-dot"></span>184 <div class="status-icon">185 <!-- signal/wifi -->186 <svg viewBox="0 0 24 24"><path d="M12 20l-2-2a3 3 0 1 1 4 0l-2 2zm8-8a10 10 0 0 0-16 0l-2-2a13 13 0 0 1 20 0l-2 2zm-4 4a6 6 0 0 0-8 0l-2-2a9 9 0 0 1 12 0l-2 2z"/></svg>187 </div>188 <div class="status-icon">189 <!-- battery -->190 <svg viewBox="0 0 24 24"><path d="M18 7h2v10h-2V7zM4 7h12v10H4V7z"/></svg>191 </div>192 </div>193 </div>194 195 <!-- App bar -->196 <div class="app-bar">197 <div class="left-icons">198 <button class="icon-btn" aria-label="Back">199 <svg viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/></svg>200 </button>201 <button class="icon-btn" aria-label="Menu">202 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>203 </button>204 </div>205 <div class="right-icons">206 <div class="cart-wrap" aria-label="Cart">207 <svg viewBox="0 0 24 24"><path d="M6 8h12v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8zm3 0a3 3 0 0 1 6 0h-2a1 1 0 0 0-2 0H9z"/></svg>208 <span class="badge">0</span>209 </div>210 </div>211 </div>212 213 <!-- Product image area -->214 <div class="image-area">215 <div class="image-placeholder">[IMG: Beige Sofa in Living Room]</div>216 <div class="page-indicator">1 of 1</div>217 <div class="fab" title="Add to cart">218 <svg viewBox="0 0 24 24"><path d="M6 8h12v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8zm3 0a3 3 0 0 1 6 0h-2a1 1 0 0 0-2 0H9z"/></svg>219 </div>220 </div>221 222 <!-- Title -->223 <div class="title-section">224 <div class="title">225 Lepfun Large Sofa, Three-seat Sofa Classic Tufted Chesterfield Settee Sofa Modern 3 Seater226 </div>227 </div>228 229 <!-- Bottom space and gesture bar -->230 <div class="bottom-fill"></div>231 <div class="gesture"></div>232</div>233</body>234</html>