GD-ML/AndroidCode
13.4k
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;9 position:relative; overflow:hidden;10 background:#0d1415; color:#e7eeee;11 }12 .status-bar {13 position:absolute; top:0; left:0; right:0;14 height:120px; padding:24px 32px;15 color:#cfd6d6; font-weight:600; font-size:42px;16 display:flex; align-items:center; justify-content:space-between;17 }18 .status-left { display:flex; align-items:center; gap:22px; }19 .notif-dots { display:flex; gap:10px; margin-left:10px; }20 .notif-dots span {21 width:22px; height:22px; border-radius:50%;22 background:#cfd6d6; display:inline-block;23 }24 .status-right { display:flex; align-items:center; gap:28px; }25 .icon { width:44px; height:44px; }26 .ellipsis {27 position:absolute; top:140px; right:40px;28 width:8px; height:80px; display:flex; flex-direction:column; justify-content:space-between;29 }30 .ellipsis span {31 width:8px; height:8px; border-radius:50%; background:#cfd6d6; opacity:0.9;32 }33 34 .title {35 position:absolute; top:160px; left:48px;36 font-size:72px; letter-spacing:1px; color:#e7f1f1;37 }38 39 .time-display {40 position:absolute; top:330px; left:60px; right:60px;41 display:flex; align-items:flex-end; gap:80px;42 }43 .time-block .digits {44 font-size:190px; line-height:1; font-weight:600;45 color:#9aa2a6;46 }47 .time-block .suffix {48 font-size:80px; margin-left:10px; color:#9aa2a6;49 }50 .time-block .active { color:#9ee5e1; }51 .minute .digits, .second .digits { color:#9ee5e1; }52 .minute .suffix, .second .suffix { color:#9ee5e1; }53 54 .keypad {55 position:absolute; top:780px; left:60px; right:60px;56 display:grid; grid-template-columns: repeat(3, 1fr);57 gap:60px 60px;58 }59 .key-btn {60 height:260px; border-radius:50%;61 background:#111a1c;62 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);63 display:flex; align-items:center; justify-content:center;64 font-size:120px; color:#eaf2f2; user-select:none;65 }66 .key-btn.dim { color:#eaf2f2; }67 .key-btn.delete {68 background:#284145; color:#cfeeed;69 }70 71 .bottom-row {72 position:absolute; top:1530px; left:60px; right:60px;73 display:grid; grid-template-columns: repeat(3, 1fr); gap:60px;74 }75 76 .play-btn {77 position:absolute; top:1760px; left:50%; transform:translateX(-50%);78 width:300px; height:300px; border-radius:50%;79 background:#9ee5e1; display:flex; align-items:center; justify-content:center;80 }81 .play-btn svg { width:130px; height:130px; fill:#0d1415; }82 83 .bottom-nav {84 position:absolute; bottom:0; left:0; right:0;85 height:250px; background:#121a1c; border-top:1px solid rgba(255,255,255,0.06);86 display:flex; align-items:center; justify-content:space-around;87 color:#cfd6d6;88 }89 .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; font-size:42px; }90 .nav-icon {91 width:80px; height:80px; border-radius:18px; background:transparent;92 display:flex; align-items:center; justify-content:center;93 }94 .nav-item.active .nav-icon {95 background:#284145; border-radius:34px; padding:10px 22px;96 }97 .nav-item.active .label { color:#9ee5e1; font-weight:600; }98 .gesture-bar {99 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);100 width:520px; height:14px; background:#e9e9e9; border-radius:10px; opacity:0.9;101 }102</style>103</head>104<body>105<div id="render-target">106 107 <!-- Status Bar -->108 <div class="status-bar">109 <div class="status-left">110 <div>5:30</div>111 <div class="notif-dots">112 <span></span><span></span><span></span><span></span><span></span>113 </div>114 <span style="width:8px; height:8px; border-radius:50%; background:#cfd6d6; display:inline-block;"></span>115 </div>116 <div class="status-right">117 <!-- WiFi -->118 <svg class="icon" viewBox="0 0 24 24">119 <path fill="#cfd6d6" d="M12 18.5l2.2 2.2-2.2 2.2-2.2-2.2L12 18.5z"></path>120 <path fill="#cfd6d6" d="M2 8c5.6-5.3 14.4-5.3 20 0l-2 2c-4.9-4.4-11.1-4.4-16 0L2 8z"></path>121 <path fill="#cfd6d6" d="M5 11c4.2-3.8 9.8-3.8 14 0l-2 2c-3.3-2.9-6.7-2.9-10 0L5 11z"></path>122 <circle cx="12" cy="20" r="2" fill="#cfd6d6"></circle>123 </svg>124 <!-- Battery -->125 <svg class="icon" viewBox="0 0 24 24">126 <rect x="2" y="6" width="18" height="12" rx="2" fill="#cfd6d6"></rect>127 <rect x="20" y="10" width="2" height="4" fill="#cfd6d6"></rect>128 <rect x="4" y="8" width="12" height="8" fill="#0d1415"></rect>129 </svg>130 </div>131 </div>132 133 <!-- Vertical Ellipsis -->134 <div class="ellipsis">135 <span></span><span></span><span></span>136 </div>137 138 <!-- Title -->139 <div class="title">Timer</div>140 141 <!-- Time Display -->142 <div class="time-display">143 <div class="time-block hour">144 <span class="digits">00</span><span class="suffix">h</span>145 </div>146 <div class="time-block minute">147 <span class="digits active">30</span><span class="suffix active">m</span>148 </div>149 <div class="time-block second">150 <span class="digits active">00</span><span class="suffix active">s</span>151 </div>152 </div>153 154 <!-- Keypad 1-9 -->155 <div class="keypad">156 <div class="key-btn">1</div>157 <div class="key-btn">2</div>158 <div class="key-btn">3</div>159 <div class="key-btn">4</div>160 <div class="key-btn">5</div>161 <div class="key-btn">6</div>162 <div class="key-btn">7</div>163 <div class="key-btn">8</div>164 <div class="key-btn">9</div>165 </div>166 167 <!-- Bottom keypad row -->168 <div class="bottom-row">169 <div class="key-btn">00</div>170 <div class="key-btn">0</div>171 <div class="key-btn delete">172 <svg viewBox="0 0 24 24" style="width:120px; height:120px;">173 <path fill="#cfeeed" d="M3 12l5-5h10a2 2 0 012 2v6a2 2 0 01-2 2H8l-5-5z"></path>174 <path fill="#0d1415" d="M12 9l3 3-3 3-3-3 3-3z"></path>175 </svg>176 </div>177 </div>178 179 <!-- Play Button -->180 <div class="play-btn">181 <svg viewBox="0 0 24 24">182 <polygon points="8,6 20,12 8,18"></polygon>183 </svg>184 </div>185 186 <!-- Bottom Navigation -->187 <div class="bottom-nav">188 <div class="nav-item">189 <div class="nav-icon">190 <svg viewBox="0 0 24 24" width="60" height="60">191 <path fill="#cfd6d6" d="M12 2l3 4v4H9V6l3-4zm-6 8h12v12H6V10z"></path>192 </svg>193 </div>194 <div class="label">Alarm</div>195 </div>196 <div class="nav-item">197 <div class="nav-icon">198 <svg viewBox="0 0 24 24" width="60" height="60">199 <circle cx="12" cy="12" r="8" fill="#cfd6d6"></circle>200 <rect x="11" y="6" width="2" height="7" fill="#0d1415"></rect>201 <rect x="11" y="12" width="5" height="2" fill="#0d1415"></rect>202 </svg>203 </div>204 <div class="label">Clock</div>205 </div>206 <div class="nav-item active">207 <div class="nav-icon">208 <svg viewBox="0 0 24 24" width="60" height="60">209 <path fill="#9ee5e1" d="M9 4h6l-2 4 2 4H9l2-4-2-4z"></path>210 </svg>211 </div>212 <div class="label">Timer</div>213 </div>214 <div class="nav-item">215 <div class="nav-icon">216 <svg viewBox="0 0 24 24" width="60" height="60">217 <circle cx="12" cy="12" r="9" fill="#cfd6d6"></circle>218 <rect x="11" y="7" width="2" height="6" fill="#0d1415"></rect>219 <rect x="11" y="12" width="5" height="2" fill="#0d1415"></rect>220 </svg>221 </div>222 <div class="label">Stopwatch</div>223 </div>224 <div class="nav-item">225 <div class="nav-icon">226 <svg viewBox="0 0 24 24" width="60" height="60">227 <path fill="#cfd6d6" d="M4 12h16v6H4v-6zm2-4h12v3H6V8z"></path>228 </svg>229 </div>230 <div class="label">Bedtime</div>231 </div>232 <div class="gesture-bar"></div>233 </div>234 235</div>236</body>237</html>