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>Mobile UI Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#111; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#F5F7F8;12  }13 14  /* Status bar */15  .status-bar{16    height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17    color:#111; font-weight:600; letter-spacing:1px;18  }19  .status-icons{ display:flex; gap:22px; align-items:center; color:#555; }20  .dot{ width:10px; height:10px; background:#9AA0A6; border-radius:50%; display:inline-block; opacity:.7; }21 22  /* Content */23  .content{ padding:0 48px 220px; }24  .section-title{ font-size:64px; font-weight:700; margin:16px 0 28px; }25 26  .grid{27    display:grid; grid-template-columns: repeat(3, 1fr); gap:36px;28  }29  .card{30    background:#fff; border-radius:26px; box-shadow:0 12px 30px rgba(0,0,0,0.08);31    padding:0; overflow:hidden;32  }33  .card-img{34    width:100%; height:300px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;35    display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;36  }37  .card-body{ padding:26px 26px 28px; }38  .title-row{ display:flex; align-items:center; gap:12px; }39  .lock{ width:30px; height:30px; }40  .card-title{ font-size:44px; font-weight:700; }41  .meta{ margin-top:6px; color:#6E757C; font-size:32px; }42 43  /* Promo card */44  .promo{45    margin:64px 0 30px; background:#fff; border-radius:28px;46    box-shadow:0 18px 40px rgba(0,0,0,0.1); padding:48px; position:relative;47  }48  .promo p{49    font-size:44px; color:#4B5660; line-height:1.35; margin:0 0 36px;50    text-align:center;51  }52  .cta{53    width:100%; height:120px; background:#1DCAD3; color:#fff; border:none; border-radius:18px;54    font-size:46px; font-weight:800; cursor:pointer;55  }56  .promo-accent{ position:absolute; left:-40px; bottom:-40px; width:220px; height:220px; background:#F8DAD6; border-radius:50%; opacity:.6; }57  .promo-accent2{ position:absolute; right:36px; top:36px; width:90px; height:90px; background:#CFEFEF; transform:rotate(20deg); clip-path:polygon(0 0, 100% 35%, 40% 100%); }58 59  /* Bottom nav */60  .bottom-nav{61    position:absolute; left:0; right:0; bottom:0; height:180px; background:#FFFFFF;62    border-top:1px solid #E7EBEF; display:flex; justify-content:space-around; align-items:center;63  }64  .nav-item{ display:flex; flex-direction:column; align-items:center; gap:14px; color:#8D96A0; font-size:30px; }65  .nav-item .icon{ width:48px; height:48px; }66  .nav-item.active{ color:#1DCAD3; font-weight:700; }67  .home-indicator{68    position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:320px; height:10px; background:#000; border-radius:6px; opacity:.9;69  }70 71  /* Helpers */72  .spacer-48{ height:48px; }73</style>74</head>75<body>76<div id="render-target">77 78  <!-- Status Bar -->79  <div class="status-bar">80    <div style="font-size:38px;">9:31</div>81    <div class="status-icons">82      <span class="dot"></span>83      <span class="dot" style="opacity:.5"></span>84      <span class="dot" style="opacity:.3"></span>85      <span class="dot"></span>86      <span class="dot" style="width:12px; height:12px;"></span>87    </div>88  </div>89 90  <div class="content">91    <div class="section-title">Instant relief</div>92 93    <div class="grid">94      <!-- Card 1 -->95      <div class="card">96        <div class="card-img">[IMG: Lightning Illustration]</div>97        <div class="card-body">98          <div class="title-row">99            <svg class="lock" viewBox="0 0 24 24">100              <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z" fill="#6E757C"/>101            </svg>102            <div class="card-title">Pain</div>103          </div>104          <div class="meta">Single • 5 min</div>105        </div>106      </div>107 108      <!-- Card 2 -->109      <div class="card">110        <div class="card-img">[IMG: Helping Hands Illustration]</div>111        <div class="card-body">112          <div class="title-row">113            <svg class="lock" viewBox="0 0 24 24">114              <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z" fill="#6E757C"/>115            </svg>116            <div class="card-title">SOS</div>117          </div>118          <div class="meta">Single • 3 min</div>119        </div>120      </div>121 122      <!-- Card 3 -->123      <div class="card">124        <div class="card-img">[IMG: Medicine Bottle Illustration]</div>125        <div class="card-body">126          <div class="title-row">127            <svg class="lock" viewBox="0 0 24 24">128              <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z" fill="#6E757C"/>129            </svg>130            <div class="card-title">Sick Day</div>131          </div>132          <div class="meta">Single • 10 min</div>133        </div>134      </div>135    </div>136 137    <div class="spacer-48"></div>138    <div class="section-title">For later</div>139 140    <div class="grid">141      <!-- Card 4 -->142      <div class="card">143        <div class="card-img">[IMG: Umbrella & Rain Illustration]</div>144        <div class="card-body">145          <div class="title-row">146            <div class="card-title">Rain</div>147          </div>148          <div class="meta">Sleep Sound • 10 hr</div>149        </div>150      </div>151 152      <!-- Card 5 -->153      <div class="card">154        <div class="card-img">[IMG: Butterfly Dream Illustration]</div>155        <div class="card-body">156          <div class="title-row">157            <svg class="lock" viewBox="0 0 24 24">158              <path d="M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1zm2 0h6V7a3 3 0 0 0-6 0v3z" fill="#6E757C"/>159            </svg>160            <div class="card-title">Dream Scenes</div>161          </div>162          <div class="meta">Sleep Single • 20 min</div>163        </div>164      </div>165 166      <!-- Card 6 -->167      <div class="card">168        <div class="card-img">[IMG: Journal & Book Illustration]</div>169        <div class="card-body">170          <div class="title-row">171            <div class="card-title">Along the Way</div>172          </div>173          <div class="meta">Sleep Journal • 15 min</div>174        </div>175      </div>176    </div>177 178    <!-- Promo -->179    <div class="promo">180      <div class="promo-accent"></div>181      <div class="promo-accent2"></div>182      <p>Give your friends and family a free year of Balance.</p>183      <button class="cta">Share</button>184    </div>185  </div>186 187  <!-- Bottom Navigation -->188  <div class="bottom-nav">189    <div class="nav-item active">190      <svg class="icon" viewBox="0 0 24 24">191        <rect x="4" y="3" width="16" height="16" rx="3" fill="#1DCAD3"/>192        <line x1="4" y1="9" x2="20" y2="9" stroke="#fff" stroke-width="2"/>193      </svg>194      <div>Today</div>195    </div>196    <div class="nav-item">197      <svg class="icon" viewBox="0 0 24 24">198        <rect x="3" y="5" width="8" height="14" rx="1" fill="#A7B0B8"/>199        <rect x="13" y="3" width="8" height="16" rx="1" fill="#C2CAD1"/>200      </svg>201      <div>Plans</div>202    </div>203    <div class="nav-item">204      <svg class="icon" viewBox="0 0 24 24">205        <path d="M12 2c-3.9 0-7 3-7 6.6 0 3.2 2.7 5.8 6.3 6.3V21l2.7-2.2c3.7-.5 6.3-3.2 6.3-6.3C20.3 5 15.9 2 12 2z" fill="#A7B0B8"/>206      </svg>207      <div>Sleep</div>208    </div>209    <div class="nav-item">210      <svg class="icon" viewBox="0 0 24 24">211        <rect x="3" y="3" width="7" height="7" rx="1.5" fill="#A7B0B8"/>212        <rect x="14" y="3" width="7" height="7" rx="1.5" fill="#A7B0B8"/>213        <rect x="3" y="14" width="7" height="7" rx="1.5" fill="#A7B0B8"/>214        <rect x="14" y="14" width="7" height="7" rx="1.5" fill="#A7B0B8"/>215      </svg>216      <div>Singles</div>217    </div>218    <div class="nav-item">219      <svg class="icon" viewBox="0 0 24 24">220        <circle cx="12" cy="8" r="4" fill="#A7B0B8"/>221        <path d="M4 21c1.8-4 6.2-6 8-6s6.2 2 8 6" stroke="#A7B0B8" stroke-width="2" fill="none" stroke-linecap="round"/>222      </svg>223      <div>Profile</div>224    </div>225    <div class="home-indicator"></div>226  </div>227 228</div>229</body>230</html>