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:#111417; color:#E8EAED;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:100%; height:110px;15    display:flex; align-items:center; justify-content:space-between;16    padding:0 40px; color:#CBD3DA; font-size:44px;17  }18  .status-icons { display:flex; gap:26px; align-items:center; }19  .icon-dot { width:12px; height:12px; border-radius:50%; background:#8A9097; display:inline-block; }20  .small-icon {21    width:34px; height:34px; border-radius:8px; background:#2A3138; border:1px solid #3A424A;22  }23 24  /* Header */25  .header-title {26    position:absolute; top:140px; left:48px;27    font-size:72px; font-weight:600; letter-spacing:0.5px; color:#E5E7EA;28  }29 30  /* Time display */31  .time-row {32    position:absolute; top:280px; left:48px; right:48px;33    display:flex; align-items:flex-end; gap:40px;34  }35  .time-block {36    display:flex; align-items:flex-end; gap:16px;37  }38  .digits { font-size:190px; line-height:1; color:#A9AFB6; font-weight:600; }39  .suffix { font-size:64px; color:#818892; margin-bottom:22px; }40  .blue .digits { color:#9CC8FF; }41  .blue .suffix { color:#9CC8FF; }42 43  /* Keypad grid */44  .keypad {45    position:absolute; top:680px; left:0; width:100%;46    display:grid; grid-template-columns: repeat(3, 1fr);47    gap:54px; padding:0 120px;48  }49  .key {50    width:240px; height:240px; margin:0 auto;51    background:#161C22; border-radius:50%;52    display:flex; align-items:center; justify-content:center;53    color:#F1F3F5; font-size:86px; box-shadow: inset 0 0 0 1px #1F252B;54  }55  .key.dim { background:#2B3743; color:#DDE7F6; }56  .key.small { font-size:76px; }57  .key.double0 { font-size:84px; }58 59  /* Play button */60  .play-wrap {61    position:absolute; bottom:410px; left:0; width:100%;62    display:flex; justify-content:center;63  }64  .play-btn {65    width:260px; height:260px; border-radius:50%;66    background:#B9D9FF; display:flex; align-items:center; justify-content:center;67    box-shadow: inset 0 0 0 2px #A9CCF2;68  }69  .play-btn svg { width:64px; height:64px; fill:#0E3A79; }70 71  /* Bottom navigation */72  .bottom-nav {73    position:absolute; bottom:0; left:0; width:100%; height:230px;74    background:#171B20; border-top:1px solid #22272D;75    display:flex; align-items:center; justify-content:space-around;76  }77  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#B9C0C7; font-size:40px; }78  .nav-item .ico {79    width:64px; height:64px; border-radius:50%; background:#222831; display:flex; align-items:center; justify-content:center;80    border:1px solid #2D343D;81  }82  .nav-item.active { color:#CFE3FF; }83  .nav-item.active .ico { background:#2A3850; border-color:#3D4B63; }84  .indicator {85    position:absolute; bottom:250px; left:50%; transform:translateX(-50%);86    width:720px; height:12px; background:#2B3037; border-radius:10px;87  }88 89  /* Simple icons via SVG paths */90  .ico svg { width:34px; height:34px; fill:#9AA1A9; }91  .nav-item.active .ico svg { fill:#BDD6FF; }92 93  /* Backspace icon inside key */94  .backspace-icon svg { width:76px; height:76px; fill:#D8E6FF; }95 96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status Bar -->102  <div class="status-bar">103    <div>8:59</div>104    <div class="status-icons">105      <span class="icon-dot"></span>106      <span class="small-icon"></span>107      <span class="small-icon"></span>108      <span class="small-icon"></span>109      <span class="icon-dot"></span>110      <span class="small-icon"></span>111      <span class="small-icon"></span>112    </div>113  </div>114 115  <!-- Title -->116  <div class="header-title">Timer</div>117 118  <!-- Time Display -->119  <div class="time-row">120    <div class="time-block">121      <div class="digits">00</div>122      <div class="suffix">h</div>123    </div>124    <div class="time-block">125      <div class="digits">00</div>126      <div class="suffix">m</div>127    </div>128    <div class="time-block blue">129      <div class="digits">20</div>130      <div class="suffix">s</div>131    </div>132  </div>133 134  <!-- Keypad -->135  <div class="keypad">136    <div class="key">1</div>137    <div class="key">2</div>138    <div class="key">3</div>139 140    <div class="key">4</div>141    <div class="key">5</div>142    <div class="key">6</div>143 144    <div class="key">7</div>145    <div class="key">8</div>146    <div class="key">9</div>147 148    <div class="key double0">00</div>149    <div class="key small">0</div>150    <div class="key dim backspace-icon">151      <svg viewBox="0 0 24 24">152        <path d="M10.5 5L4 12l6.5 7H20a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-9.5zm5.6 3.4l1.4 1.4-2.1 2.2 2.1 2.2-1.4 1.4-2.2-2.1-2.2 2.1-1.4-1.4 2.1-2.2-2.1-2.2 1.4-1.4 2.2 2.1 2.2-2.1z"/>153      </svg>154    </div>155  </div>156 157  <!-- Play Button -->158  <div class="play-wrap">159    <div class="play-btn">160      <svg viewBox="0 0 24 24">161        <path d="M8 5v14l11-7z"/>162      </svg>163    </div>164  </div>165 166  <!-- Bottom indicator bar -->167  <div class="indicator"></div>168 169  <!-- Bottom Navigation -->170  <div class="bottom-nav">171    <div class="nav-item">172      <div class="ico">173        <svg viewBox="0 0 24 24"><path d="M7 17h10v2H7v-2zm0-10h10v7H7V7zm2 2v3h6V9H9z"/></svg>174      </div>175      <div>Alarm</div>176    </div>177    <div class="nav-item">178      <div class="ico">179        <svg viewBox="0 0 24 24"><path d="M12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12zm1 3h-2v4l3 2 .8-1.3-1.8-1.1V9z"/></svg>180      </div>181      <div>Clock</div>182    </div>183    <div class="nav-item active">184      <div class="ico">185        <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 1 0 16A8 8 0 0 1 12 4zm1 3H7v2h6V7zm4 4H7v2h10v-2zm-4 4H7v2h6v-2z"/></svg>186      </div>187      <div>Timer</div>188    </div>189    <div class="nav-item">190      <div class="ico">191        <svg viewBox="0 0 24 24"><path d="M7 5h10v2H7V5zm-3 6h16v2H4v-2zm3 6h10v2H7v-2z"/></svg>192      </div>193      <div>Stopwatch</div>194    </div>195    <div class="nav-item">196      <div class="ico">197        <svg viewBox="0 0 24 24"><path d="M3 10h18v8H3v-8zm2-5h14l2 3H3l2-3z"/></svg>198      </div>199      <div>Bedtime</div>200    </div>201  </div>202 203</div>204</body>205</html>