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>Itinerary - Day 1</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Segoe UI", Arial, sans-serif;13 color: #fff;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: linear-gradient(#3f3a4a, #3a3544 60%, #332f3d);21 }22 23 /* Top navigation bar */24 .topbar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 140px;30 background: #008fa2; /* teal */31 display: flex;32 align-items: center;33 padding: 0 48px;34 box-sizing: border-box;35 }36 .topbar .left-icons {37 display: flex;38 gap: 40px;39 }40 .topbar svg {41 opacity: 0.7;42 }43 .topbar .cancel {44 margin-left: auto;45 font-size: 44px;46 color: #ffffff;47 }48 49 /* Hero section */50 .hero {51 position: absolute;52 top: 140px;53 left: 0;54 width: 100%;55 height: 1050px;56 background: linear-gradient(to bottom, rgba(48,42,57,0.9), rgba(48,42,57,0.6));57 }58 59 .day-title {60 position: absolute;61 left: 72px;62 top: 120px;63 font-size: 96px;64 font-weight: 600;65 letter-spacing: 2px;66 color: #ffffff;67 }68 69 .close-pill {70 position: absolute;71 right: 72px;72 top: 98px;73 background: #0f0f10;74 color: #ffffff;75 border: 4px solid #ffffff;76 border-radius: 999px;77 padding: 18px 34px;78 font-size: 40px;79 display: inline-flex;80 align-items: center;81 gap: 20px;82 box-shadow: 0 4px 8px rgba(0,0,0,0.25);83 }84 .close-pill .x {85 width: 36px;86 height: 36px;87 border-radius: 50%;88 background: #1c1c1e;89 display: inline-flex;90 align-items: center;91 justify-content: center;92 font-size: 28px;93 line-height: 1;94 }95 96 .day-next {97 position: absolute;98 right: 92px;99 top: 210px;100 font-size: 44px;101 font-weight: 700;102 letter-spacing: 4px;103 color: #ffffff;104 text-transform: uppercase;105 display: inline-flex;106 align-items: center;107 gap: 18px;108 opacity: 0.95;109 }110 .day-next svg {111 width: 34px;112 height: 34px;113 }114 115 /* Pin icon and destination details */116 .pin {117 position: absolute;118 top: 320px;119 left: 0;120 width: 100%;121 display: flex;122 justify-content: center;123 }124 .destination {125 position: absolute;126 top: 430px;127 width: 100%;128 text-align: center;129 font-size: 72px;130 font-weight: 700;131 letter-spacing: 1px;132 color: #ffffff;133 }134 .date {135 position: absolute;136 top: 570px;137 width: 100%;138 text-align: center;139 font-size: 52px;140 color: rgba(255,255,255,0.9);141 letter-spacing: 0.5px;142 }143 .depart {144 position: absolute;145 top: 670px;146 width: 100%;147 text-align: center;148 font-size: 52px;149 color: rgba(255,255,255,0.95);150 letter-spacing: 0.5px;151 }152 153 /* Image card */154 .img-card {155 position: absolute;156 left: 30px;157 top: 980px;158 width: 1020px;159 height: 700px;160 background: #E0E0E0;161 border: 1px solid #BDBDBD;162 border-radius: 8px;163 display: flex;164 align-items: center;165 justify-content: center;166 color: #757575;167 font-size: 42px;168 box-shadow: 0 8px 18px rgba(0,0,0,0.35);169 overflow: hidden;170 }171 .img-card .chip {172 position: absolute;173 top: 20px;174 right: 20px;175 background: rgba(32,32,32,0.85);176 color: #fff;177 padding: 14px 22px;178 border-radius: 30px;179 font-size: 36px;180 }181 .img-card .circle-btn {182 position: absolute;183 top: 50%;184 transform: translateY(-50%);185 width: 110px;186 height: 110px;187 border-radius: 55px;188 background: #ffffff;189 box-shadow: 0 6px 16px rgba(0,0,0,0.35);190 display: flex;191 align-items: center;192 justify-content: center;193 }194 .img-card .prev {195 left: 22px;196 }197 .img-card .next {198 right: 22px;199 }200 .safe-area {201 position: absolute;202 bottom: 46px;203 left: 360px;204 width: 360px;205 height: 16px;206 background: rgba(255,255,255,0.9);207 border-radius: 10px;208 opacity: 0.85;209 }210</style>211</head>212<body>213<div id="render-target">214 <!-- Top Bar -->215 <div class="topbar">216 <div class="left-icons">217 <svg width="72" height="72" viewBox="0 0 48 48" fill="none">218 <path d="M30 12 L18 24 L30 36" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>219 </svg>220 <svg width="72" height="72" viewBox="0 0 48 48" fill="none">221 <path d="M18 12 L30 24 L18 36" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>222 </svg>223 </div>224 <div class="cancel">Cancel</div>225 </div>226 227 <!-- Hero content -->228 <div class="hero"></div>229 230 <div class="day-title">Day 1</div>231 232 <div class="close-pill">233 <span class="x">×</span>234 <span>CLOSE</span>235 </div>236 237 <div class="day-next">238 <span>DAY 2</span>239 <svg viewBox="0 0 24 24" fill="none">240 <path d="M8 5 L16 12 L8 19" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>241 </svg>242 </div>243 244 <div class="pin">245 <svg width="120" height="120" viewBox="0 0 48 48" fill="none">246 <path d="M24 4C16 4 10 10 10 18c0 10 9 18 14 26 5-8 14-16 14-26 0-8-6-14-14-14z" fill="#ffffff"/>247 <circle cx="24" cy="18" r="5" fill="#3f3a4a"/>248 </svg>249 </div>250 251 <div class="destination">Amsterdam, Netherlands</div>252 <div class="date">Saturday, September 2, 2023</div>253 <div class="depart">Departs: 3:30PM</div>254 255 <!-- Image card -->256 <div class="img-card">257 <div class="chip">1/3</div>258 <div>[IMG: Amsterdam city photo]</div>259 <div class="circle-btn prev">260 <svg width="52" height="52" viewBox="0 0 48 48" fill="none">261 <path d="M30 12 L18 24 L30 36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>262 </svg>263 </div>264 <div class="circle-btn next">265 <svg width="52" height="52" viewBox="0 0 48 48" fill="none">266 <path d="M18 12 L30 24 L18 36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>267 </svg>268 </div>269 </div>270 271 <!-- Bottom safe area indicator -->272 <div class="safe-area"></div>273</div>274</body>275</html>