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>Instant Relief UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F4F6F7;12  }13 14  /* Status bar (simplified) */15  .status-bar {16    height: 120px;17    padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    color: #555;20  }21  .status-left { font-size: 36px; letter-spacing: 1px; }22  .status-icons { display: flex; gap: 24px; align-items: center; }23  .icon-dot { width: 10px; height: 10px; background: #9AA1A6; border-radius: 50%; display: inline-block; }24  .status-icon { width: 36px; height: 36px; }25  .wifi { width: 34px; height: 24px; border: 3px solid #777; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom: none; }26  .battery { width: 50px; height: 26px; border: 3px solid #777; position: relative; border-radius: 4px; }27  .battery::after { content: ""; width: 6px; height: 14px; background: #777; position: absolute; right: -9px; top: 4px; border-radius: 2px; }28  .battery-level { position: absolute; left: 4px; top: 4px; height: 16px; width: 28px; background: #777; }29 30  /* Content */31  .content { padding: 0 36px; }32  .section-title {33    font-size: 72px; font-weight: 700; color: #111; margin: 10px 0 28px 12px;34  }35 36  /* Horizontal cards */37  .card-row { display: flex; gap: 30px; padding: 0 12px; }38  .card {39    width: 320px; background: #fff; border-radius: 26px;40    box-shadow: 0 8px 24px rgba(0,0,0,0.08);41    padding: 22px; display: flex; flex-direction: column; gap: 16px;42  }43  .image-placeholder {44    width: 100%; height: 220px;45    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;46    display: flex; align-items: center; justify-content: center; color: #757575;47    font-size: 34px;48  }49  .card-meta { margin-top: -4px; }50  .lock-title { display: flex; align-items: center; gap: 12px; font-size: 42px; font-weight: 700; color: #222; }51  .subtext { font-size: 32px; color: #7F8B93; margin-top: 6px; }52  .lock-icon { width: 34px; height: 34px; }53  .lock-icon svg { width: 100%; height: 100%; fill: #7F8B93; }54 55  /* Grid for later */56  .grid-row {57    display: grid; grid-template-columns: repeat(3, 1fr);58    gap: 30px; padding: 0 12px; margin-top: 12px;59  }60  .grid-card { width: 320px; }61  .grid-card .image-placeholder { height: 240px; }62  .grid-card .lock-title { font-size: 40px; }63  .grid-card .subtext { font-size: 30px; }64 65  /* Promo share card */66  .promo {67    margin: 40px 24px 26px 24px; padding: 40px 40px 50px;68    background: #fff; border-radius: 26px; box-shadow: 0 12px 30px rgba(0,0,0,0.1);69    position: relative;70  }71  .promo::before {72    content: ""; position: absolute; left: -20px; bottom: -20px; width: 160px; height: 160px;73    background: #F7DAD7; border-radius: 80px; opacity: 0.6;74  }75  .promo::after {76    content: ""; position: absolute; right: 40px; top: 34px; width: 0; height: 0;77    border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 42px solid #CFEDEB;78    transform: rotate(20deg);79  }80  .promo-text { font-size: 46px; line-height: 1.35; color: #425057; text-align: center; margin-bottom: 36px; }81  .promo-btn {82    background: #25C5C9; color: #fff; font-weight: 700; font-size: 44px;83    border: none; border-radius: 18px; padding: 28px 20px; width: 88%;84    display: block; margin: 0 auto;85  }86 87  /* Bottom nav */88  .bottom-nav {89    position: absolute; left: 0; right: 0; bottom: 80px;90    height: 200px; background: #FFFFFF; border-top: 1px solid #E5E9EC;91    display: flex; align-items: center; justify-content: space-around;92  }93  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #7F8B93; font-size: 30px; }94  .nav-item .nav-icon { width: 56px; height: 56px; }95  .nav-item svg { width: 100%; height: 100%; }96  .nav-item.active { color: #1ECAD3; }97  .nav-item.active svg path { fill: #1ECAD3; }98  .home-indicator {99    position: absolute; left: 50%; transform: translateX(-50%);100    bottom: 22px; width: 360px; height: 14px; background: #000; border-radius: 8px; opacity: 0.9;101  }102</style>103</head>104<body>105<div id="render-target">106  <div class="status-bar">107    <div class="status-left">9:30</div>108    <div class="status-icons">109      <span class="icon-dot"></span>110      <span class="icon-dot"></span>111      <span class="icon-dot"></span>112      <span class="icon-dot"></span>113      <div class="wifi"></div>114      <div class="battery"><div class="battery-level"></div></div>115    </div>116  </div>117 118  <div class="content">119    <div class="section-title">Instant relief</div>120    <div class="card-row">121      <div class="card">122        <div class="image-placeholder">[IMG: Lightning Illustration]</div>123        <div class="card-meta">124          <div class="lock-title">125            <span class="lock-icon">126              <svg viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 0112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 00-8 0v2z"></path></svg>127            </span>128            Pain129          </div>130          <div class="subtext">Single • 5 min</div>131        </div>132      </div>133      <div class="card">134        <div class="image-placeholder">[IMG: Helping Hands Illustration]</div>135        <div class="card-meta">136          <div class="lock-title">137            <span class="lock-icon">138              <svg viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 0112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 00-8 0v2z"></path></svg>139            </span>140            SOS141          </div>142          <div class="subtext">Single • 3 min</div>143        </div>144      </div>145      <div class="card">146        <div class="image-placeholder">[IMG: Medicine Bottle Illustration]</div>147        <div class="card-meta">148          <div class="lock-title">149            <span class="lock-icon">150              <svg viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 0112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 00-8 0v2z"></path></svg>151            </span>152            Sick Day153          </div>154          <div class="subtext">Single • 10 min</div>155        </div>156      </div>157    </div>158 159    <div class="section-title" style="margin-top: 48px;">For later</div>160    <div class="grid-row">161      <div class="card grid-card">162        <div class="image-placeholder">[IMG: Mountains & Shapes]</div>163        <div class="card-meta">164          <div class="lock-title">165            <span class="lock-icon">166              <svg viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 0112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 00-8 0v2z"></path></svg>167            </span>168            Calm Flight169          </div>170          <div class="subtext">Single • 1 hr</div>171        </div>172      </div>173      <div class="card grid-card">174        <div class="image-placeholder">[IMG: Butterfly Illustration]</div>175        <div class="card-meta">176          <div class="lock-title">177            <span class="lock-icon">178              <svg viewBox="0 0 24 24"><path d="M6 10V8a6 6 0 0112 0v2h1a1 1 0 011 1v9a1 1 0 01-1 1H5a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h8V8a4 4 0 00-8 0v2z"></path></svg>179            </span>180            Dream Scenes181          </div>182          <div class="subtext">Sleep Single • 20 min</div>183        </div>184      </div>185      <div class="card grid-card">186        <div class="image-placeholder">[IMG: Boat & Book Illustration]</div>187        <div class="card-meta">188          <div class="lock-title">Along the River</div>189          <div class="subtext">Sleep Journey • 30 min</div>190        </div>191      </div>192    </div>193 194    <div class="promo">195      <div class="promo-text">Give your friends and family a free year of Balance.</div>196      <button class="promo-btn">Share</button>197    </div>198  </div>199 200  <div class="bottom-nav">201    <div class="nav-item active">202      <div class="nav-icon">203        <svg viewBox="0 0 24 24"><path d="M6 2h12v4H6zM4 8h16v12H4z"></path></svg>204      </div>205      <div>Today</div>206    </div>207    <div class="nav-item">208      <div class="nav-icon">209        <svg viewBox="0 0 24 24"><path d="M5 3h14v18H5zM8 6h8v2H8zm0 5h8v2H8zm0 5h8v2H8z" fill="#7F8B93"></path></svg>210      </div>211      <div>Plans</div>212    </div>213    <div class="nav-item">214      <div class="nav-icon">215        <svg viewBox="0 0 24 24"><path d="M12 2a6 6 0 000 12 6 6 0 000-12zm0 14c-5 0-9 3-9 6h18c0-3-4-6-9-6z" fill="#7F8B93"></path></svg>216      </div>217      <div>Sleep</div>218    </div>219    <div class="nav-item">220      <div class="nav-icon">221        <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z" fill="#7F8B93"></path></svg>222      </div>223      <div>Singles</div>224    </div>225    <div class="nav-item">226      <div class="nav-icon">227        <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 6h18c0-3-4-6-9-6z" fill="#7F8B93"></path></svg>228      </div>229      <div>Profile</div>230    </div>231  </div>232 233  <div class="home-indicator"></div>234</div>235</body>236</html>