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>Meditate UI</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#1f2733; color:#eaf1f7;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14 15  /* App bar */16  .appbar{17    position:absolute; left:0; top:0; width:100%;18    height:330px; background:#3b4450;19    box-sizing:border-box; padding:70px 48px 0 48px;20  }21  .title{22    font-size:64px; font-weight:800; letter-spacing:0.5px;23  }24  .search{25    position:absolute; right:42px; top:82px; width:64px; height:64px;26    display:flex; align-items:center; justify-content:center; opacity:0.95;27  }28  .tabs{29    position:absolute; left:0; right:0; bottom:0;30    display:flex; gap:120px; padding:0 48px 20px 48px; box-sizing:border-box;31  }32  .tab{33    position:relative; font-size:36px; text-transform:uppercase;34    font-weight:700; color:#b9c3cc; letter-spacing:1px;35    padding-bottom:22px;36  }37  .tab.active{ color:#ffffff; }38  .tab.active::after{39    content:""; position:absolute; left:0; bottom:0;40    width:290px; height:6px; background:#59d2d1; border-radius:3px;41  }42 43  /* Wheel area */44  .wheel{45    position:absolute; left:50%; top:540px; transform:translateX(-50%);46    width:1260px; height:1260px; /* big outer circle slightly overflowing */47  }48  .outer-circle{49    position:absolute; left:50%; top:50%;50    width:1260px; height:1260px; transform:translate(-50%,-50%);51    border-radius:50%;52    background:rgba(66,150,158,0.45);53  }54  .inner-circle{55    position:absolute; left:50%; top:50%;56    width:880px; height:880px; transform:translate(-50%,-50%);57    border-radius:50%; overflow:hidden;58    box-shadow:0 0 0 14px rgba(0,0,0,0.05) inset;59  }60  .quad{61    position:absolute; width:50%; height:50%;62    display:flex; align-items:center; justify-content:center;63    text-align:center; color:#ffffff; font-weight:800; font-size:44px;64    line-height:1.15; padding:20px; box-sizing:border-box;65  }66  .q1{ left:0; top:0; background:#41d7d5; }67  .q2{ left:50%; top:0; background:#35cbd0; }68  .q3{ left:0; top:50%; background:#31b9bf; }69  .q4{ left:50%; top:50%; background:#43d8d6; }70 71  /* Minutes selector */72  .minutes{73    position:absolute; left:0; right:0; bottom:380px;74    display:flex; align-items:center; justify-content:center;75    gap:40px; font-size:44px; text-transform:uppercase; font-weight:800;76    letter-spacing:2px; color:#eaf1f7;77  }78  .chip{79    width:92px; height:92px; border-radius:50%;80    background:#4b5961; display:flex; align-items:center; justify-content:center;81    font-size:40px; letter-spacing:0; box-shadow:0 2px 0 rgba(0,0,0,0.15);82  }83  .muted{ color:#b6c0c8; font-weight:700; }84 85  /* Bottom navigation */86  .bottom-nav{87    position:absolute; left:0; right:0; bottom:0; height:200px;88    background:#2f383f; display:flex; align-items:center; justify-content:space-around;89    padding-bottom:18px;90  }91  .nav-item{92    display:flex; flex-direction:column; align-items:center; gap:16px;93    color:#9aa6af; font-size:38px; font-weight:600;94  }95  .nav-item.active{ color:#ffffff; }96  .icon-circle{97    width:88px; height:88px; border-radius:50%;98    background:#eaf1f7; display:flex; align-items:center; justify-content:center;99    color:#2f383f;100  }101  .icon-ghost{102    width:88px; height:88px; border-radius:50%;103    border:2px solid #5a666f; display:flex; align-items:center; justify-content:center;104    color:#9aa6af;105  }106 107  /* Gesture pill (visual only) */108  .gesture{109    position:absolute; left:50%; bottom:14px; transform:translateX(-50%);110    width:320px; height:12px; border-radius:8px; background:#e9e9ea; opacity:0.9;111  }112</style>113</head>114<body>115<div id="render-target">116  <!-- Header -->117  <div class="appbar">118    <div class="title">Meditate</div>119    <div class="search" aria-label="Search">120      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#eaf1f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">121        <circle cx="11" cy="11" r="7"></circle>122        <line x1="20" y1="20" x2="16.5" y2="16.5"></line>123      </svg>124    </div>125    <div class="tabs">126      <div class="tab active">On The Go</div>127      <div class="tab">Series</div>128      <div class="tab">Teachers</div>129    </div>130  </div>131 132  <!-- Big wheel -->133  <div class="wheel">134    <div class="outer-circle"></div>135    <div class="inner-circle">136      <div class="quad q1"><span>Improve Mood</span></div>137      <div class="quad q2"><span>Morning<br>Meditation</span></div>138      <div class="quad q3"><span>Commuting</span></div>139      <div class="quad q4"><span>Good Morning</span></div>140    </div>141  </div>142 143  <!-- Minutes selector -->144  <div class="minutes">145    <div>I Have</div>146    <div class="chip">5</div>147    <div class="muted">10</div>148    <div class="muted">20</div>149    <div>Minutes</div>150  </div>151 152  <!-- Bottom navigation -->153  <div class="bottom-nav">154    <div class="nav-item active">155      <div class="icon-circle">156        <svg width="34" height="34" viewBox="0 0 24 24" fill="#2f383f">157          <polygon points="8,5 19,12 8,19"></polygon>158        </svg>159      </div>160      <div>Meditate</div>161    </div>162    <div class="nav-item">163      <div class="icon-ghost">164        <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#9aa6af" stroke-width="2">165          <circle cx="12" cy="8" r="3"></circle>166          <path d="M5 20c1.5-4 12.5-4 14 0"></path>167        </svg>168      </div>169      <div>Me</div>170    </div>171    <div class="nav-item">172      <div class="icon-ghost">173        <svg width="34" height="34" viewBox="0 0 24 24" fill="#9aa6af">174          <circle cx="5" cy="12" r="2"></circle>175          <circle cx="12" cy="12" r="2"></circle>176          <circle cx="19" cy="12" r="2"></circle>177        </svg>178      </div>179      <div>More</div>180    </div>181  </div>182 183  <div class="gesture"></div>184</div>185</body>186</html>