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>Shortcuts UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0B0C0D;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16 color: #FFFFFF;17 }18 19 /* Bottom sheet */20 .sheet {21 position: absolute;22 left: 0;23 right: 0;24 bottom: 0;25 height: 2060px;26 background: #131516;27 border-top-left-radius: 48px;28 border-top-right-radius: 48px;29 padding: 56px 72px 120px 72px;30 box-sizing: border-box;31 }32 33 .top-actions {34 display: flex;35 justify-content: space-between;36 align-items: center;37 font-weight: 600;38 font-size: 38px;39 margin-bottom: 40px;40 }41 .top-actions .cancel { color: #FF6B6B; }42 .top-actions .save { color: #36B2AD; }43 44 .title {45 text-align: center;46 font-size: 48px;47 line-height: 64px;48 color: #F7F7F7;49 margin: 30px 40px 40px 40px;50 }51 52 /* Selected shortcuts row */53 .selected-row {54 display: grid;55 grid-template-columns: 1fr 1fr;56 gap: 44px;57 margin: 40px 0 20px 0;58 }59 60 /* Grid of cards */61 .grid {62 display: grid;63 grid-template-columns: repeat(3, 1fr);64 gap: 44px;65 margin-top: 24px;66 }67 68 .card {69 position: relative;70 background: #16181A;71 border-radius: 34px;72 min-height: 220px;73 padding: 42px 34px 32px 34px;74 box-sizing: border-box;75 text-align: center;76 box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset;77 }78 .card.disabled {79 background: #101213;80 color: #7C8388;81 }82 83 .card-label {84 margin-top: 22px;85 font-size: 34px;86 letter-spacing: 0.3px;87 color: #FFFFFF;88 }89 .card.disabled .card-label {90 color: #7C8388;91 }92 93 /* Add / Remove badges */94 .badge {95 position: absolute;96 top: 18px;97 left: 18px;98 width: 64px;99 height: 64px;100 border-radius: 50%;101 background: #2CA7A3;102 display: flex;103 align-items: center;104 justify-content: center;105 }106 .badge.minus {107 background: #E2575A;108 }109 .badge svg {110 width: 32px;111 height: 32px;112 }113 114 /* Home indicator */115 .home-indicator {116 position: absolute;117 left: 50%;118 bottom: 26px;119 transform: translateX(-50%);120 width: 360px;121 height: 10px;122 background: #FFFFFF;123 opacity: 0.8;124 border-radius: 8px;125 }126</style>127</head>128<body>129<div id="render-target">130 <div class="sheet">131 <div class="top-actions">132 <div class="cancel">Cancel</div>133 <div class="save">Save</div>134 </div>135 136 <div class="title">Add as many shortcuts to your homescreen as you like</div>137 138 <div class="selected-row">139 <!-- Mornings selected card -->140 <div class="card">141 <div class="badge minus">142 <svg viewBox="0 0 24 24">143 <rect x="4" y="11" width="16" height="2" fill="#fff"></rect>144 </svg>145 </div>146 <div class="icon">147 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">148 <circle cx="32" cy="26" r="10" stroke="#FFFFFF" stroke-width="3"></circle>149 <path d="M10 40h44" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>150 <path d="M32 8v8M14 24l6 4M50 24l-6 4" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>151 </svg>152 </div>153 <div class="card-label">Mornings</div>154 </div>155 156 <!-- More (disabled) -->157 <div class="card disabled">158 <div class="icon">159 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">160 <circle cx="20" cy="24" r="4" fill="#7C8388"></circle>161 <circle cx="32" cy="24" r="4" fill="#7C8388"></circle>162 <circle cx="44" cy="24" r="4" fill="#7C8388"></circle>163 <circle cx="20" cy="36" r="4" fill="#7C8388"></circle>164 <circle cx="32" cy="36" r="4" fill="#7C8388"></circle>165 <circle cx="44" cy="36" r="4" fill="#7C8388"></circle>166 </svg>167 </div>168 <div class="card-label">More</div>169 </div>170 </div>171 172 <div class="grid">173 <!-- Timer -->174 <div class="card">175 <div class="badge">176 <svg viewBox="0 0 24 24">177 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>178 </svg>179 </div>180 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">181 <path d="M20 40c0-8 24-8 24 0v4H20v-4z" stroke="#FFFFFF" stroke-width="3" fill="none"></path>182 <path d="M24 20h16" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>183 </svg>184 <div class="card-label">Timer</div>185 </div>186 187 <!-- Sleep -->188 <div class="card">189 <div class="badge">190 <svg viewBox="0 0 24 24">191 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>192 </svg>193 </div>194 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">195 <path d="M40 20c-10 0-18 8-18 18 0 5 2 9 6 12-8-2-14-9-14-17 0-11 9-20 20-20 6 0 11 2 15 6-3-1-6-1-9 0z" stroke="#FFFFFF" stroke-width="3" fill="none"></path>196 </svg>197 <div class="card-label">Sleep</div>198 </div>199 200 <!-- Recent -->201 <div class="card">202 <div class="badge">203 <svg viewBox="0 0 24 24">204 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>205 </svg>206 </div>207 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">208 <circle cx="32" cy="32" r="18" stroke="#FFFFFF" stroke-width="3"></circle>209 <path d="M32 18v14l10 6" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>210 <path d="M22 12l-6 6" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>211 </svg>212 <div class="card-label">Recent</div>213 </div>214 215 <!-- Check In -->216 <div class="card">217 <div class="badge">218 <svg viewBox="0 0 24 24">219 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>220 </svg>221 </div>222 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">223 <circle cx="32" cy="28" r="10" stroke="#FFFFFF" stroke-width="3"></circle>224 <path d="M20 48c4-6 20-6 24 0" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>225 <circle cx="28" cy="26" r="2" fill="#FFFFFF"></circle>226 <circle cx="36" cy="26" r="2" fill="#FFFFFF"></circle>227 <path d="M28 32c2 2 6 2 8 0" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>228 </svg>229 <div class="card-label">Check In</div>230 </div>231 232 <!-- Music -->233 <div class="card">234 <div class="badge">235 <svg viewBox="0 0 24 24">236 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>237 </svg>238 </div>239 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">240 <path d="M26 18v24c0 6-8 8-10 4s2-8 8-6V18l22-4v20c0 6-8 8-10 4s2-8 8-6" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" fill="none"></path>241 </svg>242 <div class="card-label">Music</div>243 </div>244 245 <!-- Yoga -->246 <div class="card">247 <div class="badge">248 <svg viewBox="0 0 24 24">249 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>250 </svg>251 </div>252 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">253 <circle cx="32" cy="18" r="6" stroke="#FFFFFF" stroke-width="3"></circle>254 <path d="M32 26v10M24 40l8-4 8 4M22 52l10-8 10 8" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>255 </svg>256 <div class="card-label">Yoga</div>257 </div>258 259 <!-- Live -->260 <div class="card">261 <div class="badge">262 <svg viewBox="0 0 24 24">263 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>264 </svg>265 </div>266 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">267 <path d="M32 18v28M24 46c0-10 16-10 16 0" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>268 <path d="M26 12h12" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>269 </svg>270 <div class="card-label">Live</div>271 </div>272 273 <!-- Workplace -->274 <div class="card">275 <div class="badge">276 <svg viewBox="0 0 24 24">277 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>278 </svg>279 </div>280 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">281 <rect x="18" y="26" width="28" height="20" rx="4" stroke="#FFFFFF" stroke-width="3" fill="none"></rect>282 <path d="M24 26v-4c0-3 3-4 8-4s8 1 8 4v4" stroke="#FFFFFF" stroke-width="3" fill="none"></path>283 </svg>284 <div class="card-label">Workplace</div>285 </div>286 287 <!-- Bookmarks -->288 <div class="card">289 <div class="badge">290 <svg viewBox="0 0 24 24">291 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>292 </svg>293 </div>294 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">295 <path d="M24 16h16v32l-8-6-8 6V16z" stroke="#FFFFFF" stroke-width="3" fill="none"></path>296 </svg>297 <div class="card-label">Bookmarks</div>298 </div>299 300 <!-- Breathe -->301 <div class="card">302 <div class="badge">303 <svg viewBox="0 0 24 24">304 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>305 </svg>306 </div>307 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">308 <path d="M18 40c8-6 10-16 22-16M24 52c10-8 12-18 24-18" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>309 <path d="M18 24l6-8" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>310 </svg>311 <div class="card-label">Breathe</div>312 </div>313 314 <!-- Journal -->315 <div class="card">316 <div class="badge">317 <svg viewBox="0 0 24 24">318 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>319 </svg>320 </div>321 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">322 <rect x="18" y="16" width="28" height="32" rx="4" stroke="#FFFFFF" stroke-width="3"></rect>323 <path d="M24 22h16M24 30h16M24 38h14" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>324 </svg>325 <div class="card-label">Journal</div>326 </div>327 328 <!-- Quotes -->329 <div class="card">330 <div class="badge">331 <svg viewBox="0 0 24 24">332 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>333 </svg>334 </div>335 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">336 <path d="M22 24c4 0 6 3 6 7s-2 7-6 9v6M38 24c4 0 6 3 6 7s-2 7-6 9v6" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>337 </svg>338 <div class="card-label">Quotes</div>339 </div>340 341 <!-- Challenges -->342 <div class="card">343 <div class="badge">344 <svg viewBox="0 0 24 24">345 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>346 </svg>347 </div>348 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">349 <circle cx="32" cy="24" r="10" stroke="#FFFFFF" stroke-width="3"></circle>350 <path d="M32 18l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1 2-4z" stroke="#FFFFFF" stroke-width="2"></path>351 <path d="M20 48h24" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>352 </svg>353 <div class="card-label">Challenges</div>354 </div>355 356 <!-- New Courses -->357 <div class="card">358 <div class="badge">359 <svg viewBox="0 0 24 24">360 <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>361 </svg>362 </div>363 <svg width="88" height="88" viewBox="0 0 64 64" fill="none">364 <path d="M12 28l20-8 20 8-20 8-20-8z" stroke="#FFFFFF" stroke-width="3" fill="none"></path>365 <path d="M22 34v12l10 4 10-4V34" stroke="#FFFFFF" stroke-width="3" fill="none"></path>366 <circle cx="32" cy="30" r="3" fill="#FFFFFF"></circle>367 </svg>368 <div class="card-label">New Courses</div>369 </div>370 </div>371 </div>372 373 <div class="home-indicator"></div>374</div>375</body>376</html>