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.0">6<title>Shortcuts Modal</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: #0d0d0d;15    font-family: "Inter", "SF Pro Text", Arial, sans-serif;16    color: #ffffff;17  }18 19  /* Bottom sheet */20  .sheet {21    position: absolute;22    left: 0; right: 0;23    top: 260px; bottom: 0;24    background: #141414;25    border-top-left-radius: 44px;26    border-top-right-radius: 44px;27    box-shadow: 0 -20px 40px rgba(0,0,0,0.35);28    padding: 56px 56px 120px;29  }30 31  .sheet-header {32    display: flex;33    justify-content: space-between;34    align-items: center;35    font-size: 40px;36    line-height: 1;37    margin-bottom: 48px;38  }39  .action-cancel { color: #e35a62; font-weight: 600; }40  .action-save { color: #3ab0ad; font-weight: 600; }41 42  .title {43    text-align: center;44    font-size: 46px;45    font-weight: 500;46    color: #f4f4f4;47    margin: 36px 0 24px;48  }49 50  .grid {51    display: flex;52    flex-wrap: wrap;53    gap: 28px;54    margin-top: 24px;55  }56 57  .tile {58    position: relative;59    width: 296px;60    height: 172px;61    border-radius: 28px;62    background: #171717;63    box-shadow: 0 8px 20px rgba(0,0,0,0.35);64    display: flex;65    flex-direction: column;66    justify-content: center;67    align-items: center;68  }69  .tile.disabled {70    background: #0f0f0f;71    box-shadow: none;72    border: 1px dashed #2a2a2a;73    color: #7a7a7a;74  }75 76  .tile-label {77    margin-top: 12px;78    font-size: 36px;79    color: #eaeaea;80    font-weight: 500;81  }82  .tile.disabled .tile-label { color: #7a7a7a; }83 84  .badge {85    position: absolute;86    top: -16px;87    left: -16px;88    width: 64px; height: 64px;89    border-radius: 50%;90    display: flex; align-items: center; justify-content: center;91    font-size: 40px; font-weight: 700;92    color: #fff;93    box-shadow: 0 8px 20px rgba(0,0,0,0.4);94  }95  .badge.minus { background: #d9545e; }96  .badge.plus { background: #2ea9a6; }97 98  /* Icon styling */99  .icon {100    width: 84px; height: 84px;101  }102  .icon path, .icon circle, .icon rect, .icon line, .icon polyline {103    stroke: #ffffff; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round;104  }105  .tile.disabled .icon path,106  .tile.disabled .icon circle,107  .tile.disabled .icon rect,108  .tile.disabled .icon line,109  .tile.disabled .icon polyline { stroke: #7a7a7a; }110 111  /* Sections spacing */112  .section { margin-bottom: 36px; }113  .home-indicator {114    position: absolute;115    bottom: 32px; left: 50%;116    transform: translateX(-50%);117    width: 240px; height: 8px;118    background: rgba(255,255,255,0.28);119    border-radius: 8px;120  }121</style>122</head>123<body>124<div id="render-target">125  <div class="sheet">126    <div class="sheet-header">127      <div class="action-cancel">Cancel</div>128      <div class="action-save">Save</div>129    </div>130 131    <div class="title">Add as many shortcuts to your<br>homescreen as you like</div>132 133    <!-- Selected shortcuts -->134    <div class="section">135      <div class="grid">136        <!-- Mornings -->137        <div class="tile">138          <div class="badge minus">−</div>139          <svg class="icon" viewBox="0 0 100 100">140            <!-- horizon -->141            <line x1="18" y1="62" x2="82" y2="62"></line>142            <!-- sun semi -->143            <path d="M30 62 A20 20 0 0 1 70 62"></path>144            <!-- rays -->145            <line x1="50" y1="28" x2="50" y2="18"></line>146            <line x1="30" y1="38" x2="22" y2="32"></line>147            <line x1="70" y1="38" x2="78" y2="32"></line>148          </svg>149          <div class="tile-label">Mornings</div>150        </div>151 152        <!-- Timer (cup/bowl) -->153        <div class="tile">154          <div class="badge minus">−</div>155          <svg class="icon" viewBox="0 0 100 100">156            <path d="M26 42 C26 62 74 62 74 42"></path>157            <line x1="30" y1="66" x2="70" y2="66"></line>158          </svg>159          <div class="tile-label">Timer</div>160        </div>161 162        <!-- Music -->163        <div class="tile">164          <div class="badge minus">−</div>165          <svg class="icon" viewBox="0 0 100 100">166            <path d="M62 20 v42"></path>167            <path d="M38 24 v34"></path>168            <circle cx="38" cy="74" r="10"></circle>169            <circle cx="62" cy="66" r="10"></circle>170            <line x1="38" y1="24" x2="62" y2="20"></line>171          </svg>172          <div class="tile-label">Music</div>173        </div>174 175        <!-- More (disabled) -->176        <div class="tile disabled">177          <svg class="icon" viewBox="0 0 100 100">178            <circle cx="34" cy="34" r="4"></circle>179            <circle cx="50" cy="34" r="4"></circle>180            <circle cx="66" cy="34" r="4"></circle>181            <circle cx="34" cy="50" r="4"></circle>182            <circle cx="50" cy="50" r="4"></circle>183            <circle cx="66" cy="50" r="4"></circle>184            <circle cx="34" cy="66" r="4"></circle>185            <circle cx="50" cy="66" r="4"></circle>186            <circle cx="66" cy="66" r="4"></circle>187          </svg>188          <div class="tile-label">More</div>189        </div>190      </div>191    </div>192 193    <!-- Available shortcuts -->194    <div class="section">195      <div class="grid">196        <!-- Sleep -->197        <div class="tile">198          <div class="badge plus">+</div>199          <svg class="icon" viewBox="0 0 100 100">200            <path d="M64 20 A32 32 0 1 0 36 80 A24 24 0 1 1 64 20"></path>201          </svg>202          <div class="tile-label">Sleep</div>203        </div>204 205        <!-- Recent -->206        <div class="tile">207          <div class="badge plus">+</div>208          <svg class="icon" viewBox="0 0 100 100">209            <circle cx="50" cy="50" r="28"></circle>210            <polyline points="50,28 50,50 66,58"></polyline>211          </svg>212          <div class="tile-label">Recent</div>213        </div>214 215        <!-- Check In -->216        <div class="tile">217          <div class="badge plus">+</div>218          <svg class="icon" viewBox="0 0 100 100">219            <circle cx="50" cy="50" r="28"></circle>220            <circle cx="40" cy="46" r="4"></circle>221            <circle cx="60" cy="46" r="4"></circle>222            <path d="M38 60 Q50 70 62 60"></path>223          </svg>224          <div class="tile-label">Check In</div>225        </div>226 227        <!-- Yoga -->228        <div class="tile">229          <div class="badge plus">+</div>230          <svg class="icon" viewBox="0 0 100 100">231            <circle cx="50" cy="26" r="8"></circle>232            <path d="M50 34 L50 56"></path>233            <path d="M30 50 L50 42 L70 50"></path>234            <path d="M36 72 L50 60 L64 72"></path>235          </svg>236          <div class="tile-label">Yoga</div>237        </div>238 239        <!-- Live -->240        <div class="tile">241          <div class="badge plus">+</div>242          <svg class="icon" viewBox="0 0 100 100">243            <rect x="42" y="28" width="16" height="30" rx="8"></rect>244            <path d="M38 46 C38 62 62 62 62 46"></path>245            <line x1="50" y1="60" x2="50" y2="74"></line>246          </svg>247          <div class="tile-label">Live</div>248        </div>249 250        <!-- Workplace -->251        <div class="tile">252          <div class="badge plus">+</div>253          <svg class="icon" viewBox="0 0 100 100">254            <rect x="26" y="36" width="48" height="32" rx="6"></rect>255            <path d="M38 36 v-8 h24 v8"></path>256          </svg>257          <div class="tile-label">Workplace</div>258        </div>259 260        <!-- Bookmarks -->261        <div class="tile">262          <div class="badge plus">+</div>263          <svg class="icon" viewBox="0 0 100 100">264            <path d="M38 24 h24 v52 l-12 -10 -12 10 z"></path>265          </svg>266          <div class="tile-label">Bookmarks</div>267        </div>268 269        <!-- Breathe -->270        <div class="tile">271          <div class="badge plus">+</div>272          <svg class="icon" viewBox="0 0 100 100">273            <path d="M30 70 C52 40 68 34 74 52 C62 54 48 66 44 78"></path>274          </svg>275          <div class="tile-label">Breathe</div>276        </div>277 278        <!-- Journal -->279        <div class="tile">280          <div class="badge plus">+</div>281          <svg class="icon" viewBox="0 0 100 100">282            <rect x="26" y="26" width="48" height="48" rx="6"></rect>283            <line x1="50" y1="26" x2="50" y2="74"></line>284          </svg>285          <div class="tile-label">Journal</div>286        </div>287 288        <!-- Quotes -->289        <div class="tile">290          <div class="badge plus">+</div>291          <svg class="icon" viewBox="0 0 100 100">292            <path d="M38 40 c-10 0 -10 16 0 16 c8 0 12 -6 12 -12 c0 -10 -8 -18 -18 -18"></path>293            <path d="M66 40 c-10 0 -10 16 0 16 c8 0 12 -6 12 -12 c0 -10 -8 -18 -18 -18"></path>294          </svg>295          <div class="tile-label">Quotes</div>296        </div>297 298        <!-- Challenges -->299        <div class="tile">300          <div class="badge plus">+</div>301          <svg class="icon" viewBox="0 0 100 100">302            <circle cx="50" cy="50" r="26"></circle>303            <path d="M50 34 L54 46 L66 46 L56 54 L60 66 L50 58 L40 66 L44 54 L34 46 L46 46 Z"></path>304          </svg>305          <div class="tile-label">Challenges</div>306        </div>307 308        <!-- New Courses -->309        <div class="tile">310          <div class="badge plus">+</div>311          <svg class="icon" viewBox="0 0 100 100">312            <path d="M28 38 L50 30 L72 38 L50 46 Z"></path>313            <path d="M28 38 v26 L50 46 v28"></path>314            <path d="M72 38 v26 L50 46"></path>315          </svg>316          <div class="tile-label">New Courses</div>317        </div>318      </div>319    </div>320  </div>321 322  <div class="home-indicator"></div>323</div>324</body>325</html>