GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Parks UI Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:#222;}8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;10  }11 12  /* Status bar */13  .status-bar{14    height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between; color:#333;15    font-size:34px; box-sizing:border-box;16  }17  .status-icons{ display:flex; align-items:center; gap:16px; }18  .dot{ width:14px; height:14px; background:#5a5a5a; border-radius:50%; display:inline-block; }19 20  /* Search header */21  .search-area{ padding:16px 24px 8px; box-sizing:border-box; }22  .search-row{ display:flex; align-items:center; gap:18px; }23  .icon-btn{24    width:72px; height:72px; display:flex; align-items:center; justify-content:center;25    border-radius:36px; background:#fff; border:1px solid #e0e0e0;26  }27  .search-input{28    flex:1; height:72px; border-radius:36px; border:1px solid #dadce0; display:flex; align-items:center;29    padding:0 24px; box-sizing:border-box; gap:18px; background:#fff; 30  }31  .search-input .text{ flex:1; color:#333; font-size:36px; }32  .right-icons{ display:flex; align-items:center; gap:16px; }33  .chip-row{ margin-top:16px; display:flex; align-items:center; gap:20px; padding-left:8px;}34  .chip{35    padding:18px 28px; border:1px solid #d9d9d9; border-radius:28px; background:#fff; font-size:32px; color:#1a1a1a;36    box-shadow: 0 1px 0 rgba(0,0,0,0.06);37  }38 39  /* Map area */40  .map-area{41    margin-top:12px; height:620px; padding:0 24px; box-sizing:border-box;42  }43  .img-placeholder{44    width:100%; height:100%; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;45    display:flex; align-items:center; justify-content:center; text-align:center; font-size:36px; border-radius:16px;46  }47 48  /* Gallery */49  .gallery{50    margin-top:16px; padding:24px; box-sizing:border-box; display:flex; gap:24px; overflow:hidden;51  }52  .gallery .thumb{53    flex:1; height:360px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;54    display:flex; align-items:center; justify-content:center; text-align:center; font-size:30px; border-radius:16px;55  }56 57  /* Listing card */58  .listing{ padding:0 24px 12px; }59  .title{ font-size:56px; font-weight:700; margin:12px 0 6px; }60  .rating-row{ display:flex; align-items:center; gap:10px; color:#555; font-size:34px; }61  .stars{ color:#ffb300; font-size:34px; letter-spacing:2px; }62  .meta{ margin-top:6px; color:#666; font-size:32px; }63  .open-row{ margin-top:12px; color:#0a8f32; font-size:34px; }64  .desc{ margin-top:16px; color:#444; font-size:34px; line-height:1.35; }65  .actions{ margin-top:18px; display:flex; gap:22px; }66  .pill-btn{67    flex: none;68    padding:18px 30px; border:1px solid #d2d2d2; border-radius:40px; font-size:34px; color:#1a73e8; background:#fff;69    display:flex; align-items:center; gap:14px;70  }71  .pill-btn svg{ width:34px; height:34px; fill:#1a73e8; }72 73  /* Secondary previews */74  .secondary-gallery{ padding:18px 24px; display:flex; gap:24px; }75  .secondary-gallery .thumb{ width:500px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;76    display:flex; align-items:center; justify-content:center; border-radius:16px; font-size:28px;}77  .section-title{ padding:10px 24px; font-size:48px; font-weight:600; color:#222; }78 79  /* Floating card */80  .floating-card{81    position:absolute; right:40px; top:1650px; background:#fff; border-radius:36px; box-shadow:0 8px 22px rgba(0,0,0,0.15);82    padding:24px 28px; display:flex; align-items:center; gap:18px; border:1px solid #e8e8e8;83  }84  .floating-card .label{ font-size:40px; color:#1a73e8; }85  .map-icon{86    width:50px; height:50px; border-radius:8px; background:#1a73e8; display:flex; align-items:center; justify-content:center;87  }88  .map-icon svg{ width:34px; height:34px; fill:#fff; }89  /* Simple SVG icons style */90  .icon{ width:36px; height:36px; fill:#5f6368; }91</style>92</head>93<body>94<div id="render-target">95 96  <!-- Status bar -->97  <div class="status-bar">98    <div>10:36</div>99    <div class="status-icons">100      <span class="dot"></span>101      <span style="width:32px; height:22px; border:2px solid #444; border-radius:4px; display:inline-block; position:relative;">102        <span style="position:absolute; right:2px; top:2px; bottom:2px; width:60%; background:#444;"></span>103      </span>104      <span style="width:12px; height:22px; border:2px solid #444; display:inline-block;"></span>105    </div>106  </div>107 108  <!-- Search and filters -->109  <div class="search-area">110    <div class="search-row">111      <div class="icon-btn" title="Back">112        <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12l10-9 1.5 1.5z"/></svg>113      </div>114      <div class="search-input">115        <svg class="icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><path d="M15 15l6 6" stroke="#5f6368" stroke-width="2" fill="none"/></svg>116        <div class="text">Parks</div>117        <div class="right-icons">118          <svg class="icon" viewBox="0 0 24 24"><path d="M18 6L6 18" stroke="#5f6368" stroke-width="2"/><path d="M6 6l12 12" stroke="#5f6368" stroke-width="2"/></svg>119          <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"></circle><path d="M12 6v10" stroke="#5f6368" stroke-width="2"/><circle cx="12" cy="20" r="2"></circle></svg>120        </div>121      </div>122      <div class="icon-btn" title="Voice">123        <svg class="icon" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="12" rx="3"></rect><path d="M12 18v3" stroke="#5f6368" stroke-width="2"/><path d="M7 15a5 5 0 0 0 10 0" stroke="#5f6368" stroke-width="2"/></svg>124      </div>125    </div>126    <div class="chip-row">127      <div class="chip">Open now</div>128      <div class="chip">Top-rated</div>129      <div class="chip">More filters</div>130    </div>131  </div>132 133  <!-- Map area -->134  <div class="map-area">135    <div class="img-placeholder">[IMG: Google Map with park pins around Seattle, water and streets]</div>136  </div>137 138  <!-- Gallery of thumbnails -->139  <div class="gallery">140    <div class="thumb">[IMG: Playground swings]</div>141    <div class="thumb">[IMG: Park pathway with lamps]</div>142    <div class="thumb">[IMG: Gravel fountain]</div>143  </div>144 145  <!-- Listing details -->146  <div class="listing">147    <div class="title">Cal Anderson Park</div>148    <div class="rating-row">149      <div>4.3</div>150      <div class="stars">★★★★★</div>151      <div>(2,974)</div>152    </div>153    <div class="meta">Park · ♿ · 1635 11th Ave</div>154    <div class="open-row">Open · Closes 11:30 pm</div>155    <div class="desc">156      This historic recreational area hosts special events & has a jogging path, ball field & wading pool.157    </div>158    <div class="actions">159      <div class="pill-btn">160        <svg viewBox="0 0 24 24"><path d="M6 2l4 4-2 2C10 12 12 14 16 16l2-2 4 4-3 3c-6-1-13-8-14-14L6 2z"/></svg>161        <span>Call</span>162      </div>163      <div class="pill-btn">164        <svg viewBox="0 0 24 24"><path d="M12 2l7 7-7 13L5 9l7-7zm0 5l-3 3 3 8 3-8-3-3z"/></svg>165        <span>Directions</span>166      </div>167      <div class="pill-btn">168        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#1a73e8" stroke-width="2" fill="none"/></svg>169        <span>Share</span>170      </div>171    </div>172  </div>173 174  <!-- Secondary preview section -->175  <div class="secondary-gallery">176    <div class="thumb">[IMG: Trees with yellow leaves at Westlake Park]</div>177    <div class="thumb">[IMG: Urban plaza and archway]</div>178  </div>179  <div class="section-title">Westlake Park</div>180 181  <!-- Floating "View map" card -->182  <div class="floating-card">183    <div class="map-icon">184      <svg viewBox="0 0 24 24"><path d="M12 2l7 4v13l-7-4-7 4V6l7-4z"/></svg>185    </div>186    <div class="label">View map</div>187  </div>188 189</div>190</body>191</html>