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, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0b0b0b;15 }16 .sheet {17 position: absolute;18 left: 0;19 top: 270px;20 width: 1080px;21 height: 2130px;22 background: #141414;23 border-radius: 60px 60px 0 0;24 color: #fff;25 box-shadow: 0 -12px 40px rgba(0,0,0,0.6);26 }27 .sheet-header {28 position: relative;29 padding: 40px 60px 0 60px;30 height: 120px;31 }32 .cancel, .save {33 position: absolute;34 top: 46px;35 font-size: 42px;36 font-weight: 600;37 }38 .cancel { left: 60px; color: #ff6b6b; }39 .save { right: 60px; color: #4ec2c2; }40 .title {41 margin: 40px 120px 20px 120px;42 text-align: center;43 font-size: 48px;44 line-height: 1.35;45 font-weight: 600;46 color: #f5f5f5;47 }48 49 .grid {50 display: flex;51 flex-wrap: wrap;52 padding: 10px 60px 40px 60px;53 gap: 28px;54 }55 56 .card {57 width: 300px;58 height: 180px;59 background: #1b1b1b;60 border-radius: 36px;61 box-shadow: 0 10px 28px rgba(0,0,0,0.55);62 position: relative;63 display: flex;64 align-items: center;65 justify-content: center;66 flex-direction: column;67 color: #fff;68 }69 .card.dim { opacity: 0.35; }70 .label {71 margin-top: 12px;72 font-size: 34px;73 font-weight: 500;74 letter-spacing: 0.3px;75 color: #f2f2f2;76 }77 .icon svg {78 width: 72px;79 height: 72px;80 stroke: #ffffff;81 fill: none;82 stroke-width: 5;83 stroke-linecap: round;84 stroke-linejoin: round;85 opacity: 0.95;86 }87 88 .badge {89 position: absolute;90 top: -16px;91 left: -16px;92 width: 64px;93 height: 64px;94 border-radius: 50%;95 display: flex;96 align-items: center;97 justify-content: center;98 font-size: 40px;99 font-weight: 700;100 color: #fff;101 box-shadow: 0 6px 16px rgba(0,0,0,0.5);102 }103 .minus { background: #e35b62; }104 .plus { background: #2aa8a8; }105 106 /* slight icon variations for readability */107 .icon.small svg { width: 64px; height: 64px; }108 109 /* spacing between sections */110 .added-grid { margin-top: 10px; }111 .add-grid { margin-top: 40px; }112</style>113</head>114<body>115<div id="render-target">116 117 <div class="sheet">118 <div class="sheet-header">119 <div class="cancel">Cancel</div>120 <div class="save">Save</div>121 </div>122 123 <h1 class="title">Add as many shortcuts to your homescreen as you like</h1>124 125 <!-- Already added shortcuts -->126 <div class="grid added-grid">127 <div class="card remove">128 <div class="badge minus">-</div>129 <div class="icon">130 <svg viewBox="0 0 64 64">131 <!-- simple bowl/timer cup -->132 <path d="M16 28 H48"></path>133 <path d="M20 28 C20 48 44 48 44 28"></path>134 </svg>135 </div>136 <div class="label">Timer</div>137 </div>138 139 <div class="card remove">140 <div class="badge minus">-</div>141 <div class="icon">142 <svg viewBox="0 0 64 64">143 <!-- music note -->144 <path d="M28 16 V44"></path>145 <path d="M28 16 L48 16 V32"></path>146 <path d="M48 32 C48 40 38 40 38 32"></path>147 <circle cx="28" cy="48" r="6"></circle>148 </svg>149 </div>150 <div class="label">Music</div>151 </div>152 153 <div class="card remove">154 <div class="badge minus">-</div>155 <div class="icon">156 <svg viewBox="0 0 64 64">157 <!-- crescent moon -->158 <path d="M38 12 A22 22 0 1 0 38 52 A16 16 0 1 1 38 12"></path>159 </svg>160 </div>161 <div class="label">Sleep</div>162 </div>163 164 <div class="card dim">165 <div class="icon small">166 <svg viewBox="0 0 64 64">167 <!-- simple 3x3 dot grid -->168 <circle cx="20" cy="24" r="2"></circle>169 <circle cx="32" cy="24" r="2"></circle>170 <circle cx="44" cy="24" r="2"></circle>171 <circle cx="20" cy="36" r="2"></circle>172 <circle cx="32" cy="36" r="2"></circle>173 <circle cx="44" cy="36" r="2"></circle>174 <circle cx="20" cy="48" r="2"></circle>175 <circle cx="32" cy="48" r="2"></circle>176 <circle cx="44" cy="48" r="2"></circle>177 </svg>178 </div>179 <div class="label">More</div>180 </div>181 </div>182 183 <!-- Addable shortcuts -->184 <div class="grid add-grid">185 186 <div class="card">187 <div class="badge plus">+</div>188 <div class="icon">189 <svg viewBox="0 0 64 64">190 <!-- sunrise -->191 <circle cx="32" cy="36" r="10"></circle>192 <path d="M12 52 H52"></path>193 <path d="M32 14 V22"></path>194 <path d="M18 24 L22 28"></path>195 <path d="M46 24 L42 28"></path>196 </svg>197 </div>198 <div class="label">Mornings</div>199 </div>200 201 <div class="card">202 <div class="badge plus">+</div>203 <div class="icon">204 <svg viewBox="0 0 64 64">205 <!-- clock with arrow -->206 <circle cx="32" cy="32" r="18"></circle>207 <path d="M32 20 V34 L44 34"></path>208 <path d="M48 16 L58 16 L52 22"></path>209 </svg>210 </div>211 <div class="label">Recent</div>212 </div>213 214 <div class="card">215 <div class="badge plus">+</div>216 <div class="icon">217 <svg viewBox="0 0 64 64">218 <!-- smile face -->219 <circle cx="32" cy="32" r="18"></circle>220 <circle cx="26" cy="28" r="2"></circle>221 <circle cx="38" cy="28" r="2"></circle>222 <path d="M24 38 C28 42 36 42 40 38"></path>223 </svg>224 </div>225 <div class="label">Check In</div>226 </div>227 228 <div class="card">229 <div class="badge plus">+</div>230 <div class="icon">231 <svg viewBox="0 0 64 64">232 <!-- yoga pose -->233 <path d="M32 18 A6 6 0 1 1 31.9 18"></path>234 <path d="M32 24 V34"></path>235 <path d="M20 36 L32 34 L44 36"></path>236 <path d="M24 48 L32 40 L40 48"></path>237 </svg>238 </div>239 <div class="label">Yoga</div>240 </div>241 242 <div class="card">243 <div class="badge plus">+</div>244 <div class="icon">245 <svg viewBox="0 0 64 64">246 <!-- microphone -->247 <rect x="24" y="16" width="16" height="22" rx="8"></rect>248 <path d="M20 30 C20 42 44 42 44 30"></path>249 <path d="M32 42 V52"></path>250 <path d="M26 52 H38"></path>251 </svg>252 </div>253 <div class="label">Live</div>254 </div>255 256 <div class="card">257 <div class="badge plus">+</div>258 <div class="icon">259 <svg viewBox="0 0 64 64">260 <!-- briefcase -->261 <rect x="14" y="24" width="36" height="24" rx="6"></rect>262 <path d="M24 24 V18 H40 V24"></path>263 <path d="M22 34 H42"></path>264 </svg>265 </div>266 <div class="label">Workplace</div>267 </div>268 269 <div class="card">270 <div class="badge plus">+</div>271 <div class="icon">272 <svg viewBox="0 0 64 64">273 <!-- bookmark -->274 <path d="M24 16 H40 V52 L32 44 L24 52 Z"></path>275 </svg>276 </div>277 <div class="label">Bookmarks</div>278 </div>279 280 <div class="card">281 <div class="badge plus">+</div>282 <div class="icon">283 <svg viewBox="0 0 64 64">284 <!-- leaf -->285 <path d="M18 46 C18 28 46 18 46 46 C36 38 26 38 18 46 Z"></path>286 <path d="M26 40 L34 32"></path>287 </svg>288 </div>289 <div class="label">Breathe</div>290 </div>291 292 <div class="card">293 <div class="badge plus">+</div>294 <div class="icon">295 <svg viewBox="0 0 64 64">296 <!-- journal/book -->297 <rect x="16" y="16" width="32" height="32" rx="4"></rect>298 <path d="M32 16 V48"></path>299 <path d="M22 24 H28"></path>300 <path d="M22 30 H28"></path>301 </svg>302 </div>303 <div class="label">Journal</div>304 </div>305 306 <div class="card">307 <div class="badge plus">+</div>308 <div class="icon">309 <svg viewBox="0 0 64 64">310 <!-- quotes -->311 <path d="M20 26 C20 20 26 18 28 18 V32 H20 Z"></path>312 <path d="M36 26 C36 20 42 18 44 18 V32 H36 Z"></path>313 </svg>314 </div>315 <div class="label">Quotes</div>316 </div>317 318 <div class="card">319 <div class="badge plus">+</div>320 <div class="icon">321 <svg viewBox="0 0 64 64">322 <!-- star in a circle -->323 <circle cx="32" cy="32" r="18"></circle>324 <path d="M32 22 L35 30 L44 30 L37 35 L40 44 L32 39 L24 44 L27 35 L20 30 L29 30 Z"></path>325 </svg>326 </div>327 <div class="label">Challenges</div>328 </div>329 330 <div class="card">331 <div class="badge plus">+</div>332 <div class="icon">333 <svg viewBox="0 0 64 64">334 <!-- course/map tiles -->335 <rect x="16" y="16" width="14" height="14" rx="2"></rect>336 <rect x="34" y="16" width="14" height="14" rx="2"></rect>337 <rect x="16" y="34" width="14" height="14" rx="2"></rect>338 <rect x="34" y="34" width="14" height="14" rx="2"></rect>339 <circle cx="41" cy="41" r="3"></circle>340 </svg>341 </div>342 <div class="label">New Courses</div>343 </div>344 </div>345 346 </div>347 348</div>349</body>350</html>