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>Trail Search</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#fff; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#f3f5f7;13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; right:0; height:120px;18 background:#4CAF50; color:#fff; font-weight:600;19 }20 .status-inner { height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }21 .status-left { font-size:42px; letter-spacing:1px; }22 .status-right { display:flex; gap:26px; align-items:center; }23 .icon { width:42px; height:42px; }24 25 /* Header */26 .header {27 position:absolute; left:0; right:0; top:120px; height:180px;28 background:#101214; display:flex; align-items:center;29 padding:0 40px;30 box-shadow:0 2px 6px rgba(0,0,0,0.25);31 }32 .header h1 { margin:0; font-size:76px; font-weight:700; color:#fff; }33 34 /* Scroll area */35 .content {36 position:absolute; left:0; right:0; top:300px; bottom:180px;37 overflow-y:auto; padding:28px 28px 220px;38 background:transparent;39 }40 41 /* Card */42 .card {43 position:relative;44 margin:22px 16px 36px;45 border-radius:28px;46 box-shadow:0 12px 24px rgba(0,0,0,0.25);47 overflow:hidden;48 background:#fff;49 }50 .card .img {51 height:460px;52 background:#E0E0E0;53 border:1px solid #BDBDBD;54 display:flex; align-items:center; justify-content:center;55 color:#757575; font-size:44px; font-weight:600;56 }57 .heart {58 position:absolute; right:28px; top:28px;59 width:68px; height:68px; border-radius:50%;60 display:flex; align-items:center; justify-content:center;61 background:rgba(0,0,0,0.25);62 }63 .heart svg { width:42px; height:42px; }64 .overlay {65 position:absolute; left:24px; right:24px; bottom:24px;66 background:#1b1d1f; color:#fff;67 border-radius:18px;68 padding:24px 28px;69 display:flex; align-items:flex-end; justify-content:space-between;70 gap:24px;71 }72 .title { font-size:56px; font-weight:700; line-height:1.1; }73 .region { font-size:36px; font-weight:600; color:#cfcfcf; margin-left:16px; }74 .rating { margin-top:12px; display:flex; align-items:center; gap:18px; }75 .stars { display:flex; gap:8px; }76 .reviews { font-size:38px; color:#d9d9d9; }77 .length {78 text-align:right;79 }80 .length .label { font-size:46px; font-weight:700; }81 .length .value { font-size:44px; margin-top:6px; color:#eaeaea; }82 83 /* Bottom nav */84 .bottom-nav {85 position:absolute; left:0; right:0; bottom:0; height:170px;86 background:#4CAF50; border-top-left-radius:0; border-top-right-radius:0;87 box-shadow:0 -6px 14px rgba(0,0,0,0.2);88 }89 .bottom-inner {90 height:100%; display:flex; align-items:center; justify-content:space-around;91 padding:0 40px;92 }93 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#fff; }94 .nav-icon { width:64px; height:64px; }95 96 /* Home indicator */97 .home-indicator {98 position:absolute; bottom:180px; left:50%; transform:translateX(-50%);99 width:360px; height:14px; background:#1f1f1f; opacity:0.25; border-radius:8px;100 }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Top status bar -->107 <div class="status-bar">108 <div class="status-inner">109 <div class="status-left">3:22</div>110 <div class="status-right">111 <!-- location -->112 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 2c-3.9 0-7 3.1-7 7 0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"/></svg>113 <!-- wifi -->114 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-7-7c4.7-4.7 15.3-4.7 20 0l-2 2c-3.7-3.7-12.3-3.7-16 0l-2-2zm4 4c2.8-2.8 10.2-2.8 13 0l-2 2c-1.8-1.8-7.2-1.8-9 0l-2-2z"/></svg>115 <!-- battery -->116 <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M16 6h2a2 2 0 0 1 2 2v1h2v6h-2v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10zm0 3H6v6h10V9z"/></svg>117 </div>118 </div>119 </div>120 121 <!-- Header -->122 <div class="header">123 <h1>Trail Search</h1>124 </div>125 126 <!-- Content list -->127 <div class="content">128 129 <!-- Card 1 -->130 <div class="card">131 <div class="img">[IMG: Green Trail Graphic]</div>132 <div class="heart">133 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">134 <path d="M12 21s-6-4.3-8.5-7C1 11.5 2 7.5 5.5 7.5 7.6 7.5 9 9 12 11.6 15 9 16.4 7.5 18.5 7.5 22 7.5 23 11.5 20.5 14c-2.5 2.7-8.5 7-8.5 7z"/>135 </svg>136 </div>137 <div class="overlay">138 <div class="left">139 <div class="title">Bartlett Trail <span class="region">IL</span></div>140 <div class="rating">141 <div class="stars">142 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>143 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>144 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>145 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>146 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>147 </div>148 <div class="reviews">4 Reviews</div>149 </div>150 </div>151 <div class="length">152 <div class="label">Length</div>153 <div class="value">1.2 mi</div>154 </div>155 </div>156 </div>157 158 <!-- Card 2 -->159 <div class="card">160 <div class="img">[IMG: Trail with Yellow Flowers]</div>161 <div class="heart">162 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">163 <path d="M12 21s-6-4.3-8.5-7C1 11.5 2 7.5 5.5 7.5 7.6 7.5 9 9 12 11.6 15 9 16.4 7.5 18.5 7.5 22 7.5 23 11.5 20.5 14c-2.5 2.7-8.5 7-8.5 7z"/>164 </svg>165 </div>166 <div class="overlay">167 <div class="left">168 <div class="title">Blackberry Trail <span class="region">IL</span></div>169 <div class="rating">170 <div class="stars">171 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>172 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>173 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>174 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#888" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>175 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#888" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>176 </div>177 <div class="reviews">1 Review</div>178 </div>179 </div>180 <div class="length">181 <div class="label">Length</div>182 <div class="value">1.5 mi</div>183 </div>184 </div>185 </div>186 187 <!-- Card 3 -->188 <div class="card">189 <div class="img">[IMG: Elevated Urban Trail with Trees]</div>190 <div class="heart">191 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">192 <path d="M12 21s-6-4.3-8.5-7C1 11.5 2 7.5 5.5 7.5 7.6 7.5 9 9 12 11.6 15 9 16.4 7.5 18.5 7.5 22 7.5 23 11.5 20.5 14c-2.5 2.7-8.5 7-8.5 7z"/>193 </svg>194 </div>195 <div class="overlay">196 <div class="left">197 <div class="title">Bloomingdale Trail (The 606) <span class="region">IL</span></div>198 <div class="rating">199 <div class="stars">200 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>201 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>202 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>203 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>204 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>205 </div>206 <div class="reviews">15 Reviews</div>207 </div>208 </div>209 <div class="length">210 <div class="label">Length</div>211 <div class="value">2.7 mi</div>212 </div>213 </div>214 </div>215 216 <!-- Card 4 (partially visible like screenshot) -->217 <div class="card">218 <div class="img">[IMG: Nature Trail with Small Bridge]</div>219 <div class="heart">220 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">221 <path d="M12 21s-6-4.3-8.5-7C1 11.5 2 7.5 5.5 7.5 7.6 7.5 9 9 12 11.6 15 9 16.4 7.5 18.5 7.5 22 7.5 23 11.5 20.5 14c-2.5 2.7-8.5 7-8.5 7z"/>222 </svg>223 </div>224 <div class="overlay">225 <div class="left">226 <div class="title">Prairie Preserve <span class="region">IL</span></div>227 <div class="rating">228 <div class="stars">229 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>230 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>231 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>232 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#FFD54F" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>233 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#888" d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 17l-6.2 4 1.2-6.9-5-4.8 6.9-1z"/></svg>234 </div>235 <div class="reviews">8 Reviews</div>236 </div>237 </div>238 <div class="length">239 <div class="label">Length</div>240 <div class="value">3.2 mi</div>241 </div>242 </div>243 </div>244 245 </div>246 247 <!-- Home indicator -->248 <div class="home-indicator"></div>249 250 <!-- Bottom navigation -->251 <div class="bottom-nav">252 <div class="bottom-inner">253 <!-- Logo/leaf -->254 <div class="nav-item">255 <svg class="nav-icon" viewBox="0 0 24 24" fill="#fff"><path d="M20 4c-8 0-14 6-14 14 4 0 8-2 10.5-4.5S20 8 20 4zM6 18c2.2 0 5.1-1 7-2.9-2.3.3-4.9.1-7-.5V18z"/></svg>256 </div>257 <!-- Search -->258 <div class="nav-item">259 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2"><circle cx="11" cy="11" r="6"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>260 </div>261 <!-- Favorites -->262 <div class="nav-item">263 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2">264 <path d="M12 21s-6-4.3-8.5-7C1 11.5 2 7.5 5.5 7.5 7.6 7.5 9 9 12 11.6 15 9 16.4 7.5 18.5 7.5 22 7.5 23 11.5 20.5 14c-2.5 2.7-8.5 7-8.5 7z"/>265 </svg>266 </div>267 <!-- Profile -->268 <div class="nav-item">269 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2">270 <circle cx="12" cy="8" r="4"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>271 </svg>272 </div>273 <!-- Settings -->274 <div class="nav-item">275 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">276 <path d="M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z"/>277 <path d="M19.4 15a7.8 7.8 0 0 0 .1-2l2-1.2-2-3.5-2.3.7a7.7 7.7 0 0 0-1.7-1L13 3h-4l-.5 2.9c-.6.3-1.2.6-1.7 1l-2.3-.7-2 3.5 2 1.2c-.1.7-.1 1.3 0 2l-2 1.2 2 3.5 2.3-.7c.5.4 1.1.7 1.7 1L9 21h4l.5-2.9c.6-.3 1.2-.6 1.7-1l2.3.7 2-3.5-2.1-1.3z"/>278 </svg>279 </div>280 </div>281 </div>282 283</div>284</body>285</html>