GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Insight Timer - Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }8 #render-target{9 position:relative; overflow:hidden;10 width:1080px; height:2400px;11 background:#FFFFFF;12 }13 .screen{ padding: 40px 48px 0; }14 .topbar{15 display:flex; justify-content:flex-end; align-items:center; gap:36px;16 height:80px; margin-top:8px;17 }18 .icon-btn{ width:64px; height:64px; display:flex; align-items:center; justify-content:center; }19 .badge-pill{20 display:flex; align-items:center; gap:12px;21 border:2px solid #111; border-radius:30px; padding:8px 18px;22 height:56px;23 }24 .brand{ font-weight:700; font-size:32px; color:#111; margin-top:12px; }25 .greeting{ font-weight:800; font-size:96px; line-height:1.05; margin:24px 0 36px 0; }26 /* quick tiles */27 .quick-grid{28 display:grid; grid-template-columns: repeat(3, 1fr);29 gap:32px; margin-bottom:36px;30 }31 .tile{32 background:#F4F6F7; border-radius:28px; height:220px;33 display:flex; flex-direction:column; align-items:center; justify-content:center;34 }35 .tile span{ margin-top:18px; font-size:38px; font-weight:600; color:#303437; }36 /* Featured card */37 .featured-wrap{ margin-top:16px; }38 .flag{39 position:absolute; top:-18px; left:0;40 background:#0F1720; color:#fff; font-weight:800; font-size:28px;41 padding:10px 18px; border-radius:14px;42 letter-spacing:0.5px;43 }44 .featured-card{45 position:relative; width:100%; height:620px; border-radius:28px; overflow:hidden;46 background:#1B1F2A;47 border:1px solid #BDBDBD;48 display:flex; align-items:center; justify-content:center; color:#E6E6E6;49 }50 .featured-card .label{51 opacity:.9; font-size:36px; letter-spacing:.3px;52 }53 .play{54 position:absolute; left:30px; bottom:30px; width:96px; height:96px;55 border-radius:50%; background:#2C2F39; display:flex; align-items:center; justify-content:center;56 border:2px solid rgba(255,255,255,.6);57 }58 .featured-title{59 display:flex; align-items:center; justify-content:space-between; gap:20px;60 margin-top:22px;61 }62 .featured-title h3{ margin:0; font-size:42px; font-weight:700; color:#222; }63 .bookmark{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }64 .featured-desc{65 margin-top:16px; font-size:38px; line-height:1.35; color:#2c2c2c;66 }67 /* challenge banner */68 .challenge{69 margin-top:26px; background:#F4F6F7; border:1px solid #E0E0E0;70 border-radius:26px; padding:24px; display:flex; align-items:center; gap:26px;71 }72 .challenge .thumb{73 position:relative; width:180px; height:180px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;74 display:flex; align-items:center; justify-content:center; color:#666; text-align:center; font-size:24px; padding:8px;75 }76 .day-pill{77 position:absolute; left:-4px; bottom:-10px; background:#0DA3FF; color:#fff; border-radius:14px;78 display:flex; align-items:center; justify-content:center; font-weight:800; overflow:hidden;79 }80 .day-pill .top{ background:#0C7ED8; padding:6px 16px; font-size:24px; }81 .day-pill .num{ background:#fff; color:#0C7ED8; padding:6px 18px; font-size:28px; }82 .challenge .meta{ flex:1; }83 .challenge .tag{ color:#7A7F85; font-weight:800; font-size:26px; letter-spacing:1px; }84 .challenge .title{ font-size:44px; font-weight:800; color:#1c1c1c; margin:8px 0; }85 .challenge .by{ font-size:32px; color:#4a4f55; }86 .chev{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; }87 /* bottom nav */88 .bottom-nav{89 position:absolute; bottom:0; left:0; width:100%; height:140px; border-top:1px solid #E8EAED;90 background:#fff; display:flex; align-items:center; justify-content:space-around;91 }92 .nav-item{93 display:flex; flex-direction:column; align-items:center; gap:8px; color:#1e1e1e; font-size:26px; font-weight:600;94 }95 .nav-item.center .label{ color:#D6A63B; font-weight:800; font-size:34px; }96 .spacer{ height:36px; }97</style>98</head>99<body>100<div id="render-target">101 <div class="screen">102 <div class="brand">InsightTimer</div>103 <div class="topbar">104 <div class="icon-btn" aria-label="messages">105 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">106 <path d="M4 6h16v12H4z"></path>107 <path d="M22 6l-10 7L2 6"></path>108 </svg>109 </div>110 <div class="icon-btn" aria-label="notifications">111 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">112 <path d="M18 8a6 6 0 10-12 0c0 7-3 7-3 7h18s-3 0-3-7"></path>113 <path d="M13.73 21a2 2 0 01-3.46 0"></path>114 </svg>115 </div>116 <div class="badge-pill">117 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">118 <circle cx="12" cy="7" r="4"></circle>119 <path d="M5.5 21a6.5 6.5 0 0113 0"></path>120 </svg>121 <span style="font-weight:800;">1</span>122 </div>123 </div>124 125 <div class="greeting">Hi Jane</div>126 127 <div class="quick-grid">128 <div class="tile">129 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">130 <path d="M4 12a8 8 0 0016 0H4z"></path>131 <path d="M12 4v3"></path>132 </svg>133 <span>Timer</span>134 </div>135 <div class="tile">136 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">137 <path d="M21 12a8.5 8.5 0 01-8.5 8.5c-2.5 0-4.7-1.1-6.5-2.9A9 9 0 0016 4a7 7 0 015 8z"></path>138 </svg>139 <span>Sleep</span>140 </div>141 <div class="tile">142 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">143 <path d="M12 21c6-3 8-9 8-12a8 8 0 00-8 8"></path>144 <path d="M4 13a8 8 0 008 8"></path>145 </svg>146 <span>Breathe</span>147 </div>148 <div class="tile">149 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">150 <path d="M3 5h8v14H3z"></path>151 <path d="M13 5h8v14h-8z"></path>152 <path d="M3 9h8"></path>153 <path d="M13 9h8"></path>154 </svg>155 <span>New Courses</span>156 </div>157 <div class="tile">158 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">159 <circle cx="12" cy="5" r="2"></circle>160 <path d="M12 7v5"></path>161 <path d="M9 14l3-2 3 2"></path>162 <path d="M6 20l3-6h6l3 6"></path>163 </svg>164 <span>Yoga</span>165 </div>166 <div class="tile">167 <svg width="72" height="72" viewBox="0 0 24 24" fill="#111">168 <circle cx="6" cy="6" r="2"></circle>169 <circle cx="12" cy="6" r="2"></circle>170 <circle cx="18" cy="6" r="2"></circle>171 <circle cx="6" cy="12" r="2"></circle>172 <circle cx="12" cy="12" r="2"></circle>173 <circle cx="18" cy="12" r="2"></circle>174 <circle cx="6" cy="18" r="2"></circle>175 <circle cx="12" cy="18" r="2"></circle>176 <circle cx="18" cy="18" r="2"></circle>177 </svg>178 <span>More</span>179 </div>180 </div>181 182 <div class="featured-wrap">183 <div style="position:relative;">184 <div class="flag">FEATURED</div>185 </div>186 <div class="featured-card">187 <div class="label">[IMG: Featured geometric tarot artwork]</div>188 <div class="play">189 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff">190 <path d="M8 5v14l11-7-11-7z"></path>191 </svg>192 </div>193 </div>194 <div class="featured-title">195 <h3>Tarot Wisdom: A Complete Guide</h3>196 <div class="bookmark" aria-label="save">197 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">198 <path d="M6 3h12v18l-6-4-6 4z"></path>199 </svg>200 </div>201 </div>202 <div class="featured-desc">203 Use the tarot to tap into archetypal energies, gain perspective, connect with your intuition, and collab...204 </div>205 </div>206 207 <div class="challenge">208 <div class="thumb">[IMG: Challenge cover]209 <div class="day-pill">210 <div class="top">DAY</div><div class="num">1</div>211 </div>212 </div>213 <div class="meta">214 <div class="tag">28-DAY CHALLENGE</div>215 <div class="title">Reset & Refresh Challenge 2…</div>216 <div class="by">The Heart Breathing</div>217 </div>218 <div class="chev">219 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">220 <path d="M9 6l6 6-6 6"></path>221 </svg>222 </div>223 </div>224 225 <div class="spacer"></div>226 </div>227 228 <div class="bottom-nav">229 <div class="nav-item">230 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">231 <path d="M3 10l9-7 9 7"></path>232 <path d="M9 22V12h6v10"></path>233 </svg>234 <div class="label">Home</div>235 </div>236 <div class="nav-item">237 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">238 <path d="M6 2h12v20l-6-4-6 4z"></path>239 </svg>240 <div class="label">Saves</div>241 </div>242 <div class="nav-item center">243 <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#D6A63B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">244 <path d="M12 5v14"></path>245 <path d="M5 12h14"></path>246 </svg>247 <div class="label">Plus</div>248 </div>249 <div class="nav-item">250 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">251 <circle cx="11" cy="11" r="7"></circle>252 <path d="M21 21l-4.3-4.3"></path>253 </svg>254 <div class="label">Search</div>255 </div>256 <div class="nav-item">257 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">258 <circle cx="12" cy="12" r="10"></circle>259 <path d="M2 12h20"></path>260 <path d="M12 2a15 15 0 010 20"></path>261 </svg>262 <div class="label">World</div>263 </div>264 </div>265</div>266</body>267</html>