GD-ML/AndroidCode
13.4k
1<html lang="en">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;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0f1415;13 color: #e6ecec;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 110px;23 padding: 0 28px;24 box-sizing: border-box;25 color: #e9eeee;26 font-size: 42px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon-wifi svg,37 .icon-battery svg { display: block; }38 39 /* Header */40 .header {41 position: absolute;42 top: 120px;43 left: 40px;44 right: 40px;45 height: 120px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 }50 .header .title {51 font-size: 86px;52 font-weight: 600;53 color: #dfe5e5;54 }55 .menu-dots {56 width: 40px;57 height: 90px;58 display: flex;59 flex-direction: column;60 align-items: center;61 justify-content: space-between;62 }63 .menu-dots span {64 width: 10px;65 height: 10px;66 background: #cfd6d6;67 border-radius: 50%;68 display: block;69 }70 71 /* Time display */72 .time-display {73 position: absolute;74 top: 270px;75 left: 0;76 width: 100%;77 text-align: center;78 color: #9aa2a2;79 font-size: 160px;80 letter-spacing: 6px;81 font-weight: 600;82 }83 .time-display .unit { color: #9aa2a2; font-weight: 500; }84 85 /* Keypad */86 .keypad {87 position: absolute;88 top: 650px;89 left: 50%;90 transform: translateX(-50%);91 width: 900px;92 display: grid;93 grid-template-columns: repeat(3, 1fr);94 grid-gap: 70px;95 justify-items: center;96 }97 .key {98 width: 260px;99 height: 260px;100 border-radius: 50%;101 background: #10191a;102 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);103 display: flex;104 align-items: center;105 justify-content: center;106 color: #e8f0f0;107 font-size: 120px;108 font-weight: 500;109 }110 .key.dim { color: #e8f0f0; opacity: 0.92; }111 .key.backspace {112 background: #2e4647;113 color: #dfe9e9;114 font-size: 70px;115 }116 117 /* Bottom navigation */118 .bottom-nav {119 position: absolute;120 left: 0;121 bottom: 0;122 width: 1080px;123 height: 250px;124 background: #121819;125 border-top: 1px solid rgba(255,255,255,0.05);126 display: flex;127 padding-top: 18px;128 box-sizing: border-box;129 }130 .nav-item {131 flex: 1;132 text-align: center;133 color: #c7cece;134 font-size: 38px;135 }136 .nav-icon {137 height: 96px;138 display: flex;139 align-items: center;140 justify-content: center;141 margin-bottom: 10px;142 position: relative;143 }144 .nav-item.active .highlight {145 position: absolute;146 width: 190px;147 height: 96px;148 background: #2e4749;149 border-radius: 50px;150 z-index: 0;151 }152 .nav-item svg {153 position: relative;154 z-index: 1;155 fill: none;156 stroke: #cfd6d6;157 stroke-width: 8;158 }159 .nav-item.active svg { stroke: #e8f0f0; }160 .gesture {161 position: absolute;162 bottom: 28px;163 left: 50%;164 transform: translateX(-50%);165 width: 360px;166 height: 12px;167 background: #d9dcdc;168 border-radius: 8px;169 opacity: 0.85;170 }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status Bar -->177 <div class="status-bar">178 <div class="status-left">5:27</div>179 <div class="status-right">180 <div class="icon-wifi">181 <!-- Simple Wi‑Fi icon -->182 <svg width="54" height="40" viewBox="0 0 24 16">183 <path d="M2 5c4-3 16-3 20 0M5 8c3-2 11-2 14 0M8 11c2-1 6-1 8 0M12 14l2 2-2 2-2-2z" stroke="#e6ecec" stroke-width="1.8" fill="none" stroke-linecap="round"/>184 </svg>185 </div>186 <div class="icon-battery">187 <!-- Battery -->188 <svg width="58" height="34" viewBox="0 0 28 14">189 <rect x="1" y="2" width="22" height="10" rx="2" stroke="#e6ecec" stroke-width="2" fill="none"/>190 <rect x="3" y="4" width="16" height="6" fill="#e6ecec"/>191 <rect x="24" y="5" width="3" height="4" rx="1" fill="#e6ecec"/>192 </svg>193 </div>194 </div>195 </div>196 197 <!-- Header -->198 <div class="header">199 <div class="title">Timer</div>200 <div class="menu-dots">201 <span></span><span></span><span></span>202 </div>203 </div>204 205 <!-- Time Display -->206 <div class="time-display">207 00<span class="unit">h</span> 00<span class="unit">m</span> 00<span class="unit">s</span>208 </div>209 210 <!-- Keypad -->211 <div class="keypad">212 <div class="key">1</div>213 <div class="key">2</div>214 <div class="key">3</div>215 216 <div class="key">4</div>217 <div class="key">5</div>218 <div class="key">6</div>219 220 <div class="key">7</div>221 <div class="key">8</div>222 <div class="key">9</div>223 224 <div class="key dim">00</div>225 <div class="key">0</div>226 <div class="key backspace">227 <!-- Backspace icon -->228 <svg width="110" height="70" viewBox="0 0 64 36">229 <path d="M22 6l-12 12 12 12h30a4 4 0 004-4V10a4 4 0 00-4-4H22z" fill="none" stroke="#e8f0f0" stroke-width="3"/>230 <path d="M33 12l10 10M43 12l-10 10" stroke="#e8f0f0" stroke-width="3" stroke-linecap="round"/>231 </svg>232 </div>233 </div>234 235 <!-- Bottom Navigation -->236 <div class="bottom-nav">237 <div class="nav-item">238 <div class="nav-icon">239 <svg width="60" height="60" viewBox="0 0 24 24">240 <path d="M12 6v6m-7 6h14M5 12a7 7 0 1114 0v6H5v-6z" />241 </svg>242 </div>243 <div>Alarm</div>244 </div>245 <div class="nav-item">246 <div class="nav-icon">247 <svg width="60" height="60" viewBox="0 0 24 24">248 <circle cx="12" cy="12" r="9"></circle>249 <path d="M12 7v6l4 2"></path>250 </svg>251 </div>252 <div>Clock</div>253 </div>254 <div class="nav-item active">255 <div class="nav-icon">256 <div class="highlight"></div>257 <svg width="60" height="60" viewBox="0 0 24 24">258 <path d="M8 3h8l-2 6 2 6H8l2-6-2-6z"></path>259 </svg>260 </div>261 <div>Timer</div>262 </div>263 <div class="nav-item">264 <div class="nav-icon">265 <svg width="60" height="60" viewBox="0 0 24 24">266 <circle cx="12" cy="12" r="9"></circle>267 <path d="M12 5v7h6"></path>268 </svg>269 </div>270 <div>Stopwatch</div>271 </div>272 <div class="nav-item">273 <div class="nav-icon">274 <svg width="60" height="60" viewBox="0 0 24 24">275 <path d="M3 11h18v7a2 2 0 01-2 2H5a2 2 0 01-2-2v-7z"></path>276 <path d="M8 11V7a4 4 0 018 0v4"></path>277 </svg>278 </div>279 <div>Bedtime</div>280 </div>281 <div class="gesture"></div>282 </div>283 284</div>285</body>286</html>