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>Contact info</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color:#1e1e1e; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden; background:#ffffff;11 }12 13 /* Status bar */14 .status-bar {15 height:96px;16 padding:18px 32px 0 32px;17 display:flex; align-items:center; justify-content:space-between;18 font-size:40px; color:#2d2d2d;19 }20 .sb-icons { display:flex; align-items:center; gap:22px; }21 .sb-icon { width:36px; height:36px; opacity:0.85; }22 23 /* App bar */24 .app-bar {25 height:120px; position:relative; display:flex; align-items:center; justify-content:center;26 }27 .app-title { font-weight:700; font-size:54px; color:#2c2c2c; }28 .back-btn { position:absolute; left:24px; top:50%; transform:translateY(-50%); width:84px; height:84px; display:flex; align-items:center; justify-content:center; }29 .divider { height:1px; background:#eaeaea; }30 31 /* Steps */32 .steps { padding:12px 80px 18px 80px; }33 .steps-row { display:flex; align-items:center; justify-content:space-between; padding:0 20px; }34 .step { width:80px; height:80px; border-radius:40px; display:flex; align-items:center; justify-content:center; color:#9e9e9e; }35 .step.active { color:#ff0a8a; }36 .step.done { color:#2ecc71; }37 .steps-track { margin-top:8px; height:6px; background:linear-gradient(90deg,#2ecc71 0 22%, #ff0a8a 22% 35%, #cfcfd4 35% 100%); border-radius:3px; }38 .steps-dots { position:relative; height:18px; }39 .dot { position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:#cfcfd4; }40 .dot.green { left:110px; background:#2ecc71; }41 .dot.pink { left:285px; background:#ff0a8a; }42 43 /* Content */44 .content { padding:24px 48px 320px 48px; overflow-y:auto; height:1730px; }45 .section-title { font-size:56px; font-weight:700; margin:18px 0 22px 0; }46 .field-grey {47 background:#f3f3f5; border-radius:28px; padding:28px; margin-bottom:24px;48 border:1px solid #eeeeee;49 }50 .field-grey .label { font-size:32px; color:#90939a; margin-bottom:8px; }51 .field-grey .value { font-size:46px; font-weight:600; color:#2e2e2e; }52 .field-grey .value.muted { color:#b3b5ba; font-weight:500; }53 .field-grey .right-icon { position:relative; }54 .lock {55 position:absolute; right:24px; top:-70px; width:48px; height:48px; display:inline-block;56 }57 .hint { color:#8b8e95; font-size:30px; margin:4px 8px 24px 8px; }58 59 .row { display:flex; gap:32px; }60 .col { flex:1; }61 62 .input {63 background:#f7f7f8; border:2px solid #d7d7db; border-radius:28px; padding:26px 30px;64 height:146px; display:flex; flex-direction:column; justify-content:center;65 }66 .input .label { font-size:30px; color:#6b6e75; margin-bottom:8px; }67 .input .placeholder { font-size:42px; color:#9fa3a9; }68 .input.error { border-color:#e53935; }69 .input.error .label { color:#e53935; }70 .error-text { color:#e53935; font-size:28px; margin:10px 8px 26px 18px; }71 72 .dropdown { position:relative; }73 .caret {74 position:absolute; right:28px; top:56px; width:28px; height:28px;75 }76 77 /* Bottom sheet */78 .bottom {79 position:absolute; left:0; right:0; bottom:90px; height:250px; background:#ffffff;80 box-shadow:0 -10px 40px rgba(0,0,0,0.12); border-top-left-radius:26px; border-top-right-radius:26px;81 display:flex; align-items:center; justify-content:space-between; padding:30px 48px;82 }83 .price { line-height:1.25; }84 .price .big { font-size:48px; font-weight:800; }85 .price .sub { font-size:34px; color:#9b9ea4; margin-top:8px; }86 .cta {87 background:#ff0a8a; color:#fff; border:none; border-radius:24px;88 padding:36px 70px; font-size:46px; font-weight:700; box-shadow:0 10px 40px rgba(255,10,138,0.35);89 }90 .sheet-handle {91 position:absolute; left:50%; top:-28px; transform:translateX(-50%);92 background:#f2f2f4; color:#7a7d84; border-radius:28px; padding:12px 26px; font-size:30px;93 display:flex; align-items:center; gap:12px; box-shadow:0 4px 14px rgba(0,0,0,0.08);94 }95 .chev {96 width:28px; height:28px; border-radius:50%; background:#d2d3d8; display:inline-flex; align-items:center; justify-content:center;97 }98 99 /* Gesture bar */100 .gesture { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); width:320px; height:12px; background:#000; border-radius:8px; opacity:0.8; }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status bar -->107 <div class="status-bar">108 <div>9:46</div>109 <div class="sb-icons">110 <!-- mobile signal -->111 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 18h2v3H3zm4-6h2v9H7zm4-4h2v13h-2zm4-5h2v18h-2z" fill="#5a5a5a"/></svg>112 <!-- wifi -->113 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM2 9c5.5-4.7 14.5-4.7 20 0l-1.5 1.6C16 6.8 8 6.8 3.5 10.6zM6 13c3.5-2.8 8.5-2.8 12 0l-1.6 1.6c-2.6-2-6.2-2-8.8 0z" fill="#5a5a5a"/></svg>114 <!-- search dot -->115 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="#5a5a5a"/></svg>116 <!-- battery -->117 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" fill="none" stroke="#5a5a5a" stroke-width="2"/><rect x="4" y="9" width="12" height="6" fill="#5a5a5a"/><rect x="20" y="10" width="2" height="4" fill="#5a5a5a"/></svg>118 <div style="font-size:34px; margin-left:4px;">79%</div>119 </div>120 </div>121 122 <!-- App bar -->123 <div class="app-bar">124 <div class="back-btn">125 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>126 </div>127 <div class="app-title">Contact info</div>128 </div>129 130 <!-- Steps -->131 <div class="steps">132 <div class="steps-row">133 <div class="step done">134 <!-- airplane -->135 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M2 12l20 0-7-3v-3l-4 3-9 3z" fill="currentColor"/></svg>136 </div>137 <div class="step active">138 <!-- photo -->139 <svg width="46" height="46" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" fill="currentColor"/><path d="M8 13l2.2-2.4 2.5 3.2 2-1.8L19 15H8z" fill="#fff"/><circle cx="9" cy="9" r="1.6" fill="#fff"/></svg>140 </div>141 <div class="step">142 <!-- user -->143 <svg width="46" height="46" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="currentColor"/><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="currentColor"/></svg>144 </div>145 <div class="step">146 <!-- seat -->147 <svg width="46" height="46" viewBox="0 0 24 24"><rect x="6" y="6" width="8" height="8" rx="2" fill="currentColor"/><path d="M6 16h10v4H6z" fill="currentColor"/></svg>148 </div>149 <div class="step">150 <!-- cart -->151 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M3 4h2l2 10h10l2-6H7" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="9" cy="20" r="2" fill="currentColor"/><circle cx="17" cy="20" r="2" fill="currentColor"/></svg>152 </div>153 </div>154 <div class="steps-track"></div>155 <div class="steps-dots">156 <div class="dot green"></div>157 <div class="dot pink"></div>158 </div>159 </div>160 <div class="divider"></div>161 162 <!-- Page content -->163 <div class="content">164 <div class="section-title">Contact info</div>165 166 <div class="field-grey">167 <div class="label">First name</div>168 <div class="value">Fabio</div>169 </div>170 171 <div class="field-grey">172 <div class="label">Surname</div>173 <div class="value">Teixeira</div>174 </div>175 176 <div class="field-grey right-icon">177 <div class="label">Email</div>178 <div class="value muted">fabioteixeira00123@gmail.com</div>179 <div class="lock">180 <svg width="48" height="48" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2" fill="#4c4c4c"/><path d="M8 10V7a4 4 0 0 1 8 0v3" fill="none" stroke="#4c4c4c" stroke-width="2"/></svg>181 </div>182 </div>183 184 <div class="hint">We’ll send your booking confirmation to this address.</div>185 186 <div class="row">187 <div class="col">188 <div class="input error dropdown">189 <div class="label">Code</div>190 <div class="placeholder">Code</div>191 <svg class="caret" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="#6b6e75"/></svg>192 </div>193 <div class="error-text">This field can't be empty</div>194 </div>195 <div class="col">196 <div class="input error">197 <div class="label">Phone number</div>198 <div class="placeholder">Phone number</div>199 </div>200 <div class="error-text">This field can't be empty</div>201 </div>202 </div>203 204 <div class="input error" style="margin-top:8px;">205 <div class="placeholder" style="font-size:42px;">Street name</div>206 </div>207 <div class="error-text">This field can't be empty</div>208 209 <div class="input error" style="margin-top:8px;">210 <div class="placeholder" style="font-size:42px;">Street number</div>211 </div>212 <div class="error-text">This field can't be empty</div>213 214 <div class="row">215 <div class="col">216 <div class="input error">217 <div class="placeholder" style="font-size:42px;">Postcode</div>218 </div>219 <div class="error-text">This field can't be empty</div>220 </div>221 <div class="col">222 <div class="input error">223 <div class="placeholder" style="font-size:42px;">City</div>224 </div>225 <div class="error-text">This field can't be empty</div>226 </div>227 </div>228 </div>229 230 <!-- Bottom sheet -->231 <div class="bottom">232 <div class="sheet-handle">233 <span>Trip details</span>234 <span class="chev">235 <svg width="16" height="16" viewBox="0 0 24 24"><path d="M6 14l6-6 6 6" fill="none" stroke="#777" stroke-width="2"/></svg>236 </span>237 </div>238 <div class="price">239 <div class="big">€387.00 / Traveller</div>240 <div class="sub">€774.00 total</div>241 </div>242 <button class="cta">Continue</button>243 </div>244 245 <!-- Gesture bar -->246 <div class="gesture"></div>247 248</div>249</body>250</html>