GD-ML/AndroidCode

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>UI Render</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; color:#212121; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#f7f7f7;12  }13 14  /* Map area */15  .map {16    position:absolute; top:0; left:0; width:1080px; height:1350px;17    background:#E0E0E0; border:1px solid #BDBDBD;18    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;19  }20  .map .label { pointer-events:none; }21 22  /* Top search bar */23  .search-bar {24    position:absolute; top:24px; left:24px; width:1032px; max-width:1032px;25    background:#fff; border-radius:56px; box-shadow:0 6px 14px rgba(0,0,0,0.15);26    display:flex; align-items:center; padding:26px 28px; gap:24px; font-size:34px;27  }28  .search-title {29    flex:1; color:#2b2b2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;30  }31  .icon-btn { width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:transparent; }32  .icon { width:40px; height:40px; }33  .search-controls .icon { fill:none; stroke:#616161; stroke-width:2; }34 35  /* Similar places pill */36  .similar-pill {37    position:absolute; top:470px; left:300px; width:480px; height:96px;38    background:#fff; border-radius:48px; box-shadow:0 6px 14px rgba(0,0,0,0.18);39    display:flex; align-items:center; justify-content:center; font-size:36px; color:#2b2b2b;40  }41 42  /* Street view thumbnail */43  .street-thumb {44    position:absolute; top:980px; left:40px; width:300px; height:170px;45    background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px; border-radius:12px;46  }47 48  /* Red map pin */49  .pin {50    position:absolute; top:740px; left:650px; width:40px; height:40px; background:#d23f31;51    border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,0.3);52  }53 54  /* Bottom sheet handle */55  .handle {56    position:absolute; top:1280px; left:50%; transform:translateX(-50%);57    width:120px; height:12px; background:#d9d9d9; border-radius:6px;58  }59 60  /* Bottom sheet */61  .sheet {62    position:absolute; top:1310px; left:0; width:1080px; height:1090px; background:#fff;63    border-top-left-radius:28px; border-top-right-radius:28px; box-shadow:0 -8px 16px rgba(0,0,0,0.18);64  }65  .sheet-inner { padding:40px 40px 24px 40px; }66  .title-row { display:flex; align-items:flex-start; }67  .place-title { font-size:56px; font-weight:600; margin:0; flex:1; }68  .logo {69    width:110px; height:110px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;70    display:flex; align-items:center; justify-content:center; font-size:22px; border-radius:12px;71  }72 73  .rating-row { margin-top:16px; display:flex; align-items:center; gap:12px; font-size:32px; color:#616161; }74  .stars { display:flex; gap:6px; }75  .star { width:34px; height:34px; }76  .star path { fill:#fbbc04; stroke:none; }77  .review-count { color:#616161; }78 79  .sub-row { margin-top:10px; display:flex; align-items:center; gap:12px; color:#616161; font-size:32px; }80  .access { display:inline-flex; align-items:center; gap:8px; }81  .wheel { width:28px; height:28px; }82  .status-row { margin-top:10px; font-size:32px; }83  .closed { color:#d93025; }84  .opens { color:#616161; }85 86  .actions { margin-top:26px; display:flex; gap:20px; flex-wrap:wrap; }87  .btn {88    height:110px; padding:0 40px; border-radius:56px; border:2px solid #e0e0e0;89    display:flex; align-items:center; gap:18px; font-size:36px; color:#2b2b2b; background:#fff;90  }91  .btn .icon { width:44px; height:44px; }92  .btn-primary {93    background:#1a73e8; color:#fff; border:2px solid #1a73e8;94  }95 96  .gallery { margin-top:26px; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }97  .photo {98    height:590px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;99    display:flex; align-items:center; justify-content:center; font-size:28px; border-radius:22px;100  }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Map Placeholder -->107  <div class="map">108    <div class="label">[IMG: City Map]</div>109    <div class="pin"></div>110  </div>111 112  <!-- Top Search Bar -->113  <div class="search-bar">114    <div class="icon-btn">115      <svg class="icon search-controls" viewBox="0 0 24 24">116        <path d="M15 19 L8 12 L15 5" />117      </svg>118    </div>119    <div class="search-title">East Side Grocery, 1422 2nd Ave…</div>120    <div class="icon-btn">121      <svg class="icon search-controls" viewBox="0 0 24 24">122        <path d="M5 5 L19 19 M19 5 L5 19" />123      </svg>124    </div>125    <div class="icon-btn">126      <svg class="icon search-controls" viewBox="0 0 24 24">127        <circle cx="12" cy="8" r="4"></circle>128        <path d="M12 12 V19"></path>129      </svg>130    </div>131  </div>132 133  <!-- Similar places pill -->134  <div class="similar-pill">See similar places</div>135 136  <!-- Street view thumbnail -->137  <div class="street-thumb">[IMG: Street View Thumbnail]</div>138 139  <!-- Bottom sheet handle -->140  <div class="handle"></div>141 142  <!-- Bottom sheet content -->143  <div class="sheet">144    <div class="sheet-inner">145      <div class="title-row">146        <h1 class="place-title">East Side Grocery</h1>147        <div class="logo">[IMG: Store Logo]</div>148      </div>149 150      <div class="rating-row">151        <div>4.6</div>152        <div class="stars">153          <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>154          <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>155          <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>156          <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>157          <svg class="star" viewBox="0 0 24 24"><path d="M12 2 L15 9 L22 9 L17 13 L19 20 L12 16 L5 20 L7 13 L2 9 L9 9 Z"/></svg>158        </div>159        <div class="review-count">(32)</div>160      </div>161 162      <div class="sub-row">163        <div>Grocery store</div>164        <div class="access">165          <svg class="wheel" viewBox="0 0 24 24">166            <circle cx="10" cy="5" r="3" fill="#616161"></circle>167            <circle cx="11" cy="16" r="6" fill="none" stroke="#616161" stroke-width="2"></circle>168            <path d="M11 8 L11 12 L15 12" stroke="#616161" stroke-width="2" fill="none"></path>169          </svg>170        </div>171      </div>172 173      <div class="status-row">174        <span class="closed">Closed</span> · <span class="opens">Opens 7 am</span>175      </div>176 177      <div class="actions">178        <div class="btn btn-primary">179          <svg class="icon" viewBox="0 0 24 24">180            <path d="M3 12 L12 3 L21 12 L12 21 Z" fill="#fff"></path>181          </svg>182          <span>Directions</span>183        </div>184        <div class="btn">185          <svg class="icon" viewBox="0 0 24 24">186            <path d="M6 4 L18 4 L18 20 L6 20 Z M9 4 L9 3 M15 4 L15 3" fill="none" stroke="#616161" stroke-width="2"></path>187            <path d="M9 7 L15 13" stroke="#616161" stroke-width="2"></path>188          </svg>189          <span>Call</span>190        </div>191        <div class="btn">192          <svg class="icon" viewBox="0 0 24 24">193            <path d="M4 5 H20 V16 H8 L4 19 Z" fill="none" stroke="#616161" stroke-width="2"></path>194          </svg>195          <span>Chat</span>196        </div>197        <div class="btn">198          <svg class="icon" viewBox="0 0 24 24">199            <path d="M6 4 H18 V20 L12 16 L6 20 Z" fill="none" stroke="#616161" stroke-width="2"></path>200          </svg>201          <span>Save</span>202        </div>203      </div>204 205      <div class="gallery">206        <div class="photo">[IMG: Storefront - East Side Grocery]</div>207        <div class="photo">[IMG: Product - White Claw Variety Pack]</div>208      </div>209    </div>210  </div>211 212</div>213</body>214</html>