GD-ML/AndroidCode
13.4k
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 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0f1415;15 color: #e9efef;16 }17 18 /* Top section */19 .topbar {20 position: relative;21 padding: 110px 64px 0 64px;22 }23 .title {24 font-size: 64px;25 font-weight: 400;26 color: #e6eeee;27 }28 .menu-dots {29 position: absolute;30 right: 40px;31 top: 120px;32 width: 20px;33 height: 60px;34 display: flex;35 flex-direction: column;36 justify-content: space-between;37 align-items: center;38 }39 .menu-dots span {40 width: 8px;41 height: 8px;42 background: #cfd8d8;43 border-radius: 50%;44 opacity: 0.8;45 }46 47 /* Time display */48 .time {49 margin: 40px auto 40px;50 width: 100%;51 text-align: center;52 color: #a9aeaf;53 font-weight: 300;54 letter-spacing: 2px;55 font-size: 160px;56 }57 .time .group {58 display: inline-block;59 margin: 0 28px;60 }61 .time .num { font-size: 1em; }62 .time .unit {63 font-size: 0.36em;64 color: #8f9495;65 margin-left: 12px;66 }67 68 /* Keypad */69 .keypad-wrap {70 margin-top: 60px;71 padding: 0 60px 0;72 }73 .keypad {74 width: 960px;75 margin: 0 auto;76 display: grid;77 grid-template-columns: repeat(3, 1fr);78 grid-gap: 42px;79 }80 .key {81 width: 280px; height: 280px;82 border-radius: 50%;83 background: #0f1b1c;84 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);85 color: #e6f1f1;86 display: flex; align-items: center; justify-content: center;87 font-size: 92px;88 font-weight: 300;89 user-select: none;90 }91 .key.dim { color: #e6f1f1; opacity: 0.95; }92 .key.teal {93 background: #274a49;94 color: #e9f6f5;95 }96 .icon {97 width: 110px; height: 110px;98 }99 100 /* Bottom navigation */101 .bottom-nav {102 position: absolute;103 left: 0; right: 0; bottom: 0;104 height: 240px;105 background: #111a1b;106 border-top: 1px solid rgba(255,255,255,0.04);107 display: flex;108 justify-content: space-around;109 align-items: center;110 padding-bottom: 40px;111 box-sizing: border-box;112 }113 .nav-item {114 width: 180px;115 text-align: center;116 color: #c1cccc;117 font-size: 34px;118 }119 .nav-item .ico {120 width: 120px; height: 120px; margin: 0 auto 14px;121 display: flex; align-items: center; justify-content: center;122 }123 .nav-item.active .ico {124 width: 180px; height: 100px;125 background: #2a5050;126 border-radius: 60px;127 }128 .nav-item.active { color: #e8f7f7; font-weight: 500; }129 130 /* gesture bar */131 .gesture {132 position: absolute;133 left: 50%;134 transform: translateX(-50%);135 bottom: 18px;136 width: 360px; height: 14px;137 background: #e7ecec;138 border-radius: 10px;139 opacity: 0.95;140 }141</style>142</head>143<body>144<div id="render-target">145 146 <div class="topbar">147 <div class="title">Timer</div>148 <div class="menu-dots" aria-hidden="true">149 <span></span><span></span><span></span>150 </div>151 </div>152 153 <div class="time" aria-label="current timer value">154 <span class="group"><span class="num">00</span><span class="unit">h</span></span>155 <span class="group"><span class="num">00</span><span class="unit">m</span></span>156 <span class="group"><span class="num">00</span><span class="unit">s</span></span>157 </div>158 159 <div class="keypad-wrap">160 <div class="keypad">161 <div class="key">1</div>162 <div class="key">2</div>163 <div class="key">3</div>164 165 <div class="key">4</div>166 <div class="key">5</div>167 <div class="key">6</div>168 169 <div class="key">7</div>170 <div class="key">8</div>171 <div class="key">9</div>172 173 <div class="key dim">00</div>174 <div class="key">0</div>175 <div class="key teal" title="Delete">176 <svg class="icon" viewBox="0 0 48 48" fill="none">177 <path d="M18 12l-8 12 8 12h18c2 0 4-2 4-4V16c0-2-2-4-4-4H18z" stroke="#e7f3f3" stroke-width="3" fill="none"/>178 <path d="M26 18l-8 8m0-8l8 8" stroke="#e7f3f3" stroke-width="3" stroke-linecap="round"/>179 </svg>180 </div>181 </div>182 </div>183 184 <nav class="bottom-nav" aria-label="Clock navigation">185 <div class="nav-item">186 <div class="ico">187 <svg width="90" height="90" viewBox="0 0 48 48" fill="none">188 <path d="M24 8c-8 0-14 6-14 14v8H8v6h32v-6h-2v-8c0-8-6-14-14-14z" stroke="#c6d3d3" stroke-width="2"/>189 <circle cx="24" cy="40" r="4" fill="#c6d3d3"/>190 </svg>191 </div>192 <div>Alarm</div>193 </div>194 <div class="nav-item">195 <div class="ico">196 <svg width="90" height="90" viewBox="0 0 48 48" fill="none">197 <circle cx="24" cy="24" r="16" stroke="#c6d3d3" stroke-width="2"/>198 <path d="M24 14v10l8 4" stroke="#c6d3d3" stroke-width="2" stroke-linecap="round"/>199 </svg>200 </div>201 <div>Clock</div>202 </div>203 <div class="nav-item active">204 <div class="ico">205 <svg width="72" height="72" viewBox="0 0 48 48" fill="none">206 <path d="M16 12h16l-6 8h-4l-6-8z" stroke="#e9f6f5" stroke-width="2"/>207 <path d="M16 36h16l-6-8h-4l-6 8z" stroke="#e9f6f5" stroke-width="2"/>208 </svg>209 </div>210 <div>Timer</div>211 </div>212 <div class="nav-item">213 <div class="ico">214 <svg width="90" height="90" viewBox="0 0 48 48" fill="none">215 <circle cx="24" cy="26" r="14" stroke="#c6d3d3" stroke-width="2"/>216 <rect x="21" y="8" width="6" height="4" rx="1" fill="#c6d3d3"/>217 <path d="M24 18v8l6 3" stroke="#c6d3d3" stroke-width="2" stroke-linecap="round"/>218 </svg>219 </div>220 <div>Stopwatch</div>221 </div>222 <div class="nav-item">223 <div class="ico">224 <svg width="90" height="90" viewBox="0 0 48 48" fill="none">225 <rect x="8" y="26" width="32" height="10" rx="2" stroke="#c6d3d3" stroke-width="2"/>226 <rect x="10" y="22" width="8" height="6" fill="#c6d3d3"/>227 <rect x="30" y="22" width="8" height="6" fill="#c6d3d3"/>228 </svg>229 </div>230 <div>Bedtime</div>231 </div>232 </nav>233 234 <div class="gesture"></div>235</div>236</body>237</html>