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>OpenTable Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#212121; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:28px; box-shadow:0 10px 40px rgba(0,0,0,0.18);12 }13 14 /* Status bar */15 .status-bar {16 height:96px; padding:0 36px; display:flex; align-items:flex-end; justify-content:space-between;17 font-size:40px; color:#444; box-sizing:border-box;18 }19 .status-icons { display:flex; align-items:center; gap:24px; color:#666; font-size:34px; }20 21 /* Top tabs */22 .top-tabs {23 display:flex; gap:64px; padding:24px 36px 18px; font-size:48px; border-bottom:1px solid #e0e0e0; position:relative;24 }25 .top-tabs .tab { color:#555; }26 .top-tabs .tab.active { color:#d32f2f; font-weight:600; position:relative; }27 .top-tabs .tab.active::after {28 content:""; position:absolute; left:0; bottom:-18px; width:100%; height:8px; background:#d32f2f; border-radius:4px;29 }30 31 /* Filter chips area */32 .filter-wrap {33 position:relative; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.15); z-index:2;34 padding:20px 36px; border-bottom:1px solid #eee;35 }36 .filters { display:flex; gap:24px; flex-wrap:wrap; }37 .chip {38 display:flex; align-items:center; gap:18px; background:#fff; border:2px solid #dcdcdc; border-radius:40px;39 padding:22px 28px; font-size:40px; color:#333;40 box-shadow:0 2px 0 rgba(0,0,0,0.04) inset;41 }42 .chip svg { width:44px; height:44px; fill:none; stroke:#616161; stroke-width:2.5; }43 44 /* Content list */45 .content { padding:24px 36px 220px; }46 .grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; }47 48 .card {49 background:#fff; border-radius:28px; box-shadow:0 8px 22px rgba(0,0,0,0.12);50 overflow:hidden;51 }52 .card .img {53 width:100%; height:360px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;54 display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;55 }56 .card-body { padding:28px; }57 .title { font-size:56px; font-weight:700; letter-spacing:0.2px; margin-bottom:12px; }58 .meta { font-size:40px; color:#616161; display:flex; align-items:center; gap:18px; margin-bottom:26px; }59 .meta .dot { width:10px; height:10px; background:#9e9e9e; border-radius:50%; display:inline-block; }60 .meta .star { width:40px; height:40px; fill:#d32f2f; margin-right:-6px; }61 .bookmark { margin-left:auto; }62 .bookmark svg { width:48px; height:48px; stroke:#d32f2f; fill:none; stroke-width:3; }63 64 .times { display:flex; gap:18px; flex-wrap:wrap; }65 .time-pill {66 background:#d84343; color:#fff; font-size:40px; padding:18px 26px; border-radius:16px; font-weight:600;67 box-shadow:0 2px 0 rgba(0,0,0,0.08) inset;68 }69 .time-pill.alt { background:#e0e0e0; color:#757575; }70 71 .label { font-size:34px; color:#d32f2f; margin-top:10px; }72 73 .section-title {74 font-size:56px; font-weight:700; margin:36px 0 24px;75 }76 77 /* Bottom nav */78 .bottom-nav {79 position:absolute; left:0; right:0; bottom:66px;80 height:180px; background:#fff; border-top:1px solid #e0e0e0;81 display:flex; justify-content:space-around; align-items:center;82 }83 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#666; font-size:34px; }84 .nav-item.active { color:#d32f2f; font-weight:600; }85 .nav-item svg { width:54px; height:54px; stroke:#666; fill:none; stroke-width:2.5; }86 .nav-item.active svg { stroke:#d32f2f; }87 .home-dot { width:16px; height:16px; background:#d32f2f; border-radius:50%; }88 89 /* Home indicator */90 .home-indicator {91 position:absolute; left:50%; transform:translateX(-50%);92 bottom:16px; width:240px; height:14px; background:#000; opacity:0.1; border-radius:8px;93 }94</style>95</head>96<body>97<div id="render-target">98 <!-- Status bar -->99 <div class="status-bar">100 <div>9:47</div>101 <div class="status-icons">102 <span>◦◦◦</span>103 <span>📶</span>104 <span>🔋</span>105 </div>106 </div>107 108 <!-- Tabs -->109 <div class="top-tabs">110 <div class="tab active">Reservations</div>111 <div class="tab">Experiences</div>112 <div class="tab">Delivery & Takeout</div>113 </div>114 115 <!-- Filters -->116 <div class="filter-wrap">117 <div class="filters">118 <div class="chip">119 <svg viewBox="0 0 24 24">120 <circle cx="12" cy="7" r="4"></circle>121 <path d="M3 20c0-4 6-6 9-6s9 2 9 6" />122 </svg>123 <span>2 • Tonight at 10:00 PM</span>124 </div>125 <div class="chip">126 <svg viewBox="0 0 24 24">127 <path d="M12 2c-3.3 0-6 2.7-6 6 0 4.7 6 12 6 12s6-7.3 6-12c0-3.3-2.7-6-6-6z"/>128 <circle cx="12" cy="8" r="2.5"></circle>129 </svg>130 <span>Paris, France</span>131 </div>132 </div>133 </div>134 135 <!-- Content cards -->136 <div class="content">137 <div class="grid">138 <!-- Card 1 -->139 <div class="card">140 <div class="img">[IMG: DRUOANT restaurant exterior at night]</div>141 <div class="card-body">142 <div style="display:flex; align-items:center;">143 <div class="title">DROUANT</div>144 <div class="bookmark" style="margin-left:auto;">145 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"></path></svg>146 </div>147 </div>148 <div class="meta">149 <span>$$$$</span><span class="dot"></span><span>French</span><span class="dot"></span>150 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.53 3.7 2.03-7.03-5-4.73 7.73-.65L12 2l2.27 6.59 7.73.65-5 4.73 2.03 7.03z"></path></svg>151 <span>4.7 (96)</span>152 </div>153 <div class="times">154 <div class="time-pill">9:45 PM</div>155 <div class="time-pill">10:00 PM</div>156 <div class="time-pill">10:15 PM</div>157 </div>158 </div>159 </div>160 161 <!-- Card 2 -->162 <div class="card">163 <div class="img">[IMG: Contemporary dish close-up]</div>164 <div class="card-body">165 <div style="display:flex; align-items:center;">166 <div class="title">Tracé</div>167 <div class="bookmark" style="margin-left:auto;">168 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"></path></svg>169 </div>170 </div>171 <div class="meta">172 <span>$$$$</span><span class="dot"></span><span>Contemporary</span>173 </div>174 <div class="times">175 <div class="time-pill">9:30 PM</div>176 <div class="time-pill alt">10:00 PM</div>177 </div>178 <div class="label">Experience</div>179 </div>180 </div>181 </div>182 183 <div class="section-title">Outdoor dining</div>184 185 <div class="grid">186 <!-- Card 3 -->187 <div class="card">188 <div class="img">[IMG: Sacré Frenchy! outdoor terrace]</div>189 <div class="card-body">190 <div style="display:flex; align-items:center;">191 <div class="title">Sacré Frenchy !</div>192 <div class="bookmark" style="margin-left:auto;">193 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"></path></svg>194 </div>195 </div>196 <div class="meta">197 <span>$$$</span><span class="dot"></span><span>Traditional French</span><span class="dot"></span>198 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.53 3.7 2.03-7.03-5-4.73 7.73-.65L12 2l2.27 6.59 7.73.65-5 4.73 2.03 7.03z"></path></svg>199 <span>4.5 (218)</span>200 </div>201 <div class="times">202 <div class="time-pill">9:45 PM</div>203 <div class="time-pill alt">10:00 PM</div>204 <div class="time-pill">10:30 PM</div>205 </div>206 <div class="label">Experience</div>207 </div>208 </div>209 210 <!-- Card 4 -->211 <div class="card">212 <div class="img">[IMG: Café de l'Homme terrace with city view]</div>213 <div class="card-body">214 <div style="display:flex; align-items:center;">215 <div class="title">Café de l'Homme</div>216 <div class="bookmark" style="margin-left:auto;">217 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"></path></svg>218 </div>219 </div>220 <div class="meta">221 <span>$$$$</span><span class="dot"></span><span>French</span><span class="dot"></span>222 <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-6.53 3.7 2.03-7.03-5-4.73 7.73-.65L12 2l2.27 6.59 7.73.65-5 4.73 2.03 7.03z"></path></svg>223 <span>4.6</span>224 </div>225 <div class="times">226 <div class="time-pill">9:45 PM</div>227 <div class="time-pill">10:00 PM</div>228 </div>229 <div class="label">Experience</div>230 </div>231 </div>232 </div>233 234 <div class="section-title">New to OpenTable</div>235 236 <div class="grid">237 <div class="card">238 <div class="img" style="height:300px;">[IMG: River view panorama]</div>239 </div>240 <div class="card">241 <div class="img" style="height:300px;">[IMG: Modern bar interior with lights]</div>242 </div>243 </div>244 </div>245 246 <!-- Bottom navigation -->247 <div class="bottom-nav">248 <div class="nav-item active">249 <div class="home-dot"></div>250 <div>Home</div>251 </div>252 <div class="nav-item">253 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-4-4"></path></svg>254 <div>Search</div>255 </div>256 <div class="nav-item">257 <svg viewBox="0 0 24 24"><path d="M6 4h12v16l-6-4-6 4z"></path></svg>258 <div>Saved</div>259 </div>260 <div class="nav-item">261 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><path d="M12 12V7"></path><path d="M12 12l4 3"></path></svg>262 <div>History</div>263 </div>264 <div class="nav-item">265 <svg viewBox="0 0 24 24"><path d="M12 2c4 0 6 3 6 6v3l2 3H4l2-3V8c0-3 2-6 6-6z"></path><circle cx="18" cy="19" r="2"></circle></svg>266 <div>Notifications</div>267 </div>268 </div>269 270 <div class="home-indicator"></div>271</div>272</body>273</html>