GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Valley of Flowers - UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }7  #render-target{8    position:relative;9    width:1080px;10    height:2400px;11    overflow:hidden;12    background:#0e0f0f;13    color:#fff;14  }15  /* Hero image */16  .hero{17    position:absolute;18    left:0; top:0;19    width:1080px; height:760px;20    background:#E0E0E0;21    border-bottom:1px solid #BDBDBD;22    display:flex; align-items:center; justify-content:center;23    color:#555;24    letter-spacing:0.5px;25  }26  .top-icons{27    position:absolute; top:48px; left:0; right:0;28    height:96px; padding:0 36px;29    display:flex; align-items:center; justify-content:space-between;30  }31  .circle-btn{32    width:88px; height:88px; border-radius:44px;33    background:rgba(0,0,0,0.35);34    display:flex; align-items:center; justify-content:center;35  }36  .more-dot{37    width:14px; height:14px; background:#fff; border-radius:50%;38    box-shadow: 22px 0 0 #fff, -22px 0 0 #fff;39  }40  .title-wrap{41    position:absolute; left:48px; right:48px; bottom:100px;42  }43  .title{44    font-size:78px; font-weight:700; line-height:1.05; text-shadow:0 2px 6px rgba(0,0,0,0.35);45  }46  .sub-row{47    margin-top:18px; font-size:36px; color:#e8f5e9; display:flex; align-items:center; gap:18px;48  }49  .dot{ width:8px; height:8px; background:#cfcfcf; border-radius:50%; display:inline-block; margin:0 10px; }50  .park{ margin-top:14px; font-size:34px; color:#d0e4d0; }51  .bookmark{52    position:absolute; right:48px; bottom:130px;53    width:84px; height:120px; border:6px solid #fff; border-radius:16px;54    background:transparent;55    display:flex; align-items:flex-start; justify-content:center;56  }57  .bookmark:after{58    content:"";59    width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent;60    border-top:28px solid #fff; margin-top:58px;61  }62 63  /* Green action strip */64  .green-strip{65    position:absolute; left:0; right:0; top:760px; height:210px;66    background:#2f4d28;67    border-top:1px solid rgba(255,255,255,0.06);68    display:flex; align-items:center; justify-content:space-around;69    padding:0 24px;70  }71  .action{72    display:flex; flex-direction:column; align-items:center; gap:20px;73    color:#fff; font-size:36px;74  }75  .action .icon{76    width:128px; height:128px; border-radius:64px;77    background:#273e24; display:flex; align-items:center; justify-content:center;78    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.08);79  }80 81  /* Main content */82  .content{83    position:absolute; top:970px; left:0; right:0; bottom:0;84    padding:44px;85  }86  .stat-row{87    display:flex; justify-content:space-between; margin-bottom:40px;88  }89  .stat{90    width:32%; background:transparent;91  }92  .stat .label{ color:#a0a8a0; font-size:34px; }93  .stat .value{ margin-top:14px; font-size:56px; font-weight:700; }94  .desc{95    margin-top:26px; line-height:1.6; font-size:38px; color:#e6e6e6;96  }97  .show-more{ color:#b3d8a4; text-decoration:underline; cursor:pointer; }98  .preview{99    margin-top:36px; background:#263b2a; border-radius:60px; padding:28px 36px;100    display:flex; align-items:center; gap:28px; font-size:42px; width: 100%;101    border:1px solid rgba(255,255,255,0.08);102  }103  .play{104    width:90px; height:90px; border-radius:45px; background:#3c5a39; display:flex; align-items:center; justify-content:center;105  }106  .chips{107    margin-top:28px; display:flex; flex-wrap:wrap; gap:22px;108  }109  .chip{110    padding:22px 34px; border-radius:22px; background:#111712; color:#d7d7d7; border:1px solid #2a3329; font-size:36px;111  }112 113  /* Small helpers for SVG */114  svg{ fill:#fff; }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Hero image placeholder -->121  <div class="hero">[IMG: Misty green valley with mountains and clouds]</div>122 123  <!-- Top overlay icons -->124  <div class="top-icons">125    <div class="circle-btn">126      <!-- Back arrow -->127      <svg width="44" height="44" viewBox="0 0 24 24">128        <path d="M15.5 3.5 7 12l8.5 8.5-2.1 2.1L2.8 12 13.4 1.4 15.5 3.5z"/>129      </svg>130    </div>131    <div class="circle-btn">132      <div class="more-dot"></div>133    </div>134  </div>135 136  <!-- Title and meta -->137  <div class="title-wrap">138    <div class="title">Valley of Flowers</div>139    <div class="sub-row">140      <span>Hard</span>141      <span class="dot"></span>142      <!-- star -->143      <svg width="30" height="30" viewBox="0 0 24 24" style="transform: translateY(3px);">144        <path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-0.6L12 2l3 7.2 7 0.6-5.4 4.3 1.6 6.9z"/>145      </svg>146      <span>4.8 (16)</span>147    </div>148    <div class="park">Valley of Flowers National Park</div>149  </div>150 151  <!-- Bookmark icon -->152  <div class="bookmark"></div>153 154  <!-- Green action strip -->155  <div class="green-strip">156    <div class="action">157      <div class="icon">158        <!-- car -->159        <svg width="64" height="64" viewBox="0 0 24 24">160          <path d="M5 11l1.5-4h11L19 11H5zm-2 1h18v6h-2v-2H5v2H3v-6zm4.5 3.5c.8 0 1.5-.7 1.5-1.5S8.3 12.5 7.5 12.5 6 13.2 6 14s.7 1.5 1.5 1.5zm9 0c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5-1.5.7-1.5 1.5.7 1.5 1.5 1.5z"/>161        </svg>162      </div>163      <div>Directions</div>164    </div>165    <div class="action">166      <div class="icon">167        <!-- navigate/plane -->168        <svg width="64" height="64" viewBox="0 0 24 24">169          <path d="M11 21l-1-7-7-1L22 2 11 21z"/>170        </svg>171      </div>172      <div>Navigate</div>173    </div>174    <div class="action">175      <div class="icon">176        <!-- share -->177        <svg width="64" height="64" viewBox="0 0 24 24">178          <path d="M18 16c-1.1 0-2 .9-2 2 0 .2 0 .5.1.7L8.9 14c.1-.3.1-.6.1-.9s0-.6-.1-.9l7.2-4.7c.3.5.9.8 1.6.8 1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2c0 .2 0 .5.1.7L8 9.6C7.5 9.2 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.2 2-.6l8.1 5.2c.3.5.9.8 1.6.8 1.1 0 2-.9 2-2s-.9-2-2-2z"/>179        </svg>180      </div>181      <div>Share</div>182    </div>183    <div class="action">184      <div class="icon">185        <!-- download -->186        <svg width="64" height="64" viewBox="0 0 24 24">187          <path d="M5 20h14v2H5v-2zm7-18v10l4-4 1.4 1.4L12 16l-5.4-5.6L8 8l4 4V2h2z"/>188        </svg>189      </div>190      <div>Download</div>191    </div>192  </div>193 194  <!-- Main content -->195  <div class="content">196    <div class="stat-row">197      <div class="stat">198        <div class="label">Length</div>199        <div class="value">36.05 km</div>200      </div>201      <div class="stat">202        <div class="label">Elevation gain</div>203        <div class="value">2,419 m</div>204      </div>205      <div class="stat">206        <div class="label">Route type</div>207        <div class="value">Out &amp; back</div>208      </div>209    </div>210 211    <div class="desc">212      Experience this 36.0-km out-and-back trail near Joshimath, Uttarakhand. Generally considered a challenging route. This is a very popular area for backpacking, birding, and campi... <span class="show-more">Show more</span>213    </div>214 215    <div class="preview">216      <div class="play">217        <svg width="44" height="44" viewBox="0 0 24 24">218          <path d="M8 5v14l11-7z"/>219        </svg>220      </div>221      <div>Preview trail</div>222    </div>223 224    <div class="chips">225      <div class="chip">Backpacking</div>226      <div class="chip">Bird watching</div>227      <div class="chip">Camping</div>228      <div class="chip">Hiking</div>229      <div class="chip">Snowshoeing</div>230      <div class="chip">Walking</div>231      <div class="chip">Forest</div>232      <div class="chip">Historic site</div>233      <div class="chip">River</div>234      <div class="chip">Views</div>235      <div class="chip">Waterfall</div>236    </div>237  </div>238 239</div>240</body>241</html>