GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Restaurant Detail - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #2f3a44; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14  /* Hero image placeholder */15  .hero {16    position: relative;17    width: 1080px;18    height: 720px;19    background: #E0E0E0;20    border-bottom: 1px solid #BDBDBD;21    display: flex;22    align-items: flex-end;23    justify-content: center;24  }25  .hero .img-label {26    position: absolute;27    top: 50%;28    left: 50%;29    transform: translate(-50%, -20%);30    color: #757575;31    font-size: 30px;32    letter-spacing: 0.5px;33  }34  .see-photos {35    position: absolute;36    bottom: 28px;37    left: 50%;38    transform: translateX(-50%);39    background: rgba(0,0,0,0.65);40    color: #fff;41    padding: 18px 36px;42    border-radius: 36px;43    font-size: 34px;44  }45  /* Overlay controls */46  .status-time {47    position: absolute; top: 18px; left: 24px;48    color: white; font-weight: 600; font-size: 36px; text-shadow: 0 1px 2px rgba(0,0,0,0.35);49  }50  .overlay-btn {51    position: absolute; top: 110px; width: 84px; height: 84px;52    border-radius: 42px; background: rgba(255,255,255,0.85);53    display: flex; align-items: center; justify-content: center;54    box-shadow: 0 2px 8px rgba(0,0,0,0.15);55  }56  .overlay-back { left: 24px; }57  .overlay-bookmark { right: 150px; }58  .overlay-share { right: 40px; }59 60  /* Content */61  .content {62    position: absolute;63    top: 720px; left: 0; right: 0;64    background: #fff;65  }66  .section {67    padding: 40px 48px 0 48px;68  }69  h1.title {70    margin: 10px 0 18px 0;71    font-size: 72px; letter-spacing: 1px; font-weight: 800; color: #2b2f33;72  }73 74  /* Ratings and meta rows */75  .row { display: flex; align-items: center; flex-wrap: wrap; }76  .row .stars svg { margin-right: 10px; }77  .row .meta { margin-left: 22px; font-size: 36px; color: #41505b; }78  .meta-icon { width: 44px; height: 44px; margin-right: 16px; }79  .info-line { display: flex; align-items: center; margin-top: 22px; font-size: 40px; color: #3b454d; }80 81  /* Tabs */82  .tabs {83    display: flex; padding: 40px 48px 0 48px; border-bottom: 2px solid #e6e6e6; margin-top: 28px;84  }85  .tab {86    margin-right: 56px; padding: 0 8px 28px 8px; font-size: 40px; color: #394650;87  }88  .tab.active { color: #d32f2f; border-bottom: 8px solid #d32f2f; }89 90  /* Date/time selector pill */91  .selector {92    margin: 36px 48px 0 48px;93    display: flex; align-items: center; justify-content: center;94  }95  .selector-pill {96    display: inline-flex; align-items: center; gap: 12px;97    padding: 24px 28px;98    border: 2px solid #d0d5d9; border-radius: 50px;99    font-size: 36px; color: #3a4248; background: #fff;100    box-shadow: 0 2px 0 rgba(0,0,0,0.02);101  }102 103  /* Time chips */104  .chips { padding: 28px 48px 0 48px; display: flex; flex-wrap: wrap; gap: 24px; }105  .chip {106    background: #d83a34; color: #fff; font-weight: 600;107    padding: 22px 30px; border-radius: 16px; font-size: 34px;108    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);109  }110 111  /* Ghost buttons */112  .ghost-btn {113    margin: 36px 48px;114    border: 2px solid #d7dbe0; color: #2f3a44; background: #fff;115    padding: 34px 30px; text-align: center; font-size: 40px; border-radius: 20px;116    box-shadow: 0 1px 0 rgba(0,0,0,0.03);117  }118 119  .subheader { font-size: 46px; font-weight: 700; margin: 28px 48px 8px 48px; color: #2f3a44; }120 121  /* Bottom handle */122  .handle {123    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);124    width: 300px; height: 12px; background: #c9c9c9; border-radius: 8px;125  }126 127  /* Utility SVG style */128  svg { display: block; }129</style>130</head>131<body>132<div id="render-target">133  <div class="hero">134    <div class="img-label">[IMG: Restaurant Interior]</div>135    <div class="status-time">6:46</div>136    <div class="overlay-btn overlay-back">137      <svg width="40" height="40" viewBox="0 0 24 24" fill="#2f3a44"><path d="M15.5 19l-7-7 7-7" stroke="#2f3a44" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>138    </div>139    <div class="overlay-btn overlay-bookmark">140      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#2f3a44" stroke-width="2"><path d="M6 3h12v18l-6-4-6 4z"/></svg>141    </div>142    <div class="overlay-btn overlay-share">143      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#2f3a44" stroke-width="2">144        <circle cx="18" cy="5" r="3"></circle>145        <circle cx="6" cy="12" r="3"></circle>146        <circle cx="18" cy="19" r="3"></circle>147        <path d="M8.7 11l6.6-4M8.7 13l6.6 4"></path>148      </svg>149    </div>150    <div class="see-photos">See all 62 photos</div>151  </div>152 153  <div class="content">154    <div class="section">155      <h1 class="title">DROUANT</h1>156 157      <div class="row" style="margin-bottom:10px;">158        <div class="stars" style="display:flex;">159          <svg width="44" height="44" viewBox="0 0 24 24" fill="#e53935"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>160          <svg width="44" height="44" viewBox="0 0 24 24" fill="#e53935"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>161          <svg width="44" height="44" viewBox="0 0 24 24" fill="#e53935"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>162          <svg width="44" height="44" viewBox="0 0 24 24" fill="#e53935"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>163          <svg width="44" height="44" viewBox="0 0 24 24" fill="#e53935"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>164        </div>165        <div class="row meta" style="margin-left:28px;">166          <svg class="meta-icon" viewBox="0 0 24 24" fill="none" stroke="#54606a" stroke-width="2"><path d="M4 4h16v12H6l-2 2z"/></svg>167          <span>96 reviews</span>168        </div>169      </div>170 171      <div class="info-line">172        <svg class="meta-icon" viewBox="0 0 24 24" fill="none" stroke="#54606a" stroke-width="2">173          <rect x="3" y="6" width="18" height="12" rx="2"></rect>174          <circle cx="12" cy="12" r="2"></circle>175        </svg>176        <span>€51 and over</span>177        <span style="margin: 0 22px;"></span>178        <svg class="meta-icon" viewBox="0 0 24 24" fill="none" stroke="#54606a" stroke-width="2">179          <path d="M8 2v10M5 5h6M16 3v9M13 3h6"></path>180        </svg>181        <span>French</span>182      </div>183 184      <div class="info-line">185        <svg class="meta-icon" viewBox="0 0 24 24" fill="#54606a">186          <path d="M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>187        </svg>188        <span>16 rue Gaillon, Paris, Paris, 75002</span>189      </div>190    </div>191 192    <div class="tabs">193      <div class="tab active">Reservations</div>194      <div class="tab">Menu</div>195      <div class="tab">Reviews</div>196      <div class="tab">Details</div>197    </div>198 199    <div class="selector">200      <div class="selector-pill">201        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#55636d" stroke-width="2"><circle cx="12" cy="7" r="3"></circle><path d="M5 21c0-4 3-7 7-7s7 3 7 7"/></svg>202        <span>2 • 7:00 PM Tonight</span>203      </div>204    </div>205 206    <div class="chips">207      <div class="chip">7:00 PM</div>208      <div class="chip">7:15 PM</div>209      <div class="chip">7:30 PM</div>210      <div class="chip">7:45 PM</div>211      <div class="chip">8:00 PM</div>212      <div class="chip">8:15 PM</div>213    </div>214 215    <div class="ghost-btn">View full availability</div>216 217    <div class="subheader">Menu</div>218    <div class="ghost-btn">See full menu</div>219 220    <div class="subheader" style="margin-top: 12px;">Reviews</div>221  </div>222 223  <div class="handle"></div>224</div>225</body>226</html>