GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock</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;10 position: relative; overflow: hidden;11 background:#0d0f14; color:#e9eef9;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 92px; padding: 24px 30px 0 30px;18 color:#dbe3ff; font-weight:600; font-size:38px;19 display:flex; align-items: center; justify-content: space-between;20 opacity:0.95;21 }22 .status-icons { display:flex; gap:28px; align-items: center; }23 .status-icon { width:36px; height:36px; border:2px solid #cfd8ff; border-radius:50%; opacity:0.9; }24 .wifi {25 width:42px; height:42px;26 }27 .wifi svg { width:100%; height:100%; }28 .dot { width:12px; height:12px; background:#cfd8ff; border-radius:50%; }29 30 /* App bar */31 .app-bar {32 position: absolute; top: 92px; left: 0; right: 0;33 height: 140px; padding: 26px 30px;34 display:flex; align-items: center; justify-content: space-between;35 }36 .left-group { display:flex; align-items:center; gap:28px; }37 .menu-btn {38 width:72px; height:72px; border-radius:14px; display:flex; align-items:center; justify-content:center;39 }40 .menu-btn svg { width:56px; height:56px; }41 .month-title {42 font-size:66px; font-weight:700; letter-spacing:0.5px;43 }44 .month-title .chev { font-size:56px; opacity:0.7; margin-left:10px; }45 .right-group { display:flex; align-items:center; gap:30px; }46 .icon-btn {47 width:74px; height:74px; border-radius:16px; display:flex; align-items:center; justify-content:center;48 background:transparent;49 }50 .icon-btn svg { width:52px; height:52px; fill:#cfd8ff; }51 .avatar {52 width:90px; height:90px; border-radius:50%; background:#1f2430; color:#9fb4ff;53 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:48px;54 }55 56 /* Content area */57 .content {58 position:absolute; top:232px; left:0; right:0; bottom:0;59 padding: 0 40px 180px 40px;60 overflow:hidden;61 }62 63 .day-row {64 display:flex; align-items:flex-start; gap:28px; margin: 24px 0;65 }66 .date-col {67 width:140px; text-align:center; color:#9aa5c3;68 }69 .date-num {70 width:96px; height:96px; border-radius:50%; border:2px solid #3a4154;71 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:42px; margin: 4px auto 8px;72 }73 .event-card {74 flex:1; background:#151922; border-radius:36px; padding:30px;75 color:#cfd6ea; font-size:42px; opacity:0.9;76 }77 78 /* Month banner */79 .month-banner-title {80 font-size:60px; font-weight:800; margin:38px 0 20px 8px; color:#cfe0ff;81 }82 .banner-img {83 width: 100%; height: 280px; background:#E0E0E0; border:1px solid #BDBDBD;84 border-radius:28px; display:flex; align-items:center; justify-content:center; color:#757575;85 }86 87 .week-range {88 color:#8893ad; font-size:40px; margin:40px 0 18px 8px;89 }90 91 /* Floating add actions */92 .fab-actions {93 position:absolute; right:36px; bottom:270px;94 display:flex; flex-direction:column; gap:36px; align-items:flex-end;95 }96 .action-row { display:flex; align-items:center; gap:28px; }97 .action-label { font-size:48px; color:#e6ecff; }98 .action-icon {99 width:158px; height:158px; border-radius:36px; display:flex; align-items:center; justify-content:center;100 background:#30384a;101 box-shadow: 0 8px 24px rgba(0,0,0,0.5);102 }103 .action-icon.light { background:#a9c9ff; }104 .action-icon svg { width:88px; height:88px; fill:#e6ecff; }105 .action-icon.light svg { fill:#0d1a33; }106 107 /* Home indicator */108 .home-indicator {109 position:absolute; bottom:90px; left:50%; transform:translateX(-50%);110 width:480px; height:12px; background:#e6ecff; border-radius:8px; opacity:0.6;111 }112</style>113</head>114<body>115<div id="render-target">116 117 <!-- Status bar -->118 <div class="status-bar">119 <div>12:52</div>120 <div class="status-icons">121 <div class="status-icon" title="Do Not Disturb"></div>122 <div class="wifi">123 <svg viewBox="0 0 24 24">124 <path fill="#cfd8ff" d="M12 20c.8 0 1.5-.7 1.5-1.5S12.8 17 12 17s-1.5.7-1.5 1.5S11.2 20 12 20zM2.1 9.8l1.7 1.7C5.9 9.5 8.8 8 12 8s6.1 1.5 8.2 3.5l1.7-1.7C19.4 6.4 15.9 5 12 5S4.6 6.4 2.1 9.8zM6 13.7l1.7 1.7C8.9 14.2 10.4 13.5 12 13.5s3.1.7 4.3 1.9l1.7-1.7C16.5 11.9 14.4 11 12 11s-4.5.9-6 2.7z"/>125 </svg>126 </div>127 <div class="dot" title="Signal"></div>128 <div class="dot" title="Battery"></div>129 </div>130 </div>131 132 <!-- App bar -->133 <div class="app-bar">134 <div class="left-group">135 <div class="menu-btn">136 <svg viewBox="0 0 24 24">137 <rect x="3" y="5" width="18" height="2" fill="#cfd8ff"></rect>138 <rect x="3" y="11" width="18" height="2" fill="#cfd8ff"></rect>139 <rect x="3" y="17" width="18" height="2" fill="#cfd8ff"></rect>140 </svg>141 </div>142 <div class="month-title">September <span class="chev">▾</span></div>143 </div>144 <div class="right-group">145 <div class="icon-btn" title="Search">146 <svg viewBox="0 0 24 24">147 <circle cx="11" cy="11" r="7" stroke="#cfd8ff" stroke-width="2" fill="none"></circle>148 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#cfd8ff" stroke-width="2"></line>149 </svg>150 </div>151 <div class="icon-btn" title="Calendar">152 <svg viewBox="0 0 24 24">153 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" fill="none" stroke="#cfd8ff" stroke-width="2"></rect>154 <line x1="3" y1="10" x2="21" y2="10" stroke="#cfd8ff" stroke-width="2"></line>155 <line x1="8" y1="3.5" x2="8" y2="7" stroke="#cfd8ff" stroke-width="2"></line>156 <line x1="16" y1="3.5" x2="16" y2="7" stroke="#cfd8ff" stroke-width="2"></line>157 </svg>158 </div>159 <div class="avatar">I</div>160 </div>161 </div>162 163 <!-- Content -->164 <div class="content">165 166 <!-- One late September row example -->167 <div class="day-row">168 <div class="date-col">169 <div>Sat</div>170 <div class="date-num">23</div>171 </div>172 <div class="event-card">Nothing planned. Tap to create.</div>173 </div>174 175 <div class="week-range" style="margin-top:20px;">Sep 24 – 30</div>176 177 <!-- Month banner -->178 <div class="month-banner-title">October 2023</div>179 <div class="banner-img">[IMG: October illustration banner]</div>180 181 <div class="week-range">Oct 1 – 7</div>182 <div class="day-row">183 <div class="date-col">184 <div>Mon</div>185 <div class="date-num">2</div>186 </div>187 <div class="event-card">Mahatma Gandhi Jayanti</div>188 </div>189 190 <div class="week-range">Oct 8 – 14</div>191 192 <div class="week-range">Oct 15 – 21</div>193 <div class="day-row">194 <div class="date-col">195 <div>Sun</div>196 <div class="date-num">15</div>197 </div>198 <div class="event-card">First Day of Sharad Navratri</div>199 </div>200 201 <div class="day-row">202 <div class="date-col">203 <div>Fri</div>204 <div class="date-num">20</div>205 </div>206 <div class="event-card">First Day of Durga Puja Festivities</div>207 </div>208 209 <div class="day-row">210 <div class="date-col">211 <div>Sat</div>212 <div class="date-num">21</div>213 </div>214 <div class="event-card">Maha Saptami</div>215 </div>216 217 <div class="week-range">Oct 22 – 28</div>218 <div class="day-row">219 <div class="date-col">220 <div>Sun</div>221 <div class="date-num">22</div>222 </div>223 <div class="event-card">Maha Ashtami</div>224 </div>225 </div>226 227 <!-- Floating action sheet -->228 <div class="fab-actions">229 <div class="action-row">230 <div class="action-label">Reminder</div>231 <div class="action-icon">232 <svg viewBox="0 0 24 24">233 <path d="M8 17c1.5-2 3-4.5 5-6l2 2c-2.5 2.2-4.3 4.4-5.7 6.7L8 17z" />234 <path d="M12 4a3 3 0 0 1 3 3v2H9V7a3 3 0 0 1 3-3z" />235 </svg>236 </div>237 </div>238 <div class="action-row">239 <div class="action-label">Task</div>240 <div class="action-icon">241 <svg viewBox="0 0 24 24">242 <rect x="4" y="4" width="16" height="16" rx="4" ry="4" fill="none" stroke="#e6ecff" stroke-width="2"></rect>243 <path d="M8 12l3 3 5-5" stroke="#e6ecff" stroke-width="2" fill="none"/>244 </svg>245 </div>246 </div>247 <div class="action-row">248 <div class="action-label">Event</div>249 <div class="action-icon light">250 <svg viewBox="0 0 24 24">251 <rect x="3" y="5" width="18" height="16" rx="3" ry="3" fill="none" stroke="#0d1a33" stroke-width="2"></rect>252 <line x1="3" y1="10" x2="21" y2="10" stroke="#0d1a33" stroke-width="2"></line>253 <circle cx="9" cy="15" r="2" fill="#0d1a33"></circle>254 <circle cx="15" cy="15" r="2" fill="#0d1a33"></circle>255 </svg>256 </div>257 </div>258 </div>259 260 <!-- Home indicator -->261 <div class="home-indicator"></div>262</div>263</body>264</html>