GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Snooze Reminder</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background-color: #101318;14 border-radius: 36px;15 box-shadow: 0 20px 60px rgba(0,0,0,0.35);16 }17 18 /* Wallpaper placeholder */19 .wallpaper {20 position: absolute;21 left: 0; top: 0;22 width: 1080px; height: 2400px;23 background: #E0E0E0;24 border: 1px solid #BDBDBD;25 color: #757575;26 display: flex; align-items: center; justify-content: center;27 font-size: 28px; letter-spacing: 0.5px;28 }29 30 /* Dim scrim over wallpaper */31 .scrim {32 position: absolute; inset: 0;33 background: rgba(0,0,0,0.35);34 }35 36 /* Status bar */37 .status-bar {38 position: absolute; top: 0; left: 0;39 width: 1080px; height: 110px;40 color: #ffffff;41 display: flex; align-items: center; justify-content: space-between;42 padding: 0 36px;43 }44 .status-left {45 display: flex; align-items: center; gap: 16px; font-size: 32px; opacity: 0.9;46 }47 .status-right {48 display: flex; align-items: center; gap: 22px;49 font-size: 28px;50 }51 .status-right .battery { display: inline-flex; align-items: center; gap: 8px; }52 53 /* Notification card */54 .notif-card {55 position: absolute;56 top: 150px; left: 36px; width: 1008px;57 background: #2c2f35;58 color: #f4f6fb;59 border-radius: 36px;60 box-shadow: 0 12px 28px rgba(0,0,0,0.45);61 padding: 28px 32px 36px;62 }63 .notif-top {64 display: flex; align-items: center; justify-content: space-between;65 }66 .notif-info {67 display: flex; align-items: center; gap: 22px;68 }69 .app-avatar {70 width: 72px; height: 72px; border-radius: 36px; background: #6868f2;71 display: flex; align-items: center; justify-content: center; color: #e7e9ff; font-weight: 700;72 box-shadow: inset 0 0 0 4px rgba(255,255,255,0.15);73 font-size: 32px;74 }75 .notif-title {76 display: flex; flex-direction: column;77 }78 .notif-title .line1 { font-size: 34px; font-weight: 700; }79 .notif-title .line2 { font-size: 26px; color: #b7bbca; margin-top: 4px; }80 .notif-actions {81 display: flex; gap: 24px; margin-top: 28px;82 }83 .pill-btn {84 padding: 22px 34px; border-radius: 28px; font-size: 28px; font-weight: 700;85 background: #ffffff; color: #1f2329; border: 1px solid #D0D3DA;86 letter-spacing: 0.6px;87 }88 89 /* Snooze bottom sheet */90 .sheet {91 position: absolute;92 left: 36px; bottom: 520px; width: 1008px;93 border-radius: 28px;94 overflow: hidden;95 box-shadow: 0 18px 40px rgba(0,0,0,0.35);96 }97 .sheet-head {98 background: #3e567e;99 color: #e8edf8;100 padding: 28px 36px 22px;101 text-align: center;102 }103 .sheet-head .title { font-size: 38px; font-weight: 500; opacity: 0.95; }104 .sheet-head .current { font-size: 52px; font-weight: 800; color: #ffffff; margin-top: 10px; }105 .sheet-body {106 background: #e9edf7;107 padding: 26px 24px 24px;108 border-top: 1px solid rgba(0,0,0,0.08);109 }110 .snooze-options {111 display: grid;112 grid-template-columns: repeat(5, 1fr);113 gap: 20px 6px;114 padding: 16px 12px 8px;115 }116 .opt {117 text-align: center; color: #2a2f3a;118 }119 .opt .num { font-size: 40px; font-weight: 800; }120 .opt .unit { font-size: 26px; color: #56627a; margin-top: 6px; }121 .sheet-footer {122 display: flex; align-items: center; justify-content: space-between;123 padding: 20px 26px;124 color: #2c3450;125 background: #e9edf7;126 border-top: 1px solid rgba(0,0,0,0.08);127 }128 .footer-actions { display: flex; gap: 34px; font-size: 28px; color: #3a4b79; }129 .footer-actions span { cursor: default; }130 131 /* Dock search bar */132 .search-dock {133 position: absolute; left: 60px; bottom: 160px;134 width: 960px; height: 120px;135 background: #0e0f12;136 border-radius: 60px;137 box-shadow: 0 8px 20px rgba(0,0,0,0.5);138 display: flex; align-items: center; justify-content: space-between;139 padding: 0 40px;140 color: #fff;141 opacity: 0.95;142 }143 .dock-left { display: flex; align-items: center; gap: 18px; font-size: 40px; }144 .dock-right { display: flex; align-items: center; gap: 30px; }145 .round-btn {146 width: 72px; height: 72px; border-radius: 36px;147 background: #24262b; display: flex; align-items: center; justify-content: center;148 border: 1px solid rgba(255,255,255,0.12);149 }150 151 /* Home indicator */152 .home-indicator {153 position: absolute;154 left: 378px; bottom: 80px;155 width: 324px; height: 14px; border-radius: 8px;156 background: #ffffff; opacity: 0.75;157 }158 159 /* Simple icon styles */160 svg { display: inline-block; }161</style>162</head>163<body>164<div id="render-target">165 <div class="wallpaper">[IMG: Abstract Wallpaper Artwork with hands and shapes]</div>166 <div class="scrim"></div>167 168 <!-- Status Bar -->169 <div class="status-bar">170 <div class="status-left">171 <!-- small reminder icon -->172 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">173 <path d="M12 3a7 7 0 0 0-7 7v3l-2 2v1h18v-1l-2-2v-3a7 7 0 0 0-7-7zM10 21h4a2 2 0 0 0 2-2H8a2 2 0 0 0 2 2z"/>174 </svg>175 <span style="font-weight:600;">Reminder</span>176 </div>177 <div class="status-right">178 <!-- Wifi -->179 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff">180 <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-7.2-7.1a13 13 0 0 1 14.4 0l-1.7 1.7a10 10 0 0 0-11 0L4.8 11.4zm3.4-4a17 17 0 0 1 10.6 0l-1.7 1.7a13.5 13.5 0 0 0-7.2 0L8.2 7.4z"/>181 </svg>182 <!-- Battery -->183 <div class="battery">184 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff">185 <path d="M16 4h1a2 2 0 0 1 2 2v1h1v6h-1v1a2 2 0 0 1-2 2h-1V4zM4 7a2 2 0 0 1 2-2h8v14H6a2 2 0 0 1-2-2V7z"/>186 </svg>187 <span style="font-size:28px; font-weight:700;">100%</span>188 </div>189 </div>190 </div>191 192 <!-- Notification Card -->193 <div class="notif-card">194 <div class="notif-top">195 <div class="notif-info">196 <div class="app-avatar">⏰</div>197 <div class="notif-title">198 <div class="line1">Meet & Greet</div>199 <div class="line2">now</div>200 </div>201 </div>202 <svg width="40" height="40" viewBox="0 0 24 24" fill="#d7d9e1" style="opacity:0.9">203 <path d="M7 10l5 5 5-5H7z"/>204 </svg>205 </div>206 <div class="notif-actions">207 <div class="pill-btn">SNOOZE</div>208 <div class="pill-btn">DISMISS</div>209 </div>210 </div>211 212 <!-- Snooze Bottom Sheet -->213 <div class="sheet">214 <div class="sheet-head">215 <div class="title">Snooze duration</div>216 <div class="current">5 minutes</div>217 </div>218 <div class="sheet-body">219 <div class="snooze-options">220 <div class="opt"><div class="num">5</div><div class="unit">Min</div></div>221 <div class="opt"><div class="num">10</div><div class="unit">Min</div></div>222 <div class="opt"><div class="num">15</div><div class="unit">Min</div></div>223 <div class="opt"><div class="num">30</div><div class="unit">Min</div></div>224 <div class="opt"><div class="num">45</div><div class="unit">Min</div></div>225 226 <div class="opt"><div class="num">1</div><div class="unit">Hour</div></div>227 <div class="opt"><div class="num">2</div><div class="unit">Hour</div></div>228 <div class="opt"><div class="num">3</div><div class="unit">Hour</div></div>229 <div class="opt"><div class="num">6</div><div class="unit">Hour</div></div>230 <div class="opt"><div class="num">1</div><div class="unit">Day</div></div>231 </div>232 233 <div class="sheet-footer">234 <div class="edit">235 <svg width="40" height="40" viewBox="0 0 24 24" fill="#2a2f3a">236 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>237 </svg>238 </div>239 <div class="footer-actions">240 <span>Dismiss</span>241 <span>Snooze</span>242 </div>243 </div>244 </div>245 </div>246 247 <!-- Search dock with simple icons -->248 <div class="search-dock">249 <div class="dock-left">250 <span style="font-weight:800; color:#ffffff;">G</span>251 </div>252 <div class="dock-right">253 <div class="round-btn">254 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff">255 <path d="M12 3a9 9 0 0 0-9 9 9 9 0 0 0 18 0 9 9 0 0 0-9-9zm1 14h-2v-6h2v6zm0-8h-2V7h2v2z"/>256 </svg>257 </div>258 <div class="round-btn">259 <svg width="34" height="34" viewBox="0 0 24 24" fill="#ffffff">260 <path d="M12 3a4 4 0 0 1 4 4v3h-2V7a2 2 0 0 0-4 0v3H8V7a4 4 0 0 1 4-4zm-6 8h12v10H6V11zm3 2v6h2v-6H9zm4 0v6h2v-6h-2z"/>261 </svg>262 </div>263 </div>264 </div>265 266 <div class="home-indicator"></div>267</div>268</body>269</html>