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>The Clock - Timer</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #111;12  }13  /* Top header with diagonal dark stripes */14  .header-bg {15    position: absolute; left: 0; top: 0; width: 100%; height: 540px;16    background:17      linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.05)),18      repeating-linear-gradient(135deg, #1e1e1e 0 180px, #2a2a2a 180px 360px);19  }20  .status-bar {21    position: absolute; top: 24px; left: 40px; right: 40px; height: 40px; color: #fff; font-size: 36px;22    display: flex; align-items: center; justify-content: space-between;23    opacity: 0.9;24  }25  .status-icons { display: flex; gap: 28px; align-items: center; }26  .icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: #fff; }27  .appbar {28    position: absolute; top: 100px; left: 40px; right: 40px; height: 100px; display: flex; align-items: center; gap: 30px;29    color: #fff;30  }31  .hamburger { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }32  .title { font-size: 64px; font-weight: 600; letter-spacing: 0.3px; }33  .tabs {34    position: absolute; top: 220px; left: 0; right: 0; height: 220px; color: #f5f5f5;35    display: flex; align-items: flex-start; justify-content: space-around; text-align: center;36  }37  .tab { width: 220px; }38  .tab svg { width: 72px; height: 72px; }39  .tab-label { margin-top: 14px; font-size: 36px; color: #ddd; }40  .tab.active .tab-label { color: #fff; }41  .active-underline {42    position: absolute; top: 416px; left: 270px; width: 240px; height: 6px; background: #c23a4a; border-radius: 3px;43  }44 45  /* Timer card area */46  .content {47    position: absolute; top: 520px; left: 0; right: 0; bottom: 300px; padding: 40px;48    background: #0e0e0e;49  }50  .timer-card {51    background: transparent; border-radius: 18px; color: #fff;52  }53  .timer-header {54    display: flex; align-items: center; gap: 20px; font-size: 42px; color: #e57373; margin-bottom: 20px;55  }56  .progress-track {57    height: 10px; background: #d9d9d9; border-radius: 6px; overflow: hidden; margin-bottom: 30px;58  }59  .progress-bar { width: 28%; height: 100%; background: #c23a4a; }60  .timer-row {61    display: flex; align-items: center; justify-content: space-between;62  }63  .time-display { font-size: 120px; font-weight: 600; letter-spacing: 6px; }64  .timer-actions { display: flex; gap: 28px; }65  .circle-btn {66    width: 150px; height: 150px; border-radius: 75px; background: #fff; color: #111;67    display: flex; align-items: center; justify-content: center;68    box-shadow: 0 8px 14px rgba(0,0,0,0.35);69  }70  .trash { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; opacity: 0.7; }71 72  /* Floating action button */73  .fab {74    position: absolute; left: 50%; bottom: 420px; transform: translateX(-50%);75    width: 150px; height: 150px; border-radius: 75px; background: #d6545e; color: #fff;76    display: flex; align-items: center; justify-content: center;77    box-shadow: 0 12px 22px rgba(0,0,0,0.6);78  }79 80  /* Ad banner placeholder */81  .ad-bar {82    position: absolute; left: 0; right: 0; bottom: 170px; height: 160px; background: #E0E0E0;83    border-top: 6px solid #c23a4a; border-left: 1px solid #BDBDBD; border-right: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;84    display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; color: #333;85    font-size: 36px;86  }87  .ad-left { display: flex; align-items: center; gap: 26px; }88  .ad-img {89    width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;90    display:flex; align-items:center; justify-content:center; color:#757575; font-size:24px;91    border-radius: 16px;92  }93  .ad-btn {94    background: #4CAF50; color: #fff; border-radius: 16px; padding: 18px 26px; font-weight: 600;95  }96 97  /* Bottom navigation pill */98  .nav-pill {99    position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);100    width: 240px; height: 12px; background: #e9e9e9; border-radius: 6px; opacity: 0.9;101  }102</style>103</head>104<body>105<div id="render-target">106  <div class="header-bg"></div>107 108  <!-- Status bar -->109  <div class="status-bar">110    <div>5:14</div>111    <div class="status-icons">112      <!-- Wi-Fi -->113      <svg class="icon" viewBox="0 0 24 24">114        <path d="M2 9c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>115        <path d="M5 12c3-3 11-3 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>116        <circle cx="12" cy="16" r="2" fill="#fff"/>117      </svg>118      <!-- Battery -->119      <svg class="icon" viewBox="0 0 24 24">120        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>121        <rect x="20" y="10" width="2" height="4" fill="#fff"/>122        <rect x="4" y="8" width="12" height="8" fill="#fff"/>123      </svg>124      <!-- Settings gear (simple) -->125      <svg class="icon" viewBox="0 0 24 24">126        <circle cx="12" cy="12" r="3" fill="#fff"/>127        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M17 7l2-2M5 19l2-2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>128      </svg>129    </div>130  </div>131 132  <!-- Appbar -->133  <div class="appbar">134    <div class="hamburger">135      <svg viewBox="0 0 24 24" width="56" height="56">136        <path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>137      </svg>138    </div>139    <div class="title">The Clock</div>140  </div>141 142  <!-- Tabs -->143  <div class="tabs">144    <div class="tab">145      <svg viewBox="0 0 24 24">146        <circle cx="12" cy="13" r="8" stroke="#fff" stroke-width="2" fill="none"/>147        <path d="M7 6l2-2M17 6l-2-2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>148        <path d="M12 10v4M12 14h3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>149      </svg>150      <div class="tab-label">Alarms</div>151    </div>152    <div class="tab">153      <svg viewBox="0 0 24 24">154        <circle cx="12" cy="12" r="8" stroke="#fff" stroke-width="2" fill="none"/>155        <path d="M12 7v6M12 13h5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>156      </svg>157      <div class="tab-label">Clock</div>158    </div>159    <div class="tab active">160      <svg viewBox="0 0 24 24">161        <circle cx="12" cy="12" r="8" stroke="#fff" stroke-width="2" fill="none"/>162        <path d="M12 4v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>163        <path d="M12 9v5M12 14h4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>164      </svg>165      <div class="tab-label">Timer</div>166    </div>167    <div class="tab">168      <svg viewBox="0 0 24 24">169        <circle cx="12" cy="13" r="7" stroke="#fff" stroke-width="2" fill="none"/>170        <rect x="10" y="4" width="4" height="2" fill="#fff"/>171        <path d="M12 10v4M12 14h4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>172      </svg>173      <div class="tab-label">Stopwatch</div>174    </div>175  </div>176  <div class="active-underline"></div>177 178  <!-- Content -->179  <div class="content">180    <div class="timer-card">181      <div class="timer-header">182        <svg class="icon" viewBox="0 0 24 24" style="width:42px;height:42px;color:#e57373">183          <path d="M4 20l6-2 10-10-4-4-10 10-2 6z" fill="#e57373"/>184        </svg>185        <div>Timer 1</div>186      </div>187      <div class="progress-track"><div class="progress-bar"></div></div>188 189      <div class="timer-row">190        <div class="trash">191          <svg viewBox="0 0 24 24">192            <path d="M5 7h14M9 7V5h6v2M6 7l1 12h10l1-12" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>193          </svg>194        </div>195        <div class="time-display">00:03:35</div>196        <div class="timer-actions">197          <div class="circle-btn">198            <svg viewBox="0 0 24 24" width="84" height="84">199              <path d="M12 5a7 7 0 1 1-6.5 9.5" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>200              <path d="M6 12l-2 2-2-2" fill="#111"/>201            </svg>202          </div>203          <div class="circle-btn">204            <svg viewBox="0 0 24 24" width="84" height="84">205              <polygon points="8,5 20,12 8,19" fill="#111"/>206            </svg>207          </div>208        </div>209      </div>210    </div>211  </div>212 213  <!-- Floating add button -->214  <div class="fab">215    <svg viewBox="0 0 24 24" width="110" height="110">216      <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"/>217    </svg>218  </div>219 220  <!-- Ad banner placeholder -->221  <div class="ad-bar">222    <div class="ad-left">223      <div class="ad-img">[IMG: App Icon]</div>224      <div>225        <div style="font-size:28px; color:#666;">Play Store</div>226        <div style="font-weight:600;">2WinTrade-Platform for Profit</div>227      </div>228    </div>229    <div class="ad-btn">GET</div>230  </div>231 232  <!-- Bottom navigation pill -->233  <div class="nav-pill"></div>234</div>235</body>236</html>