GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>The Clock - Timer</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  :root{9    --bg:#0f0f0f;10    --text:#ffffff;11    --muted:#cfcfcf;12    --grey:#9e9e9e;13    --accent:#d63f55;14    --line:#e6e6e6;15  }16  body{ margin:0; padding:0; background:transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }17  #render-target{18    width:1080px; height:2400px;19    position:relative; overflow:hidden;20    background: var(--bg);21    color:var(--text);22  }23 24  /* Header / top gradient area */25  .header{26    height:420px;27    position:relative;28    padding:40px 48px 0 48px;29    background: linear-gradient(35deg,#141414 10%, #1a1a1a 70%);30  }31  .header::after{32    content:"";33    position:absolute; inset:0;34    background: repeating-linear-gradient(30deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 120px, rgba(0,0,0,0) 220px);35    opacity:.25; pointer-events:none;36  }37 38  .status-row{39    display:flex; justify-content:space-between; align-items:center;40    position:relative; z-index:1;41  }42  .status-left{ font-size:32px; color:#eaeaea; }43  .status-right{ display:flex; gap:28px; align-items:center; }44  .icon{ width:44px; height:44px; display:inline-block; }45  .icon svg{ width:100%; height:100%; fill:#eaeaea; }46 47  .title-row{48    margin-top:36px;49    display:flex; align-items:center; gap:28px;50    position:relative; z-index:1;51  }52  .menu-btn .icon svg{ fill:#ffffff; }53  .app-title{ font-size:68px; font-weight:600; letter-spacing:0.5px; }54 55  .quick-icons{56    margin-top:50px;57    display:flex; align-items:flex-start; justify-content:space-between;58    position:relative; z-index:1;59    padding:0 12px;60  }61  .quick-item{ display:flex; flex-direction:column; align-items:center; gap:20px; width:25%; }62  .quick-item .label{ font-size:34px; color:#e7e7e7; }63  .quick-item .qicon{ width:78px; height:78px; }64  .qicon svg{ width:100%; height:100%; fill:#f5f5f5; }65 66  .tabs-underline{67    position:absolute; left:50%; transform:translateX(-50%);68    bottom:12px; width:180px; height:6px; border-radius:3px; background:var(--accent);69  }70  .content{71    position:relative;72    padding:0 40px;73    margin-top:18px;74  }75 76  /* Timer card */77  .timer-card{78    margin-top:40px;79    background:transparent;80    border-radius:16px;81    padding:0;82  }83  .timer-title{84    display:flex; align-items:center; gap:16px;85    color:var(--accent); font-size:42px; font-weight:600;86    padding:0 12px;87  }88  .pencil{89    width:42px; height:42px;90  }91  .divider{92    height:8px; background:#dddddd; border-radius:4px; margin:24px 0 32px 0;93  }94  .timer-row{95    display:flex; align-items:center; justify-content:space-between;96    padding:0 12px;97  }98  .left-group{ display:flex; align-items:center; gap:26px; }99  .trash{ width:48px; height:48px; }100  .trash svg{ fill:#bdbdbd; }101  .time-text{102    font-size:120px; font-weight:600; letter-spacing:2px; color:#f2f2f2;103  }104  .play-btn{105    width:150px; height:150px; background:#ffffff; border-radius:50%;106    display:flex; justify-content:center; align-items:center;107    box-shadow:0 8px 16px rgba(0,0,0,0.4);108    margin-right:8px;109  }110  .play-btn svg{ width:56%; height:56%; fill:#121212; }111 112  /* Huge empty area */113  .spacer{114    height:1150px;115  }116 117  /* Floating action button */118  .fab{119    position:absolute; left:50%; transform:translateX(-50%);120    bottom:340px;121    width:160px; height:160px; border-radius:50%;122    background:var(--accent);123    display:flex; justify-content:center; align-items:center;124    box-shadow:0 16px 24px rgba(0,0,0,0.45);125  }126  .fab svg{ width:60%; height:60%; fill:#ffffff; }127 128  /* Ad banner */129  .ad-banner{130    position:absolute; left:0; right:0; bottom:180px;131    margin:0 0;132    background:#ffffff;133    border-top:6px solid var(--accent);134    border-radius:24px 24px 0 0;135    padding:22px 26px;136    box-shadow:0 -8px 20px rgba(0,0,0,0.35);137    display:flex; align-items:center; gap:26px;138  }139  .ad-image{140    width:120px; height:120px;141    background:#E0E0E0; border:1px solid #BDBDBD;142    display:flex; justify-content:center; align-items:center; color:#757575;143    border-radius:16px;144    flex-shrink:0;145  }146  .ad-text{ flex:1; }147  .ad-text .store{ color:#666; font-size:30px; margin-bottom:6px; }148  .ad-text .title{ color:#111; font-size:36px; font-weight:600; }149  .ad-action{150    background:#2ea65a; color:#fff; font-weight:700;151    font-size:34px; padding:20px 38px; border-radius:14px;152    flex-shrink:0;153  }154 155  /* Home indicator */156  .home-indicator{157    position:absolute; left:50%; transform:translateX(-50%);158    bottom:70px; width:360px; height:10px; border-radius:6px; background:#e6e6e6; opacity:.85;159  }160 161  /* Simple gear and moon icons */162  .gear svg, .moon svg{ fill:#eaeaea; }163</style>164</head>165<body>166<div id="render-target">167  <!-- Top gradient header -->168  <div class="header">169    <div class="status-row">170      <div class="status-left">12:14</div>171      <div class="status-right">172        <!-- Wifi icon -->173        <span class="icon">174          <svg viewBox="0 0 24 24">175            <path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5zM3 8.8c5.6-4.7 12.4-4.7 18 0l-1.4 1.4c-4.8-4-10.4-4-15.2 0L3 8.8zm3.5 4.2c3.6-3 8.4-3 12 0l-1.4 1.4c-2.7-2.2-6.5-2.2-9.2 0L6.5 13zm3.6 3.5c1.7-1.4 4.1-1.4 5.8 0l-1.4 1.4c-.9-.7-2.1-.7-3 0l-1.4-1.4z"/>176          </svg>177        </span>178        <!-- Battery icon -->179        <span class="icon">180          <svg viewBox="0 0 24 24">181            <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>182            <rect x="20.5" y="10" width="1.5" height="4"></rect>183            <rect x="4" y="9" width="12" height="6" fill="#9ad06b"></rect>184          </svg>185        </span>186        <!-- Moon icon -->187        <span class="icon moon">188          <svg viewBox="0 0 24 24">189            <path d="M12 2c-1.5 2.2-2.3 4.8-2.3 7.5 0 5.2 4.3 9.5 9.5 9.5 1.5 0 2.9-.3 4.2-.9-1.7 3.7-5.5 6.3-9.8 6.3-6.1 0-11-4.9-11-11 0-4.7 2.9-8.6 7-10.4z"/>190          </svg>191        </span>192        <!-- Gear icon -->193        <span class="icon gear">194          <svg viewBox="0 0 24 24">195            <path d="M12 8.5a3.5 3.5 0 110 7 3.5 3.5 0 010-7zm8.5 3.5l2-1-1-2-2 .8a7.9 7.9 0 00-1.7-1l.2-2.1h-2l-.3 2a8.7 8.7 0 00-2 0l-.3-2h-2l.2 2.1c-.6.3-1.2.6-1.7 1l-2-.8-1 2 2 1c-.2.6-.4 1.3-.4 2s.2 1.4.4 2l-2 1 1 2 2-.8c.5.4 1.1.7 1.7 1l-.2 2.1h2l.3-2a8.7 8.7 0 002 0l.3 2h2l-.2-2.1c.6-.3 1.2-.6 1.7-1l2 .8 1-2-2-1c.2-.6.4-1.3.4-2s-.2-1.4-.4-2z"/>196          </svg>197        </span>198      </div>199    </div>200 201    <div class="title-row">202      <span class="menu-btn icon">203        <svg viewBox="0 0 24 24">204          <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>205        </svg>206      </span>207      <div class="app-title">The Clock</div>208    </div>209 210    <div class="quick-icons">211      <div class="quick-item">212        <div class="qicon">213          <svg viewBox="0 0 24 24">214            <path d="M7 4l2 2M15 4l-2 2M12 7a7 7 0 100 14 7 7 0 000-14zm0 3v5l3 2"/>215          </svg>216        </div>217        <div class="label">Alarms</div>218      </div>219      <div class="quick-item">220        <div class="qicon">221          <svg viewBox="0 0 24 24">222            <circle cx="12" cy="12" r="8"></circle>223            <path d="M12 12V7M12 12l4 3" stroke="#1a1a1a" stroke-width="0"/>224          </svg>225        </div>226        <div class="label">Clock</div>227      </div>228      <div class="quick-item">229        <div class="qicon">230          <svg viewBox="0 0 24 24">231            <circle cx="12" cy="12" r="8"></circle>232            <path d="M12 7v5l3 2"/>233          </svg>234        </div>235        <div class="label" style="font-weight:700">Timer</div>236      </div>237      <div class="quick-item">238        <div class="qicon">239          <svg viewBox="0 0 24 24">240            <circle cx="12" cy="12" r="8"></circle>241            <path d="M8 8l8 8M16 8l-8 8"/>242          </svg>243        </div>244        <div class="label">Stopwatch</div>245      </div>246      <div class="tabs-underline"></div>247    </div>248  </div>249 250  <!-- Main content -->251  <div class="content">252    <div class="timer-card">253      <div class="timer-title">254        <span class="pencil">255          <svg viewBox="0 0 24 24">256            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>257          </svg>258        </span>259        <span>Timer 1</span>260      </div>261      <div class="divider"></div>262      <div class="timer-row">263        <div class="left-group">264          <span class="trash">265            <svg viewBox="0 0 24 24">266              <path d="M9 3h6l1 2h4v2H4V5h4l1-2zm-1 6h2v9H8V9zm6 0h2v9h-2V9z"/>267            </svg>268          </span>269          <div class="time-text">00:10:00</div>270        </div>271        <div class="play-btn">272          <svg viewBox="0 0 24 24">273            <path d="M8 5v14l11-7-11-7z"/>274          </svg>275        </div>276      </div>277    </div>278 279    <div class="spacer"></div>280  </div>281 282  <!-- Floating Add button -->283  <div class="fab">284    <svg viewBox="0 0 24 24">285      <path d="M11 5h2v14h-2zM5 11h14v2H5z"/>286    </svg>287  </div>288 289  <!-- Ad banner placeholder -->290  <div class="ad-banner">291    <div class="ad-image">[IMG: Game Icon]</div>292    <div class="ad-text">293      <div class="store">Play Store</div>294      <div class="title">Onet Puzzle - Tile Match Game</div>295    </div>296    <div class="ad-action">GET</div>297  </div>298 299  <!-- Home indicator -->300  <div class="home-indicator"></div>301</div>302</body>303</html>