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>Timer UI Mock</title>7<style>8  :root{9    --bg:#0f1516;10    --text:#e9efef;11    --muted:#8a9494;12    --circle:#0f1b1c;13    --circle-strong:#224243;14    --teal:#84e9e5;15    --nav:#121d1e;16  }17  body{ margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }18  #render-target{19    width:1080px; height:2400px; position:relative; overflow:hidden;20    background:var(--bg); color:var(--text);21  }22 23  /* Status bar */24  .status{25    position:absolute; top:0; left:0; right:0; height:100px;26    display:flex; align-items:center; justify-content:space-between;27    padding:24px 36px; font-size:36px; color:#e6e6e6; opacity:.95;28  }29  .status .right{ display:flex; gap:22px; align-items:center; }30  .icon-sml{ width:36px; height:36px; fill:#e6e6e6; opacity:.9; }31 32  /* Header */33  .title{ margin:130px 0 0 60px; font-size:60px; font-weight:500; color:#dfe5e5; }34  .menu{35    position:absolute; top:220px; right:36px; width:12px; height:56px;36    display:flex; flex-direction:column; justify-content:space-between; align-items:center;37  }38  .menu span{ width:10px; height:10px; background:#9aa3a3; border-radius:50%; opacity:.8; }39 40  /* Time display */41  .time-display{42    margin:60px 0 0 60px; display:flex; align-items:flex-end; gap:30px;43  }44  .num{ font-size:150px; line-height:1; letter-spacing:2px; }45  .unit{ font-size:50px; margin:0 10px 24px -10px; }46  .grey{ color:#a0a7a7; }47  .teal{ color:var(--teal); }48 49  /* Keypad */50  .pad{51    width:900px; margin:120px auto 0;52    display:grid; grid-template-columns:repeat(3,260px); grid-row-gap:60px; grid-column-gap:60px;53  }54  .key{55    width:260px; height:260px; border-radius:50%;56    background:var(--circle);57    display:flex; align-items:center; justify-content:center;58    font-size:88px; color:#e9f0f0;59  }60  .key.back{ background:#254545; color:#c8efee; font-size:54px; }61  .key span.sub{ font-size:64px; }62 63  /* Play button */64  .play{65    position:absolute; left:50%; transform:translateX(-50%);66    bottom:330px; width:260px; height:260px; border-radius:50%;67    background:var(--teal); display:flex; align-items:center; justify-content:center;68  }69 70  /* Gesture bar */71  .gesture{72    position:absolute; left:50%; transform:translateX(-50%);73    bottom:230px; width:420px; height:14px; background:#f0f0f0; border-radius:10px; opacity:.9;74  }75 76  /* Bottom nav */77  .nav{78    position:absolute; bottom:0; left:0; width:100%; height:220px;79    background:var(--nav); border-top:1px solid rgba(255,255,255,.05);80    display:flex; align-items:flex-start; justify-content:space-around; padding-top:36px;81  }82  .nav .item{ display:flex; flex-direction:column; align-items:center; gap:16px; color:#a6b4b4; font-size:32px; }83  .nav .icon{ width:58px; height:58px; fill:#b4c0c0; opacity:.9; }84  .nav .active{ color:#ffffff; }85  .nav .active .icon-wrap{86    background:#233b3b; padding:16px 28px; border-radius:40px; display:flex; align-items:center; justify-content:center;87  }88  .nav .inactive .icon-wrap{ padding:0; }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status bar -->95  <div class="status">96    <div class="left">11:57</div>97    <div class="right">98      <!-- Simple status icons -->99      <svg class="icon-sml" viewBox="0 0 24 24"><path d="M2 12h20v2H2z"/></svg>100      <svg class="icon-sml" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 1 0 18A9 9 0 0 1 12 3zm0 2a7 7 0 1 0 0 14A7 7 0 0 0 12 5z"/></svg>101      <svg class="icon-sml" viewBox="0 0 24 24"><path d="M3 18l9-12 9 12H3z"/></svg>102      <svg class="icon-sml" viewBox="0 0 24 24"><path d="M19 13H5V5h14v8zm-2 6H7v-2h10v2z"/></svg>103    </div>104  </div>105 106  <!-- Title -->107  <div class="title">Timer</div>108 109  <!-- Kebab menu -->110  <div class="menu"><span></span><span></span><span></span></div>111 112  <!-- Time display -->113  <div class="time-display">114    <span class="num grey">00</span><span class="unit grey">h</span>115    <span class="num grey">00</span><span class="unit grey">m</span>116    <span class="num teal">02</span><span class="unit teal">s</span>117  </div>118 119  <!-- Keypad -->120  <div class="pad">121    <div class="key">1</div>122    <div class="key">2</div>123    <div class="key">3</div>124 125    <div class="key">4</div>126    <div class="key">5</div>127    <div class="key">6</div>128 129    <div class="key">7</div>130    <div class="key">8</div>131    <div class="key">9</div>132 133    <div class="key"><span class="sub">00</span></div>134    <div class="key">0</div>135    <div class="key back">136      <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#d7ffff" stroke-width="1.6">137        <path d="M10 6H21v12H10L4 12l6-6z"/>138        <path d="M14 9l4 4M18 9l-4 4"/>139      </svg>140    </div>141  </div>142 143  <!-- Play button -->144  <div class="play">145    <svg width="110" height="110" viewBox="0 0 100 100">146      <polygon points="35,25 78,50 35,75" fill="#0d2222"/>147    </svg>148  </div>149 150  <!-- Gesture bar -->151  <div class="gesture"></div>152 153  <!-- Bottom navigation -->154  <div class="nav">155    <div class="item inactive">156      <div class="icon-wrap">157        <svg class="icon" viewBox="0 0 24 24">158          <path d="M12 8a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm-6-3l2 2m12-2l-2 2" fill="none" stroke="#b4c0c0" stroke-width="1.6"/>159        </svg>160      </div>161      <div>Alarm</div>162    </div>163 164    <div class="item inactive">165      <div class="icon-wrap">166        <svg class="icon" viewBox="0 0 24 24">167          <circle cx="12" cy="12" r="8" fill="none" stroke="#b4c0c0" stroke-width="1.6"/>168          <path d="M12 7v6l4 2" fill="none" stroke="#b4c0c0" stroke-width="1.6"/>169        </svg>170      </div>171      <div>Clock</div>172    </div>173 174    <div class="item active">175      <div class="icon-wrap">176        <svg class="icon" viewBox="0 0 24 24">177          <path d="M6 4h12l-5 5 5 5H6l5-5z" fill="none" stroke="#dff" stroke-width="1.6"/>178        </svg>179      </div>180      <div>Timer</div>181    </div>182 183    <div class="item inactive">184      <div class="icon-wrap">185        <svg class="icon" viewBox="0 0 24 24">186          <circle cx="12" cy="13" r="7" fill="none" stroke="#b4c0c0" stroke-width="1.6"/>187          <path d="M9 3h6M15 5l2 2" fill="none" stroke="#b4c0c0" stroke-width="1.6"/>188        </svg>189      </div>190      <div>Stopwatch</div>191    </div>192 193    <div class="item inactive">194      <div class="icon-wrap">195        <svg class="icon" viewBox="0 0 24 24">196          <path d="M3 12h14a4 4 0 0 1 4 4v3H3v-7zm6-3h4v3H9V9z" fill="none" stroke="#b4c0c0" stroke-width="1.6"/>197        </svg>198      </div>199      <div>Bedtime</div>200    </div>201  </div>202 203</div>204</body>205</html>