GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>InsightTimer UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #101314;14    color: #F5F5F5;15    font-family: "Avenir Next", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16  }17 18  .page-padding { padding: 60px; }19 20  /* Top actions */21  .top-actions {22    position: absolute;23    right: 60px;24    top: 120px;25    display: flex;26    gap: 40px;27    align-items: center;28  }29  .icon-btn {30    width: 72px;31    height: 72px;32    border: 2px solid #D6D6D6;33    border-radius: 16px;34    display: flex;35    align-items: center;36    justify-content: center;37    opacity: 0.9;38  }39  .pill-user {40    padding: 12px 22px;41    height: 72px;42    border: 2px solid #D6D6D6;43    border-radius: 36px;44    display: flex;45    align-items: center;46    gap: 14px;47    color: #fff;48    font-weight: 700;49  }50  .pill-user .avatar {51    width: 40px;52    height: 40px;53    border: 2px solid #D6D6D6;54    border-radius: 20px;55    display: inline-flex;56    align-items: center;57    justify-content: center;58  }59 60  /* Header */61  .brand { position: absolute; left: 60px; top: 420px; font-size: 36px; color: #CFCFCF; letter-spacing: 0.5px; }62  .greeting { position: absolute; left: 60px; top: 480px; font-size: 96px; font-weight: 800; line-height: 1.06; }63 64  /* Quick actions grid */65  .grid { position: absolute; left: 60px; top: 680px; width: 960px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }66  .tile {67    background: #181B1C;68    border-radius: 40px;69    height: 220px;70    display: flex;71    flex-direction: column;72    align-items: center;73    justify-content: center;74    box-shadow: 0 6px 12px rgba(0,0,0,0.35);75  }76  .tile span { margin-top: 18px; font-size: 40px; color: #DADADA; }77  .tile svg { width: 60px; height: 60px; stroke: #DADADA; }78 79  .more-row { position: absolute; left: 60px; top: 970px; width: 300px; }80 81  /* Banner card */82  .banner {83    position: absolute;84    left: 60px;85    top: 1120px;86    width: 960px;87    height: 520px;88    border-radius: 36px;89    overflow: hidden;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    display: flex;93    align-items: center;94    justify-content: center;95    color: #757575;96  }97  .banner .dots {98    position: absolute; right: 28px; top: 22px; display: flex; gap: 8px;99  }100  .banner .dot { width: 10px; height: 10px; background: #FFFFFF; border-radius: 50%; opacity: 0.9; }101  .banner .day {102    position: absolute; left: 30px; bottom: 30px;103    background: #1B8E8D; color: #fff; border-radius: 12px; overflow: hidden;104    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;105  }106  .banner .day .top { padding: 10px 16px; font-size: 24px; background: rgba(255,255,255,0.2); font-weight: 800; letter-spacing: 1px; }107  .banner .day .num { padding: 16px 26px; font-size: 32px; font-weight: 800; background: #fff; color: #0F6B6A; }108 109  .banner-title { position: absolute; left: 60px; top: 1670px; font-size: 52px; font-weight: 800; width: 960px; }110  .banner-sub { position: absolute; left: 60px; top: 1738px; font-size: 34px; color: #A8A8A8; width: 960px; }111 112  /* Premium card */113  .premium-card {114    position: absolute; left: 60px; top: 1840px;115    width: 960px; height: 420px;116    background: #252A2B;117    border-radius: 40px;118    box-shadow: 0 10px 18px rgba(0,0,0,0.4);119    padding: 36px;120  }121  .premium-label { color: #E8B73A; font-weight: 800; letter-spacing: 0.8px; font-size: 28px; }122  .premium-title { margin-top: 20px; font-size: 64px; font-weight: 800; line-height: 1.06; width: 780px; }123  .corner-plus {124    position: absolute; right: 0; top: 0;125    background: #E1A82E;126    color: #fff; font-weight: 800; font-size: 36px;127    padding: 22px 36px;128    border-bottom-left-radius: 40px;129    border-top-right-radius: 40px;130  }131 132  /* Bottom navigation */133  .bottom-bar {134    position: absolute; left: 0; bottom: 120px; width: 1080px; height: 160px;135    background: #171A1B; border-top: 1px solid #2B2F30;136    display: flex; align-items: center; justify-content: space-around;137  }138  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #EDEDED; }139  .nav-item svg { width: 64px; height: 64px; }140  .nav-item .label { font-size: 36px; }141  .nav-item .label.gold { color: #E1A82E; font-weight: 800; }142 143  /* Home indicator */144  .home-indicator {145    position: absolute; bottom: 34px; left: 50%;146    transform: translateX(-50%);147    width: 300px; height: 10px;148    background: #EDEDED; border-radius: 8px; opacity: 0.8;149  }150 151  /* Image placeholders rule per spec */152  .img-placeholder {153    width: 100%; height: 100%;154    background: #E0E0E0;155    border: 1px solid #BDBDBD;156    display: flex; align-items: center; justify-content: center; color: #757575;157    font-size: 36px;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Top actions -->165  <div class="top-actions">166    <div class="icon-btn" aria-label="Messages">167      <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="1.8">168        <rect x="3" y="5" width="18" height="14" rx="3"></rect>169        <path d="M3 7l9 6 9-6"></path>170      </svg>171    </div>172    <div class="icon-btn" aria-label="Notifications">173      <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="1.8">174        <path d="M12 3c-3 0-5 2.5-5 5.5v3.5l-2 2v1h14v-1l-2-2V8.5C17 5.5 15 3 12 3z"></path>175        <path d="M10 18c0 1.1 1 2 2 2s2-.9 2-2"></path>176      </svg>177    </div>178    <div class="pill-user">179      <div class="avatar">180        <svg viewBox="0 0 24 24" fill="none" stroke="#D6D6D6" stroke-width="1.6">181          <circle cx="12" cy="8" r="4"></circle>182          <path d="M4 20c2.2-4 13.8-4 16 0"></path>183        </svg>184      </div>185      <div style="font-size:28px;">1</div>186    </div>187  </div>188 189  <!-- Branding and Greeting -->190  <div class="brand">InsightTimer</div>191  <div class="greeting">Good Afternoon</div>192 193  <!-- Quick action grid -->194  <div class="grid">195    <div class="tile">196      <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8">197        <path d="M6 4h12" stroke="#DADADA"></path>198        <path d="M4 12a8 8 0 0016 0H4z" stroke="#DADADA"></path>199      </svg>200      <span>Timer</span>201    </div>202    <div class="tile">203      <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke="#DADADA">204        <path d="M9 5v9a3 3 0 11-2-2" ></path>205        <path d="M17 5v9a3 3 0 11-2-2" ></path>206      </svg>207      <span>Music</span>208    </div>209    <div class="tile">210      <svg viewBox="0 0 24 24" fill="none" stroke="#DADADA" stroke-width="1.8">211        <path d="M12 3c4 0 7 3 7 7a7 7 0 01-7 7c-4 0-7-3-7-7"></path>212        <path d="M14 7c0 2-2 4-4 4"></path>213      </svg>214      <span>Sleep</span>215    </div>216  </div>217 218  <div class="more-row">219    <div class="tile">220      <svg viewBox="0 0 24 24" fill="#DADADA">221        <circle cx="5" cy="5" r="2.2"></circle>222        <circle cx="12" cy="5" r="2.2"></circle>223        <circle cx="19" cy="5" r="2.2"></circle>224        <circle cx="5" cy="12" r="2.2"></circle>225        <circle cx="12" cy="12" r="2.2"></circle>226        <circle cx="19" cy="12" r="2.2"></circle>227      </svg>228      <span>More</span>229    </div>230  </div>231 232  <!-- Banner card with image placeholder -->233  <div class="banner">234    <div class="img-placeholder">[IMG: Aloe Plant Banner]</div>235    <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>236    <div class="day">237      <div class="top">DAY</div>238      <div class="num">1</div>239    </div>240  </div>241 242  <div class="banner-title">Learn How To Meditate In Seven Days</div>243  <div class="banner-sub">Start Day 1: All You Do is Breathe</div>244 245  <!-- Premium card -->246  <div class="premium-card">247    <div class="premium-label">PREMIUM LIST</div>248    <div class="premium-title">Mindful Breathing For Your Morning</div>249    <div class="corner-plus">Plus</div>250  </div>251 252  <!-- Bottom nav -->253  <div class="bottom-bar">254    <div class="nav-item">255      <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">256        <path d="M3 10l9-7 9 7"></path>257        <path d="M5 10v10h14V10"></path>258      </svg>259      <div class="label">Home</div>260    </div>261    <div class="nav-item">262      <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">263        <path d="M6 3h12v18l-6-3-6 3z"></path>264      </svg>265      <div class="label">Save</div>266    </div>267    <div class="nav-item">268      <div class="label gold">Plus</div>269    </div>270    <div class="nav-item">271      <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">272        <circle cx="11" cy="11" r="7"></circle>273        <path d="M20 20l-3.5-3.5"></path>274      </svg>275      <div class="label">Search</div>276    </div>277    <div class="nav-item">278      <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">279        <circle cx="12" cy="12" r="9"></circle>280        <path d="M3 12h18M12 3a15 15 0 010 18M12 3a15 15 0 000 18"></path>281      </svg>282      <div class="label">Explore</div>283    </div>284  </div>285 286  <div class="home-indicator"></div>287</div>288</body>289</html>