GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>The Clock - Timer</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0f0f0f;11    color: #fff;12  }13 14  /* Top app bar area with subtle diagonal stripes */15  .app-top {16    position: relative;17    height: 440px;18    padding-top: 24px;19    background:20      linear-gradient(180deg, #1c1c1c 0%, #121212 65%) ,21      repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 140px, rgba(0,0,0,0) 140px 280px);22  }23 24  /* Status bar */25  .statusbar {26    display: flex; align-items: center; justify-content: space-between;27    padding: 0 40px; height: 70px; font-size: 34px; color: #eaeaea;28  }29  .status-icons { display: flex; align-items: center; gap: 26px; }30  .status-icons svg { opacity: 0.9; }31 32  /* Title row */33  .title-row {34    display: flex; align-items: center;35    padding: 24px 40px 16px 40px;36    gap: 28px;37  }38  .title-text {39    font-size: 72px; font-weight: 600; letter-spacing: 0.4px;40  }41  .title-right { margin-left: auto; display: flex; align-items: center; gap: 34px; }42 43  /* Tabs */44  .tabs {45    display: flex; justify-content: space-around; align-items: flex-end;46    padding: 36px 40px 0 40px;47  }48  .tab {49    display: flex; flex-direction: column; align-items: center; gap: 18px;50    color: #e9e9e9;51  }52  .tab svg { width: 64px; height: 64px; }53  .tab-label { font-size: 38px; color: #d9d9d9; }54  .tab.active .tab-label { color: #ffffff; }55  .tab-indicator {56    width: 200px; height: 8px; background: #d43d4f; border-radius: 8px; margin: 28px auto 0 auto;57  }58 59  /* Content area */60  .content {61    position: relative;62    background: #101010;63    padding: 24px 40px 0 40px;64  }65 66  .timer-card {67    margin-top: 24px;68    border-radius: 24px;69  }70 71  .timer-header {72    display: flex; align-items: center; gap: 18px;73    font-size: 42px; color: #d43d4f; font-weight: 600;74    padding: 16px 0 12px 0;75  }76  .pencil-icon { width: 38px; height: 38px; }77 78  .divider {79    height: 10px; background: #d0d0d0; border-radius: 10px; opacity: 0.8;80    margin: 12px 0 24px 0;81  }82 83  .timer-row {84    display: flex; align-items: center; justify-content: space-between;85    padding: 0 16px;86  }87  .time-left {88    display: flex; align-items: center; gap: 26px;89  }90  .time-text {91    font-size: 120px; font-weight: 600; letter-spacing: 3px; color: #ffffff;92  }93  .trash-icon { width: 58px; height: 58px; opacity: 0.6; }94 95  .play-btn {96    width: 150px; height: 150px; border-radius: 50%;97    background: #f1f1f1; box-shadow: 0 6px 16px rgba(0,0,0,0.35);98    display: flex; align-items: center; justify-content: center;99  }100  .play-btn svg { width: 68px; height: 68px; }101 102  /* Floating add button */103  .fab {104    position: absolute; left: 50%; transform: translateX(-50%);105    bottom: 460px; width: 160px; height: 160px; border-radius: 50%;106    background: #e74959; box-shadow: 0 10px 26px rgba(0,0,0,0.5);107    display: flex; justify-content: center; align-items: center;108    border: 4px solid rgba(255,255,255,0.08);109  }110  .fab span { font-size: 120px; line-height: 0; color: #fff; }111 112  /* Ad banner */113  .ad-wrap {114    position: absolute; left: 0; bottom: 150px; width: 100%;115    padding: 0 16px 0 16px;116  }117  .ad-top-stripe { height: 16px; background: #d43d4f; }118  .ad-card {119    background: #ffffff; color: #222;120    border-radius: 18px; margin-top: 12px;121    box-shadow: 0 8px 20px rgba(0,0,0,0.45);122    padding: 26px;123    display: flex; align-items: center; gap: 24px;124  }125  .ad-img {126    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;127    display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 20px;128    flex-shrink: 0;129  }130  .ad-texts { flex: 1; }131  .ad-title { font-size: 40px; font-weight: 600; }132  .ad-sub { font-size: 30px; color: #666; margin-bottom: 8px; }133  .ad-cta {134    background: #2f8d57; color: #fff; padding: 20px 36px;135    border-radius: 16px; font-weight: 700; font-size: 36px;136  }137 138  /* Home indicator */139  .home-indicator {140    position: absolute; left: 50%; transform: translateX(-50%);141    bottom: 60px; width: 360px; height: 16px; background: #e6e6e6; border-radius: 8px; opacity: 0.85;142  }143</style>144</head>145<body>146<div id="render-target">147 148  <div class="app-top">149    <!-- Status bar -->150    <div class="statusbar">151      <div>12:16</div>152      <div class="status-icons">153        <!-- Wi-Fi -->154        <svg width="50" height="34" viewBox="0 0 50 34">155          <path d="M5 10c9-8 31-8 40 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>156          <path d="M11 16c6-5 22-5 28 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>157          <circle cx="25" cy="24" r="4" fill="#fff"/>158        </svg>159        <!-- Battery -->160        <svg width="56" height="34" viewBox="0 0 56 34">161          <rect x="4" y="6" width="44" height="22" rx="4" ry="4" stroke="#fff" stroke-width="4" fill="none"/>162          <rect x="8" y="10" width="30" height="14" fill="#fff"/>163          <rect x="50" y="12" width="6" height="10" rx="2" fill="#fff"/>164        </svg>165      </div>166    </div>167 168    <!-- Title row -->169    <div class="title-row">170      <!-- Hamburger -->171      <svg width="72" height="72" viewBox="0 0 48 48">172        <path d="M6 10h36v4H6zM6 22h36v4H6zM6 34h36v4H6z" fill="#fff"/>173      </svg>174      <div class="title-text">The Clock</div>175      <div class="title-right">176        <!-- Crescent -->177        <svg width="64" height="64" viewBox="0 0 48 48">178          <path d="M30 8c-6 3-10 10-10 16s4 13 10 16c-10 0-18-8-18-16S20 8 30 8z" fill="#fff"/>179        </svg>180        <!-- Gear -->181        <svg width="64" height="64" viewBox="0 0 48 48">182          <path d="M22 8h4l2 4 4-1 2 3-3 3 3 3-2 3-4-1-2 4h-4l-2-4-4 1-2-3 3-3-3-3 2-3 4 1 2-4zm2 8a8 8 0 1 1 0 16 8 8 0 0 1 0-16z" fill="#fff"/>183        </svg>184      </div>185    </div>186 187    <!-- Tabs -->188    <div class="tabs">189      <div class="tab">190        <!-- Alarm icon -->191        <svg viewBox="0 0 48 48">192          <circle cx="24" cy="26" r="14" stroke="#fff" stroke-width="3" fill="none"/>193          <path d="M24 26l0-8M24 26l6 4" stroke="#fff" stroke-width="3" stroke-linecap="round"/>194          <path d="M10 12l6-5M38 12l-6-5" stroke="#fff" stroke-width="3" stroke-linecap="round"/>195        </svg>196        <div class="tab-label">Alarms</div>197      </div>198      <div class="tab">199        <!-- Clock icon -->200        <svg viewBox="0 0 48 48">201          <circle cx="24" cy="24" r="18" stroke="#fff" stroke-width="3" fill="none"/>202          <path d="M24 12v12l8 4" stroke="#fff" stroke-width="3" stroke-linecap="round"/>203        </svg>204        <div class="tab-label">Clock</div>205      </div>206      <div class="tab active">207        <!-- Timer (stopwatch) -->208        <svg viewBox="0 0 48 48">209          <rect x="18" y="6" width="12" height="4" fill="#fff"/>210          <circle cx="24" cy="28" r="16" stroke="#fff" stroke-width="3" fill="none"/>211          <path d="M24 18v10l6 3" stroke="#fff" stroke-width="3" stroke-linecap="round"/>212        </svg>213        <div class="tab-label">Timer</div>214      </div>215      <div class="tab">216        <!-- Stopwatch icon -->217        <svg viewBox="0 0 48 48">218          <rect x="20" y="6" width="8" height="4" fill="#fff"/>219          <circle cx="24" cy="28" r="16" stroke="#fff" stroke-width="3" fill="none"/>220          <path d="M24 20l8 8" stroke="#fff" stroke-width="3" stroke-linecap="round"/>221        </svg>222        <div class="tab-label">Stopwatch</div>223      </div>224    </div>225    <div class="tab-indicator" style="margin-top: 10px;"></div>226  </div>227 228  <!-- Main content -->229  <div class="content" style="height: 1460px;">230    <div class="timer-card">231      <div class="timer-header">232        <!-- Pencil icon -->233        <svg class="pencil-icon" viewBox="0 0 24 24">234          <path d="M3 17l0 4 4 0 10-10-4-4L3 17zM14 3l4 4" fill="#d43d4f"/>235        </svg>236        <div>Timer 1</div>237      </div>238 239      <div class="divider"></div>240 241      <div class="timer-row">242        <div class="time-left">243          <!-- Trash icon -->244          <svg class="trash-icon" viewBox="0 0 24 24">245            <path d="M7 6h10v2H7zM9 8h6v12H9zM5 8h14v2H5z" fill="#bdbdbd"/>246          </svg>247          <div class="time-text">00:05:00</div>248        </div>249        <div class="play-btn">250          <svg viewBox="0 0 48 48">251            <path d="M18 12l20 12-20 12z" fill="#111"/>252          </svg>253        </div>254      </div>255    </div>256  </div>257 258  <!-- Floating Add Button -->259  <div class="fab"><span>+</span></div>260 261  <!-- Ad banner -->262  <div class="ad-wrap">263    <div class="ad-top-stripe"></div>264    <div class="ad-card">265      <div class="ad-img">[IMG: App Icon]</div>266      <div class="ad-texts">267        <div class="ad-sub">Play Store</div>268        <div class="ad-title">Triple Tile: Match Puzzle Game</div>269      </div>270      <div class="ad-cta">GET</div>271    </div>272  </div>273 274  <!-- Home indicator -->275  <div class="home-indicator"></div>276 277</div>278</body>279</html>