GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>My booking UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1f2937; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff;11 }12 13 /* Status bar */14 .status-bar {15 height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; color: #4b5563;16 font-size: 36px;17 }18 .status-icons { display: flex; gap: 28px; align-items: center; }19 .icon { width: 48px; height: 48px; }20 21 /* App bar */22 .app-bar {23 height: 120px; display: flex; align-items: center; justify-content: space-between;24 padding: 0 36px;25 }26 .app-left { display: flex; align-items: center; gap: 24px; }27 .title { font-size: 54px; font-weight: 600; }28 .app-right { display: flex; align-items: center; gap: 36px; }29 30 /* Content area */31 .content { padding: 24px 36px 320px; }32 .segment { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: start; column-gap: 10px; margin-top: 36px; }33 .city { font-size: 56px; font-weight: 700; }34 .arrow-center { display: flex; align-items: center; justify-content: center; margin-top: 10px; }35 .sub { color: #6b7280; font-size: 36px; margin-top: 10px; }36 .time { color: #0a65c2; font-size: 40px; margin-top: 6px; }37 .duration {38 display: inline-flex; align-items: center; gap: 16px;39 background: #f1f5f9; color: #475569; border-radius: 40px; padding: 12px 22px; font-size: 34px; margin-top: 12px;40 }41 42 .details-btn {43 margin: 40px 0 20px; height: 120px; border-radius: 24px; background: #e5eaee;44 display: flex; align-items: center; justify-content: center; color: #374151; font-size: 40px; font-weight: 600;45 }46 47 .section-title { font-size: 44px; font-weight: 800; margin-top: 30px; }48 .section-sub { font-size: 34px; color: #6b7280; margin-top: 10px; }49 50 /* Traveler cards */51 .traveler-card {52 margin-top: 24px; border: 6px solid #1973d1; border-radius: 28px; padding: 32px; display: flex; justify-content: space-between; align-items: center;53 box-shadow: 0 6px 12px rgba(25,115,209,0.15);54 }55 .trav-left { display: flex; gap: 26px; align-items: flex-start; }56 .check-circle {57 width: 64px; height: 64px; border-radius: 50%; background: #0b76e6; display: flex; align-items: center; justify-content: center;58 }59 .trav-info { display: flex; flex-direction: column; gap: 12px; }60 .trav-name { font-size: 44px; font-weight: 700; }61 .trav-date { font-size: 34px; color: #6b7280; }62 .chip {63 display: inline-flex; background: #eef2f6; color: #475569; border-radius: 24px; padding: 10px 18px; font-size: 32px; margin-left: 10px;64 }65 .edit-link { color: #0b76e6; font-size: 40px; font-weight: 600; }66 67 .add-traveler {68 margin-top: 34px; height: 120px; border-radius: 24px; background: #e6f4ef; display: flex; align-items: center; justify-content: center;69 color: #0b8a6e; font-size: 40px; font-weight: 700;70 }71 72 /* Bottom sheet */73 .bottom-sheet {74 position: absolute; left: 0; right: 0; bottom: 0;75 background: #ffffff; border-top-left-radius: 36px; border-top-right-radius: 36px;76 box-shadow: 0 -10px 20px rgba(0,0,0,0.08);77 padding: 30px 36px 40px;78 }79 .sheet-grabber { width: 180px; height: 18px; background: #e5eaee; border-radius: 10px; margin: 0 auto 30px; }80 .due-row { display: flex; justify-content: space-between; align-items: center; font-size: 40px; color: #374151; margin-bottom: 26px; }81 .amount { font-weight: 800; }82 .primary-btn {83 height: 120px; background: #0aa27b; color: #ffffff; border-radius: 24px; display: flex; align-items: center; justify-content: center;84 font-size: 44px; font-weight: 800;85 }86 87 /* Simple divider progress hint */88 .progress-bar {89 position: absolute; left: 24px; right: 24px; bottom: 280px; height: 10px; background: #e3f6ef; border-radius: 8px;90 }91 .progress-bar::after {92 content: ""; display: block; width: 140px; height: 10px; background: #0aa27b; border-radius: 8px;93 }94</style>95</head>96<body>97<div id="render-target">98 99 <!-- Status bar -->100 <div class="status-bar">101 <div>8:10</div>102 <div class="status-icons">103 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#000000" opacity="0.08"/><text x="5" y="16" font-size="12" fill="#000000">83°</text></svg>104 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 1 0 20a10 10 0 0 1 0-20zm1 5h-2v6l5 3 1-1-4-2V7z" fill="#4b5563"/></svg>105 <svg class="icon" viewBox="0 0 24 24"><path d="M4 16h16v2H4zm2-6h12v2H6zm3-6h6v2H9z" fill="#4b5563"/></svg>106 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4b5563"/><circle cx="12" cy="12" r="4" fill="#ffffff"/></svg>107 <svg class="icon" viewBox="0 0 24 24"><path d="M20 7v10l-3 2H7l-3-2V7l3-2h10z" fill="none" stroke="#4b5563" stroke-width="2"/></svg>108 <svg class="icon" viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2" fill="#4b5563"/><rect x="10" y="2" width="4" height="4" fill="#9ca3af"/></svg>109 </div>110 </div>111 112 <!-- App bar -->113 <div class="app-bar">114 <div class="app-left">115 <svg class="icon" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#111827" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>116 <div class="title">My booking</div>117 </div>118 <div class="app-right">119 <svg class="icon" viewBox="0 0 24 24">120 <circle cx="6" cy="6" r="3" fill="#111827"/>121 <circle cx="18" cy="12" r="3" fill="#111827"/>122 <circle cx="6" cy="18" r="3" fill="#111827"/>123 <path d="M8.7 7.1l7.0 3.6M8.7 16.9l7.0-3.6" stroke="#111827" stroke-width="2" fill="none"/>124 </svg>125 <svg class="icon" viewBox="0 0 24 24">126 <circle cx="12" cy="12" r="10" stroke="#111827" stroke-width="2" fill="none"/>127 <text x="8" y="17" font-size="12" fill="#111827">?</text>128 </svg>129 </div>130 </div>131 132 <div class="content">133 <!-- First segment -->134 <div class="segment">135 <div>136 <div class="city">Paris</div>137 <div class="sub">Fri, Oct 20</div>138 <div class="time">8:00 AM</div>139 </div>140 <div class="arrow-center">141 <svg width="72" height="72" viewBox="0 0 24 24">142 <path d="M4 12h12" stroke="#111827" stroke-width="2" fill="none" stroke-linecap="round"/>143 <path d="M14 7l5 5-5 5" stroke="#111827" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>144 </svg>145 </div>146 <div style="text-align: right;">147 <div class="city">Rome</div>148 <div class="sub">Fri, Oct 20</div>149 <div class="time">10:00 AM</div>150 </div>151 </div>152 <div style="display:flex; gap:20px; align-items:center; margin: 16px 0 10px 0;">153 <div style="flex:1;"></div>154 <div class="duration">155 <svg width="40" height="40" viewBox="0 0 24 24">156 <circle cx="12" cy="12" r="9" stroke="#475569" stroke-width="2" fill="none"/>157 <path d="M12 6v6l4 2" stroke="#475569" stroke-width="2" fill="none" stroke-linecap="round"/>158 </svg>159 2h160 </div>161 <div style="flex:1;"></div>162 </div>163 164 <!-- Second segment -->165 <div class="segment">166 <div>167 <div class="city">Rome</div>168 <div class="sub">Sun, Oct 22</div>169 <div class="time">6:50 AM</div>170 </div>171 <div class="arrow-center">172 <svg width="72" height="72" viewBox="0 0 24 24">173 <path d="M4 12h12" stroke="#111827" stroke-width="2" fill="none" stroke-linecap="round"/>174 <path d="M14 7l5 5-5 5" stroke="#111827" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175 </svg>176 </div>177 <div style="text-align: right;">178 <div class="city">Paris</div>179 <div class="sub">Sun, Oct 22</div>180 <div class="time">9:05 AM</div>181 </div>182 </div>183 <div style="display:flex; gap:20px; align-items:center; margin: 16px 0 10px 0;">184 <div style="flex:1;"></div>185 <div class="duration">186 <svg width="40" height="40" viewBox="0 0 24 24">187 <circle cx="12" cy="12" r="9" stroke="#475569" stroke-width="2" fill="none"/>188 <path d="M12 6v6l4 2" stroke="#475569" stroke-width="2" fill="none" stroke-linecap="round"/>189 </svg>190 2h 15m191 </div>192 <div style="flex:1;"></div>193 </div>194 195 <div class="details-btn">Show details</div>196 197 <div class="section-title">Who’s traveling?</div>198 <div class="section-sub">Select who’s traveling or add a new traveler.</div>199 200 <!-- Traveler 1 -->201 <div class="traveler-card">202 <div class="trav-left">203 <div class="check-circle">204 <svg width="40" height="40" viewBox="0 0 24 24">205 <path d="M6 12l4 4 8-8" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206 </svg>207 </div>208 <div class="trav-info">209 <div class="trav-name">Thomas Blanc</div>210 <div>211 <span class="trav-date">Sep 10, 1978</span>212 <span class="chip">Account owner</span>213 </div>214 </div>215 </div>216 <div class="edit-link">Edit</div>217 </div>218 219 <!-- Traveler 2 -->220 <div class="traveler-card">221 <div class="trav-left">222 <div class="check-circle">223 <svg width="40" height="40" viewBox="0 0 24 24">224 <path d="M6 12l4 4 8-8" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225 </svg>226 </div>227 <div class="trav-info">228 <div class="trav-name">Claire Blanc</div>229 <div class="trav-date">May 12, 1979</div>230 </div>231 </div>232 <div class="edit-link">Edit</div>233 </div>234 235 <!-- Traveler 3 -->236 <div class="traveler-card">237 <div class="trav-left">238 <div class="check-circle">239 <svg width="40" height="40" viewBox="0 0 24 24">240 <path d="M6 12l4 4 8-8" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>241 </svg>242 </div>243 <div class="trav-info">244 <div class="trav-name">Marc Blanc</div>245 <div class="trav-date">Mar 8, 2005</div>246 </div>247 </div>248 <div class="edit-link">Edit</div>249 </div>250 251 <div class="add-traveler">Add new traveler</div>252 </div>253 254 <div class="progress-bar"></div>255 256 <!-- Bottom sheet -->257 <div class="bottom-sheet">258 <div class="sheet-grabber"></div>259 <div class="due-row">260 <div>Total due</div>261 <div class="amount">CHF915.80</div>262 </div>263 <div class="primary-btn">Continue</div>264 </div>265 266</div>267</body>268</html>