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: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#EDEDED;}9 #render-target{10 width:1080px;height:2400px;position:relative;overflow:hidden;11 background:#111314;12 }13 /* Top app/status bar */14 .topbar{15 position:absolute;left:0;top:0;width:100%;height:160px;background:#66A33E;16 padding:28px 36px;box-sizing:border-box;color:#fff;17 }18 .status-row{display:flex;align-items:center;justify-content:space-between;font-weight:600;}19 .status-icons{display:flex;gap:26px;align-items:center;}20 .status-dot{width:10px;height:10px;background:#fff;border-radius:50%;}21 .status-ico{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;}22 /* Page header area below green */23 .page{24 position:absolute;left:0;top:160px;right:0;bottom:0;overflow:auto;25 padding:36px;box-sizing:border-box;26 }27 h1{margin:18px 0 28px 0;font-size:72px;font-weight:800;}28 .action-icons{position:absolute;right:36px;top:190px;display:flex;gap:28px;}29 .icon-btn{width:72px;height:72px;border-radius:16px;background:#1b1e1f;display:flex;align-items:center;justify-content:center;border:1px solid #2b3033;}30 .section{margin-top:28px;margin-bottom:18px;}31 .label{font-size:44px;color:#D9D9D9;margin:32px 0 18px 0;font-weight:700;}32 .subtle{color:#A8B0AE;font-weight:500;}33 .field-wrap{position:relative;margin-bottom:26px;}34 .input{35 width:100%;background:#1B2A19;border:2px solid #3A4A35;color:#DDE6D5;36 height:110px;border-radius:22px;box-sizing:border-box;padding:0 32px;37 font-size:40px;display:flex;align-items:center;38 }39 .pill-clear{40 position:absolute;right:120px;top:50%;transform:translateY(-50%);41 width:56px;height:56px;border-radius:50%;background:#4A554B;border:2px solid #6B746C;42 display:flex;align-items:center;justify-content:center;color:#E6E6E6;font-weight:800;font-size:32px;43 }44 .geo-btn{45 position:absolute;right:18px;top:50%;transform:translateY(-50%);46 width:74px;height:74px;border-radius:50%;background:#1b1e1f;border:2px solid #3a3f42;47 display:flex;align-items:center;justify-content:center;48 }49 .chips{display:flex;flex-wrap:wrap;gap:18px;}50 .chip{51 padding:20px 28px;border-radius:14px;border:2px solid #3a3f42;color:#D9D9D9;background:#151718;52 font-size:36px;font-weight:600;53 }54 .chip.active{background:#66A33E;border-color:#66A33E;color:#121512;}55 .divider{height:2px;background:#232627;margin:28px 0;}56 /* Slider mock */57 .slider-block{margin-top:24px;}58 .slider-label{font-size:48px;font-weight:800;}59 .unit{color:#A8B0AE;font-size:40px;margin-left:14px;}60 .slider{61 position:relative;height:24px;background:#5C9B40;border-radius:12px;margin:36px 16px 12px 16px;62 }63 .slider .knob{64 position:absolute;top:50%;transform:translate(-50%,-50%);65 width:72px;height:72px;border-radius:50%;background:#2E97C1;border:4px solid #EAF0F6;66 }67 .knob.left{left:0%;}68 .knob.right{left:100%;}69 .ticks{display:flex;justify-content:space-between;padding:0 6px;color:#CDD5D2;font-size:36px;}70 /* Bottom nav */71 .bottom-nav{72 position:absolute;left:0;bottom:0;width:100%;height:150px;background:#66A33E;border-top-left-radius:0;border-top-right-radius:0;73 display:flex;align-items:center;justify-content:space-around;74 }75 .nav-ico{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#123;}76 .home-indicator{77 position:absolute;left:50%;transform:translateX(-50%);bottom:14px;78 width:300px;height:10px;border-radius:6px;background:#EDEDED;opacity:.85;79 }80</style>81</head>82<body>83<div id="render-target">84 <div class="topbar">85 <div class="status-row">86 <div style="font-size:42px;">3:21</div>87 <div class="status-icons">88 <div class="status-ico">89 <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>90 </div>91 <div class="status-ico"><svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M12 3a9 9 0 100 18 9 9 0 000-18z"/></svg></div>92 <div class="status-ico"><svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M4 4h16v2H4zm0 7h16v2H4zm0 7h16v2H4z"/></svg></div>93 <div class="status-dot"></div>94 <div class="status-ico"><svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a7 7 0 110 14 7 7 0 010-14zm9 18H3a1 1 0 000 2h18a1 1 0 000-2z"/></svg></div>95 <div class="status-ico"><svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M20 8l-8 8-8-8"/></svg></div>96 <div class="status-ico"><svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M21 7l-9 10L3 7"/></svg></div>97 </div>98 </div>99 </div>100 101 <div class="page">102 <h1>Search Trails</h1>103 104 <div class="action-icons">105 <div class="icon-btn" title="Delete">106 <svg width="34" height="34" viewBox="0 0 24 24" fill="#EDEDED"><path d="M7 21h10a2 2 0 002-2V7H5v12a2 2 0 002 2zM19 4h-4l-1-1h-4l-1 1H5v2h14V4z"/></svg>107 </div>108 <div class="icon-btn" title="Search">109 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>110 </div>111 </div>112 113 <div class="section">114 <div class="label">Location <span class="subtle">City, State, Zip</span></div>115 <div class="field-wrap">116 <div class="input">Chicago,IL,USA</div>117 <div class="pill-clear">×</div>118 <div class="geo-btn" title="Use my location">119 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#DDE6D5" stroke-width="2">120 <circle cx="12" cy="12" r="2"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>121 </svg>122 </div>123 </div>124 </div>125 126 <div class="section">127 <div class="label">Trail Name, Keyword</div>128 <div class="field-wrap">129 <div class="input" style="color:#A7B3A4;">Search</div>130 </div>131 </div>132 133 <div class="section">134 <div class="label">Sort By</div>135 <div class="chips">136 <div class="chip active">Name</div>137 <div class="chip">Distance</div>138 <div class="chip">Most Popular</div>139 <div class="chip">Length</div>140 </div>141 </div>142 143 <div class="section">144 <div class="label">Activities</div>145 <div class="chips">146 <div class="chip">Any</div>147 <div class="chip">ATV</div>148 <div class="chip active">Bike</div>149 <div class="chip">Cross Country Skiing</div>150 <div class="chip">Fishing</div>151 <div class="chip">Horseback Riding</div>152 <div class="chip">Inline Skating</div>153 <div class="chip">Mountain Biking</div>154 <div class="chip">Snowmobiling</div>155 <div class="chip">Walking</div>156 <div class="chip">Wheelchair Accessible</div>157 </div>158 </div>159 160 <div class="section">161 <div class="label">Surface</div>162 <div class="chips">163 <div class="chip active">Any</div>164 <div class="chip">Asphalt</div>165 <div class="chip">Ballast</div>166 <div class="chip">Cinder</div>167 <div class="chip">Concrete</div>168 <div class="chip">Crushed Stone</div>169 <div class="chip">Dirt</div>170 <div class="chip">Grass</div>171 <div class="chip">Gravel</div>172 <div class="chip">Sand</div>173 <div class="chip">Woodchips</div>174 </div>175 </div>176 177 <div class="section slider-block">178 <div class="slider-label">Length <span class="unit">Miles</span></div>179 <div class="slider">180 <div class="knob left"></div>181 <div class="knob right"></div>182 </div>183 <div class="ticks">184 <span>0</span><span>5</span><span>10</span><span>15</span><span>20</span><span>20+</span>185 </div>186 </div>187 188 <div class="section">189 <div class="label">Type</div>190 <div class="chips" style="opacity:.65;">191 <div class="chip">Any</div>192 <div class="chip">Paved</div>193 <div class="chip">Rail-Trail</div>194 </div>195 </div>196 197 <div style="height:260px;"></div>198 </div>199 200 <div class="bottom-nav">201 <div class="nav-ico">202 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#F5FBEF" stroke-width="2">203 <path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/>204 </svg>205 </div>206 <div class="nav-ico">207 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#F5FBEF" stroke-width="2">208 <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>209 </svg>210 </div>211 <div class="nav-ico">212 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#F5FBEF" stroke-width="2">213 <path d="M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.6l-1-1a5.5 5.5 0 00-7.8 7.8l1 1L12 22l7.8-8.6 1-1a5.5 5.5 0 000-7.8z"/>214 </svg>215 </div>216 <div class="nav-ico">217 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#F5FBEF" stroke-width="2">218 <circle cx="12" cy="7" r="4"/><path d="M5.5 21a6.5 6.5 0 0113 0"/>219 </svg>220 </div>221 <div class="nav-ico">222 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#F5FBEF" stroke-width="2">223 <circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/>224 </svg>225 </div>226 </div>227 <div class="home-indicator"></div>228</div>229</body>230</html>