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>Shared Itinerary Modal</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f6f6f6;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13 color: #111;14 }15 /* Top teal bar */16 .topbar {17 position: relative;18 height: 140px;19 background: #008a96;20 color: #fff;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 40px;25 box-sizing: border-box;26 }27 .topbar .left-icons {28 display: flex; gap: 36px; align-items: center;29 }30 .topbar .cancel {31 font-size: 40px; font-weight: 500;32 }33 .icon {34 width: 64px; height: 64px;35 }36 .icon svg { width: 100%; height: 100%; }37 .icon path { stroke: #fff; stroke-width: 10; fill: none; stroke-linecap: round; stroke-linejoin: round; }38 39 /* Region notice bar */40 .region-bar {41 height: 90px;42 background: #0d3442;43 color: #dceaf0;44 display: flex; align-items: center; gap: 18px;45 padding: 0 40px; box-sizing: border-box;46 font-size: 34px;47 }48 .flag {49 width: 56px; height: 36px;50 background: #E0E0E0; border: 1px solid #BDBDBD;51 display: flex; justify-content: center; align-items: center; color: #757575;52 font-size: 20px;53 }54 .region-bar .go { color: #b7e2ea; margin-left: 8px; }55 .chev {56 width: 28px; height: 28px; display: inline-block;57 vertical-align: middle;58 }59 .chev svg { width: 100%; height: 100%; }60 .chev path { stroke: #b7e2ea; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }61 62 /* Site header (behind modal) */63 .brand-strip {64 height: 160px;65 background: #efefef;66 display: flex; align-items: center; justify-content: center;67 color: #12324a;68 }69 .brand-strip .x {70 font-weight: 900; font-size: 72px; color: #0e3a59; margin: 0 18px;71 }72 .brand-strip .text { font-size: 40px; letter-spacing: 0.2px; }73 74 /* Page content (behind modal) */75 .page-content {76 position: relative;77 background: #ffffff;78 padding: 60px 48px 160px;79 box-sizing: border-box;80 }81 .page-content h1 {82 font-size: 88px; margin: 40px 0 28px;83 color: #222; font-weight: 800;84 }85 .feature-row {86 display: flex; gap: 80px; color: #444; margin: 18px 0 40px;87 font-size: 36px; opacity: 0.92;88 }89 .price {90 margin-top: 40px; font-size: 40px; font-weight: 700; color: #333;91 }92 .book-btn {93 margin-top: 60px; width: 984px; height: 120px; background: #c54a2e; color: #fff;94 display: flex; align-items: center; justify-content: center; font-size: 46px;95 border-radius: 8px;96 }97 98 /* Dim overlay and modal */99 .overlay {100 position: absolute; left: 0; top: 390px; width: 1080px; height: 2010px;101 background: rgba(0,0,0,0.6);102 }103 .modal {104 position: absolute; left: 60px; top: 480px;105 width: 960px; background: #fff; border-radius: 16px;106 box-shadow: 0 20px 60px rgba(0,0,0,0.25);107 padding: 82px 80px 96px; box-sizing: border-box;108 }109 .modal .close {110 position: absolute; right: 36px; top: 36px; width: 64px; height: 64px;111 }112 .modal .close svg { width: 100%; height: 100%; }113 .modal .close path { stroke: #111; stroke-width: 10; stroke-linecap: round; }114 115 .modal .mini-brand {116 display: flex; align-items: center; justify-content: center;117 color: #0e3a59; margin-bottom: 40px;118 }119 .mini-brand .x { font-weight: 900; font-size: 60px; color: #0e3a59; margin: 0 14px; }120 .mini-brand .text { font-size: 36px; color: #0e3a59; }121 122 .modal .title {123 text-align: center; font-weight: 800; color: #1a1a1a;124 font-size: 82px; line-height: 1.18; margin: 30px 0 28px;125 }126 .modal .subtitle {127 text-align: center; font-size: 40px; color: #4a4a4a;128 }129 130 /* Bottom gesture bar (device) */131 .gesture {132 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);133 width: 360px; height: 12px; background: #ffffff; border-radius: 8px; opacity: 0.9;134 }135</style>136</head>137<body>138<div id="render-target">139 <!-- Top navigation bar -->140 <div class="topbar">141 <div class="left-icons">142 <div class="icon">143 <svg viewBox="0 0 100 100">144 <path d="M65 15 L35 50 L65 85"></path>145 </svg>146 </div>147 <div class="icon">148 <svg viewBox="0 0 100 100">149 <path d="M35 15 L65 50 L35 85"></path>150 </svg>151 </div>152 </div>153 <div class="cancel">Cancel</div>154 </div>155 156 <!-- Region banner -->157 <div class="region-bar">158 <span>Visiting from</span>159 <div class="flag">[IMG: India Flag]</div>160 <span>India?</span>161 <span class="go">Go to site</span>162 <span class="chev">163 <svg viewBox="0 0 20 20"><path d="M6 4 L14 10 L6 16"></path></svg>164 </span>165 </div>166 167 <!-- Site header (behind modal) -->168 <div class="brand-strip">169 <div class="text">Celebrity</div>170 <div class="x">X</div>171 <div class="text">Cruises</div>172 </div>173 174 <!-- Main page content (behind modal) -->175 <div class="page-content">176 <h1>Cruise Itinerary</h1>177 <div class="feature-row">178 <div>One Way</div>179 <div>12 Nights</div>180 <div>10 Ports</div>181 <div>3 Sea Days</div>182 </div>183 <div class="price">$1,999 USD • AVG PER PERSON</div>184 <div style="margin-top: 20px; color:#666; font-size:32px;">Taxes, fees and port expenses $249.90 USD</div>185 <div class="book-btn">BOOK NOW</div>186 </div>187 188 <!-- Dim overlay and modal card -->189 <div class="overlay"></div>190 <div class="modal">191 <div class="close">192 <svg viewBox="0 0 100 100">193 <path d="M20 20 L80 80 M80 20 L20 80"></path>194 </svg>195 </div>196 <div class="mini-brand">197 <div class="text">Celebrity</div>198 <div class="x">X</div>199 <div class="text">Cruises</div>200 </div>201 <div class="title">202 We've successfully<br>203 shared this itinerary<br>204 for you205 </div>206 <div class="subtitle">We hope to see you onboard</div>207 </div>208 209 <!-- Device gesture bar -->210 <div class="gesture"></div>211</div>212</body>213</html>