GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Timer UI Mock</title>5<style>6  :root{7    --bg:#0f0c0b;8    --card:#15110d;9    --text:#f5efe6;10    --muted:#bda98f;11    --accent:#c99a52;12    --track:#443b33;13    --pill:#4a3a2a;14    --pause:#cfe3ba;15  }16  body{ margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }17  #render-target{18    width:1080px; height:2400px;19    position:relative; overflow:hidden;20    background:var(--bg); color:var(--text);21    border-radius:24px;22  }23 24  /* Status bar */25  .status-bar{26    position:absolute; left:0; top:0; width:100%; height:96px;27    display:flex; align-items:center; justify-content:space-between;28    padding:0 28px; box-sizing:border-box; color:#e9e3da;29    font-weight:600; letter-spacing:0.5px;30  }31  .status-left{ display:flex; align-items:center; gap:20px; }32  .status-right{ display:flex; align-items:center; gap:26px; }33  .icon-small svg{ width:34px; height:34px; fill:#d9d1c6; }34 35  /* Page title */36  .page-title{37    position:absolute; left:44px; top:116px;38    font-size:56px; font-weight:700;39  }40  .kebab{41    position:absolute; right:32px; top:116px; width:12px; height:52px;42    display:flex; flex-direction:column; justify-content:space-between; align-items:center;43  }44  .kebab span{ width:10px; height:10px; background:#c9b79d; border-radius:50%; display:block; }45 46  /* Card */47  .card{48    position:absolute; left:30px; top:188px; width:1020px; height:1520px;49    background:var(--card); border-radius:48px;50    box-shadow:0 14px 30px rgba(0,0,0,0.35);51  }52  .card-header{53    position:absolute; left:48px; top:44px; font-size:60px; font-weight:700;54    color:#eee4d8;55  }56  .close-chip{57    position:absolute; right:38px; top:38px; width:74px; height:74px;58    border-radius:50%; background:#3c3026; display:flex; align-items:center; justify-content:center;59    color:#e8dccb; font-size:40px; font-weight:700;60  }61 62  /* Ring */63  .ring{64    position:absolute; left:50%; top:220px; transform:translateX(-50%);65    width:880px; height:880px; border-radius:50%;66    background:conic-gradient(var(--accent) 0 308deg, var(--track) 308deg 360deg);67    display:flex; align-items:center; justify-content:center;68  }69  .ring-inner{70    width:760px; height:760px; border-radius:50%; background:var(--card);71    display:flex; flex-direction:column; align-items:center; justify-content:center;72  }73  .time{74    font-size:220px; font-weight:700; letter-spacing:8px; color:#fff7ee;75    line-height:1;76  }77  .refresh{78    margin-top:36px; width:80px; height:80px; border-radius:50%;79    border:6px solid var(--accent); display:flex; align-items:center; justify-content:center;80  }81  .refresh svg{ width:46px; height:46px; fill:var(--accent); }82 83  /* Action buttons */84  .actions{85    position:absolute; left:0; right:0; bottom:260px; display:flex;86    justify-content:center; gap:70px;87  }88  .btn-pill{89    width:360px; height:170px; border-radius:90px; display:flex;90    align-items:center; justify-content:center; font-size:64px; font-weight:700;91    box-shadow:0 10px 22px rgba(0,0,0,0.35);92  }93  .btn-add{ background:var(--pill); color:#f5e6d6; }94  .btn-pause{ background:var(--pause); color:#263022; }95  .pause-bars{96    display:flex; gap:22px; align-items:center; justify-content:center;97  }98  .pause-bars span{99    width:22px; height:64px; background:#263022; border-radius:4px;100  }101 102  /* Floating add */103  .fab{104    position:absolute; left:50%; bottom:520px; transform:translateX(-50%);105    width:230px; height:230px; border-radius:50%; background:#f6c37b;106    display:flex; align-items:center; justify-content:center;107    color:#2b1e12; font-size:120px; font-weight:700;108    box-shadow:0 16px 28px rgba(0,0,0,0.4);109  }110 111  /* Bottom nav */112  .bottom-nav{113    position:absolute; left:0; bottom:0; width:100%; height:240px;114    background:#201812;115    display:flex; align-items:center; justify-content:space-around;116  }117  .nav-item{ color:#e9e1d6; display:flex; flex-direction:column; align-items:center; gap:18px; }118  .nav-item svg{ width:62px; height:62px; fill:#d9d1c6; }119  .nav-text{ font-size:40px; }120  .active .nav-text{ color:#fff8ee; font-weight:700; }121  .hourglass-wrap{122    width:180px; height:100px; background:#423424; border-radius:60px;123    display:flex; align-items:center; justify-content:center;124  }125</style>126</head>127<body>128<div id="render-target">129 130  <!-- Status Bar -->131  <div class="status-bar">132    <div class="status-left">133      <div style="font-size:36px;">12:24</div>134      <div class="icon-small" title="Play">135        <svg viewBox="0 0 24 24"><path d="M8 5l12 7-12 7V5z"/></svg>136      </div>137      <div class="icon-small" title="Cloud">138        <svg viewBox="0 0 24 24"><path d="M6 15a5 5 0 019.8-1.2 4 4 0 01.2 8.2H7a4 4 0 01-1-7z"/></svg>139      </div>140    </div>141    <div class="status-right">142      <div class="icon-small" title="Wi‑Fi">143        <svg viewBox="0 0 24 24">144          <path d="M2 8c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 8zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/>145        </svg>146      </div>147      <div class="icon-small" title="Battery">148        <svg viewBox="0 0 24 24">149          <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>150          <rect x="4" y="8" width="12" height="8" fill="#bda98f"></rect>151          <rect x="20" y="10" width="2" height="8" rx="1"></rect>152        </svg>153      </div>154    </div>155  </div>156 157  <!-- Title -->158  <div class="page-title">Timer</div>159  <div class="kebab"><span></span><span></span><span></span></div>160 161  <!-- Timer Card -->162  <div class="card">163    <div class="card-header">10m 10s Timer</div>164    <div class="close-chip">×</div>165 166    <div class="ring">167      <div class="ring-inner">168        <div class="time">11:18</div>169        <div class="refresh">170          <svg viewBox="0 0 24 24">171            <path d="M12 5v3l3-3-3-3v3a7 7 0 00-7 7h2a5 5 0 015-5zm7 7a7 7 0 01-7 7v-3l-3 3 3 3v-3a9 9 0 009-9h-2z"/>172          </svg>173        </div>174      </div>175    </div>176 177    <div class="actions">178      <div class="btn-pill btn-add">+1:00</div>179      <div class="btn-pill btn-pause">180        <div class="pause-bars">181          <span></span><span></span>182        </div>183      </div>184    </div>185  </div>186 187  <!-- Floating Add Button -->188  <div class="fab">+</div>189 190  <!-- Bottom Navigation -->191  <div class="bottom-nav">192    <div class="nav-item">193      <svg viewBox="0 0 24 24">194        <path d="M12 4a6 6 0 00-6 6v5l-2 2v1h16v-1l-2-2v-5a6 6 0 00-6-6zm0 2a4 4 0 014 4v5H8v-5a4 4 0 014-4z"/>195      </svg>196      <div class="nav-text">Alarm</div>197    </div>198    <div class="nav-item">199      <svg viewBox="0 0 24 24">200        <circle cx="12" cy="13" r="8"></circle>201        <rect x="11.5" y="4" width="1" height="3"></rect>202        <path d="M12 13l4-3" stroke="#d9d1c6" stroke-width="2" fill="none"/>203      </svg>204      <div class="nav-text">Clock</div>205    </div>206    <div class="nav-item active">207      <div class="hourglass-wrap">208        <svg viewBox="0 0 24 24">209          <path d="M7 4h10v3l-4 4 4 4v3H7v-3l4-4-4-4V4z"/>210        </svg>211      </div>212      <div class="nav-text">Timer</div>213    </div>214    <div class="nav-item">215      <svg viewBox="0 0 24 24">216        <path d="M15 3h-6v2h6V3zm-3 4a8 8 0 100 16 8 8 0 000-16zm0 3v5l4 2-1-2-3-1V10z"/>217      </svg>218      <div class="nav-text">Stopwatch</div>219    </div>220    <div class="nav-item">221      <svg viewBox="0 0 24 24">222        <path d="M3 16h4v-3h6v3h8v-6H3v6zm2-9h5v3H5V7zm13 1h3v2h-3V8z"/>223      </svg>224      <div class="nav-text">Bedtime</div>225    </div>226  </div>227 228</div>229</body>230</html>