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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#000000; border-radius:32px;12 box-shadow: 0 20px 60px rgba(0,0,0,0.35);13 color:#fff;14 }15 .sheet {16 position:absolute; left:0; right:0; top:300px;17 background:#141414; border-top-left-radius:40px; border-top-right-radius:40px;18 padding:56px 64px 140px;19 }20 .sheet-header {21 display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;22 font-size:42px; line-height:1;23 }24 .cancel { color:#ff6b7a; }25 .save { color:#1fbfb2; }26 .title {27 text-align:center; font-size:50px; font-weight:600; color:#eaeaea;28 margin:40px 40px 56px;29 }30 31 /* Cards */32 .top-cards { display:grid; grid-template-columns: 1fr 1fr; gap:36px; margin-bottom:40px; }33 .grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:36px; }34 .card {35 position:relative; background:#191919; border-radius:36px;36 height:260px; padding:36px 24px; box-sizing:border-box;37 }38 .card.small { height:240px; }39 .card.dim { opacity:0.35; }40 .label {41 text-align:center; font-size:40px; margin-top:18px; color:#f6f6f6; letter-spacing:0.3px;42 }43 .icon-wrap { display:flex; justify-content:center; align-items:center; margin-top:10px; }44 .icon { width:90px; height:90px; }45 .badge {46 position:absolute; top:-18px; left:-18px; width:84px; height:84px;47 border-radius:50%; display:flex; align-items:center; justify-content:center;48 box-shadow: 0 8px 18px rgba(0,0,0,0.35);49 }50 .badge.plus { background:#1fbfb2; }51 .badge.minus { background:#ff6b7a; }52 .badge svg { width:44px; height:44px; stroke:#ffffff; stroke-width:10; fill:none; }53 .home-indicator {54 position:absolute; bottom:30px; left:50%; transform:translateX(-50%);55 width:300px; height:12px; background:#e9e9e9; border-radius:10px; opacity:0.85;56 }57</style>58</head>59<body>60<div id="render-target">61 62 <div class="sheet">63 <div class="sheet-header">64 <div class="cancel">Cancel</div>65 <div class="save">Save</div>66 </div>67 68 <div class="title">Add as many shortcuts to your homescreen as you like</div>69 70 <div class="top-cards">71 <!-- Mornings -->72 <div class="card">73 <div class="badge minus">74 <svg viewBox="0 0 100 100"><path d="M20 50 H80"/></svg>75 </div>76 <div class="icon-wrap">77 <!-- Sun rising icon -->78 <svg class="icon" viewBox="0 0 100 100" stroke="#ffffff" stroke-width="6" fill="none">79 <circle cx="50" cy="55" r="18"/>80 <path d="M50 20 V8 M20 50 H8 M92 50 H80 M25 30 L16 21 M75 30 L84 21 M30 78 H70"/>81 <path d="M15 72 L25 68 M85 72 L75 68"/>82 </svg>83 </div>84 <div class="label">Mornings</div>85 </div>86 87 <!-- More -->88 <div class="card dim">89 <div class="icon-wrap">90 <!-- Grid dots icon -->91 <svg class="icon" viewBox="0 0 100 100" stroke="#ffffff" stroke-width="4" fill="#ffffff">92 <circle cx="30" cy="30" r="6"/><circle cx="50" cy="30" r="6"/><circle cx="70" cy="30" r="6"/>93 <circle cx="30" cy="50" r="6"/><circle cx="50" cy="50" r="6"/><circle cx="70" cy="50" r="6"/>94 <circle cx="30" cy="70" r="6"/><circle cx="50" cy="70" r="6"/><circle cx="70" cy="70" r="6"/>95 </svg>96 </div>97 <div class="label">More</div>98 </div>99 </div>100 101 <div class="grid">102 <!-- Timer -->103 <div class="card small">104 <div class="badge plus">105 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>106 </div>107 <div class="icon-wrap">108 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">109 <path d="M35 18 H65"/>110 <circle cx="50" cy="54" r="28"/>111 <path d="M50 54 L70 44"/>112 </svg>113 </div>114 <div class="label">Timer</div>115 </div>116 117 <!-- Sleep -->118 <div class="card small">119 <div class="badge plus">120 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>121 </div>122 <div class="icon-wrap">123 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">124 <path d="M66 30 C52 38 48 58 66 70 C52 66 38 52 42 36 C46 34 56 32 66 30 Z"/>125 </svg>126 </div>127 <div class="label">Sleep</div>128 </div>129 130 <!-- Recent -->131 <div class="card small">132 <div class="badge plus">133 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>134 </div>135 <div class="icon-wrap">136 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">137 <circle cx="50" cy="50" r="30"/>138 <path d="M50 50 L66 42"/>139 <path d="M34 38 Q30 50 40 62"/>140 <path d="M63 70 Q70 60 68 48"/>141 </svg>142 </div>143 <div class="label">Recent</div>144 </div>145 146 <!-- Check In -->147 <div class="card small">148 <div class="badge plus">149 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>150 </div>151 <div class="icon-wrap">152 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">153 <circle cx="50" cy="48" r="20"/>154 <circle cx="42" cy="42" r="3"/><circle cx="58" cy="42" r="3"/>155 <path d="M40 55 Q50 62 60 55"/>156 </svg>157 </div>158 <div class="label">Check In</div>159 </div>160 161 <!-- Music -->162 <div class="card small">163 <div class="badge plus">164 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>165 </div>166 <div class="icon-wrap">167 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">168 <path d="M36 26 V66"/>169 <path d="M36 26 L72 22 V54"/>170 <circle cx="36" cy="74" r="10"/>171 <circle cx="72" cy="62" r="10"/>172 </svg>173 </div>174 <div class="label">Music</div>175 </div>176 177 <!-- Yoga -->178 <div class="card small">179 <div class="badge plus">180 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>181 </div>182 <div class="icon-wrap">183 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">184 <circle cx="50" cy="26" r="10"/>185 <path d="M50 36 V60"/>186 <path d="M30 50 L50 42 L70 50"/>187 <path d="M35 70 Q50 60 65 70"/>188 <path d="M40 78 H60"/>189 </svg>190 </div>191 <div class="label">Yoga</div>192 </div>193 194 <!-- Live -->195 <div class="card small">196 <div class="badge plus">197 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>198 </div>199 <div class="icon-wrap">200 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">201 <rect x="40" y="30" width="20" height="28" rx="10"/>202 <path d="M35 58 H65"/>203 <path d="M45 72 H55"/>204 </svg>205 </div>206 <div class="label">Live</div>207 </div>208 209 <!-- Workplace -->210 <div class="card small">211 <div class="badge plus">212 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>213 </div>214 <div class="icon-wrap">215 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">216 <rect x="26" y="42" width="48" height="30" rx="6"/>217 <path d="M40 42 V34 H60 V42"/>218 <path d="M26 54 H74"/>219 </svg>220 </div>221 <div class="label">Workplace</div>222 </div>223 224 <!-- Bookmarks -->225 <div class="card small">226 <div class="badge plus">227 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>228 </div>229 <div class="icon-wrap">230 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">231 <path d="M36 22 H64 V78 L50 66 L36 78 Z"/>232 </svg>233 </div>234 <div class="label">Bookmarks</div>235 </div>236 237 <!-- Breathe -->238 <div class="card small">239 <div class="badge plus">240 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>241 </div>242 <div class="icon-wrap">243 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">244 <path d="M32 62 C32 40 48 28 68 38 C56 46 52 60 58 72 C46 70 38 66 32 62 Z"/>245 </svg>246 </div>247 <div class="label">Breathe</div>248 </div>249 250 <!-- Journal -->251 <div class="card small">252 <div class="badge plus">253 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>254 </div>255 <div class="icon-wrap">256 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">257 <rect x="24" y="26" width="52" height="48" rx="8"/>258 <path d="M50 26 V74"/>259 <path d="M34 40 H44 M56 40 H66"/>260 </svg>261 </div>262 <div class="label">Journal</div>263 </div>264 265 <!-- Quotes -->266 <div class="card small">267 <div class="badge plus">268 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>269 </div>270 <div class="icon-wrap">271 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="8" fill="none">272 <path d="M36 36 C30 46 30 58 40 64"/>273 <path d="M60 36 C54 46 54 58 64 64"/>274 </svg>275 </div>276 <div class="label">Quotes</div>277 </div>278 279 <!-- Challenges -->280 <div class="card small">281 <div class="badge plus">282 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>283 </div>284 <div class="icon-wrap">285 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">286 <path d="M50 22 L58 42 L80 44 L64 58 L68 78 L50 68 L32 78 L36 58 L20 44 L42 42 Z"/>287 <circle cx="50" cy="22" r="2" fill="#fff"/>288 </svg>289 </div>290 <div class="label">Challenges</div>291 </div>292 293 <!-- New Courses -->294 <div class="card small">295 <div class="badge plus">296 <svg viewBox="0 0 100 100"><path d="M50 20 V80 M20 50 H80"/></svg>297 </div>298 <div class="icon-wrap">299 <svg class="icon" viewBox="0 0 100 100" stroke="#fff" stroke-width="6" fill="none">300 <rect x="26" y="30" width="48" height="32" rx="6"/>301 <path d="M50 30 V62"/>302 <circle cx="50" cy="74" r="10"/>303 <path d="M50 64 V74"/>304 </svg>305 </div>306 <div class="label">New Courses</div>307 </div>308 309 <!-- empty placeholder to mimic last row spacing -->310 <div class="card small" style="background:transparent; border:2px dashed #212121;">311 <div class="label" style="color:#3a3a3a;"> </div>312 </div>313 </div>314 </div>315 316 <div class="home-indicator"></div>317</div>318</body>319</html>