GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Home Décor UI</title>6<meta name="viewport" content="width=device-width, initial-scale=1.0">7<style>8 body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;color:#111;}9 #render-target{10 width:1080px;height:2400px;position:relative;overflow:hidden;11 background:#fff;12 }13 /* Status bar */14 .status-bar{15 position:absolute;top:0;left:0;width:100%;height:90px;color:#fff;z-index:5;16 display:flex;align-items:center;justify-content:space-between;padding:0 34px;17 box-sizing:border-box;18 }19 .status-time{font-size:36px;font-weight:600;letter-spacing:1px;}20 .status-icons{display:flex;gap:26px;align-items:center;}21 .status-icons svg{fill:#fff}22 /* Hero */23 .hero{24 position:relative;width:100%;height:520px;background:#aebba9;25 }26 .hero .hero-img{27 position:absolute;left:60px;right:60px;bottom:40px;top:110px;28 background:#E0E0E0;border:1px solid #BDBDBD;border-radius:8px;29 display:flex;align-items:center;justify-content:center;color:#757575;30 font-size:34px;text-align:center;padding:20px;box-sizing:border-box;31 }32 .back-btn{33 position:absolute;left:48px;top:230px;width:130px;height:130px;background:#fff;border-radius:50%;34 display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);35 z-index:6;36 }37 .back-btn svg{width:52px;height:52px;stroke:#111;stroke-width:8;fill:none;}38 /* Title */39 .title{40 padding:48px 56px 12px;41 font-size:72px;line-height:1.05;font-weight:800;42 }43 /* Category cards */44 .cards{45 padding:10px 48px 0;display:flex;gap:36px;box-sizing:border-box;46 }47 .card{48 width:468px;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #eee;49 }50 .card-img{51 height:350px;background:#E0E0E0;border-bottom:1px solid #BDBDBD;52 display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;53 }54 .card-title{55 padding:34px 28px;font-size:38px;font-weight:600;color:#333;56 }57 /* Filter chips */58 .chips{padding:34px 48px 10px;display:flex;gap:28px;flex-wrap:nowrap;}59 .chip{60 padding:26px 46px;border-radius:60px;background:#EFEFEF;color:#222;font-size:36px;font-weight:700;61 }62 .chip.selected{63 background:#fff;border:6px solid #111;64 }65 .progress-wrap{position:relative;padding:10px 48px 36px;}66 .progress-wrap .track{67 width:100%;height:6px;background:#e8e8e8;border-radius:4px;position:relative;68 }69 .progress-wrap .active{70 position:absolute;left:48px;top:-6px;width:160px;height:6px;background:#111;border-radius:4px;71 }72 /* Availability panel */73 .availability{74 margin:12px 0 0;padding:42px 48px;background:#f3f3f3;display:flex;align-items:center;justify-content:space-between;75 }76 .availability .left{77 display:flex;align-items:flex-start;gap:22px;78 }79 .icon-duo{display:flex;gap:14px;align-items:center;margin-top:6px;}80 .icon-box{81 width:54px;height:54px;border:3px solid #111;border-radius:6px;display:flex;align-items:center;justify-content:center;82 }83 .truck{width:60px;height:38px;border:3px solid #111;border-radius:6px;position:relative;}84 .truck:before,.truck:after{85 content:"";position:absolute;bottom:-12px;width:16px;height:16px;border:3px solid #111;border-radius:50%;86 background:#fff;87 }88 .truck:before{left:8px;}89 .truck:after{right:8px;}90 .avail-title{font-size:48px;font-weight:800;margin-bottom:10px;}91 .avail-sub{font-size:34px;color:#666;max-width:600px;line-height:1.4;}92 .toggle{93 width:230px;height:120px;border-radius:70px;background:#111;display:flex;align-items:center;justify-content:center;94 }95 .toggle svg{fill:#fff}96 /* Section info */97 .count{padding:40px 48px;font-size:40px;color:#222;}98 /* Bottom navigation */99 .bottom-nav{100 position:absolute;bottom:46px;left:0;right:0;height:120px;background:#fff;border-top:1px solid #e5e5e5;101 display:flex;justify-content:space-around;align-items:center;padding:0 24px;102 }103 .nav-item{width:120px;height:100%;display:flex;align-items:center;justify-content:center;position:relative;}104 .nav-item svg{width:56px;height:56px;fill:#BDBDBD;}105 .nav-item.active svg{fill:#111;}106 .badge{107 position:absolute;right:18px;top:20px;background:#1976d2;color:#fff;border-radius:20px;font-size:26px;min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0 8px;border:2px solid #fff;108 }109 /* Home indicator */110 .home-indicator{111 position:absolute;bottom:8px;left:50%;transform:translateX(-50%);112 width:320px;height:10px;background:#000;border-radius:8px;opacity:0.75;113 }114</style>115</head>116<body>117<div id="render-target">118 <div class="hero">119 <div class="status-bar">120 <div class="status-time">11:10</div>121 <div class="status-icons">122 <!-- WiFi -->123 <svg viewBox="0 0 24 24" width="38" height="38">124 <path d="M12 20a2 2 0 1 0 0-0.01z"></path>125 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>126 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>127 <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>128 </svg>129 <!-- Ring/notification -->130 <svg viewBox="0 0 24 24" width="38" height="38">131 <path d="M12 2a7 7 0 0 1 7 7v5l2 3H3l2-3V9a7 7 0 0 1 7-7z" fill="none" stroke="#fff" stroke-width="2"/>132 <circle cx="12" cy="21" r="2"></circle>133 </svg>134 <!-- Battery -->135 <svg viewBox="0 0 26 14" width="50" height="34">136 <rect x="1" y="2" width="20" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>137 <rect x="3" y="4" width="16" height="6" fill="#fff"/>138 <rect x="22" y="5" width="3" height="4" fill="#fff"/>139 </svg>140 </div>141 </div>142 <div class="back-btn">143 <svg viewBox="0 0 24 24">144 <path d="M15 5l-7 7 7 7" stroke-linecap="round" stroke-linejoin="round"></path>145 </svg>146 </div>147 <div class="hero-img">[IMG: Minimal art frame and decor on sage green background]</div>148 </div>149 150 <div class="title">Home décor</div>151 152 <div class="cards">153 <div class="card">154 <div class="card-img">[IMG: Wall décor]</div>155 <div class="card-title">Wall décor</div>156 </div>157 <div class="card">158 <div class="card-img">[IMG: Plants & flowers]</div>159 <div class="card-title">Plants & flowers</div>160 </div>161 </div>162 163 <div class="chips">164 <div class="chip selected">Best match</div>165 <div class="chip">Color</div>166 <div class="chip">Category</div>167 <div class="chip">Si