GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Shortcuts Sheet</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #0c0c0c;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #eee;17  }18 19  /* Bottom home indicator */20  .home-indicator {21    position: absolute;22    bottom: 36px;23    left: 50%;24    transform: translateX(-50%);25    width: 300px;26    height: 10px;27    background: #e7e7e7;28    border-radius: 6px;29    opacity: .9;30  }31 32  /* Sliding sheet */33  .sheet {34    position: absolute;35    left: 0;36    right: 0;37    top: 260px;38    bottom: 120px;39    background: #141414;40    border-top-left-radius: 36px;41    border-top-right-radius: 36px;42    box-shadow: 0 -20px 40px rgba(0,0,0,.6) inset;43  }44 45  .sheet-header {46    position: sticky;47    top: 0;48    padding: 40px 52px 0 52px;49    height: 120px;50  }51  .header-actions {52    display: flex;53    justify-content: space-between;54    align-items: center;55  }56  .action-cancel {57    color: #ff6b6b;58    font-weight: 600;59    font-size: 40px;60  }61  .action-save {62    color: #3dc0b7;63    font-weight: 700;64    font-size: 40px;65  }66 67  .headline {68    text-align: center;69    padding: 36px 90px 24px 90px;70    font-size: 44px;71    line-height: 1.35;72    color: #f1f1f1;73  }74 75  .grid {76    padding: 20px 52px 140px 52px;77    display: grid;78    grid-template-columns: repeat(3, 1fr);79    grid-gap: 36px 36px;80  }81  .tile {82    position: relative;83    background: #1a1b1d;84    border-radius: 34px;85    height: 240px;86    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;87    display: flex;88    flex-direction: column;89    align-items: center;90    justify-content: center;91  }92  .tile.disabled {93    background: #1a1b1d;94    opacity: .35;95  }96  .tile .label {97    margin-top: 18px;98    font-size: 36px;99    color: #f4f4f4;100  }101  .tile.disabled .label { color: #cfcfcf; }102 103  .icon {104    width: 84px;105    height: 84px;106    stroke: #ffffff;107    fill: none;108    stroke-width: 10;109    stroke-linecap: round;110    stroke-linejoin: round;111    opacity: .95;112  }113  .icon.solid { fill: #ffffff; stroke: none; }114 115  /* badges */116  .badge {117    position: absolute;118    top: -16px;119    left: -16px;120    width: 86px;121    height: 86px;122    border-radius: 50%;123    display: flex;124    align-items: center;125    justify-content: center;126    color: #fff;127    font-size: 56px;128    font-weight: 700;129    box-shadow: 0 6px 14px rgba(0,0,0,.35);130  }131  .badge.plus { background: #2ea9a4; }132  .badge.minus { background: #ff6b6b; }133 134  /* helper icons sizes */135  .icon.small {136    width: 72px;137    height: 72px;138  }139</style>140</head>141<body>142<div id="render-target">143  <div class="sheet">144    <div class="sheet-header">145      <div class="header-actions">146        <div class="action-cancel">Cancel</div>147        <div class="action-save">Save</div>148      </div>149      <div class="headline">Add as many shortcuts to your homescreen as you like</div>150    </div>151 152    <div class="grid">153      <!-- Row 1 -->154      <div class="tile">155        <div class="badge minus">−</div>156        <!-- Sunrise icon -->157        <svg class="icon" viewBox="0 0 100 100">158          <path d="M18 66a32 32 0 0 1 64 0" />159          <path d="M50 18v16M22 40l10 10M78 40L68 50M18 66h64" />160          <path d="M34 82h32" />161        </svg>162        <div class="label">Mornings</div>163      </div>164 165      <div class="tile">166        <div class="badge minus">−</div>167        <!-- Bowl / timer-like semicircle -->168        <svg class="icon" viewBox="0 0 100 100">169          <path d="M22 56a28 20 0 0 0 56 0" />170          <path d="M30 74h40" />171        </svg>172        <div class="label">Timer</div>173      </div>174 175      <div class="tile disabled">176        <!-- 3x3 dots icon -->177        <svg class="icon" viewBox="0 0 100 100">178          <circle cx="28" cy="28" r="6" />179          <circle cx="50" cy="28" r="6" />180          <circle cx="72" cy="28" r="6" />181          <circle cx="28" cy="50" r="6" />182          <circle cx="50" cy="50" r="6" />183          <circle cx="72" cy="50" r="6" />184          <circle cx="28" cy="72" r="6" />185          <circle cx="50" cy="72" r="6" />186          <circle cx="72" cy="72" r="6" />187        </svg>188        <div class="label">More</div>189      </div>190 191      <!-- Row 2 -->192      <div class="tile">193        <div class="badge plus">+</div>194        <!-- Crescent (sleep) -->195        <svg class="icon" viewBox="0 0 100 100">196          <path d="M60 20a34 34 0 1 0 0 60 28 28 0 1 1 0-60z" />197        </svg>198        <div class="label">Sleep</div>199      </div>200 201      <div class="tile">202        <div class="badge plus">+</div>203        <!-- Recent circular arrow -->204        <svg class="icon" viewBox="0 0 100 100">205          <path d="M82 50A32 32 0 1 1 50 18" />206          <path d="M50 6v24h24" />207        </svg>208        <div class="label">Recent</div>209      </div>210 211      <div class="tile">212        <div class="badge plus">+</div>213        <!-- Smiley -->214        <svg class="icon" viewBox="0 0 100 100">215          <circle cx="50" cy="50" r="34" />216          <path d="M36 60c8 10 20 10 28 0" />217          <path d="M38 44h0M62 44h0" />218        </svg>219        <div class="label">Check In</div>220      </div>221 222      <!-- Row 3 -->223      <div class="tile">224        <div class="badge plus">+</div>225        <!-- Music note -->226        <svg class="icon" viewBox="0 0 100 100">227          <path d="M62 20v44c0 10-16 12-20 4s8-14 20-8" />228          <path d="M62 20l18-6v20" />229        </svg>230        <div class="label">Music</div>231      </div>232 233      <div class="tile">234        <div class="badge plus">+</div>235        <!-- Yoga stick figure -->236        <svg class="icon" viewBox="0 0 100 100">237          <circle cx="50" cy="24" r="10" />238          <path d="M50 34v20" />239          <path d="M30 42l20 12 20-12" />240          <path d="M34 78l16-24 16 24" />241        </svg>242        <div class="label">Yoga</div>243      </div>244 245      <div class="tile">246        <div class="badge plus">+</div>247        <!-- Microphone -->248        <svg class="icon" viewBox="0 0 100 100">249          <rect x="40" y="20" width="20" height="40" rx="10" />250          <path d="M30 50a20 20 0 0 0 40 0" />251          <path d="M50 70v14M38 84h24" />252        </svg>253        <div class="label">Live</div>254      </div>255 256      <!-- Row 4 -->257      <div class="tile">258        <div class="badge plus">+</div>259        <!-- Briefcase -->260        <svg class="icon" viewBox="0 0 100 100">261          <rect x="18" y="34" width="64" height="40" rx="8" />262          <path d="M36 34v-6a8 8 0 0 1 8-8h12a8 8 0 0 1 8 8v6" />263          <path d="M18 50h64" />264        </svg>265        <div class="label">Workplace</div>266      </div>267 268      <div class="tile">269        <div class="badge plus">+</div>270        <!-- Bookmark -->271        <svg class="icon" viewBox="0 0 100 100">272          <path d="M34 18h32v64l-16-12-16 12z" />273        </svg>274        <div class="label">Bookmarks</div>275      </div>276 277      <div class="tile">278        <div class="badge plus">+</div>279        <!-- Leaf -->280        <svg class="icon" viewBox="0 0 100 100">281          <path d="M82 28c-46 0-56 36-48 52 22-4 48-26 48-52z" />282          <path d="M34 80l18-18" />283        </svg>284        <div class="label">Breathe</div>285      </div>286 287      <!-- Row 5 -->288      <div class="tile">289        <div class="badge plus">+</div>290        <!-- Journal / book -->291        <svg class="icon" viewBox="0 0 100 100">292          <path d="M20 24h30v52H20a8 8 0 0 1-8-8V32a8 8 0 0 1 8-8z" />293          <path d="M50 24h30v52H50" />294          <path d="M30 36h14M30 46h14" />295        </svg>296        <div class="label">Journal</div>297      </div>298 299      <div class="tile">300        <div class="badge plus">+</div>301        <!-- Quotes -->302        <svg class="icon" viewBox="0 0 100 100">303          <path d="M36 38c-8 4-12 10-12 20 8-4 14 0 14 8 0 8-6 12-12 12" />304          <path d="M68 38c-8 4-12 10-12 20 8-4 14 0 14 8 0 8-6 12-12 12" />305        </svg>306        <div class="label">Quotes</div>307      </div>308 309      <div class="tile">310        <div class="badge plus">+</div>311        <!-- Star in badge (challenges) -->312        <svg class="icon" viewBox="0 0 100 100">313          <circle cx="50" cy="50" r="30" />314          <path d="M50 28l7 14 16 2-12 10 4 16-15-8-15 8 4-16-12-10 16-2z" />315        </svg>316        <div class="label">Challenges</div>317      </div>318 319      <!-- Row 6 -->320      <div class="tile">321        <div class="badge plus">+</div>322        <!-- New courses (open map/book) -->323        <svg class="icon" viewBox="0 0 100 100">324          <path d="M18 30l26-8v56l-26 8z" />325          <path d="M56 22l26 8v56l-26-8z" />326          <path d="M44 24l12-2v56l-12 2z" />327        </svg>328        <div class="label">New Courses</div>329      </div>330    </div>331  </div>332 333  <div class="home-indicator"></div>334</div>335</body>336</html>