GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Trip to Honolulu UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #111; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #ffffff;12 border-radius: 0;13 box-shadow: none;14 }15 16 /* System status bar */17 .system-bar {18 position: absolute; top: 0; left: 0; width: 100%; height: 130px;19 background: #fff;20 display: flex; align-items: center; justify-content: space-between;21 padding: 0 40px;22 box-sizing: border-box;23 }24 .system-bar .time { font-weight: 600; font-size: 42px; color: #444; }25 .system-icons { display: flex; align-items: center; gap: 26px; }26 .sys-icon { width: 44px; height: 44px; }27 /* simple wifi + battery */28 .wifi { }29 .battery { }30 31 /* Hero header */32 .hero {33 position: absolute; top: 130px; left: 0; width: 100%; height: 540px;34 background: linear-gradient(180deg, #e7e2dc 0%, #0d0d0d 80%, #000 100%);35 overflow: hidden;36 }37 /* decorative blobs to mimic curved shapes */38 .blob-yellow {39 position: absolute; right: -120px; top: -70px;40 width: 520px; height: 520px; background: linear-gradient(180deg,#f2b500,#3c2a00);41 border-radius: 60% 40% 60% 40%;42 opacity: 0.95;43 }44 .blob-dark {45 position: absolute; right: -60px; bottom: -160px;46 width: 520px; height: 520px; background: radial-gradient(circle at 40% 40%, #1a1200, #000);47 border-radius: 50%;48 opacity: 0.9;49 }50 51 .hero .back-btn, .hero .gear-btn {52 position: absolute; top: 36px; width: 96px; height: 96px; border-radius: 48px;53 background: #ffffff; display: flex; align-items: center; justify-content: center;54 box-shadow: 0 6px 16px rgba(0,0,0,0.2);55 }56 .hero .back-btn { left: 32px; }57 .hero .gear-btn { right: 32px; }58 .hero svg { width: 42px; height: 42px; }59 60 .hero .title {61 position: absolute; left: 60px; top: 200px; color: #fff;62 font-size: 72px; font-weight: 800; letter-spacing: 0.2px;63 }64 65 .invite-wrap {66 position: absolute; left: 60px; top: 380px; display: flex; align-items: center; gap: 20px;67 }68 .avatar {69 width: 110px; height: 110px; border-radius: 55px;70 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;71 color: #757575; font-size: 24px;72 box-shadow: 0 4px 10px rgba(0,0,0,0.25);73 }74 .invite-pill {75 height: 110px; padding: 0 34px; background: #fff; border: 2px solid #e9e9e9;76 border-radius: 56px; display: flex; align-items: center; gap: 22px;77 font-size: 38px; font-weight: 600; color: #111;78 box-shadow: 0 10px 20px rgba(0,0,0,0.25);79 }80 .invite-pill svg { width: 48px; height: 48px; }81 82 /* Tabs */83 .tabs {84 position: absolute; top: 670px; left: 0; width: 100%; height: 140px; background: #fff;85 display: flex; align-items: flex-end; padding: 0 48px 24px; box-sizing: border-box;86 border-bottom: 1px solid #e6e6e6;87 gap: 46px;88 }89 .tab {90 font-size: 44px; font-weight: 700; color: #6a6a6a;91 }92 .tab.active { color: #111; position: relative; }93 .tab.active::after {94 content: ""; position: absolute; left: 0; bottom: -26px; width: 120px; height: 8px; background: #111; border-radius: 4px;95 }96 97 /* List header */98 .list-header {99 position: absolute; top: 810px; left: 0; width: 100%; height: 160px;100 background: #fff; display: flex; align-items: center; justify-content: space-between;101 padding: 0 48px; box-sizing: border-box; border-bottom: 1px solid #ededed;102 }103 .items-count { font-size: 46px; font-weight: 700; color: #111; }104 .more-btn {105 width: 250px; height: 110px; border: none; border-radius: 60px; background: #000;106 color: #fff; font-size: 42px; font-weight: 700; box-shadow: 0 6px 12px rgba(0,0,0,0.2);107 }108 109 /* Empty state */110 .empty-state {111 position: absolute; top: 1130px; left: 0; width: 100%; text-align: center;112 padding: 0 120px; box-sizing: border-box;113 }114 .empty-state .message {115 font-size: 44px; line-height: 1.4; color: #555; margin: 0 0 60px;116 }117 .outline-btn {118 width: 560px; height: 120px; border-radius: 64px; border: 6px solid #111; background: #fff;119 font-size: 42px; font-weight: 800; color: #111;120 }121 122 /* Bottom nav */123 .bottom-nav {124 position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: #fff;125 border-top: 1px solid #e8e8e8;126 display: flex; align-items: center; justify-content: space-around;127 }128 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 18%; }129 .nav-icon { width: 56px; height: 56px; }130 .nav-label { font-size: 34px; color: #777; font-weight: 600; }131 .nav-item.active .nav-label { color: #000; }132 .nav-item.active .nav-icon path { stroke: #000; fill: none; }133 .active-indicator {134 position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%);135 width: 180px; height: 10px; background: #29e0b0; border-radius: 6px;136 }137 138 /* Gesture / home indicator */139 .home-indicator {140 position: absolute; bottom: 210px; left: 50%; transform: translateX(-50%);141 width: 320px; height: 14px; background: #c9c9c9; border-radius: 8px;142 }143</style>144</head>145<body>146<div id="render-target">147 148 <!-- Status bar -->149 <div class="system-bar">150 <div class="time">12:59</div>151 <div class="system-icons">152 <svg class="sys-icon wifi" viewBox="0 0 24 24">153 <path d="M12 18.5c.7 0 1.3.6 1.3 1.3s-.6 1.3-1.3 1.3-1.3-.6-1.3-1.3.6-1.3 1.3-1.3z" fill="#555"/>154 <path d="M3.5 9.5C7.8 5.9 16.2 5.9 20.5 9.5" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>155 <path d="M6.2 12.3c3.3-2.8 8.3-2.8 11.6 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>156 <path d="M9.3 15c1.6-1.4 3.8-1.4 5.4 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>157 </svg>158 <svg class="sys-icon battery" viewBox="0 0 26 24">159 <rect x="1" y="5" width="18" height="14" rx="2" stroke="#555" stroke-width="2" fill="none"/>160 <rect x="4" y="8" width="12" height="8" fill="#555"/>161 <rect x="21" y="9" width="4" height="6" rx="1" fill="#555"/>162 </svg>163 </div>164 </div>165 166 <!-- Hero header -->167 <div class="hero">168 <div class="blob-yellow"></div>169 <div class="blob-dark"></div>170 171 <div class="back-btn">172 <svg viewBox="0 0 24 24">173 <path d="M15.5 4.5L7 12l8.5 7.5" stroke="#000" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174 </svg>175 </div>176 177 <div class="gear-btn">178 <svg viewBox="0 0 24 24">179 <circle cx="12" cy="12" r="3.5" stroke="#000" stroke-width="2" fill="none"/>180 <path d="M4.5 12a7.5 7.5 0 0 1 .2-1.7l-2.2-1.3 2-3.4 2.4 1a7.7 7.7 0 0 1 2.4-1.3l.3-2.6h4l.3 2.6c.9.3 1.7.8 2.4 1.3l2.4-1 2 3.4-2.2 1.3c.1.6.2 1.1.2 1.7s-.1 1.1-.2 1.7l2.2 1.3-2 3.4-2.4-1a7.7 7.7 0 0 1-2.4 1.3l-.3 2.6h-4l-.3-2.6a7.7 7.7 0 0 1-2.4-1.3l-2.4 1-2-3.4 2.2-1.3c-.1-.6-.2-1.1-.2-1.7z" stroke="#000" stroke-width="1.4" fill="none" stroke-linejoin="round"/>181 </svg>182 </div>183 184 <div class="title">Trip to Honolulu</div>185 186 <div class="invite-wrap">187 <div class="avatar">[IMG: Avatar/Trip Photo]</div>188 <div class="invite-pill">189 <svg viewBox="0 0 24 24">190 <circle cx="12" cy="8" r="3.5" stroke="#111" stroke-width="1.8" fill="none"/>191 <path d="M4 20c1.5-4 6.5-4 8-4s6.6 0 8 4" stroke="#111" stroke-width="1.8" fill="none" stroke-linecap="round"/>192 <path d="M19 6v5M16.5 8.5h5" stroke="#111" stroke-width="2" stroke-linecap="round"/>193 </svg>194 <span>Invite</span>195 </div>196 </div>197 </div>198 199 <!-- Tabs -->200 <div class="tabs">201 <div class="tab active">Saves</div>202 <div class="tab">Itinerary</div>203 </div>204 205 <!-- Items header -->206 <div class="list-header">207 <span class="items-count">0 items</span>208 <button class="more-btn">More</button>209 </div>210 211 <!-- Empty state -->212 <div class="empty-state">213 <p class="message">Start saving places to see, stay, and eat at on your next trip.</p>214 <button class="outline-btn">Start Exploring</button>215 </div>216 217 <!-- Active indicator above bottom nav (center item) -->218 <div class="active-indicator"></div>219 220 <!-- Gesture home indicator -->221 <div class="home-indicator"></div>222 223 <!-- Bottom navigation -->224 <div class="bottom-nav">225 <div class="nav-item">226 <svg class="nav-icon" viewBox="0 0 24 24">227 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" stroke="#777" stroke-width="2" fill="none" stroke-linejoin="round"/>228 </svg>229 <div class="nav-label">Explore</div>230 </div>231 <div class="nav-item">232 <svg class="nav-icon" viewBox="0 0 24 24">233 <circle cx="11" cy="11" r="6.5" stroke="#777" stroke-width="2" fill="none"/>234 <path d="M20 20l-4-4" stroke="#777" stroke-width="2" stroke-linecap="round"/>235 </svg>236 <div class="nav-label">Search</div>237 </div>238 <div class="nav-item active">239 <svg class="nav-icon" viewBox="0 0 24 24">240 <path d="M12 20s-7-4.6-7-9.6A4.6 4.6 0 0 1 9.7 6c1.3 0 2.3.6 3 1.5.7-.9 1.7-1.5 3-1.5A4.6 4.6 0 0 1 19 10.4C19 15.4 12 20 12 20z" stroke="#000" stroke-width="2" fill="none" stroke-linejoin="round"/>241 </svg>242 <div class="nav-label">Plan</div>243 </div>244 <div class="nav-item">245 <svg class="nav-icon" viewBox="0 0 24 24">246 <path d="M4 20l6-2 10-10-4-4L6 14 4 20zM14 6l4 4" stroke="#777" stroke-width="2" fill="none" stroke-linejoin="round"/>247 </svg>248 <div class="nav-label">Review</div>249 </div>250 <div class="nav-item">251 <svg class="nav-icon" viewBox="0 0 24 24">252 <circle cx="12" cy="7" r="4" stroke="#777" stroke-width="2" fill="none"/>253 <path d="M4 20c1.5-5 6.5-5 8-5s6.6 0 8 5" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>254 </svg>255 <div class="nav-label">Account</div>256 </div>257 </div>258 259</div>260</body>261</html>