GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Timer UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #0b1611; /* deep green-black */12    color: #dfe8dd;13  }14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 100px; padding: 0 40px;18    display: flex; align-items: center; justify-content: space-between;19    color: #cfe0cf; font-size: 40px; letter-spacing: 1px;20  }21  .status-icons { display: flex; align-items: center; gap: 26px; }22  .icon-dot, .icon-circle {23    width: 22px; height: 22px; border-radius: 50%; background: #cfe0cf; opacity: 0.85;24  }25  .wifi {26    width: 40px; height: 30px; position: relative;27  }28  .wifi:before, .wifi:after {29    content: ""; position: absolute; left: 0; right: 0; margin: auto;30    border: 3px solid #cfe0cf; border-top-color: #cfe0cf; border-left-color: transparent; border-right-color: transparent; border-bottom: none;31    border-radius: 50%;32  }33  .wifi:before { width: 40px; height: 40px; top: -12px; opacity: 0.6; }34  .wifi:after { width: 24px; height: 24px; top: -2px; opacity: 0.9; }35  .battery {36    width: 40px; height: 24px; border: 3px solid #cfe0cf; border-radius: 4px; position: relative;37  }38  .battery:after {39    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #cfe0cf; border-radius: 2px;40  }41  .battery:before {42    content: ""; position: absolute; left: 4px; top: 4px; width: 26px; height: 12px; background: #cfe0cf;43  }44 45  /* Title */46  .title {47    position: absolute; top: 120px; left: 60px;48    font-size: 80px; font-weight: 600; color: #e8f0e8;49  }50 51  /* Timer display */52  .time-display {53    position: absolute; top: 280px; left: 60px; right: 60px;54    display: flex; justify-content: center; gap: 80px; align-items: baseline;55  }56  .digits {57    font-size: 140px; color: #9fb2a0; font-weight: 600;58  }59  .unit {60    font-size: 70px; color: #8f9b91; margin-left: 8px;61  }62 63  /* Keypad grid */64  .keypad {65    position: absolute; top: 620px; left: 0; right: 0;66    display: grid; grid-template-columns: repeat(3, 1fr);67    gap: 60px; padding: 0 90px;68  }69  .key {70    width: 260px; height: 260px; border-radius: 50%;71    margin: 0 auto;72    background: #0e2118;73    display: flex; align-items: center; justify-content: center;74    color: #eaf6ea; font-size: 110px; font-weight: 600;75    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);76  }77  .key.light { background: #29473b; }78  .key svg { width: 110px; height: 110px; }79  .key svg path { fill: #eaf6ea; }80 81  /* Bottom navigation */82  .bottom-nav {83    position: absolute; bottom: 0; left: 0; right: 0;84    height: 240px; border-top: 1px solid rgba(255,255,255,0.05);85    background: #0d1a12;86    display: flex; align-items: center; justify-content: space-around;87  }88  .nav-item {89    display: flex; flex-direction: column; align-items: center; gap: 16px;90    color: #cbd8cb; font-size: 38px;91  }92  .nav-item .icon-wrap {93    width: 94px; height: 94px; border-radius: 24px;94    display: flex; align-items: center; justify-content: center;95    background: transparent;96  }97  .nav-item.active .icon-wrap {98    background: #244537;99  }100  .nav-item svg { width: 64px; height: 64px; }101  .gesture-bar {102    position: absolute; bottom: 260px; left: 50%; transform: translateX(-50%);103    width: 420px; height: 12px; border-radius: 6px; background: #e9e9e9; opacity: 0.8;104  }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status Bar -->111  <div class="status-bar">112    <div>8:21</div>113    <div class="status-icons">114      <div class="icon-circle"></div>115      <div class="icon-dot"></div>116      <div class="icon-circle"></div>117      <div class="wifi"></div>118      <div class="battery"></div>119    </div>120  </div>121 122  <!-- Title -->123  <div class="title">Timer</div>124 125  <!-- Large Display -->126  <div class="time-display">127    <div class="digits">00<span class="unit">h</span></div>128    <div class="digits">00<span class="unit">m</span></div>129    <div class="digits">00<span class="unit">s</span></div>130  </div>131 132  <!-- Keypad -->133  <div class="keypad">134    <div class="key">1</div>135    <div class="key">2</div>136    <div class="key">3</div>137 138    <div class="key">4</div>139    <div class="key">5</div>140    <div class="key">6</div>141 142    <div class="key">7</div>143    <div class="key">8</div>144    <div class="key">9</div>145 146    <div class="key">00</div>147    <div class="key">0</div>148    <div class="key light">149      <!-- Backspace icon -->150      <svg viewBox="0 0 64 64">151        <path d="M10 32 L22 16 H54 V48 H22 Z"></path>152        <path d="M30 24 L38 32 L30 40 M38 24 L30 32 L38 40" stroke="#0b1611" stroke-width="0"></path>153      </svg>154    </div>155  </div>156 157  <!-- Gesture bar -->158  <div class="gesture-bar"></div>159 160  <!-- Bottom Navigation -->161  <div class="bottom-nav">162    <div class="nav-item">163      <div class="icon-wrap">164        <!-- Alarm bell -->165        <svg viewBox="0 0 64 64">166          <path d="M32 14 C22 14 16 22 16 30 V40 L12 44 H52 L48 40 V30 C48 22 42 14 32 14 Z"></path>167          <circle cx="32" cy="50" r="6" fill="#eaf6ea"></circle>168        </svg>169      </div>170      <div>Alarm</div>171    </div>172    <div class="nav-item">173      <div class="icon-wrap">174        <!-- Clock -->175        <svg viewBox="0 0 64 64">176          <circle cx="32" cy="32" r="24" fill="#eaf6ea"></circle>177          <rect x="30" y="22" width="4" height="16" fill="#0d1a12"></rect>178          <rect x="32" y="32" width="12" height="4" fill="#0d1a12"></rect>179        </svg>180      </div>181      <div>Clock</div>182    </div>183    <div class="nav-item active">184      <div class="icon-wrap">185        <!-- Hourglass -->186        <svg viewBox="0 0 64 64">187          <path d="M16 14 H48 V18 C42 26 42 38 48 46 V50 H16 V46 C22 38 22 26 16 18 Z"></path>188        </svg>189      </div>190      <div>Timer</div>191    </div>192    <div class="nav-item">193      <div class="icon-wrap">194        <!-- Stopwatch -->195        <svg viewBox="0 0 64 64">196          <circle cx="32" cy="36" r="22" fill="#eaf6ea"></circle>197          <rect x="28" y="10" width="8" height="8" fill="#eaf6ea"></rect>198          <rect x="32" y="36" width="10" height="4" fill="#0d1a12"></rect>199          <rect x="32" y="24" width="4" height="12" fill="#0d1a12"></rect>200        </svg>201      </div>202      <div>Stopwatch</div>203    </div>204    <div class="nav-item">205      <div class="icon-wrap">206        <!-- Bed -->207        <svg viewBox="0 0 64 64">208          <rect x="12" y="32" width="40" height="12" fill="#eaf6ea"></rect>209          <rect x="12" y="24" width="14" height="8" fill="#eaf6ea"></rect>210          <rect x="12" y="44" width="4" height="8" fill="#eaf6ea"></rect>211          <rect x="48" y="44" width="4" height="8" fill="#eaf6ea"></rect>212        </svg>213      </div>214      <div>Bedtime</div>215    </div>216  </div>217 218</div>219</body>220</html>