GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>ACL American Eagle - Itineraries</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#0f3f68;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.35);border-radius:18px;11 }12 13 /* Status bar */14 .status-bar{15 height:90px;background:#123f66;display:flex;align-items:center;justify-content:space-between;16 padding:0 36px;font-size:36px;letter-spacing:0.5px;17 }18 .status-icons span{margin-left:22px;opacity:0.85;}19 /* App header */20 .header{21 background:#194f82;padding:24px 36px 16px 36px;border-bottom:1px solid rgba(255,255,255,0.15);22 }23 .title-row{display:flex;align-items:center;justify-content:space-between;}24 .app-title{font-size:54px;font-weight:700;letter-spacing:0.3px;}25 .close-btn{26 width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,0.6);27 display:flex;align-items:center;justify-content:center;font-size:42px;opacity:0.9;28 }29 /* Tabs */30 .tabs{display:flex;gap:48px;margin-top:18px;font-size:36px;opacity:0.95;}31 .tab{padding:20px 0;color:#d5e6f7;}32 .tab.active{color:#ffffff;position:relative;font-weight:700;}33 .tab.active::after{34 content:"";position:absolute;left:0;bottom:-8px;width:100%;height:8px;background:#f59d2a;border-radius:4px;35 }36 37 /* Content area */38 .content{39 background:#f4f7fb;color:#1d2b3a;height:2010px;overflow:hidden; /* below header */40 }41 .year-tag{42 text-align:center;font-size:54px;font-weight:800;color:#ffffff;background:#1b4f82;padding:24px 0;43 border-top:1px solid rgba(255,255,255,0.12);44 }45 46 /* List rows */47 .list{padding:0 0 28px 0;}48 .row{49 display:flex;background:#ffffff;border-bottom:1px solid #d9e2ee;50 }51 .date-col{52 width:180px;background:#2b6aa4;color:#ffffff;display:flex;flex-direction:column;align-items:center;53 justify-content:center;padding:22px 0;54 }55 .date-col .day{font-size:58px;font-weight:800;line-height:1;}56 .date-col .mon{font-size:34px;margin-top:6px;}57 .item-body{flex:1;padding:26px 32px;position:relative;}58 .item-title{font-size:44px;font-weight:800;color:#0f2740;margin-bottom:12px;}59 .item-sub{font-size:32px;color:#627287;}60 .caret{61 position:absolute;right:32px;top:32px;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:18px solid #7a8aa3;62 }63 64 /* Expanded itinerary block */65 .expanded{66 background:#fff8d9;border-top:1px solid #e6d79e;padding:16px 0 24px 0;67 }68 .table{69 margin:16px 24px;border:1px solid #dcd2a2;border-radius:8px;overflow:hidden;background:#fffef3;70 }71 .table-header{72 display:flex;background:#e6ddad;color:#0f2740;font-weight:800;73 }74 .th{width:240px;padding:22px 18px;border-right:1px solid #dcd2a2;font-size:34px;}75 .th.port{flex:1;border-right:none;}76 .table-row{display:flex;border-top:1px solid #efe7bf;background:#fffef6;}77 .td{width:240px;padding:24px 18px;font-size:34px;color:#1d2b3a;}78 .td.port{flex:1;color:#0f2740;}79 .flag, .anchor, .depart, .arrive{margin-right:16px;}80 .flag{font-size:36px}81 .anchor{font-size:36px}82 .depart{font-size:36px}83 .arrive{font-size:36px}84 .hotel-link{color:#1b66c9;text-decoration:underline;margin-left:10px;}85 86 /* Secondary rows (closed) */87 .row.secondary .item-title{font-weight:800;color:#102b49;}88 .row.secondary .item-sub{color:#6f7f94;}89 .row.secondary .caret{border-top-color:#a3b0c5;}90 91 /* Bottom banner/ad */92 .ad{93 position:absolute;left:0;bottom:0;width:100%;background:#ffffff;border-top:1px solid #d9e2ee;94 padding:24px 28px;display:flex;align-items:center;gap:26px;color:#2c3e52;95 }96 .check{97 width:40px;height:40px;border-radius:50%;background:#2bb673;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;98 }99 .ad .text{font-size:40px;line-height:1.35;}100 .ad .text div{margin-bottom:6px;}101 .logo{102 width:150px;height:80px;background:#E0E0E0;border:1px solid #BDBDBD;color:#757575;103 display:flex;align-items:center;justify-content:center;margin-right:auto;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status Bar -->111 <div class="status-bar">112 <div>10:48</div>113 <div class="status-icons">114 <span>🅱</span>115 <span>📶</span>116 <span>⛯</span>117 <span>•</span>118 </div>119 </div>120 121 <!-- App Header + Tabs -->122 <div class="header">123 <div class="title-row">124 <div class="app-title">ACL American Eagle</div>125 <div class="close-btn">✕</div>126 </div>127 <div class="tabs">128 <div class="tab">REVIEW</div>129 <div class="tab active">ITINERARIES</div>130 <div class="tab">SPECS</div>131 <div class="tab">DECKPLANS</div>132 </div>133 </div>134 135 <!-- Content -->136 <div class="content">137 <div class="year-tag">2023</div>138 139 <div class="list">140 141 <!-- Row: Oct 20 -->142 <div class="row">143 <div class="date-col">144 <div class="day">20</div>145 <div class="mon">Oct</div>146 </div>147 <div class="item-body">148 <div class="item-title">One-way from Baltimore to Jacksonville</div>149 <div class="item-sub">📅 20 Oct, 2023 - 03 Nov, 2023 (14 days) from $11655</div>150 <div class="caret"></div>151 </div>152 </div>153 154 <!-- Row: Nov 03 expanded -->155 <div class="row">156 <div class="date-col">157 <div class="day">03</div>158 <div class="mon">Nov</div>159 </div>160 <div class="item-body">161 <div class="item-title">One-way from Amelia Island FL to Charleston SC</div>162 <div class="item-sub">📅 03 Nov, 2023 - 09 Nov, 2023 (6 days) from $6350</div>163 <div class="caret" style="transform:rotate(180deg); top:34px;"></div>164 165 <!-- Expanded itinerary details -->166 <div class="expanded">167 <div class="table">168 <div class="table-header">169 <div class="th">Date /<br>Time</div>170 <div class="th port">Port</div>171 </div>172 173 <div class="table-row">174 <div class="td">03 Nov</div>175 <div class="td port"><span class="depart">🏁</span><span class="flag">🇺🇸</span><b>Departing</b> from <b>Amelia Island Florida, Fernandina Beach</b><span class="hotel-link">hotels</span></div>176 </div>177 178 <div class="table-row">179 <div class="td">04 Nov</div>180 <div class="td port"><span class="anchor">⚓</span><span class="flag">🇺🇸</span>Jekyll Island GA, Georgia</div>181 </div>182 183 <div class="table-row">184 <div class="td">04 Nov</div>185 <div class="td port"><span class="anchor">⚓</span><span class="flag">🇺🇸</span>St Simons Island GA, Georgia</div>186 </div>187 188 <div class="table-row">189 <div class="td">05 Nov</div>190 <div class="td port"><span class="anchor">⚓</span>coastal cruising</div>191 </div>192 193 <div class="table-row">194 <div class="td">06 Nov</div>195 <div class="td port"><span class="anchor">⚓</span><span class="flag">🇺🇸</span>Savannah GA, Georgia</div>196 </div>197 198 <div class="table-row">199 <div class="td">07 Nov</div>200 <div class="td port"><span class="anchor">⚓</span><span class="flag">🇺🇸</span>Hilton Head Island SC, South Carolina</div>201 </div>202 203 <div class="table-row">204 <div class="td">08 Nov</div>205 <div class="td port"><span class="anchor">⚓</span><span class="flag">🇺🇸</span>Beaufort NC, North Carolina</div>206 </div>207 208 <div class="table-row">209 <div class="td">09 Nov</div>210 <div class="td port"><span class="anchor">⚓</span><span class="flag">🇺🇸</span>Charleston SC, South Carolina</div>211 </div>212 213 <div class="table-row">214 <div class="td">09 Nov</div>215 <div class="td port"><span class="arrive">🏁</span><b>Arriving</b> in <b>Charleston SC, South Carolina</b><span class="hotel-link">hotels</span></div>216 </div>217 </div>218 </div>219 </div>220 </div>221 222 <!-- Row: Nov 10 -->223 <div class="row secondary">224 <div class="date-col">225 <div class="day">10</div>226 <div class="mon">Nov</div>227 </div>228 <div class="item-body">229 <div class="item-title">One-way from Charleston SC to Jacksonville</div>230 <div class="item-sub">📅 10 Nov, 2023 - 17 Nov, 2023 (7 days) from $6200</div>231 <div class="caret"></div>232 </div>233 </div>234 235 <!-- Row: Nov 17 -->236 <div class="row secondary">237 <div class="date-col">238 <div class="day">17</div>239 <div class="mon">Nov</div>240 </div>241 <div class="item-body">242 <div class="item-title">One-way from Amelia Island FL to Charleston SC</div>243 <div class="item-sub">📅 17 Nov, 2023 - 23 Nov, 2023 (6 days) from $5950</div>244 <div class="caret"></div>245 </div>246 </div>247 248 </div>249 </div>250 251 <!-- Bottom banner -->252 <div class="ad">253 <div class="logo">[IMG: Vendor Logo]</div>254 <div class="check">✓</div>255 <div class="text">256 <div>In-store shopping</div>257 <div>In-store pickup</div>258 </div>259 <div style="margin-left:auto;width:84px;height:84px;background:#e8f0fe;border-radius:12px;border:1px solid #c8d7f0;display:flex;align-items:center;justify-content:center;color:#3971d6;">↗</div>260 </div>261 262</div>263</body>264</html>