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 Trails UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff;12 }13 /* Top status area */14 .status-bar {15 height:140px; background:#5f9e3a; color:#fff; position:relative; padding:0 36px;16 display:flex; align-items:center; justify-content:space-between;17 }18 .status-icons { display:flex; align-items:center; gap:26px; color:#fff; opacity:0.95; }19 .dot { width:10px; height:10px; background:#fff; border-radius:50%; opacity:0.8; }20 .battery { width:46px; height:24px; border:3px solid #fff; border-radius:5px; position:relative; }21 .battery::after { content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#fff; border-radius:1px; }22 .battery .level { position:absolute; left:3px; top:3px; bottom:3px; right:8px; background:#fff; }23 /* App bar */24 .app-bar {25 height:150px; background:#fff; border-bottom:1px solid #e6e6e6;26 display:flex; align-items:center; padding:0 44px;27 }28 .app-title { font-size:56px; font-weight:700; color:#1e1e1e; flex:1; }29 .icon-btn { width:88px; height:88px; display:flex; align-items:center; justify-content:center; border-radius:44px; }30 /* Content */31 .content {32 position:absolute; top:290px; bottom:260px; left:0; right:0;33 overflow:hidden auto; padding:40px;34 }35 h3.section-title {36 font-size:46px; margin:26px 0 16px; color:#333; font-weight:700;37 }38 .hint { color:#888; font-weight:500; margin-left:8px; }39 .input {40 height:120px; border:2px solid #c8d2c1; background:#e8f1e2; border-radius:28px;41 display:flex; align-items:center; padding:0 28px; font-size:40px; color:#7b8b74;42 box-shadow:0 2px 0 rgba(0,0,0,0.04) inset; position:relative;43 }44 .input .icon { margin-right:18px; }45 .input .right-icon { position:absolute; right:22px; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }46 .subtle { color:#8a8a8a; }47 /* Chips */48 .chip-row { display:flex; flex-wrap:wrap; gap:20px; margin-top:18px; }49 .chip {50 padding:22px 28px; border:2px solid #d3d3d3; border-radius:16px; color:#5a5a5a;51 font-size:36px; background:#fff; font-weight:600;52 }53 .chip.active {54 background:#5f9e3a; color:#fff; border-color:#5f9e3a;55 }56 /* Slider */57 .slider-wrap { margin-top:24px; }58 input[type=range] {59 -webkit-appearance:none; width:100%; height:16px; background:transparent;60 }61 input[type=range]::-webkit-slider-runnable-track {62 height:16px; background:#5f9e3a; border-radius:8px;63 }64 input[type=range]::-webkit-slider-thumb {65 -webkit-appearance:none; width:74px; height:74px; border-radius:50%;66 background:#4aa0d4; border:6px solid #fff; margin-top:-30px; box-shadow:0 6px 10px rgba(0,0,0,0.15);67 }68 .ticks {69 display:flex; justify-content:space-between; padding:10px 6px 0; color:#444; font-size:34px;70 }71 /* Bottom navigation */72 .bottom-nav {73 position:absolute; left:0; right:0; bottom:120px; height:160px;74 background:#5f9e3a; display:flex; align-items:center; justify-content:space-around;75 color:#fff;76 }77 .bottom-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#fff; }78 .bottom-item span { font-size:28px; opacity:0.95; }79 .os-bar {80 position:absolute; bottom:0; left:0; right:0; height:120px; background:#000;81 display:flex; align-items:center; justify-content:center;82 }83 .home-pill { width:240px; height:14px; border-radius:10px; background:#fff; opacity:0.9; }84 /* Utility */85 .mt-10 { margin-top:10px; }86 .mt-20 { margin-top:20px; }87 .mt-30 { margin-top:30px; }88 .spacer-8 { height:8px; }89</style>90</head>91<body>92<div id="render-target">93 <!-- Status bar (approximation) -->94 <div class="status-bar">95 <div style="display:flex; align-items:center; gap:18px;">96 <div style="width:18px; height:18px; background:#fff; border-radius:4px;"></div>97 <div style="width:36px; height:36px; border:3px solid #fff; border-radius:8px;"></div>98 <div class="dot"></div>99 </div>100 <div class="status-icons">101 <svg width="40" height="30" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 20h20M4 20V8a8 8 0 0 1 16 0v12"/></svg>102 <div class="battery"><div class="level"></div></div>103 </div>104 </div>105 106 <!-- App bar -->107 <div class="app-bar">108 <div class="app-title">Search Trails</div>109 <div class="icon-btn" aria-label="Search">110 <svg width="58" height="58" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">111 <circle cx="11" cy="11" r="7"></circle>112 <path d="M16.5 16.5L22 22"></path>113 </svg>114 </div>115 </div>116 117 <!-- Content -->118 <div class="content">119 <h3 class="section-title">Location <span class="hint">City, State, Zip</span></h3>120 <div class="input">121 <span class="icon">122 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#7b8b74" stroke-width="2">123 <circle cx="10" cy="10" r="6"></circle>124 <path d="M14.5 14.5L20 20"></path>125 </svg>126 </span>127 <span class="subtle">Location</span>128 <div class="right-icon">129 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#2d3b2a" stroke-width="2">130 <circle cx="12" cy="12" r="3"></circle>131 <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M17.7 6.3l2.1-2.1M4.2 19.8l2.1-2.1"></path>132 </svg>133 </div>134 </div>135 136 <h3 class="section-title">Trail Name, Keyword</h3>137 <div class="input">138 <span class="subtle">Search</span>139 </div>140 141 <h3 class="section-title">Sort By</h3>142 <div class="chip-row">143 <div class="chip active">Name</div>144 <div class="chip">Distance</div>145 <div class="chip">Most Popular</div>146 <div class="chip">Length</div>147 </div>148 149 <h3 class="section-title">Activities</h3>150 <div class="chip-row">151 <div class="chip active">Any</div>152 <div class="chip">ATV</div>153 <div class="chip">Bike</div>154 <div class="chip">Cross Country Skiing</div>155 <div class="chip">Fishing</div>156 <div class="chip">Horseback Riding</div>157 <div class="chip">Inline Skating</div>158 <div class="chip">Mountain Biking</div>159 <div class="chip">Snowmobiling</div>160 <div class="chip">Walking</div>161 <div class="chip">Wheelchair Accessible</div>162 </div>163 164 <h3 class="section-title">Surface</h3>165 <div class="chip-row">166 <div class="chip active">Any</div>167 <div class="chip">Asphalt</div>168 <div class="chip">Ballast</div>169 <div class="chip">Cinder</div>170 <div class="chip">Concrete</div>171 <div class="chip">Crushed Stone</div>172 <div class="chip">Dirt</div>173 <div class="chip">Grass</div>174 <div class="chip">Gravel</div>175 <div class="chip">Sand</div>176 <div class="chip">Woodchips</div>177 </div>178 179 <h3 class="section-title">Length <span class="hint">Miles</span></h3>180 <div class="slider-wrap">181 <input type="range" min="0" max="100" value="8">182 <div class="ticks">183 <span>0</span><span>5</span><span>10</span><span>15</span><span>20</span><span>20+</span>184 </div>185 </div>186 187 <h3 class="section-title" style="margin-top:34px;">Type</h3>188 <div class="spacer-8"></div>189 </div>190 191 <!-- Bottom navigation -->192 <div class="bottom-nav">193 <div class="bottom-item">194 <svg width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">195 <path d="M3 12l7-7v4h11v6H10v4z"></path>196 </svg>197 </div>198 <div class="bottom-item">199 <svg width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">200 <circle cx="11" cy="11" r="7"></circle>201 <path d="M16.5 16.5L22 22"></path>202 </svg>203 </div>204 <div class="bottom-item">205 <svg width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">206 <path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.6-7 10-7 10z"></path>207 </svg>208 </div>209 <div class="bottom-item">210 <svg width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">211 <circle cx="12" cy="7" r="4"></circle>212 <path d="M5.5 21a6.5 6.5 0 0 1 13 0"></path>213 </svg>214 </div>215 <div class="bottom-item">216 <svg width="62" height="62" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">217 <circle cx="12" cy="12" r="3"></circle>218 <path d="M19.4 15a7.5 7.5 0 0 0 0-6M4.6 9a7.5 7.5 0 0 0 0 6M15 4.6a7.5 7.5 0 0 0-6 0M9 19.4a7.5 7.5 0 0 0 6 0"></path>219 </svg>220 </div>221 </div>222 223 <!-- OS gesture bar -->224 <div class="os-bar">225 <div class="home-pill"></div>226 </div>227</div>228</body>229</html>