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>Time & Date Picker Modal</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #f7f7f9;12 }13 14 /* Background hero */15 .hero {16 position: absolute; top: 0; left: 0; width: 1080px; height: 800px;17 }18 .hero .img {19 width: 1080px; height: 800px; background: #E0E0E0; border: 1px solid #BDBDBD;20 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px;21 }22 .hero .title {23 position: absolute; bottom: 40px; left: 40px; font-size: 96px; font-weight: 700;24 color: rgba(255,255,255,0.85);25 }26 .dim-overlay {27 position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 2;28 }29 30 /* Status bar */31 .status-bar {32 position: absolute; top: 18px; left: 32px; right: 32px; height: 40px; z-index: 4; color: #fff;33 display: flex; align-items: center; justify-content: space-between;34 font-size: 34px; font-weight: 600;35 }36 .status-left { display: flex; align-items: center; gap: 20px; }37 .status-right { display: flex; align-items: center; gap: 26px; }38 .dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; opacity: 0.9; }39 .mini-text { font-size: 28px; font-weight: 700; opacity: 0.9; }40 .wifi svg, .battery svg { display: block; }41 .wifi svg { width: 42px; height: 28px; }42 .battery svg { width: 46px; height: 26px; }43 44 /* Modal */45 .modal {46 position: absolute; left: 60px; top: 620px; width: 960px; background: #ffffff;47 border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.35);48 z-index: 3; padding: 42px 52px 36px;49 color: #2a2145;50 }51 .modal-header {52 display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px;53 }54 .tab {55 font-size: 44px; font-weight: 700; letter-spacing: 0.5px;56 }57 .tab.inactive { color: #77767c; font-weight: 700; }58 .tab-underline {59 height: 4px; width: 360px; background: #2a2145; margin-top: 18px;60 }61 62 .time-area { margin-top: 18px; margin-bottom: 22px; }63 .time-row {64 display: flex; align-items: center; justify-content: center; gap: 140px; margin: 18px 0;65 }66 .time-num {67 width: 220px; text-align: center; font-size: 42px; color: #bcc0cd;68 }69 .time-selected {70 font-size: 56px; color: #2a2145; font-weight: 700;71 }72 .time-selected .segment {73 width: 240px; text-align: center; padding-bottom: 8px; border-bottom: 6px solid #2a2145;74 }75 .colon { font-size: 56px; font-weight: 700; color: #2a2145; margin: 0 12px; }76 .now-btn {77 margin-left: 36px; background: #F2B51E; color: #2a2145; font-weight: 800;78 border: none; padding: 18px 34px; border-radius: 12px; font-size: 36px;79 box-shadow: 0 2px 0 rgba(0,0,0,0.05);80 }81 82 .divider { height: 2px; background: #EEE; margin: 34px 0; }83 84 .date-row {85 display: flex; align-items: center; justify-content: space-between; padding: 0 8px;86 }87 .date-text { font-size: 40px; font-weight: 700; color: #2a2145; }88 .arrow-btn { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; }89 .arrow-btn svg { width: 40px; height: 40px; }90 .arrow { fill: #F2B51E; }91 92 .modal-footer {93 margin-top: 36px; display: flex; justify-content: flex-end; gap: 26px;94 }95 .btn {96 font-size: 40px; font-weight: 800; padding: 22px 40px; border-radius: 14px;97 }98 .btn-cancel {99 background: #fff; color: #2a2145; border: 2px solid #E1E1E8;100 }101 .btn-done {102 background: #F2B51E; color: #2a2145; border: none;103 }104 105 /* Bottom nav */106 .bottom-nav {107 position: absolute; bottom: 0; left: 0; width: 1080px; height: 180px;108 background: rgba(255,255,255,0.96); border-top: 1px solid #e7e7ef; z-index: 1;109 display: flex; justify-content: space-around; align-items: center;110 }111 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }112 .nav-icon {113 width: 72px; height: 72px; border-radius: 18px; background: #2a2145; opacity: 0.85;114 }115 .nav-label { font-size: 32px; color: #2a2145; font-weight: 800; }116 .nav-item.inactive .nav-icon { background: #aaa9b6; opacity: 0.5; }117 .nav-item.inactive .nav-label { color: #9b9aaa; font-weight: 700; }118 119 /* Gesture bar */120 .gesture {121 position: absolute; bottom: 198px; left: 50%; transform: translateX(-50%);122 width: 240px; height: 12px; background: #000; border-radius: 8px; opacity: 0.25; z-index: 4;123 }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Background hero -->130 <div class="hero" style="z-index:1;">131 <div class="img">[IMG: Scenic mountains with train]</div>132 <div class="title">Where to next?</div>133 </div>134 135 <!-- Dim overlay behind modal -->136 <div class="dim-overlay"></div>137 138 <!-- Status bar -->139 <div class="status-bar">140 <div class="status-left">141 <div>11:32</div>142 <div class="dot"></div>143 <div class="dot"></div>144 <div class="dot"></div>145 <div class="mini-text">oyo</div>146 <div class="dot" style="opacity:0.7;"></div>147 </div>148 <div class="status-right">149 <div class="wifi">150 <svg viewBox="0 0 24 24">151 <path fill="#fff" d="M12 18.5a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Zm-6.5-5c4.3-4.3 12.7-4.3 17 0l-2 2c-3.6-3.6-9.4-3.6-13 0l-2-2Zm3.8 3.8c2.6-2.6 6.8-2.6 9.4 0l-1.8 1.8c-1.7-1.7-4.4-1.7-6.1 0l-1.5-1.8Z"/>152 </svg>153 </div>154 <div class="battery">155 <svg viewBox="0 0 28 16">156 <rect x="1" y="2" width="22" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>157 <rect x="3" y="4" width="14" height="8" fill="#fff"></rect>158 <rect x="24" y="6" width="3" height="4" rx="1" fill="#fff"></rect>159 </svg>160 </div>161 </div>162 </div>163 164 <!-- Modal -->165 <div class="modal">166 <div class="modal-header">167 <div>168 <div class="tab">DEPARTURE</div>169 <div class="tab-underline"></div>170 </div>171 <div class="tab inactive">ARRIVAL</div>172 </div>173 174 <div class="time-area">175 <div class="time-row">176 <div class="time-num">10</div>177 <div class="time-num">38</div>178 </div>179 180 <div class="time-row time-selected">181 <div class="segment">11</div>182 <div class="colon">:</div>183 <div class="segment">39</div>184 <button class="now-btn">Now</button>185 </div>186 187 <div class="time-row">188 <div class="time-num">12</div>189 <div class="time-num">40</div>190 </div>191 </div>192 193 <div class="divider"></div>194 195 <div class="date-row">196 <div class="arrow-btn">197 <svg class="arrow" viewBox="0 0 24 24">198 <path d="M15.5 5.5 9 12l6.5 6.5-2 2L5 12l8.5-8.5 2 2Z"></path>199 </svg>200 </div>201 <div class="date-text">Mon 25 Sep 2023</div>202 <div class="arrow-btn">203 <svg class="arrow" viewBox="0 0 24 24">204 <path d="M8.5 5.5 15 12l-6.5 6.5 2 2L19 12 10.5 3.5l-2 2Z"></path>205 </svg>206 </div>207 </div>208 209 <div class="divider"></div>210 211 <div class="modal-footer">212 <button class="btn btn-cancel">CANCEL</button>213 <button class="btn btn-done">DONE</button>214 </div>215 </div>216 217 <!-- Bottom nav bar -->218 <div class="bottom-nav">219 <div class="nav-item">220 <div class="nav-icon"></div>221 <div class="nav-label">Planner</div>222 </div>223 <div class="nav-item inactive">224 <div class="nav-icon"></div>225 <div class="nav-label">My Trip</div>226 </div>227 <div class="nav-item inactive">228 <div class="nav-icon"></div>229 <div class="nav-label">My Pass</div>230 </div>231 <div class="nav-item inactive">232 <div class="nav-icon"></div>233 <div class="nav-label">More</div>234 </div>235 </div>236 237 <!-- Gesture pill -->238 <div class="gesture"></div>239 240</div>241</body>242</html>