GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Calendar Modal UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #faf9fb; border-radius: 32px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 24px; left: 24px; right: 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; color: #fff; z-index: 2;16 }17 .status-left { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: 30px; }18 .status-icons { display: flex; align-items: center; gap: 16px; }19 .dot { width: 24px; height: 24px; background: #fff; border-radius: 50%; opacity: 0.9; }20 .square { width: 28px; height: 24px; background: #fff; border-radius: 4px; opacity: 0.9; }21 .wifi {22 width: 34px; height: 24px;23 }24 .battery {25 width: 42px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;26 }27 .battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 8px; background: #fff; border-radius: 2px; }28 29 /* Hero image placeholder */30 .hero {31 position: absolute; top: 0; left: 0; width: 100%; height: 700px;32 background: #E0E0E0; border-bottom: 1px solid #BDBDBD; display: flex; align-items: flex-end; justify-content: center;33 }34 .hero-label {35 position: absolute; top: 80px; left: 40px;36 color: #fff; font-size: 40px;37 opacity: 0.8;38 }39 .hero::before {40 content: "[IMG: Scenic mountain train]";41 position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 600; font-size: 34px;42 }43 .hero-text {44 position: absolute; bottom: 70px; left: 40px; font-size: 92px; font-weight: 700; color: rgba(255,255,255,0.8);45 }46 47 /* Content placeholder behind dialog */48 .content-card {49 position: absolute; top: 740px; left: 40px; width: 1000px; height: 540px;50 background: #ffffff; border-radius: 24px; box-shadow: 0 12px 40px rgba(0,0,0,0.15); padding: 36px;51 }52 .content-card .line { width: 920px; height: 18px; background: #eee; border-radius: 9px; margin-bottom: 24px; }53 .cta {54 position: absolute; bottom: 36px; left: 36px; display: inline-flex; align-items: center; gap: 18px;55 background: #1f153b; color: #fff; padding: 26px 30px; border-radius: 16px; font-weight: 700; font-size: 40px;56 }57 .cta svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 2.5; }58 59 /* Scrim */60 .scrim {61 position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 5;62 }63 64 /* Modal dialog */65 .dialog {66 position: absolute; left: 90px; top: 540px; width: 900px; border-radius: 20px; overflow: hidden;67 background: #ffffff; box-shadow: 0 30px 80px rgba(0,0,0,0.35); z-index: 6;68 }69 .dialog-header {70 background: #1b1340; color: #fff; padding: 36px 40px 30px 40px; border-bottom: 10px solid transparent;71 }72 .dialog-header .year { font-size: 36px; opacity: 0.9; margin-bottom: 12px; }73 .dialog-header .date { font-size: 90px; font-weight: 800; letter-spacing: 0.5px; }74 .dialog-body { background: #fff; padding: 34px 40px 28px 40px; }75 .month-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }76 .month-title { font-size: 44px; font-weight: 700; color: #333; }77 .chevron {78 width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;79 color: #1b1340; cursor: default;80 }81 .chevron svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }82 83 .dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; margin: 16px 0 24px; }84 .dow span { text-align: center; font-weight: 600; font-size: 32px; color: #9e9e9e; letter-spacing: 4px; }85 86 .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }87 .day { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 42px; color: #333; }88 .day.empty { color: transparent; }89 .day .circle { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }90 .day.selected .circle { background: #1b1340; color: #fff; font-weight: 800; }91 92 .dialog-footer {93 display: flex; align-items: center; justify-content: space-between; padding: 26px 40px 36px;94 }95 .footer-text { font-size: 44px; letter-spacing: 6px; font-weight: 700; color: #1b1340; opacity: 0.9; }96 97 /* Bottom nav */98 .bottom-nav {99 position: absolute; bottom: 80px; left: 0; width: 100%; height: 180px; background: #ffffff; border-top: 1px solid #e4e4e4;100 display: flex; align-items: center; justify-content: space-around;101 }102 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #777; font-size: 32px; }103 .nav-item .icon {104 width: 72px; height: 72px; border-radius: 18px; border: 2px solid #cfcfcf; display: flex; align-items: center; justify-content: center;105 }106 .nav-item.active { color: #1b1340; font-weight: 700; }107 .nav-item.active .icon { border-color: #1b1340; }108 109 /* Gesture pill */110 .gesture-bar {111 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);112 width: 240px; height: 14px; background: #dedede; border-radius: 10px;113 }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div class="status-left">1:09122 <div class="status-icons">123 <div class="dot"></div>124 <div class="square"></div>125 </div>126 </div>127 <div class="status-icons">128 <svg class="wifi" viewBox="0 0 24 24">129 <path d="M2 9c4-3 16-3 20 0M6 13c3-2 9-2 12 0M10 17c1-1 3-1 4 0M12 20l0 0" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round"/>130 </svg>131 <div class="battery"></div>132 </div>133 </div>134 135 <!-- Hero with prompt -->136 <div class="hero">137 <div class="hero-text">Where to next?</div>138 </div>139 140 <!-- Placeholder content card -->141 <div class="content-card">142 <div class="line"></div>143 <div class="line" style="width: 720px;"></div>144 <div class="line" style="width: 880px;"></div>145 <div class="cta">146 <svg viewBox="0 0 24 24">147 <path d="M4 16h16M6 12h12M8 8h8M5 20l1-3h12l1 3" />148 </svg>149 Book seats150 </div>151 </div>152 153 <!-- Scrim -->154 <div class="scrim"></div>155 156 <!-- Calendar Modal -->157 <div class="dialog">158 <div class="dialog-header">159 <div class="year">2023</div>160 <div class="date">Sun, Aug 27</div>161 </div>162 <div class="dialog-body">163 <div class="month-row">164 <div class="chevron">165 <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6" /></svg>166 </div>167 <div class="month-title">August 2023</div>168 <div class="chevron">169 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>170 </div>171 </div>172 173 <div class="dow">174 <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span>175 </div>176 177 <div class="calendar-grid">178 <!-- Row 1 -->179 <div class="day empty"><div class="circle"></div></div>180 <div class="day empty"><div class="circle"></div></div>181 <div class="day"><div class="circle">1</div></div>182 <div class="day"><div class="circle">2</div></div>183 <div class="day"><div class="circle">3</div></div>184 <div class="day"><div class="circle">4</div></div>185 <div class="day"><div class="circle">5</div></div>186 <!-- Row 2 -->187 <div class="day"><div class="circle">6</div></div>188 <div class="day"><div class="circle">7</div></div>189 <div class="day"><div class="circle">8</div></div>190 <div class="day"><div class="circle">9</div></div>191 <div class="day"><div class="circle">10</div></div>192 <div class="day"><div class="circle">11</div></div>193 <div class="day"><div class="circle">12</div></div>194 <!-- Row 3 -->195 <div class="day"><div class="circle">13</div></div>196 <div class="day"><div class="circle">14</div></div>197 <div class="day"><div class="circle">15</div></div>198 <div class="day"><div class="circle">16</div></div>199 <div class="day"><div class="circle">17</div></div>200 <div class="day"><div class="circle">18</div></div>201 <div class="day"><div class="circle">19</div></div>202 <!-- Row 4 -->203 <div class="day"><div class="circle">20</div></div>204 <div class="day"><div class="circle">21</div></div>205 <div class="day"><div class="circle">22</div></div>206 <div class="day"><div class="circle">23</div></div>207 <div class="day"><div class="circle">24</div></div>208 <div class="day"><div class="circle">25</div></div>209 <div class="day"><div class="circle">26</div></div>210 <!-- Row 5 -->211 <div class="day selected"><div class="circle">27</div></div>212 <div class="day"><div class="circle">28</div></div>213 <div class="day"><div class="circle">29</div></div>214 <div class="day"><div class="circle">30</div></div>215 <div class="day"><div class="circle">31</div></div>216 <div class="day empty"><div class="circle"></div></div>217 <div class="day empty"><div class="circle"></div></div>218 </div>219 </div>220 <div class="dialog-footer">221 <div class="footer-text">CANCEL</div>222 <div class="footer-text">OK</div>223 </div>224 </div>225 226 <!-- Bottom navigation -->227 <div class="bottom-nav">228 <div class="nav-item active">229 <div class="icon">230 <svg viewBox="0 0 24 24" width="40" height="40"><circle cx="12" cy="12" r="8" fill="#1b1340"/></svg>231 </div>232 Planner233 </div>234 <div class="nav-item">235 <div class="icon">236 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M3 12h18M6 6h12M8 18h8" stroke="#999" stroke-width="2" fill="none"/></svg>237 </div>238 My Trip239 </div>240 <div class="nav-item">241 <div class="icon">242 <svg viewBox="0 0 24 24" width="40" height="40"><rect x="5" y="5" width="14" height="14" stroke="#999" stroke-width="2" fill="none"/></svg>243 </div>244 My Pass245 </div>246 <div class="nav-item">247 <div class="icon">248 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M4 6h16M4 12h16M4 18h16" stroke="#999" stroke-width="2" fill="none"/></svg>249 </div>250 More251 </div>252 </div>253 254 <div class="gesture-bar"></div>255</div>256</body>257</html>