GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Timer UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#14110e; color:#f5efe6;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0; height:110px;15    display:flex; align-items:center; justify-content:space-between;16    padding:0 40px; color:#e7ddce; font-weight:600; font-size:40px;17  }18  .status-right { display:flex; align-items:center; gap:28px; }19  .dot-menu {20    position:absolute; top:140px; right:40px; color:#d5c7b0; font-size:54px; line-height:1;21  }22 23  /* Title */24  .page-title {25    position:absolute; top:130px; left:40px;26    font-size:72px; font-weight:600; color:#efe7db;27  }28 29  /* Main card */30  .card {31    position:absolute; left:40px; right:40px; top:240px; height:1520px;32    background:#1b1510; border-radius:60px;33    box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;34  }35  .card-title {36    position:absolute; top:56px; left:48px; font-size:64px; color:#efe5d7;37  }38  .close-btn {39    position:absolute; top:50px; right:56px; width:78px; height:78px;40    background:#5a452a; border-radius:50%; display:flex; align-items:center; justify-content:center;41    color:#e9d6b6; font-size:46px; font-weight:bold;42  }43 44  /* Timer ring */45  .ring {46    position:absolute; left:50%; transform:translateX(-50%);47    top:200px; width:900px; height:900px; border-radius:50%;48    background: conic-gradient(#c59749 0deg 285deg, #403730 285deg 360deg);49  }50  .ring-mask {51    position:absolute; top:40px; left:40px; right:40px; bottom:40px;52    border-radius:50%; background:#14110e;53  }54  .time-text {55    position:absolute; top:380px; left:50%; transform:translateX(-50%);56    font-size:210px; font-weight:700; letter-spacing:6px; color:#fbf4eb;57  }58  .reset-circle {59    position:absolute; top:620px; left:50%; transform:translateX(-50%);60    width:86px; height:86px; border-radius:50%;61    border:8px solid #c59749; display:flex; align-items:center; justify-content:center;62    color:#c59749; font-size:42px;63    background:#1b1510;64  }65 66  /* Controls */67  .controls {68    position:absolute; left:0; right:0; bottom:220px;69    display:flex; justify-content:center; gap:80px; align-items:center;70  }71  .btn {72    width:430px; height:170px; border-radius:100px;73    display:flex; align-items:center; justify-content:center;74    font-size:56px; font-weight:600; letter-spacing:1px;75  }76  .btn-add { background:#4b3928; color:#f3dcc0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); }77  .btn-pause { background:#cfe3bd; color:#21331f; }78  .pause-icon { width:44px; height:80px; position:relative; }79  .pause-icon:before, .pause-icon:after {80    content:""; position:absolute; top:0; width:12px; height:80px; background:#21331f; border-radius:3px;81  }82  .pause-icon:before { left:8px; }83  .pause-icon:after { right:8px; }84 85  /* Floating plus button */86  .plus-fab {87    position:absolute; left:50%; transform:translateX(-50%);88    top:1810px; width:220px; height:220px; border-radius:50%;89    background:#f6c37d; color:#4b3a2d; display:flex; align-items:center; justify-content:center;90    font-size:120px; font-weight:600;91    box-shadow: 0 12px 30px rgba(0,0,0,0.35);92  }93 94  /* Bottom nav */95  .bottom-nav {96    position:absolute; left:0; right:0; bottom:0; height:250px;97    background:#1b1510; display:flex; align-items:center; justify-content:space-around;98    color:#e4d9c8; font-size:42px;99    box-shadow: 0 -2px 0 rgba(255,255,255,0.04) inset;100  }101  .nav-item { display:flex; flex-direction:column; align-items:center; gap:22px; }102  .nav-icon { width:90px; height:90px; border-radius:20px; background:transparent; display:flex; align-items:center; justify-content:center; }103  .nav-item.active .nav-icon { background:#3a2e23; }104  .nav-item.active .nav-label { color:#f2e8da; font-weight:700; }105  .nav-label { font-size:44px; }106 107  /* Simple icons */108  .icon { width:60px; height:60px; }109  .status-icon { width:34px; height:34px; border-radius:6px; background:#e7ddce; opacity:0.9; }110  .battery {111    width:52px; height:28px; border:3px solid #e7ddce; border-radius:6px; position:relative;112  }113  .battery:after {114    content:""; position:absolute; right:-10px; top:7px; width:8px; height:14px; background:#e7ddce; border-radius:2px;115  }116  .battery .level { position:absolute; left:3px; top:3px; right:14px; bottom:3px; background:#e7ddce; }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="status-bar">124    <div>12:22</div>125    <div class="status-right">126      <div class="status-icon" title="Signal"></div>127      <div class="status-icon" title="Wi‑Fi"></div>128      <div class="battery"><div class="level"></div></div>129    </div>130  </div>131 132  <div class="page-title">Timer</div>133  <div class="dot-menu">⋮</div>134 135  <!-- Main card -->136  <div class="card">137    <div class="card-title">10m 10s Timer</div>138    <div class="close-btn">×</div>139 140    <div class="ring">141      <div class="ring-mask"></div>142    </div>143 144    <div class="time-text">8:41</div>145    <div class="reset-circle">↻</div>146 147    <div class="controls">148      <div class="btn btn-add">+1:00</div>149      <div class="btn btn-pause"><div class="pause-icon" aria-label="pause"></div></div>150    </div>151  </div>152 153  <div class="plus-fab">+</div>154 155  <!-- Bottom navigation -->156  <div class="bottom-nav">157    <div class="nav-item">158      <div class="nav-icon">159        <svg class="icon" viewBox="0 0 24 24">160          <path d="M12 3l2 4 4 .7-3 3 .7 4L12 13l-3.7 2.7.7-4-3-3 4-.7 2-4z" fill="#d6cbb8"></path>161        </svg>162      </div>163      <div class="nav-label">Alarm</div>164    </div>165 166    <div class="nav-item">167      <div class="nav-icon">168        <svg class="icon" viewBox="0 0 24 24">169          <circle cx="12" cy="12" r="9" stroke="#d6cbb8" stroke-width="2" fill="none"/>170          <path d="M12 12l0-5M12 12l4 2" stroke="#d6cbb8" stroke-width="2" stroke-linecap="round"/>171        </svg>172      </div>173      <div class="nav-label">Clock</div>174    </div>175 176    <div class="nav-item active">177      <div class="nav-icon">178        <svg class="icon" viewBox="0 0 24 24">179          <path d="M8 3h8v3H8zM7 8h10v12H7z" fill="#d1a86e"/>180        </svg>181      </div>182      <div class="nav-label">Timer</div>183    </div>184 185    <div class="nav-item">186      <div class="nav-icon">187        <svg class="icon" viewBox="0 0 24 24">188          <circle cx="12" cy="12" r="9" stroke="#d6cbb8" stroke-width="2" fill="none"/>189          <circle cx="12" cy="12" r="2" fill="#d6cbb8"/>190        </svg>191      </div>192      <div class="nav-label">Stopwatch</div>193    </div>194 195    <div class="nav-item">196      <div class="nav-icon">197        <svg class="icon" viewBox="0 0 24 24">198          <path d="M4 14h16v5H4zM6 11h4v3H6z" fill="#d6cbb8"/>199        </svg>200      </div>201      <div class="nav-label">Bedtime</div>202    </div>203  </div>204 205</div>206</body>207</html>