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 Description - Washing Machine</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; color: #222;12 }13 .statusbar {14 height: 90px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;15 color: #555; font-size: 34px; background: #f6f6f6;16 }17 .status-icons { display: flex; align-items: center; gap: 24px; }18 .appbar {19 height: 120px; display: flex; align-items: center; padding: 0 28px; gap: 20px; background: #ffffff; border-bottom: 1px solid #eee;20 }21 .icon-btn { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; border-radius: 32px; }22 .search-pill {23 flex: 1; height: 80px; border-radius: 40px; background: #f1f1f1; display: flex; align-items: center; padding: 0 28px; gap: 16px; color: #777; font-size: 34px;24 }25 .appbar-right { display: flex; align-items: center; gap: 26px; margin-left: 6px; }26 .coin-dot {27 width: 38px; height: 38px; border-radius: 50%; background: #ffcc33; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #7a4a00; border: 2px solid #fff; box-shadow: 0 0 0 2px #ffe58a inset;28 }29 .notif-dot { width: 12px; height: 12px; background: #ff2d2d; border-radius: 50%; }30 .tabs {31 height: 110px; display: flex; align-items: center; padding: 0 28px; gap: 40px; font-size: 34px; color: #9b9b9b; background: #fff; box-shadow: inset 0 -1px 0 #eee;32 }33 .tab { padding: 12px 6px; }34 .tab.active { color: #ff9c00; font-weight: 600; position: relative; }35 .tab-pin {36 width: 26px; height: 26px; margin-right: 8px; vertical-align: middle;37 }38 .content {39 padding: 24px 36px 240px 36px;40 }41 .section-title { font-size: 44px; font-weight: 700; margin: 24px 0 8px; }42 .sub-title { font-size: 54px; font-weight: 800; margin: 20px 0 20px; }43 .bullet {44 font-size: 34px; color: #444; line-height: 1.6; margin: 0 12px; padding-left: 18px;45 }46 .img-placeholder {47 width: 1008px; height: 980px; background: #E0E0E0; border: 1px solid #BDBDBD;48 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px; margin: 44px auto 0;49 }50 .float-up {51 position: absolute; right: 30px; bottom: 540px; width: 96px; height: 96px; border-radius: 48px; background: #ffffff; box-shadow: 0 6px 16px rgba(0,0,0,0.15);52 display: flex; align-items: center; justify-content: center; border: 1px solid #eee;53 }54 .bottom-bar {55 position: absolute; left: 0; right: 0; bottom: 64px; height: 200px; background: #fff; box-shadow: 0 -4px 12px rgba(0,0,0,0.06);56 padding: 22px 26px; display: flex; align-items: center; gap: 24px; border-top: 1px solid #eee;57 }58 .mini-action {59 width: 160px; height: 140px; border-radius: 24px; border: 1px solid #eee; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #333; font-size: 28px; background: #fafafa;60 }61 .cta {62 flex: 1; height: 140px; border-radius: 70px; font-size: 40px; font-weight: 700; display: flex; align-items: center; justify-content: center; position: relative;63 }64 .cta.cart {65 background: #fff8d6; border: 3px solid #ffd966; color: #2b2b2b;66 }67 .cta.buy {68 background: #ffcc00; border: 3px solid #ffb700; color: #1a1a1a;69 }70 .cta .coin-tag {71 position: absolute; right: 40px; top: -10px;72 }73 .gesture {74 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 240px; height: 12px; border-radius: 6px; background: #e6e6e6;75 }76 /* Utility */77 .row { display: flex; align-items: center; }78 .gap-8 { gap: 8px; }79 .gap-12 { gap: 12px; }80</style>81</head>82<body>83<div id="render-target">84 85 <!-- Status bar -->86 <div class="statusbar">87 <div>9:48</div>88 <div class="status-icons">89 <!-- Simple cellular icon -->90 <svg width="34" height="34" viewBox="0 0 32 32" fill="#777" xmlns="http://www.w3.org/2000/svg">91 <rect x="2" y="22" width="4" height="8" rx="1"></rect>92 <rect x="8" y="18" width="4" height="12" rx="1"></rect>93 <rect x="14" y="14" width="4" height="16" rx="1"></rect>94 <rect x="20" y="10" width="4" height="20" rx="1"></rect>95 </svg>96 <!-- WiFi -->97 <svg width="34" height="34" viewBox="0 0 32 32" fill="none" stroke="#777" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg">98 <path d="M4 12c6-6 18-6 24 0"></path>99 <path d="M8 16c4-4 12-4 16 0"></path>100 <path d="M12 20c2-2 6-2 8 0"></path>101 <circle cx="16" cy="24" r="2" fill="#777"></circle>102 </svg>103 <!-- Battery -->104 <svg width="44" height="34" viewBox="0 0 40 24" xmlns="http://www.w3.org/2000/svg">105 <rect x="2" y="4" width="32" height="16" rx="3" fill="none" stroke="#777" stroke-width="2"></rect>106 <rect x="4" y="6" width="24" height="12" rx="2" fill="#777"></rect>107 <rect x="36" y="9" width="2" height="6" rx="1" fill="#777"></rect>108 </svg>109 </div>110 </div>111 112 <!-- App bar with back + search + actions -->113 <div class="appbar">114 <div class="icon-btn">115 <svg width="42" height="42" viewBox="0 0 32 32" fill="none" stroke="#333" stroke-width="3.5" xmlns="http://www.w3.org/2000/svg">116 <path d="M20 6 L8 16 L20 26" stroke-linecap="round" stroke-linejoin="round"></path>117 </svg>118 </div>119 <div class="search-pill">120 <svg width="34" height="34" viewBox="0 0 32 32" fill="none" stroke="#888" stroke-width="3" xmlns="http://www.w3.org/2000/svg">121 <circle cx="14" cy="14" r="9"></circle>122 <path d="M22 22 L30 30" stroke-linecap="round"></path>123 </svg>124 <span>washing machine</span>125 </div>126 <div class="appbar-right">127 <div class="coin-dot">$</div>128 <!-- Cart icon -->129 <svg width="42" height="42" viewBox="0 0 32 32" fill="none" stroke="#333" stroke-width="2.8" xmlns="http://www.w3.org/2000/svg">130 <path d="M4 6h4l3 16h14l3-12H10" stroke-linecap="round" stroke-linejoin="round"></path>131 <circle cx="13" cy="26" r="2.5" fill="#333"></circle>132 <circle cx="25" cy="26" r="2.5" fill="#333"></circle>133 </svg>134 <!-- More / menu -->135 <svg width="42" height="42" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">136 <circle cx="8" cy="16" r="3" fill="#333"></circle>137 <circle cx="16" cy="16" r="3" fill="#333"></circle>138 <circle cx="24" cy="16" r="3" fill="#333"></circle>139 </svg>140 <div class="notif-dot"></div>141 </div>142 </div>143 144 <!-- Tabs -->145 <div class="tabs">146 <div class="tab">Overview</div>147 <div class="tab active">148 <span class="row gap-8">149 <svg class="tab-pin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">150 <path d="M12 2c3.3 0 6 2.7 6 6 0 5.2-6 12-6 12S6 13.2 6 8c0-3.3 2.7-6 6-6z" fill="#ff9c00"></path>151 <circle cx="12" cy="8" r="2.5" fill="#fff"></circle>152 </svg>153 Description154 </span>155 </div>156 <div class="tab">Recommend</div>157 </div>158 159 <!-- Content -->160 <div class="content">161 <div class="section-title">Descriptions</div>162 <div class="sub-title">Short Description</div>163 <p class="bullet">• Model: XQB80-6810/20 Voltage: 110V-220V Frequency: 60Hz Washing capacity: 8KG Dehydration capacity: 8KG Rated power: 380W Waterproof grade: IPX4 Net weight: 35kg Gross weight: 39kg</p>164 165 <div class="img-placeholder">[IMG: Washing machine photo showing dimensions (960mm x 595mm x 600mm) on blue background]</div>166 </div>167 168 <!-- Floating up button -->169 <div class="float-up">170 <svg width="40" height="40" viewBox="0 0 32 32" fill="none" stroke="#333" stroke-width="3.5" xmlns="http://www.w3.org/2000/svg">171 <path d="M8 20 L16 12 L24 20" stroke-linecap="round" stroke-linejoin="round"></path>172 </svg>173 </div>174 175 <!-- Bottom action bar -->176 <div class="bottom-bar">177 <div class="mini-action">178 <!-- Store icon -->179 <svg width="44" height="44" viewBox="0 0 32 32" fill="none" stroke="#333" stroke-width="2.5" xmlns="http://www.w3.org/2000/svg">180 <path d="M4 12h24l-3-6H7l-3 6z" fill="none"></path>181 <rect x="6" y="12" width="20" height="14" rx="2" fill="none"></rect>182 <path d="M10 18h12" stroke-linecap="round"></path>183 </svg>184 <div>Store</div>185 </div>186 <div class="mini-action">187 <!-- Chat icon -->188 <svg width="44" height="44" viewBox="0 0 32 32" fill="none" stroke="#333" stroke-width="2.2" xmlns="http://www.w3.org/2000/svg">189 <rect x="4" y="6" width="24" height="18" rx="4" fill="none"></rect>190 <path d="M10 20l-2 6 6-4" stroke-linecap="round" stroke-linejoin="round"></path>191 <circle cx="11" cy="15" r="1.8" fill="#333"></circle>192 <circle cx="16" cy="15" r="1.8" fill="#333"></circle>193 <circle cx="21" cy="15" r="1.8" fill="#333"></circle>194 </svg>195 <div>Chat</div>196 </div>197 <div class="cta cart">198 Add to Cart199 <div class="coin-tag">200 <div class="coin-dot">$</div>201 </div>202 </div>203 <div class="cta buy">Buy Now</div>204 </div>205 206 <!-- Gesture bar -->207 <div class="gesture"></div>208</div>209</body>210</html>