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>Edit restaurant - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background:#f3f5f6;13 color:#263238;14 }15 16 /* Status bar */17 .status-bar {18 height: 110px;19 background:#101417;20 color:#fff;21 display:flex;22 align-items:center;23 padding: 0 36px;24 font-size:46px;25 box-sizing: border-box;26 }27 .status-icons {28 margin-left:auto;29 display:flex; align-items:center; gap:26px;30 }31 .status-dot { width:18px; height:18px; background:#e0e0e0; border-radius:50%; opacity:.9; }32 .status-batt {33 width:64px; height:32px; border:3px solid #fff; border-radius:6px; position:relative;34 }35 .status-batt::after { content:""; position:absolute; right:-10px; top:7px; width:6px; height:18px; background:#fff; border-radius:2px; }36 .status-batt .lvl { position:absolute; top:0; bottom:0; left:0; width:38px; background:#fff; }37 .status-wifi, .status-signal {38 width:44px; height:32px;39 }40 41 /* Top app bar */42 .app-bar {43 height:140px;44 background:#ffffff;45 display:flex; align-items:center;46 padding: 0 24px;47 box-sizing:border-box;48 border-bottom:1px solid #e6ebee;49 }50 .icon-btn {51 width:96px; height:96px; display:flex; align-items:center; justify-content:center; cursor:default;52 }53 .title {54 font-size:56px; font-weight:700; color:#1f2a33;55 }56 .title-wrap { display:flex; align-items:center; gap:12px; }57 .action {58 margin-left:auto; font-size:48px; color:#1e88e5; font-weight:600;59 }60 61 /* Content area */62 .content {63 position:absolute; left:0; right:0; top:250px; bottom:0;64 overflow:auto;65 padding: 28px 28px 140px;66 box-sizing:border-box;67 }68 .card {69 background:#fff;70 border-radius:14px;71 box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.06);72 padding: 36px 36px 24px;73 margin: 16px 12px 28px;74 }75 76 /* Form fields */77 .field {78 padding: 28px 8px 26px;79 border-bottom:1px solid #e3e7ea;80 }81 .field.placeholder-big {82 padding-top: 36px; padding-bottom: 32px;83 }84 .placeholder-big .hint {85 font-size:64px; color:#b0bec5; font-weight:500;86 }87 .label {88 font-size:34px; color:#9aa6ae; margin-bottom:8px;89 }90 .value {91 font-size:44px; color:#1f2a33;92 }93 94 .row {95 display:flex; gap:28px;96 }97 .row .col { flex: 1; }98 .row .col.time { max-width: 320px; flex: 0 0 320px; text-align:left; }99 .spacer { height:8px; }100 101 /* Section title inside card */102 .section-title {103 font-size:42px; font-weight:700; color:#1f2a33; margin: 8px 8px 10px;104 }105 106 /* Gesture bar */107 .gesture {108 position:absolute; left:0; right:0; bottom:0;109 height:110px; background:#000;110 display:flex; align-items:center; justify-content:center;111 }112 .gesture .pill {113 width: 240px; height: 12px; background:#ffffff; opacity:.9; border-radius:8px;114 }115 116 /* Simple SVG helpers */117 svg { display:block; }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div>6:02</div>126 <div class="status-icons">127 <div class="status-dot"></div>128 <svg class="status-signal" viewBox="0 0 24 24">129 <path fill="#fff" d="M2 20h2v-6H2v6zm4 0h2v-9H6v9zm4 0h2v-12h-2v12zm4 0h2V4h-2v16z"/>130 </svg>131 <svg class="status-wifi" viewBox="0 0 24 24">132 <path fill="none" stroke="#fff" stroke-width="2" d="M2 8c6-6 14-6 20 0M5 11c4-4 10-4 14 0M8 14c3-3 7-3 10 0"/>133 <circle cx="12" cy="18" r="2" fill="#fff"/>134 </svg>135 <div class="status-batt"><div class="lvl"></div></div>136 </div>137 </div>138 139 <!-- App bar -->140 <div class="app-bar">141 <div class="icon-btn" aria-hidden="true">142 <svg width="40" height="40" viewBox="0 0 24 24">143 <path d="M5 5l14 14M19 5L5 19" stroke="#1f2a33" stroke-width="2" stroke-linecap="round"/>144 </svg>145 </div>146 <div class="title">Edit restaurant</div>147 <div class="action">Save</div>148 </div>149 150 <!-- Content -->151 <div class="content">152 <div class="card">153 <div class="field placeholder-big">154 <div class="hint">Restaurant name*</div>155 </div>156 157 <div class="field">158 <div class="label">Location</div>159 </div>160 161 <div class="row">162 <div class="col">163 <div class="field">164 <div class="label">Start date*</div>165 <div class="value">Wed Jan 24, 2024</div>166 </div>167 </div>168 <div class="col time">169 <div class="field">170 <div class="label"> </div>171 <div class="value">12:00 PM</div>172 </div>173 </div>174 </div>175 176 <div class="row">177 <div class="col">178 <div class="field">179 <div class="label">End date</div>180 <div class="value">Wed Jan 24, 2024</div>181 </div>182 </div>183 <div class="col time">184 <div class="field">185 <div class="label"> </div>186 <div class="value">2:00 PM</div>187 </div>188 </div>189 </div>190 191 <div class="field">192 <div class="label">Timezone</div>193 </div>194 195 <div class="field">196 <div class="label">Confirmation #</div>197 </div>198 199 <div class="field">200 <div class="label">Phone</div>201 </div>202 203 <div class="field">204 <div class="label">Website</div>205 </div>206 207 <div class="field">208 <div class="label">Notes</div>209 </div>210 </div>211 212 <div class="card">213 <div class="section-title">Booking details</div>214 215 <div class="field">216 <div class="label">Booking website</div>217 </div>218 219 <div class="field">220 <div class="label">Booking URL</div>221 </div>222 223 </div>224 </div>225 226 <!-- Gesture bar -->227 <div class="gesture"><div class="pill"></div></div>228</div>229</body>230</html>