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; position:relative; overflow:hidden;9 background:#121416; color:#e6e6e6;10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0; height:120px;15 padding:0 40px; display:flex; align-items:center; font-size:44px; color:#d9d9d9;16 }17 .status-left { display:flex; align-items:center; gap:20px; }18 .status-time { font-weight:600; }19 .status-dots { display:flex; gap:12px; }20 .status-dots span {21 width:18px; height:18px; border-radius:50%; background:#9ea4aa; display:inline-block;22 }23 .status-right { margin-left:auto; display:flex; align-items:center; gap:28px; }24 .status-right svg { width:44px; height:44px; }25 26 /* Header */27 .title {28 position:absolute; top:150px; left:48px; font-size:72px; color:#e5e5e5; letter-spacing:0.5px;29 }30 .menu {31 position:absolute; top:160px; right:48px; width:54px; height:54px;32 display:flex; flex-direction:column; justify-content:space-between; align-items:center;33 }34 .menu span { width:12px; height:12px; border-radius:50%; background:#a9a9a9; display:block; }35 36 /* Timer readout */37 .timer-display {38 position:absolute; top:320px; left:0; width:100%; text-align:center;39 color:#bdbdbd; font-size:160px; font-weight:500;40 }41 .timer-display .unit { margin:0 40px; }42 .timer-display .suffix { font-size:80px; color:#a5a5a5; margin-left:16px; }43 44 /* Keypad */45 .keypad {46 position:absolute; top:720px; left:0; width:100%;47 display:flex; justify-content:center; flex-wrap:wrap;48 gap:70px 120px; padding:0 120px;49 }50 .key {51 width:260px; height:260px; border-radius:50%;52 background:#1b2126; display:flex; align-items:center; justify-content:center;53 color:#e9edf3; font-size:140px; user-select:none;54 }55 .key.zerozero { font-size:130px; }56 .key.backspace { background:#344557; }57 .key svg { width:120px; height:120px; fill:none; stroke:#e9edf3; stroke-width:12; }58 59 /* Bottom navigation */60 .bottom-nav {61 position:absolute; bottom:0; left:0; right:0; height:260px;62 background:#14181c; display:flex; align-items:center; justify-content:space-around;63 border-top:1px solid #1f2429;64 }65 .nav-item { display:flex; flex-direction:column; align-items:center; gap:20px; color:#cfd8dc; }66 .nav-item .label { font-size:42px; }67 .nav-item svg { width:84px; height:84px; fill:none; stroke:#cfd8dc; stroke-width:10; }68 .nav-item.active .icon-wrap {69 width:116px; height:116px; border-radius:50%; background:#3a4f63;70 display:flex; align-items:center; justify-content:center;71 }72 .nav-item.active .label { color:#ffffff; }73 .handle {74 position:absolute; bottom:40px; left:50%; transform:translateX(-50%);75 width:520px; height:14px; background:#cfd8dc33; border-radius:10px;76 }77</style>78</head>79<body>80<div id="render-target">81 82 <!-- Status bar -->83 <div class="status-bar">84 <div class="status-left">85 <div class="status-time">8:58</div>86 <div class="status-dots">87 <span></span><span></span><span></span><span></span>88 </div>89 </div>90 <div class="status-right">91 <!-- Wifi -->92 <svg viewBox="0 0 24 24">93 <path d="M2 8c5-4 15-4 20 0" stroke="#cfd8dc"></path>94 <path d="M5 12c3-3 11-3 14 0" stroke="#cfd8dc"></path>95 <path d="M8 16c2-2 6-2 8 0" stroke="#cfd8dc"></path>96 <circle cx="12" cy="19" r="2" fill="#cfd8dc" stroke="none"></circle>97 </svg>98 <!-- Battery -->99 <svg viewBox="0 0 28 24">100 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#cfd8dc"></rect>101 <rect x="4" y="8" width="14" height="8" fill="#cfd8dc" stroke="none"></rect>102 <rect x="22" y="9" width="4" height="6" rx="1" stroke="#cfd8dc" fill="none"></rect>103 </svg>104 </div>105 </div>106 107 <!-- Header -->108 <div class="title">Timer</div>109 <div class="menu">110 <span></span><span></span><span></span>111 </div>112 113 <!-- Timer readout -->114 <div class="timer-display">115 <span class="unit">00<span class="suffix">h</span></span>116 <span class="unit">00<span class="suffix">m</span></span>117 <span class="unit">00<span class="suffix">s</span></span>118 </div>119 120 <!-- Keypad -->121 <div class="keypad">122 <div class="key">1</div>123 <div class="key">2</div>124 <div class="key">3</div>125 126 <div class="key">4</div>127 <div class="key">5</div>128 <div class="key">6</div>129 130 <div class="key">7</div>131 <div class="key">8</div>132 <div class="key">9</div>133 134 <div class="key zerozero">00</div>135 <div class="key">0</div>136 <div class="key backspace">137 <svg viewBox="0 0 64 64">138 <path d="M14 32l18-18h18a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H32L14 32z"></path>139 <path d="M40 24l-10 16M30 24l10 16"></path>140 </svg>141 </div>142 </div>143 144 <!-- Bottom navigation -->145 <div class="bottom-nav">146 <div class="nav-item">147 <svg viewBox="0 0 64 64">148 <circle cx="32" cy="36" r="18"></circle>149 <path d="M20 18l6-6M44 18l-6-6"></path>150 <circle cx="32" cy="36" r="4" fill="#cfd8dc" stroke="none"></circle>151 </svg>152 <div class="label">Alarm</div>153 </div>154 155 <div class="nav-item">156 <svg viewBox="0 0 64 64">157 <circle cx="32" cy="32" r="22"></circle>158 <path d="M32 32V18M32 32h12"></path>159 </svg>160 <div class="label">Clock</div>161 </div>162 163 <div class="nav-item active">164 <div class="icon-wrap">165 <svg viewBox="0 0 64 64">166 <path d="M24 14h16l-6 18h-4z"></path>167 <path d="M24 50h16"></path>168 </svg>169 </div>170 <div class="label">Timer</div>171 </div>172 173 <div class="nav-item">174 <svg viewBox="0 0 64 64">175 <circle cx="32" cy="36" r="18"></circle>176 <path d="M32 18v-6M44 12h-8"></path>177 </svg>178 <div class="label">Stopwatch</div>179 </div>180 181 <div class="nav-item">182 <svg viewBox="0 0 64 64">183 <rect x="10" y="28" width="44" height="16" rx="3"></rect>184 <rect x="12" y="24" width="10" height="10" rx="2"></rect>185 </svg>186 <div class="label">Bedtime</div>187 </div>188 </div>189 190 <div class="handle"></div>191</div>192</body>193</html>