GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Trip Details UI</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; position: relative; overflow: hidden;11 background: #F3F5FA;12 color: #1E2A57;13 }14 .status-bar {15 position: absolute; top: 0; left: 0; right: 0;16 height: 110px; background: #162B63; color: #E9EFFB;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; font-size: 34px;19 }20 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }21 .appbar {22 position: absolute; top: 110px; left: 0; right: 0;23 background: #162B63; color: #FFFFFF; padding: 30px 40px 44px 40px;24 }25 .appbar .row { display: flex; align-items: center; justify-content: space-between; }26 .appbar-title { font-weight: 800; font-size: 48px; margin-top: 18px; }27 .appbar-sub { font-size: 30px; opacity: 0.9; margin-top: 8px; }28 .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 32px; }29 .card-time {30 position: absolute; top: 310px; left: 40px; width: 1000px;31 background: #FFFFFF; border-radius: 18px;32 box-shadow: 0 12px 24px rgba(20,35,80,0.18);33 padding: 34px 32px; display: flex; align-items: center; gap: 24px;34 color: #1D2854;35 }36 .time-text { font-size: 38px; font-weight: 700; color: #2D345F; }37 .loc-text { font-size: 34px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }38 .content {39 position: absolute; top: 470px; left: 40px; right: 40px; padding-bottom: 220px;40 }41 .info-box {42 background: #EAF2FF; border: 2px solid #8AA7E5; border-radius: 20px;43 padding: 26px 28px; display: flex; gap: 22px; align-items: flex-start; color: #2A3B7A;44 }45 .info-title { font-size: 36px; font-weight: 800; margin-bottom: 12px; }46 .info-desc { font-size: 32px; line-height: 1.45; color: #34416D; }47 .section-title { font-size: 42px; font-weight: 800; margin: 40px 0 22px 0; color: #17254F; }48 .fare-row { display: flex; gap: 26px; }49 .fare-card {50 flex: 1; min-height: 220px; border-radius: 24px; padding: 32px;51 border: 2px solid #9EB6E6; background: #DDE9FF; color: #243769;52 }53 .fare-card .label { font-size: 38px; font-weight: 800; margin-bottom: 14px; }54 .fare-card .price { font-size: 36px; font-weight: 700; color: #213763; }55 .fare-card.disabled {56 border-color: #E3E6EF; background: #F5F7FB; color: #B9C1D3;57 }58 .fare-subtitle { font-size: 38px; font-weight: 800; margin: 36px 0 12px 0; }59 .fare-terms { font-size: 32px; line-height: 1.55; color: #3D4A74; }60 .summary {61 margin-top: 40px; border-top: 2px solid #E0E4EF; border-bottom: 2px solid #E0E4EF;62 padding: 28px 8px; color: #2B3969;63 }64 .summary-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; }65 .summary-row .left { font-size: 34px; }66 .summary-row .right { font-size: 34px; }67 .summary-row.total .left { font-size: 36px; font-weight: 800; }68 .summary-row.total .right { font-size: 44px; font-weight: 800; color: #173063; }69 .cta-area { position: absolute; left: 0; right: 0; bottom: 140px; padding: 0 40px; }70 .cta-btn {71 width: 100%; height: 120px; border-radius: 26px; background: #E86F66; color: #FFFFFF;72 display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800;73 box-shadow: 0 8px 18px rgba(232,111,102,0.35);74 }75 .bottom-bar {76 position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: #132654;77 display: flex; align-items: center; justify-content: center;78 }79 .gesture {80 width: 280px; height: 12px; background: #D6DAE5; border-radius: 8px; opacity: 0.8;81 }82 /* simple helper */83 .muted { opacity: 0.85; }84 svg { display: block; }85</style>86</head>87<body>88<div id="render-target">89 90 <div class="status-bar">91 <div class="status-left">92 <div>9:28</div>93 <div style="width:28px; height:28px; border-radius:14px; border:2px solid #DCE6FF;"></div>94 <div style="width:28px; height:28px; border-radius:14px; border:2px solid #DCE6FF;"></div>95 <div style="width:28px; height:28px; border-radius:14px; border:2px solid #DCE6FF;"></div>96 <div style="width:10px; height:10px; background:#DCE6FF; border-radius:5px;"></div>97 </div>98 <div class="status-right">99 <div style="width:28px; height:28px; border:2px solid #DCE6FF; border-radius:14px;"></div>100 <div style="width:28px; height:28px; border:2px solid #DCE6FF; border-radius:6px;"></div>101 <div>100%</div>102 </div>103 </div>104 105 <div class="appbar">106 <div class="row">107 <div class="icon-btn">108 <svg viewBox="0 0 24 24" width="44" height="44">109 <path d="M15 4l-8 8 8 8" stroke="#ffffff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>110 </svg>111 </div>112 <div class="icon-btn">113 <svg viewBox="0 0 24 24" width="44" height="44">114 <circle cx="5" cy="12" r="2.5" fill="#FFFFFF"/>115 <circle cx="19" cy="5" r="2.5" fill="#FFFFFF"/>116 <circle cx="19" cy="19" r="2.5" fill="#FFFFFF"/>117 <path d="M7 12 L16 7" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>118 <path d="M7 12 L16 17" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/>119 </svg>120 </div>121 </div>122 <div class="appbar-title">New York, NY › New Hyde Park, NY</div>123 <div class="appbar-sub">Wed, Nov 22, 1 passenger</div>124 </div>125 126 <div class="card-time">127 <div class="time-text">3:35 PM</div>128 <div>129 <svg viewBox="0 0 24 24" width="42" height="42">130 <path d="M12 2c-4.4 0-8 3.6-8 8 0 5.6 8 12 8 12s8-6.4 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#E86F66"/>131 </svg>132 </div>133 <div class="loc-text">New York, Hillside Ave / 219...</div>134 </div>135 136 <div class="content">137 <div class="info-box">138 <div>139 <svg viewBox="0 0 24 24" width="48" height="48">140 <circle cx="12" cy="12" r="10" fill="#8AA7E5"/>141 <rect x="11" y="6" width="2" height="8" rx="1" fill="#FFFFFF"/>142 <rect x="11" y="16" width="2" height="2" rx="1" fill="#FFFFFF"/>143 </svg>144 </div>145 <div>146 <div class="info-title">Journey information</div>147 <div class="info-desc">148 This bus arrives at New York, Hillside Ave / 219th St (Queens Village), New York, NY, about 5 km from New Hyde Park, NY.149 </div>150 </div>151 </div>152 153 <div class="section-title">Fare conditions</div>154 155 <div class="fare-row">156 <div class="fare-card">157 <div class="label">Standard</div>158 <div class="price">+$0</div>159 </div>160 <div class="fare-card disabled">161 <div class="label" style="font-weight:700;">There is only 1 fare available for this journey</div>162 </div>163 </div>164 165 <div class="fare-subtitle">Fare terms</div>166 <div class="fare-terms">167 Standard<br>168 Ticket is only valid for the chosen bus/train. Ticket can be cancelled up to 30 days before departure for free.169 A fee of up to €5 will be charged when cancelling 15 minutes before departure. Ticket will be refunded as a coupon170 for the ticket price and will be valid for 12 months. Visit the Flixbus website for more information.171 </div>172 173 <div class="summary">174 <div class="summary-row">175 <div class="left">Tickets (1 passenger)</div>176 <div class="right">$12.99</div>177 </div>178 <div class="summary-row total">179 <div class="left">Total (taxes included)</div>180 <div class="right">$12.99</div>181 </div>182 </div>183 </div>184 185 <div class="cta-area">186 <div class="cta-btn">Go to Flixbus</div>187 </div>188 189 <div class="bottom-bar">190 <div class="gesture"></div>191 </div>192 193</div>194</body>195</html>