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>Search - No Results</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-radius: 0;12 }13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 150px;16 background: #D6D6D6; display: flex; align-items: center; justify-content: space-between;17 padding: 0 36px; box-sizing: border-box; font-weight: 600; color: #333;18 }19 .status-left { display: flex; align-items: center; gap: 24px; font-size: 40px; }20 .status-right { display: flex; align-items: center; gap: 24px; font-size: 34px; }21 .battery {22 width: 70px; height: 36px; position: relative; border: 4px solid #333; border-radius: 6px;23 }24 .battery::after {25 content: ""; position: absolute; right: -12px; top: 8px; width: 10px; height: 20px; background: #333; border-radius: 2px;26 }27 .battery .level { position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; background: #777; border-radius: 4px; }28 /* Header */29 .header {30 position: absolute; top: 150px; left: 0; width: 100%; height: 160px; background: #fff;31 display: flex; align-items: center; padding: 0 36px; box-sizing: border-box; border-bottom: 1px solid #E5E5E5;32 gap: 28px;33 }34 .header-title {35 flex: 1; font-size: 52px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;36 }37 .icon-btn { width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; }38 .icon-btn svg { width: 56px; height: 56px; stroke: #111; fill: none; stroke-width: 5; }39 .hamburger svg { width: 60px; height: 60px; }40 /* Notice */41 .notice {42 position: absolute; top: 310px; left: 0; width: 100%; padding: 40px 60px 30px; box-sizing: border-box; text-align: center; color: #444;43 border-bottom: 1px solid #E5E5E5;44 }45 .notice p { margin: 16px 0; font-size: 36px; line-height: 1.5; }46 .notice .query { font-weight: 700; color: #000; }47 /* Recommendations */48 .section-title {49 position: absolute; top: 680px; left: 0; width: 100%; padding: 0 36px; box-sizing: border-box;50 font-size: 48px; font-weight: 800; color: #111;51 }52 .products {53 position: absolute; top: 760px; left: 0; width: 100%; padding: 0 36px; box-sizing: border-box;54 display: flex; gap: 28px;55 }56 .product-card {57 width: 328px;58 }59 .img-ph {60 width: 100%; height: 480px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; font-size: 32px;61 }62 .p-title { margin-top: 28px; font-size: 40px; font-weight: 600; color: #222; }63 .p-sub { margin-top: 6px; font-size: 28px; color: #666; letter-spacing: 0.5px; }64 .p-price { margin-top: 12px; font-size: 40px; font-weight: 700; }65 /* Info tiles area */66 .info-area {67 position: absolute; top: 1440px; left: 0; width: 100%; background: #f4f4f4; padding: 48px 36px; box-sizing: border-box;68 }69 .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }70 .tile {71 background: #fff; height: 360px; border: 1px solid #E5E5E5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;72 }73 .tile svg { width: 120px; height: 120px; stroke: #111; fill: none; stroke-width: 6; }74 .tile-label { font-size: 36px; font-weight: 700; color: #222; letter-spacing: 1px; }75 /* Bottom gesture bar */76 .bottom-bar {77 position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: #000;78 }79 .gesture {80 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 320px; height: 12px; background: #dcdcdc; border-radius: 6px;81 }82</style>83</head>84<body>85<div id="render-target">86 <!-- Status Bar -->87 <div class="status-bar">88 <div class="status-left">89 <div>2:46</div>90 <div>✓</div>91 <div>M</div>92 <div>M</div>93 <div>!</div>94 </div>95 <div class="status-right">96 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#333" fill="none" stroke-width="3"/></svg>97 <div class="battery"><div class="level"></div></div>98 <div style="font-weight:700;">100%</div>99 </div>100 </div>101 102 <!-- Header -->103 <div class="header">104 <div class="icon-btn hamburger">105 <svg viewBox="0 0 24 24"><path d="M3 5h18M3 12h18M3 19h18"/></svg>106 </div>107 <div class="header-title">42-size formal …</div>108 <div class="icon-btn">109 <svg viewBox="0 0 24 24">110 <circle cx="10" cy="10" r="7"></circle>111 <path d="M15 15l6 6"></path>112 </svg>113 </div>114 <div class="icon-btn">115 <svg viewBox="0 0 24 24">116 <circle cx="12" cy="8" r="4"></circle>117 <path d="M4 22c0-5 4-8 8-8s8 3 8 8"></path>118 </svg>119 </div>120 <div class="icon-btn">121 <svg viewBox="0 0 24 24">122 <path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"></path>123 </svg>124 </div>125 <div class="icon-btn">126 <svg viewBox="0 0 24 24">127 <path d="M6 7h12v14H6z"></path>128 <path d="M8 7c0-2 2-3 4-3s4 1 4 3"></path>129 </svg>130 </div>131 </div>132 133 <!-- Notice -->134 <div class="notice">135 <p>Sorry, we didn't find any results matching your search for</p>136 <p class="query">"42-size formal shoes".</p>137 <p>Please check the spelling or try again with a less specific term.</p>138 </div>139 140 <!-- Selected for you -->141 <div class="section-title">Selected for you</div>142 <div class="products">143 <div class="product-card">144 <div class="img-ph">[IMG: Black loafer shoe]</div>145 <div class="p-title">Loafers</div>146 <div class="p-price">$32.99</div>147 </div>148 <div class="product-card">149 <div class="img-ph">[IMG: Black loafer with ornament]</div>150 <div class="p-title">Loafers</div>151 <div class="p-price">$39.99</div>152 </div>153 <div class="product-card">154 <div class="img-ph">[IMG: Glossy leather loafer]</div>155 <div class="p-sub">H&M PREMIUM</div>156 <div class="p-title">Leather Loafers</div>157 <div class="p-price">$99.00</div>158 </div>159 </div>160 161 <!-- Info tiles -->162 <div class="info-area">163 <div class="tile-grid">164 <div class="tile">165 <svg viewBox="0 0 24 24">166 <path d="M12 2l9 5v10l-9 5-9-5V7z"></path>167 <path d="M12 2v10"></path>168 <path d="M3 7l9 5 9-5"></path>169 </svg>170 <div class="tile-label">DELIVERY</div>171 </div>172 <div class="tile">173 <svg viewBox="0 0 24 24">174 <rect x="3" y="5" width="18" height="14" rx="2"></rect>175 <rect x="5" y="8" width="5" height="4"></rect>176 <path d="M12 15h6"></path>177 </svg>178 <div class="tile-label">PAYMENTS</div>179 </div>180 <div class="tile">181 <svg viewBox="0 0 24 24">182 <path d="M4 6h16v12H4z"></path>183 <path d="M8 10h8"></path>184 <path d="M8 14h8"></path>185 </svg>186 <div class="tile-label">RETURNS</div>187 </div>188 <div class="tile">189 <svg viewBox="0 0 24 24">190 <path d="M12 2l6 4v12l-6 4-6-4V6z"></path>191 <path d="M8 10l4 2 4-2"></path>192 </svg>193 <div class="tile-label">SUPPORT</div>194 </div>195 </div>196 </div>197 198 <!-- Bottom gesture bar -->199 <div class="bottom-bar">200 <div class="gesture"></div>201 </div>202</div>203</body>204</html>