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 Sheet</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f0f0f;15 }16 17 /* Bottom sheet */18 .sheet {19 position: absolute;20 left: 0;21 right: 0;22 top: 300px;23 height: 2000px;24 background: #161616;25 border-top-left-radius: 44px;26 border-top-right-radius: 44px;27 box-shadow: 0 -12px 40px rgba(0,0,0,0.55);28 color: #fff;29 }30 .sheet-inner {31 width: 940px;32 margin: 0 auto;33 padding: 60px 0 120px;34 }35 36 .sheet-top {37 display: flex;38 justify-content: space-between;39 align-items: center;40 margin-bottom: 24px;41 }42 .action {43 font-size: 42px;44 font-weight: 600;45 letter-spacing: 0.2px;46 cursor: default;47 }48 .action.cancel { color: #ff6b6b; }49 .action.save { color: #3ec7c3; }50 51 .title {52 text-align: center;53 font-size: 46px;54 line-height: 1.32;55 color: #f3f3f3;56 margin: 32px 40px 46px;57 font-weight: 600;58 }59 60 /* Grid of cards */61 .grid {62 display: grid;63 grid-template-columns: repeat(3, 1fr);64 gap: 34px;65 }66 67 .card {68 position: relative;69 background: #1d1d1d;70 border-radius: 30px;71 height: 210px;72 box-shadow: 0 14px 22px rgba(0,0,0,0.35);73 display: flex;74 flex-direction: column;75 align-items: center;76 justify-content: center;77 padding-top: 12px;78 }79 .card.disabled {80 background: #1a1a1a;81 color: #8a8a8a;82 }83 .label {84 margin-top: 16px;85 font-size: 40px;86 font-weight: 500;87 color: #ffffff;88 }89 .card.disabled .label {90 color: #8e8e8e;91 }92 .badge {93 position: absolute;94 top: 16px;95 left: 16px;96 width: 64px;97 height: 64px;98 border-radius: 50%;99 display: flex;100 align-items: center;101 justify-content: center;102 font-size: 44px;103 font-weight: 700;104 line-height: 1;105 box-shadow: 0 6px 10px rgba(0,0,0,0.3);106 }107 .badge.minus {108 background: #ff5252;109 color: #ffffff;110 }111 .badge.plus {112 background: #2fb3af;113 color: #ffffff;114 }115 116 /* Icon base */117 .icon {118 width: 92px;119 height: 92px;120 }121 .icon svg {122 width: 100%;123 height: 100%;124 stroke: #ffffff;125 fill: none;126 stroke-width: 6;127 stroke-linecap: round;128 stroke-linejoin: round;129 opacity: 0.95;130 }131 .card.disabled .icon svg {132 stroke: #777777;133 opacity: 0.45;134 }135 136 /* Home indicator */137 .home-indicator {138 position: absolute;139 bottom: 42px;140 left: 50%;141 transform: translateX(-50%);142 width: 360px;143 height: 10px;144 background: #ffffff;145 opacity: 0.8;146 border-radius: 10px;147 }148</style>149</head>150<body>151<div id="render-target">152 <div class="sheet">153 <div class="sheet-inner">154 <div class="sheet-top">155 <div class="action cancel">Cancel</div>156 <div class="action save">Save</div>157 </div>158 159 <div class="title">Add as many shortcuts to your homescreen as you like</div>160 161 <div class="grid">162 <!-- Row 1: active with minus -->163 <div class="card">164 <div class="badge minus">−</div>165 <div class="icon">166 <!-- Sun / Mornings -->167 <svg viewBox="0 0 100 100">168 <circle cx="50" cy="52" r="16"></circle>169 <line x1="50" y1="20" x2="50" y2="8"></line>170 <line x1="50" y1="84" x2="50" y2="92"></line>171 <line x1="18" y1="52" x2="8" y2="52"></line>172 <line x1="92" y1="52" x2="82" y2="52"></line>173 <line x1="28" y1="34" x2="20" y2="26"></line>174 <line x1="72" y1="34" x2="80" y2="26"></line>175 <line x1="28" y1="70" x2="20" y2="78"></line>176 <line x1="72" y1="70" x2="80" y2="78"></line>177 </svg>178 </div>179 <div class="label">Mornings</div>180 </div>181 182 <div class="card">183 <div class="badge minus">−</div>184 <div class="icon">185 <!-- Timer (bowl-like) -->186 <svg viewBox="0 0 100 100">187 <path d="M22 46c0 18 14 32 28 32s28-14 28-32H22z"></path>188 <path d="M36 22h28"></path>189 <path d="M44 14h12"></path>190 </svg>191 </div>192 <div class="label">Timer</div>193 </div>194 195 <div class="card">196 <div class="badge minus">−</div>197 <div class="icon">198 <!-- Music note -->199 <svg viewBox="0 0 100 100">200 <path d="M40 26v40c0 8-8 12-16 10s-12-10-4-16c6-5 14-1 20 6"></path>201 <path d="M40 26l36 10v26"></path>202 <circle cx="76" cy="66" r="10"></circle>203 </svg>204 </div>205 <div class="label">Music</div>206 </div>207 208 <!-- Row 2 -->209 <div class="card">210 <div class="badge minus">−</div>211 <div class="icon">212 <!-- Moon -->213 <svg viewBox="0 0 100 100">214 <path d="M64 20a30 30 0 1 0 0 60c-20 0-36-16-36-36 0-16 10-30 24-24z"></path>215 </svg>216 </div>217 <div class="label">Sleep</div>218 </div>219 220 <div class="card disabled">221 <div class="icon">222 <!-- More: 3x3 dots -->223 <svg viewBox="0 0 100 100">224 <circle cx="30" cy="30" r="4"></circle>225 <circle cx="50" cy="30" r="4"></circle>226 <circle cx="70" cy="30" r="4"></circle>227 <circle cx="30" cy="50" r="4"></circle>228 <circle cx="50" cy="50" r="4"></circle>229 <circle cx="70" cy="50" r="4"></circle>230 <circle cx="30" cy="70" r="4"></circle>231 <circle cx="50" cy="70" r="4"></circle>232 <circle cx="70" cy="70" r="4"></circle>233 </svg>234 </div>235 <div class="label">More</div>236 </div>237 238 <div class="card" style="visibility:hidden;"></div><!-- spacer to mimic layout -->239 240 <!-- Row 3: plus -->241 <div class="card">242 <div class="badge plus">+</div>243 <div class="icon">244 <!-- Recent / Clock -->245 <svg viewBox="0 0 100 100">246 <circle cx="50" cy="50" r="30"></circle>247 <path d="M50 50V30"></path>248 <path d="M50 50L68 58"></path>249 <path d="M25 50a25 25 0 1 0 8-18"></path>250 </svg>251 </div>252 <div class="label">Recent</div>253 </div>254 255 <div class="card">256 <div class="badge plus">+</div>257 <div class="icon">258 <!-- Check In / Smiley -->259 <svg viewBox="0 0 100 100">260 <circle cx="50" cy="50" r="28"></circle>261 <circle cx="42" cy="44" r="4"></circle>262 <circle cx="58" cy="44" r="4"></circle>263 <path d="M38 60c6 8 18 8 24 0"></path>264 </svg>265 </div>266 <div class="label">Check In</div>267 </div>268 269 <div class="card">270 <div class="badge plus">+</div>271 <div class="icon">272 <!-- Yoga stick figure -->273 <svg viewBox="0 0 100 100">274 <circle cx="50" cy="26" r="8"></circle>275 <path d="M50 34v20"></path>276 <path d="M30 44l20 10 20-10"></path>277 <path d="M40 64l-10 16"></path>278 <path d="M60 64l10 16"></path>279 </svg>280 </div>281 <div class="label">Yoga</div>282 </div>283 284 <!-- Row 4 -->285 <div class="card">286 <div class="badge plus">+</div>287 <div class="icon">288 <!-- Microphone -->289 <svg viewBox="0 0 100 100">290 <rect x="40" y="28" width="20" height="34" rx="10"></rect>291 <path d="M32 46c0 12 8 22 18 22s18-10 18-22"></path>292 <path d="M50 68v16"></path>293 <path d="M40 84h20"></path>294 </svg>295 </div>296 <div class="label">Live</div>297 </div>298 299 <div class="card">300 <div class="badge plus">+</div>301 <div class="icon">302 <!-- Briefcase -->303 <svg viewBox="0 0 100 100">304 <rect x="20" y="38" width="60" height="36" rx="8"></rect>305 <path d="M36 38v-8c0-6 6-10 14-10s14 4 14 10v8"></path>306 <path d="M20 52h60"></path>307 </svg>308 </div>309 <div class="label">Workplace</div>310 </div>311 312 <div class="card">313 <div class="badge plus">+</div>314 <div class="icon">315 <!-- Bookmark -->316 <svg viewBox="0 0 100 100">317 <path d="M62 20H38c-6 0-10 4-10 10v48l22-12 22 12V30c0-6-4-10-10-10z"></path>318 </svg>319 </div>320 <div class="label">Bookmarks</div>321 </div>322 323 <!-- Row 5 -->324 <div class="card">325 <div class="badge plus">+</div>326 <div class="icon">327 <!-- Leaf -->328 <svg viewBox="0 0 100 100">329 <path d="M24 70c20-2 36-18 52-44-22 2-42 14-52 32"></path>330 <path d="M24 70c10-6 16-14 20-24"></path>331 </svg>332 </div>333 <div class="label">Breathe</div>334 </div>335 336 <div class="card">337 <div class="badge plus">+</div>338 <div class="icon">339 <!-- Journal / Book -->340 <svg viewBox="0 0 100 100">341 <rect x="20" y="24" width="60" height="52" rx="6"></rect>342 <path d="M50 24v52"></path>343 <path d="M32 36h12"></path>344 <path d="M32 46h12"></path>345 </svg>346 </div>347 <div class="label">Journal</div>348 </div>349 350 <div class="card">351 <div class="badge plus">+</div>352 <div class="icon">353 <!-- Quotes -->354 <svg viewBox="0 0 100 100">355 <path d="M36 36c-8 4-12 10-12 20h16c0-10-4-14-4-20z"></path>356 <path d="M68 36c-8 4-12 10-12 20h16c0-10-4-14-4-20z"></path>357 </svg>358 </div>359 <div class="label">Quotes</div>360 </div>361 362 <!-- Row 6 -->363 <div class="card">364 <div class="badge plus">+</div>365 <div class="icon">366 <!-- Challenges / Star in circle -->367 <svg viewBox="0 0 100 100">368 <circle cx="50" cy="50" r="26"></circle>369 <path d="M50 32l6 12 14 2-10 9 3 14-13-7-13 7 3-14-10-9 14-2z"></path>370 </svg>371 </div>372 <div class="label">Challenges</div>373 </div>374 375 <div class="card">376 <div class="badge plus">+</div>377 <div class="icon">378 <!-- New Courses / Pin + book -->379 <svg viewBox="0 0 100 100">380 <path d="M50 24c10 0 18 8 18 18 0 12-12 22-18 28-6-6-18-16-18-28 0-10 8-18 18-18z"></path>381 <circle cx="50" cy="42" r="6"></circle>382 <path d="M20 72c12-6 24-6 36 0 12-6 24-6 36 0"></path>383 </svg>384 </div>385 <div class="label">New Courses</div>386 </div>387 388 <div class="card" style="visibility:hidden;"></div>389 </div>390 </div>391 </div>392 393 <div class="home-indicator"></div>394</div>395</body>396</html>