GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Yoga Session UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Helvetica Neue", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#FFFFFF;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:100%; height:90px;15    color:#2f2f2f; font-size:36px; letter-spacing:0.5px;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 40px;18  }19  .status-icons { display:flex; gap:24px; align-items:center; color:#6b6b6b; font-size:32px; }20  .battery { width:32px; height:32px; border:2px solid #6b6b6b; border-radius:4px; position:relative; }21  .battery::after { content:''; position:absolute; right:-8px; top:8px; width:6px; height:16px; background:#6b6b6b; border-radius:2px; }22  .wifi {23    width:34px; height:34px; border:2px solid #6b6b6b; border-radius:50%;24    position:relative;25  }26 27  /* Header */28  .header {29    position:absolute; top:110px; left:0; width:100%; height:120px;30    display:flex; align-items:center; justify-content:center;31  }32  .title {33    font-size:72px; font-weight:800; color:#111;34  }35  .check-square {36    position:absolute; left:40px; top:18px; width:68px; height:68px;37    border:3px solid #CFCFCF; border-radius:12px;38  }39  .icon-circle {40    position:absolute; right:220px; top:0;41    width:108px; height:108px; border-radius:54px; background:#FFFFFF;42    box-shadow:0 12px 28px rgba(0,0,0,0.08);43    display:flex; align-items:center; justify-content:center;44  }45  .icon-circle.secondary {46    right:80px;47  }48  .star-svg { width:56px; height:56px; }49  .more-dots { width:54px; height:54px; display:flex; align-items:center; justify-content:center; }50  .dot { width:10px; height:10px; background:#9E9E9E; border-radius:50%; margin:0 6px; }51 52  /* Ghost task placeholders */53  .ghost-wrap {54    position:absolute; top:1020px; left:160px; width:760px;55  }56  .ghost-card {57    height:120px; border-radius:32px; background:linear-gradient(180deg, #f7f7f7, #f3f3f3);58    box-shadow:0 20px 40px rgba(0,0,0,0.06);59    margin-bottom:46px; position:relative;60  }61  .ghost-card::before {62    content:''; position:absolute; left:48px; top:46px; width:36px; height:36px; border-radius:50%;63    background:#e9e9e9;64  }65  .ghost-line {66    position:absolute; left:120px; right:120px; top:50%; height:22px; transform:translateY(-50%);67    background:#e9e9e9; border-radius:11px;68  }69  .plus-fab {70    position:absolute; right:-60px; top:150px;71    width:140px; height:140px; border-radius:70px; background:#FFFFFF;72    box-shadow:0 18px 40px rgba(0,0,0,0.12);73    display:flex; align-items:center; justify-content:center;74  }75  .plus-sign {76    width:64px; height:64px; position:relative;77  }78  .plus-sign::before, .plus-sign::after {79    content:''; position:absolute; background:#BEBEBE; border-radius:6px;80  }81  .plus-sign::before { width:64px; height:12px; left:0; top:26px; }82  .plus-sign::after { width:12px; height:64px; left:26px; top:0; }83 84  /* Empty state text */85  .empty-title {86    position:absolute; top:1340px; width:100%; text-align:center; font-size:64px; font-weight:800; color:#111;87  }88  .empty-sub {89    position:absolute; top:1430px; width:100%; text-align:center; font-size:44px; color:#9B9B9B;90  }91 92  /* Promo pill */93  .promo-pill {94    position:absolute; left:270px; top:1760px; height:108px; width:540px;95    border-radius:54px; background:#FFFFFF; border:2px solid #D8E0FF;96    display:flex; align-items:center; justify-content:space-between; padding:0 30px;97    box-shadow:0 14px 30px rgba(39,83,227,0.08);98  }99  .promo-text { color:#2E5CF6; font-size:44px; font-weight:700; }100  .promo-close {101    width:86px; height:108px; display:flex; align-items:center; justify-content:center;102    color:#2E5CF6; font-size:44px; font-weight:700;103    border-left:2px solid #D8E0FF;104  }105 106  /* Bottom input bar */107  .input-bar {108    position:absolute; left:120px; bottom:120px; width:840px; height:150px;109    background:#FFFFFF; border-radius:80px; box-shadow:0 24px 60px rgba(0,0,0,0.10);110    display:flex; align-items:center; padding:0 48px; color:#9A9A9A; font-size:52px;111  }112 113  /* Home icon button */114  .home-btn {115    position:absolute; left:70px; bottom:310px; width:92px; height:92px;116    border-radius:26px; display:flex; align-items:center; justify-content:center;117  }118  .home-svg { width:78px; height:78px; }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status bar -->125  <div class="status-bar">126    <div>3:47</div>127    <div class="status-icons">128      <span>A</span>129      <span>◦</span>130      <span>M</span>131      <span>$</span>132      <div class="wifi"></div>133      <div class="battery"></div>134    </div>135  </div>136 137  <!-- Header with title and actions -->138  <div class="header">139    <div class="check-square"></div>140    <div class="title">yoga session</div>141 142    <div class="icon-circle" style="right:220px;">143      <!-- Blue star icon -->144      <svg class="star-svg" viewBox="0 0 24 24">145        <path d="M12 2l3 6.2 6.9 1-5 4.7 1.3 6.9L12 17.8 5.8 20.8 7 13.9 2 9.2 8.9 8.2 12 2z" fill="#3D77FF"/>146      </svg>147    </div>148 149    <div class="icon-circle secondary">150      <!-- More (three dots) -->151      <div class="more-dots">152        <div class="dot"></div>153        <div class="dot"></div>154        <div class="dot"></div>155      </div>156    </div>157  </div>158 159  <!-- Ghost task placeholders -->160  <div class="ghost-wrap">161    <div class="ghost-card">162      <div class="ghost-line"></div>163    </div>164    <div class="ghost-card">165      <div class="ghost-line"></div>166    </div>167    <div class="plus-fab">168      <div class="plus-sign"></div>169    </div>170  </div>171 172  <!-- Empty state text -->173  <div class="empty-title">No tasks here yet</div>174  <div class="empty-sub">Start adding tasks by tapping the “+” button</div>175 176  <!-- Promo pill -->177  <div class="promo-pill">178    <div class="promo-text">3 Days Only - 50% Off!</div>179    <div class="promo-close">X</div>180  </div>181 182  <!-- Bottom Navigation Home -->183  <div class="home-btn">184    <svg class="home-svg" viewBox="0 0 24 24">185      <path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z" fill="#3D77FF"/>186    </svg>187  </div>188 189  <!-- Bottom input bar -->190  <div class="input-bar">I want to...</div>191 192</div>193</body>194</html>