GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Bottom Sheet Actions</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0e0e0e;13 color: #f5f5f5;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 color: #ffffff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 40px;28 font-weight: 600;29 font-size: 42px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 28px;35 }36 .icon-wifi, .icon-battery {37 width: 46px; height: 46px;38 }39 40 /* Header navigation */41 .header {42 position: absolute;43 top: 120px;44 left: 0;45 width: 1080px;46 padding: 0 40px;47 display: flex;48 align-items: center;49 justify-content: space-between;50 }51 .back-area {52 display: flex;53 align-items: center;54 gap: 26px;55 }56 .back-btn {57 width: 60px; height: 60px;58 }59 .title {60 font-size: 68px;61 font-weight: 700;62 display: flex;63 align-items: center;64 gap: 18px;65 }66 .kebab {67 width: 60px; height: 60px;68 }69 70 /* Date row */71 .date-row {72 position: absolute;73 top: 260px;74 left: 40px;75 display: flex;76 align-items: center;77 gap: 22px;78 color: #6ea8ff;79 font-size: 52px;80 font-weight: 700;81 }82 .date-icon {83 width: 56px; height: 56px;84 }85 86 /* Page title */87 .page-title {88 position: absolute;89 top: 360px;90 left: 40px;91 font-size: 86px;92 font-weight: 800;93 letter-spacing: 0.5px;94 }95 96 /* Bottom sheet overlay */97 .sheet {98 position: absolute;99 left: 0;100 bottom: 0;101 width: 1080px;102 height: 1650px;103 background: #121212;104 border-top-left-radius: 28px;105 border-top-right-radius: 28px;106 box-shadow: 0 -20px 40px rgba(0,0,0,0.6);107 }108 .handle {109 width: 160px; height: 12px;110 background: #3a3a3a;111 border-radius: 6px;112 margin: 22px auto;113 }114 .sheet-content {115 padding: 10px 26px 40px 26px;116 }117 118 /* Top action grid */119 .actions-grid {120 display: grid;121 grid-template-columns: repeat(4, 1fr);122 gap: 26px;123 margin-top: 10px;124 margin-bottom: 36px;125 }126 .action-card {127 background: #1c1c1c;128 border-radius: 22px;129 height: 220px;130 box-shadow: inset 0 0 0 1px #2a2a2a;131 display: flex;132 flex-direction: column;133 align-items: center;134 justify-content: center;135 gap: 24px;136 }137 .action-icon {138 width: 90px; height: 90px;139 }140 .action-label {141 font-size: 48px;142 font-weight: 700;143 }144 145 /* Group sections */146 .group {147 background: #161616;148 border-radius: 18px;149 box-shadow: inset 0 0 0 1px #2a2a2a;150 margin-bottom: 28px;151 padding: 8px 10px;152 }153 .row {154 height: 140px;155 display: flex;156 align-items: center;157 gap: 30px;158 padding: 0 26px;159 border-bottom: 1px solid #2a2a2a;160 }161 .row:last-child { border-bottom: none; }162 .row .r-icon {163 width: 70px; height: 70px;164 flex: 0 0 70px;165 }166 .row .r-text {167 font-size: 52px;168 font-weight: 700;169 color: #eaeaea;170 }171 172 /* Accent colors for the top actions */173 .c-orange path { fill: #f5a623; stroke: #f5a623; }174 .c-green path { fill: #32d27d; stroke: #32d27d; }175 .c-blue path { fill: #3b82f6; stroke: #3b82f6; }176 .c-red path { fill: #e74c3c; stroke: #e74c3c; }177 178 /* Helper tiny arrow for dropdown next to title */179 .mini-caret {180 width: 30px; height: 30px; margin-left: 6px;181 }182</style>183</head>184<body>185<div id="render-target">186 187 <!-- Status bar -->188 <div class="status-bar">189 <div>1:43</div>190 <div class="status-icons">191 <!-- simple "Snapchat" ghost placeholder using text -->192 <div style="font-size:40px; opacity:0.8;">👻</div>193 <div style="font-size:40px; opacity:0.8;">34°</div>194 <svg class="icon-wifi" viewBox="0 0 24 24" fill="#ffffff">195 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/>196 </svg>197 <svg class="icon-battery" viewBox="0 0 24 24" fill="#ffffff">198 <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>199 <rect x="21" y="10" width="2" height="4"></rect>200 <rect x="4" y="8" width="12" height="8" fill="#7fff7f"></rect>201 </svg>202 </div>203 </div>204 205 <!-- Header -->206 <div class="header">207 <div class="back-area">208 <svg class="back-btn" viewBox="0 0 24 24" fill="#ffffff">209 <path d="M15 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210 </svg>211 <div class="title">212 <span>👋 Welcome</span>213 <svg class="mini-caret" viewBox="0 0 24 24" fill="#ffffff">214 <path d="M6 9l6 6 6-6" />215 </svg>216 </div>217 </div>218 <svg class="kebab" viewBox="0 0 24 24" fill="#ffffff">219 <circle cx="12" cy="5" r="2"></circle>220 <circle cx="12" cy="12" r="2"></circle>221 <circle cx="12" cy="19" r="2"></circle>222 </svg>223 </div>224 225 <!-- Date row -->226 <div class="date-row">227 <svg class="date-icon" viewBox="0 0 24 24" fill="#e56b6f">228 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="#e56b6f"></rect>229 <rect x="3" y="8" width="18" height="2" fill="#b64d52"></rect>230 </svg>231 <div>Fri, Aug 4</div>232 </div>233 234 <!-- Page title -->235 <div class="page-title">Meeting update</div>236 237 <!-- Bottom sheet -->238 <div class="sheet">239 <div class="handle"></div>240 <div class="sheet-content">241 242 <!-- Top actions -->243 <div class="actions-grid">244 <div class="action-card">245 <svg class="action-icon c-orange" viewBox="0 0 24 24">246 <path d="M7 3l6 6-2 2-6-6 2-2zm6 6l5 12-12-5 7-7z"/>247 </svg>248 <div class="action-label">Pin</div>249 </div>250 <div class="action-card">251 <svg class="action-icon c-green" viewBox="0 0 24 24">252 <path d="M12 3v6h6M5 19l12-12" stroke="#32d27d" stroke-width="2" fill="none" stroke-linecap="round"></path>253 <path d="M5 19h6v-6" fill="#32d27d" opacity="0.2"></path>254 </svg>255 <div class="action-label">Share</div>256 </div>257 <div class="action-card">258 <svg class="action-icon c-blue" viewBox="0 0 24 24">259 <rect x="4" y="4" width="16" height="16" rx="3" fill="#3b82f6"></rect>260 <path d="M8 8l8 8M16 8l-8 8" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>261 </svg>262 <div class="action-label">Won't Do</div>263 </div>264 <div class="action-card">265 <svg class="action-icon c-red" viewBox="0 0 24 24">266 <path d="M9 4h6l1 2h3v2H5V6h3l1-2zM7 10h10l-1 9H8l-1-9z" fill="#e74c3c"></path>267 </svg>268 <div class="action-label">Delete</div>269 </div>270 </div>271 272 <!-- Group 1 -->273 <div class="group">274 <div class="row">275 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">276 <rect x="4" y="6" width="16" height="2"></rect>277 <rect x="4" y="11" width="12" height="2"></rect>278 <rect x="4" y="16" width="8" height="2"></rect>279 </svg>280 <div class="r-text">Add Subtask</div>281 </div>282 <div class="row">283 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">284 <path d="M4 6h16v10l-4 4H4z"></path>285 </svg>286 <div class="r-text">Comment</div>287 </div>288 <div class="row">289 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">290 <path d="M7 7c2-2 6-2 8 0s2 6 0 8-6 2-8 0-2-6 0-8zm8-2l2-2" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>291 </svg>292 <div class="r-text">Attachment</div>293 </div>294 <div class="row">295 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">296 <path d="M12 3l-7 7 7 7 7-7-7-7zm0 4l3 3-3 3-3-3 3-3z"></path>297 </svg>298 <div class="r-text">Tags</div>299 </div>300 <div class="row">301 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">302 <path d="M12 3a7 7 0 0 0-7 7c0 5 7 11 7 11s7-6 7-11a7 7 0 0 0-7-7zm0 4a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"></path>303 </svg>304 <div class="r-text">Location</div>305 </div>306 </div>307 308 <!-- Group 2 -->309 <div class="group">310 <div class="row">311 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">312 <path d="M6 8l4 4-4 4M14 8l4 4-4 4" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"></path>313 </svg>314 <div class="r-text">Copy Link</div>315 </div>316 <div class="row">317 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">318 <rect x="5" y="5" width="10" height="10"></rect>319 <rect x="9" y="9" width="10" height="10" opacity="0.6"></rect>320 </svg>321 <div class="r-text">Duplicate</div>322 </div>323 <div class="row">324 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">325 <rect x="4" y="4" width="16" height="12" rx="1"></rect>326 <text x="8" y="13" font-size="8" fill="#111" font-family="Arial" font-weight="700">T</text>327 </svg>328 <div class="r-text">Save as Template</div>329 </div>330 <div class="row">331 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">332 <rect x="4" y="4" width="12" height="12"></rect>333 <path d="M18 12h4M20 10v4" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>334 </svg>335 <div class="r-text">Save & New</div>336 </div>337 </div>338 339 <!-- Group 3 -->340 <div class="group">341 <div class="row">342 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">343 <circle cx="6" cy="12" r="2"></circle>344 <circle cx="12" cy="6" r="2"></circle>345 <circle cx="18" cy="12" r="2"></circle>346 <path d="M6 12l6-6 6 6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>347 </svg>348 <div class="r-text">Task Activities</div>349 </div>350 <div class="row">351 <svg class="r-icon" viewBox="0 0 24 24" fill="#cfcfcf">352 <rect x="5" y="4" width="12" height="16" rx="2"></rect>353 <path d="M8 8h6M8 12h6M8 16h6" stroke="#111" stroke-width="1.6"></path>354 </svg>355 <div class="r-text">Convert to Note</div>356 </div>357 </div>358 359 </div>360 </div>361 362</div>363</body>364</html>