GD-ML/AndroidCode

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>Clock - Timer</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f0f10;15    color: #fff;16  }17 18  /* Top slanted hero */19  .top-hero {20    height: 410px;21    background:22      linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 100%),23      repeating-linear-gradient(-24deg, #1b1b1d 0px, #1b1b1d 180px, #121214 180px, #121214 340px);24    box-shadow: inset 0 -40px 120px rgba(0,0,0,0.5);25    padding: 28px 36px 0;26  }27 28  .statusbar {29    display: flex;30    justify-content: space-between;31    align-items: center;32    font-size: 36px;33    opacity: 0.95;34  }35  .status-icons { display: flex; gap: 22px; align-items: center; }36 37  .titlebar {38    display: flex;39    align-items: center;40    gap: 26px;41    margin-top: 34px;42  }43  .titlebar .title {44    font-size: 64px;45    font-weight: 600;46    letter-spacing: 0.5px;47  }48  .titlebar .settings {49    margin-left: auto;50    font-size: 44px;51    opacity: 0.9;52  }53 54  .hamburger {55    width: 64px; height: 48px;56  }57 58  /* Tabs */59  .tabs {60    margin-top: 48px;61    display: flex;62    justify-content: space-between;63    padding: 0 36px;64  }65  .tab {66    width: 240px;67    display: flex;68    flex-direction: column;69    align-items: center;70    color: #e9e9e9;71    opacity: 0.95;72  }73  .tab svg { width: 66px; height: 66px; }74  .tab span { margin-top: 14px; font-size: 36px; color: #dfdfdf; }75  .tab.active span { color: #ffffff; }76  .tab-underline {77    width: 220px; height: 6px; background: #c74755; border-radius: 3px;78    margin: 28px auto 0;79  }80 81  /* Timer content */82  .content {83    padding: 24px 36px 0;84  }85 86  .timer-card {87    margin-top: 18px;88    background: transparent;89    border-radius: 18px;90    padding: 8px 8px 0;91  }92 93  .timer-title {94    display: flex;95    align-items: center;96    gap: 18px;97    color: #d24a56;98    font-size: 40px;99    font-weight: 600;100  }101 102  .progress {103    height: 12px;104    background: #d7d7d7;105    border-radius: 6px;106    margin: 22px 8px 26px;107    opacity: 0.85;108  }109 110  .time-row {111    display: flex;112    align-items: center;113    justify-content: space-between;114    padding: 0 18px 0 10px;115  }116  .left-time {117    display: flex;118    align-items: center;119    gap: 28px;120  }121  .trash {122    width: 48px; height: 56px; opacity: 0.65;123  }124  .time-text {125    font-size: 120px;126    font-weight: 600;127    letter-spacing: 2px;128    color: #efefef;129  }130  .play-btn {131    width: 170px; height: 170px; background: #ffffff; color: #0f0f10;132    border-radius: 50%;133    display: flex; align-items: center; justify-content: center;134    box-shadow: 0 10px 20px rgba(0,0,0,0.45);135    margin-right: 14px;136  }137  .play-btn svg { width: 72px; height: 72px; }138 139  /* Floating Add Button */140  .fab {141    position: absolute;142    left: 50%;143    transform: translateX(-50%);144    bottom: 410px;145    width: 160px; height: 160px; border-radius: 50%;146    background: #d24a56;147    color: #fff;148    display: flex; align-items: center; justify-content: center;149    font-size: 100px; line-height: 0;150    box-shadow: 0 18px 28px rgba(0,0,0,0.6), 0 4px 6px rgba(0,0,0,0.35) inset;151  }152 153  /* Home indicator */154  .home-indicator {155    position: absolute;156    bottom: 24px;157    left: 50%;158    transform: translateX(-50%);159    width: 520px;160    height: 12px;161    background: #d6d6d6;162    border-radius: 10px;163    opacity: 0.95;164  }165</style>166</head>167<body>168<div id="render-target">169  <div class="top-hero">170    <div class="statusbar">171      <div>11:07</div>172      <div class="status-icons">173        <!-- WiFi -->174        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.95">175          <path d="M2 8.5a16 16 0 0 1 20 0"></path>176          <path d="M5 12a11 11 0 0 1 14 0"></path>177          <path d="M8.5 15.5a6 6 0 0 1 7 0"></path>178          <circle cx="12" cy="19" r="1.2" fill="#fff" stroke="none"></circle>179        </svg>180        <!-- Battery -->181        <svg width="54" height="48" viewBox="0 0 28 16" fill="none">182          <rect x="1" y="3" width="22" height="10" rx="2" stroke="#ffffff" stroke-width="1.6"></rect>183          <rect x="3" y="5" width="14" height="6" fill="#ffffff"></rect>184          <rect x="24" y="6" width="3" height="4" rx="1" fill="#ffffff"></rect>185        </svg>186      </div>187    </div>188 189    <div class="titlebar">190      <!-- Hamburger -->191      <svg class="hamburger" viewBox="0 0 24 18" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round">192        <path d="M1 2h22M1 9h18M1 16h22"></path>193      </svg>194      <div class="title">The Clock</div>195      <div class="settings" aria-label="settings">⚙</div>196    </div>197 198    <div class="tabs">199      <div class="tab">200        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">201          <circle cx="12" cy="13" r="7"></circle>202          <path d="M7 5L4 3M17 5l3-2M12 9v4M12 13h3"></path>203        </svg>204        <span>Alarms</span>205      </div>206      <div class="tab">207        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">208          <circle cx="12" cy="12" r="8"></circle>209          <path d="M12 7v6l4 2"></path>210        </svg>211        <span>Clock</span>212      </div>213      <div class="tab active">214        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">215          <circle cx="12" cy="13" r="7"></circle>216          <path d="M9 3h6M12 3v3"></path>217        </svg>218        <span>Timer</span>219        <div class="tab-underline"></div>220      </div>221      <div class="tab">222        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">223          <circle cx="12" cy="13" r="7"></circle>224          <path d="M12 2v3M8 2h8"></path>225        </svg>226        <span>Stopwatch</span>227      </div>228    </div>229  </div>230 231  <div class="content">232    <div class="timer-card">233      <div class="timer-title">234        <!-- Pencil/Edit icon -->235        <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="#d24a56" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">236          <path d="M3 21l3-1 11-11-2-2L4 18l-1 3z"></path>237        </svg>238        <div>Timer 1</div>239      </div>240 241      <div class="progress"></div>242 243      <div class="time-row">244        <div class="left-time">245          <!-- Trash -->246          <svg class="trash" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">247            <path d="M3 6h18"></path>248            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>249            <path d="M10 11v6M14 11v6"></path>250            <path d="M9 6V4h6v2"></path>251          </svg>252          <div class="time-text">00:04:00</div>253        </div>254        <div class="play-btn" aria-label="Play">255          <svg viewBox="0 0 24 24" fill="#0f0f10">256            <path d="M8 5l11 7-11 7z"></path>257          </svg>258        </div>259      </div>260    </div>261  </div>262 263  <div class="fab" aria-label="Add timer">+</div>264 265  <div class="home-indicator"></div>266</div>267</body>268</html>